Добавить кнопку раскладки в файл интерфейса

интерфейс/2019-09-19.js

@@ -0,0 +1,226 @@
+мж.создатьЭкран = function()
+{
+    var экран = document.createElement("div");
+    экран.style.cssText = `
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+    `;
+    return экран;
+};
+
+мж.показалиНазвание = new Уведомитель();
+мж.скрываемНазвание = new Уведомитель();
+мж.показатьНазвание = function()
+{
+    var html = `
+<div id="bg" class="fade-out-3">
+    <div class="center">
+        <center>
+            <h1 class="begin-transparent fade-in-1">Маджонг</h1>
+            <p class="nowrap begin-transparent fade-in-2">открытая игра</p>
+        </center>
+    </div>
+</div>
+    `;
+
+    var css = `
+#bg
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: white;
+}
+
+.begin-transparent
+{
+    opacity: 0;
+}
+
+.center
+{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+
+.fade-in-1
+{
+    animation: fadeIn 2.5s ease;
+    animation-delay: 0.5s;
+    animation-fill-mode: forwards;
+}
+
+.fade-in-2
+{
+    animation: fadeIn 1s ease;
+    animation-delay: 1.5s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn
+{
+    from
+    {
+        opacity: 0;
+    }
+    to
+    {
+        opacity: 1;
+    }
+}
+
+.fade-out-3
+{
+    animation: fadeOut 1s ease;
+    animation-delay: 3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeOut
+{
+    from
+    {
+        opacity: 1;
+    }
+    to
+    {
+        opacity: 0;
+    }
+}
+
+    `;
+    
+    var заставка = мж.создатьЭкран();
+    заставка.innerHTML = html;
+    мж.стиль.innerHTML += css;
+    document.body.appendChild(заставка);
+    
+    var фон = document.getElementById("bg");
+    var колво = 0;
+    фон.addEventListener(
+        "animationend",
+        function()
+        {
+            ++колво;
+            if (колво == 2)
+            {
+                мж.скрываемНазвание.уведомить();
+            }
+            else if (колво == 3)
+            {
+                мж.показалиНазвание.уведомить();
+                document.body.removeChild(заставка);
+            }
+        }
+    );
+};
+
+// Кнопки.
+
+мж.кнопкаРаскладкиНажата = new Уведомитель();
+мж.создатьКнопкуРаскладки = function()
+{
+    var html = `
+<div id="layout-button-border">
+</div>
+<div id="layout-button">
+    <img id="layout-image" src="data:image/svg+xml;base64, ` + иконкиКнопок["layout"] + `" alt="Раскладка" />
+</div>
+    `;
+    var css = `
+#layout-button
+{
+    position: absolute;
+    left: 0.5em;
+    bottom: 0.5em;
+    border-radius: 50%;
+    text-align: center;
+    width: 4em;
+    height: 4em;
+    line-height: 4em;
+    pointer-events: all;
+    background-color: #444477;
+}
+
+#layout-button-border
+{
+    position: absolute;
+    left: 0.5em;
+    bottom: 0.5em;
+    border-radius: 50%;
+    border: 0 solid #444477;
+    width: 4em;
+    height: 4em;
+    pointer-events: none;
+    background-color: #444477;
+}
+
+#layout-button img
+{
+    vertical-align: middle;
+}
+
+#layout-image
+{
+    height: 2em;
+}
+
+.layout-button-show
+{
+    animation: layout-button-show-anim 0.5s ease forwards;
+}
+.layout-button-hide
+{
+    animation: layout-button-hide-anim 0.5s ease forwards;
+}
+
+@keyframes layout-button-show-anim
+{
+    from
+    {
+        border-width: 0;
+        left: 0.5em;
+        bottom: 0.5em;
+    }
+    to
+    {
+        border-width: 300vh;
+        left: calc(0.5em - 300vh);
+        bottom: calc(0.5em - 300vh);
+    }
+}
+@keyframes layout-button-hide-anim
+{
+    from
+    {
+        border-width: 300vh;
+        left: calc(0.5em - 300vh);
+        bottom: calc(0.5em - 300vh);
+    }
+    to
+    {
+        border-width: 0;
+        left: 0.5em;
+        bottom: 0.5em;
+    }
+}
+    `;
+
+    мж.иф.innerHTML += html;
+    мж.стиль.innerHTML += css;
+    
+    var кнопка = document.getElementById("layout-button");
+    мж.кнопки["раскладка"] = кнопка;
+    кнопка.onclick = function(){
+        мж.кнопкаРаскладкиНажата.уведомить();
+    };
+};