Добавить файл интерфейса

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

@@ -0,0 +1,134 @@
+мж.создатьЭкран = function()
+{
+    var экран = document.createElement("div");
+    экран.style.cssText = `
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+    `;
+    return экран;
+};
+
+мж.создатьОсновуИнтерфейса = function()
+{
+    мж.иф = мж.создатьЭкран();
+    document.body.appendChild(мж.иф);
+    
+    мж.стиль = document.createElement("style");
+    document.head.appendChild(мж.стиль);
+};
+
+мж.показалиНазвание = 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(заставка);
+            }
+        }
+    );
+};