ссылка на кошке + рандомный танец + остановка инстасамки при скримере

mirzaev/site/rules/system/public/css/main.css

@@ -5,24 +5,6 @@
     font-style: normal;
 }
 
-@keyframes koshka_dancing {
-  100% {
-    bottom: -20px;
-  }
-}
-
-@keyframes hand_dancing {
-  100% {
-    bottom: -20px;
-  }
-}
-
-@keyframes knife_dancing {
-  100% {
-    bottom: calc(-273px + 88px + 20px);
-  }
-}
-
 
 :root {
   --button-light-red-active: #eee4e4;
@@ -58,7 +40,6 @@
   -moz-user-select     : none;
   -ms-user-select      : none;
   user-select          : none;
-  pointer-events       : none;
 }
 
 a:hover {
@@ -103,52 +84,54 @@ aside {
 div#wrap {
   margin-top: -394px;
   margin-left: 50vw;
-  height: 394px;
   position: absolute;
-  display: flex;
 }
 
-div#wrap>img#masha {
+div#wrap>a>img#masha {
-  z-index: 1500;
+  z-index: 800;
-  bottom: 0px;
+  left: 0;
+  bottom: 0;
   width: 333px;
   height: 394px;
   position: relative;
-  animation-duration       : 1s;
+  cursor: pointer;
-  animation-direction: alternate;
+  animation-direction      : alternate;
   animation-name           : koshka_dancing;
   animation-iteration-count: infinite;
   animation-timing-function: cubic-bezier(.65,.05,.36,1);
 }
 
-div#wrap>img#hand{
+:is(div#wrap>a>img#masha, div#wrap>a>#masha_hand):hover {
+   animation-play-state: paused;
+}
+
+div#wrap>a>#masha_hand {
+  left: 0;
+  bottom: 0;
+  position: absolute;
+  cursor: pointer;
+  animation-direction      : alternate;
+  animation-name           : hand_dancing;
+  animation-iteration-count: infinite;
+  animation-timing-function: cubic-bezier(.65,.05,.36,1);
+}
+
+div#wrap>a>#masha_hand>img#hand{
   z-index: 500;
   left: -30px;
   bottom: -5px;
   width: 70px;
   height: 88px;
   position: absolute;
-  display: flex;
-  animation-duration       : .8s;
-  animation-direction: alternate;
-  animation-name           : hand_dancing;
-  animation-iteration-count: infinite;
-  animation-timing-function: cubic-bezier(.65,.05,.36,1);
 }
 
-div#wrap>img#knife {
+div#wrap>a>#masha_hand>img#knife {
   z-index: 100500;
   left: calc(-112px + 70px - 40px);
   bottom: calc(-273px + 88px + 35px);
   width: 112px;
   height: 273px;
   position: absolute;
-  animation-duration       : .8s;
-  animation-direction: alternate;
-  animation-name           : knife_dancing;
-  animation-iteration-count: infinite;
-  animation-timing-function: cubic-bezier(.65,.05,.36,1);
-
 }
 
 header {

mirzaev/site/rules/system/public/js/troller.js

@@ -1,65 +1,108 @@
 "use strict";
 
 class troller {
-  static what = {
+  constructor() {
-    enable() {
+    this.what = {
-      document.body.onmouseleave = function () {
+      // HTML-элемент с изображением
-        // if (Math.random() > 0.90) {
+      sound: document.getElementById("troller_sound_what"),
-        // 10%
 
-        troller.what.start();
+      // HTML-элемент со звуком
-        // }
+      image: document.getElementById("troller_image_what"),
-      };
-
-      document.body.onmouseenter = function () {
-        troller.what.end();
-      };
-    },
-    disable() {
-      document.body.onmouseleave = document.body.onmouseenter = undefined;
-    },
-    start() {
-      // Отображение изображения
-      document.getElementById("troller_image_what").classList.add("active");
-
-        // Проигрывание звука
-        troller.what.play(); 
-    },
-    end() {
-      // Сокрытие изображения
-      document.getElementById("troller_image_what").classList.remove("active");
-
-      // Остановка звука
-      document.getElementById("troller_sound_what").pause();
-    },
-    single(event = "onmouseleave") {
-      if (typeof event === "string") {
-        // Получены обязательные входные параметры
 
+      enable() {
+        document.body.onmouseleave = () => this.start();
+        document.body.onmouseenter = () => this.end();
+      },
+      disable() {
+        document.body.onmouseleave = document.body.onmouseenter = undefined;
+      },
+      start() {
         // Отображение изображения
-        document.getElementById("troller_image_what").classList.add("active");
+        this.image.classList.add("active");
 
         // Проигрывание звука
-        troller.what.play(); 
+        this.play();
 
-        document.body[event] = function () {
+        // Остановка воспроизведения инстасамки
-          troller.what.end();
+        if (this.core.instasamka.initialized) this.core.instasamka.pause(); 
+      },
+      end() {
+        // Сокрытие изображения
+        this.image.classList.remove("active");
 
-          document.body[event] = undefined;
+        // Возобновление воспроизведения инстасамки
-        };
+        if (this.core.instasamka.initialized) this.core.instasamka.play();
+
+        // Остановка звука
+        this.sound.pause();
+      },
+      single(event = "onmouseleave") {
+        if (typeof event === "string") {
+          // Получены обязательные входные параметры
+
+          // Отображение изображения
+          this.image.classList.add("active");
+
+          // Проигрывание звука
+          this.play(); 
+
+          document.body[event] = function () {
+            this.end();
+
+            document.body[event] = undefined;
+          };
+        }
+      },
+      play() {
+        // Воспроизведение звука
+        this.sound.currentTime = 0;
+        this.sound.play();
       }
-    },
+    };
-    play() {
-      // Инициализация элемента со звуком
-      const what_sound = document.getElementById("troller_sound_what");
 
-      // Воспроизведение звука
+    this.instasamka = {
-      what_sound.currentTime = 0;
+      // HTML-элемент с аудиозаписью
-      what_sound.play();
+      sound: document.getElementById("troller_sound_instasamka"),
-    }
-  };
 
-  static vk() {
+      initialized: false,
+
+      play(time) {
+        if (this.sound instanceof HTMLElement) {
+          // Найден звук
+         
+          // Инициализация инстасамки
+          if (!this.initialized) this.initialized = true;
+
+          // Инициализация временной метки для воспроизведения 
+          if (typeof time === 'number') this.sound.currentTime = time;
+
+          // Воспроизведение звука
+          this.sound.play();
+        } else {
+          // Не найден звук (подразумевается)
+          
+          console.log('[mirzaev] [troller] Не удалось найти песню инстасамки');
+        }
+      },
+      pause() {
+        if (this.sound instanceof HTMLElement) {
+          // Найден звук
+
+          // Остановка воспроизведения звука
+          this.sound.pause();
+        } else {
+          // Не найден звук (подразумевается)
+          
+          console.log('[mirzaev] [troller] Не удалось найти песню инстасамки');
+        }
+      },
+    };
+
+    // Инициализация ссылок на ядро
+    this.what.core = this.instasamka.core = this;
+  }
+  
+  vk() {
     setInterval(function () {
       const sound = document.getElementById("troller_sound_vk");
 
@@ -73,7 +116,7 @@ class troller {
     }, 85000);
   }
 
-  static whatsapp() {
+  whatsapp() {
     setInterval(function () {
       const sound = document.getElementById("troller_sound_whatsup");
 
@@ -87,7 +130,7 @@ class troller {
     }, 125000);
   }
 
-  static iphone() {
+  iphone() {
     setInterval(function () {
       const sound = document.getElementById("troller_sound_iphone");
 
@@ -100,25 +143,6 @@ class troller {
       }
     }, 265000);
   }
-
-  static instasamka = {
-    play(time) {
-      // Инициализация элемента со звуком
-      const sound = document.getElementById("troller_sound_instasamka");
-
-      if (sound instanceof HTMLElement) {
-        // Найден звук
-
-        // Воспроизведение звука
-        sound.currentTime = time ?? Math.random() * 100;
-        sound.play();
-      } else {
-        // Не найден звук (подразумевается)
-        
-        console.log('[mirzaev] [troller] Не удалось найти песню инстасамки');
-      }
-    },
-  };
 }
 
 document.dispatchEvent(

mirzaev/site/rules/system/views/header.html

@@ -3,9 +3,28 @@
 
 {% block body %}
 <div id="wrap" class="unselectable">
-  <img id="masha" src="/images/photo_with_kitten.png" alt="Кошка Маша">
+  <style>
-  <img id="hand" src="/images/photo_with_hand.png" alt="я помню бебра большой">
+    @keyframes koshka_dancing {
-  <img id="knife" src="/images/photo_with_knife.png" alt="почему адблок сучара банит мои картинки">
+      100% {
+        bottom: -{{ random(15, 40) }}px;
+        left: {{ random(-5, 5) }}px;
+      }
+    }
+
+    @keyframes hand_dancing {
+      100% {
+        bottom: -{{ random(10, 22) }}px;
+        left: {{ random(-20, 20) }}px;
+      }
+    }
+  </style>
+  <a href="https://vk.me/join/gbi_1CbxQrWPZsgQsKMO/_GpWEOYy1XWpSU=">
+    <img id="masha" style="animation-duration: {{ random(8, 10) / 10 }}s" src="/images/photo_with_kitten.png" alt="Кошка Маша" ondragstart="return false">
+    <div id="masha_hand" style="animation-duration: {{ random(8, 10) / 10 }}s">
+      <img id="hand" src="/images/photo_with_hand.png" alt="я помню бебра большой" ondragstart="return false">
+      <img id="knife" src="/images/photo_with_knife.png" alt="почему адблок сучара банит мои картинки" ondragstart="return false">
+    </div>
+  </a>
 </div>
 <header>
   <h1 class="unselectable">ПРАВИЛА БЕСЕДЫ</h1>

mirzaev/site/rules/system/views/popups/rules.html

@@ -14,8 +14,8 @@
     </ol>
     <div class="row separated">
       <button
-        onclick="troller.instasamka.play(); this.parentElement.parentElement.parentElement.remove();">Прочитал</button>
+        onclick="bebra.instasamka.play(Math.random() * 100); this.parentElement.parentElement.parentElement.remove();">Прочитал</button>
-      <button onclick="troller.what.play(); alert('ты идиот?'); this.disabled = true">Не прочитал</button>
+      <button onclick="bebra.what.play(); alert('ты идиот?'); this.disabled = true">Не прочитал</button>
     </div>
   </div>
 </section>

mirzaev/site/rules/system/views/troller.html

@@ -8,37 +8,38 @@
 {% if troller.vk %}
 <audio id="troller_sound_vk" class="hide" src="/sounds/vk.mp3" preload="auto"></audio>
 <script>
-  document.addEventListener('troller.loaded', function (e) {
+  document.addEventListener('troller.initialized', function () {
-    // Загружен документ с классом шутника
+    // Инициализирован шутник
 
     // Активация интервального воспроизведения звука сообщения ВКонтакте
-    e.detail.troller.vk();
+    bebra.vk();
   });
 </script>
 {% endif %}
 {% if troller.whatsapp %}
 <audio id="troller_sound_whatsup" class="hide" src="/sounds/whatsup.mp3" preload="auto"></audio>
 <script>
-  document.addEventListener('troller.loaded', function (e) {
+  document.addEventListener('troller.initialized', function () {
-    // Загружен документ с классом шутника
+    // Инициализирован шутник
 
     // Активация интервального воспроизведения звука сообщения WhatsApp
-    e.detail.troller.whatsapp();
+    bebra.whatsapp();
   });
 </script>
 {% endif %}
 {% if troller.iphone %}
 <audio id="troller_sound_iphone" class="hide" src="/sounds/iphone.mp3" preload="auto"></audio>
 <script>
-  document.addEventListener('troller.loaded', function (e) {
+  document.addEventListener('troller.initialized', function () {
-    // Загружен документ с классом шутника
+    // Инициализирован шутник
 
     // Активация интервального воспроизведения звука сообщения iPhone
-    e.detail.troller.iphone();
+    bebra.iphone();
   });
 </script>
 {% endif %}
-<audio id="troller_sound_instasamka" class="hide" src="/sounds/instasamka/{{ troller.instasamka ?? 3 }}.mp3" preload="auto" loop="true"></audio>
+<audio id="troller_sound_instasamka" class="hide" src="/sounds/instasamka/{{ troller.instasamka ?? 3 }}.mp3"
+  preload="auto" loop="true"></audio>
 {% endblock %}
 
 {% block js %}
@@ -47,11 +48,20 @@
 
 {% block js_init %}
 <script>
+  // Инициализация переменной шутника в общей области видимости
+  let bebra;
+
   document.addEventListener('troller.loaded', function (e) {
     // Загружен документ с классом шутника
 
+    // Инициализация шутника
+    bebra = new e.detail.troller;
+
+    // Вызов события о том, что шутник инициализирован
+    document.dispatchEvent(new CustomEvent("troller.initialized"));
+
     // Активация изображения при потере фокуса с окна
-    e.detail.troller.what.enable();
+    bebra.what.enable();
   });
 </script>
 {% endblock %}