added data & hotkeys

kub1ce · Mar 20, 2024 · bccd0a2 · bccd0a2
1 parent 40f85ba
commit bccd0a2
Show file tree

Hide file tree

Showing 28 changed files with 145 additions and 38 deletions.
diff --git a/WhatWhereWhen/AL.mp4 b/WhatWhereWhen/AL.mp4
diff --git a/WhatWhereWhen/Images/A.jpg b/WhatWhereWhen/Images/A.jpg
diff --git a/WhatWhereWhen/Images/Art.jpg b/WhatWhereWhen/Images/Art.jpg
diff --git a/WhatWhereWhen/Images/BAA.jpg b/WhatWhereWhen/Images/BAA.jpg
diff --git a/WhatWhereWhen/Images/EF.jpg b/WhatWhereWhen/Images/EF.jpg
diff --git a/WhatWhereWhen/Images/EN.jpg b/WhatWhereWhen/Images/EN.jpg
diff --git a/WhatWhereWhen/Images/GAK.jpg b/WhatWhereWhen/Images/GAK.jpg
diff --git a/WhatWhereWhen/Images/NN.jpg b/WhatWhereWhen/Images/NN.jpg
diff --git a/WhatWhereWhen/Images/NP.jpg b/WhatWhereWhen/Images/NP.jpg
diff --git a/WhatWhereWhen/Images/PShZ.jpg b/WhatWhereWhen/Images/PShZ.jpg
diff --git a/WhatWhereWhen/Images/SLV(t).jpg b/WhatWhereWhen/Images/SLV(t).jpg
diff --git a/WhatWhereWhen/Images/VNV.jpg b/WhatWhereWhen/Images/VNV.jpg
diff --git a/WhatWhereWhen/Images/YEV.jpg b/WhatWhereWhen/Images/YEV.jpg
diff --git a/WhatWhereWhen/Images/Yan.jpg b/WhatWhereWhen/Images/Yan.jpg
diff --git a/WhatWhereWhen/Sounds/gong.mp3 b/WhatWhereWhen/Sounds/gong.mp3
diff --git a/WhatWhereWhen/Sounds/pause1.mp3 b/WhatWhereWhen/Sounds/pause1.mp3
diff --git a/WhatWhereWhen/Sounds/start_game.mp3 b/WhatWhereWhen/Sounds/start_game.mp3
diff --git a/WhatWhereWhen/Sounds/timer_start.mp3 b/WhatWhereWhen/Sounds/timer_start.mp3
diff --git a/WhatWhereWhen/Sounds/volchok.mp3 b/WhatWhereWhen/Sounds/volchok.mp3
diff --git a/WhatWhereWhen/Sounds/yashik.mp3 b/WhatWhereWhen/Sounds/yashik.mp3
diff --git a/WhatWhereWhen/Videos/AK.mp4 b/WhatWhereWhen/Videos/AK.mp4
diff --git a/WhatWhereWhen/Videos/AL.mp4 b/WhatWhereWhen/Videos/AL.mp4
diff --git a/WhatWhereWhen/Videos/EF.mp4 b/WhatWhereWhen/Videos/EF.mp4
diff --git a/WhatWhereWhen/Videos/EN.mp4 b/WhatWhereWhen/Videos/EN.mp4
diff --git a/WhatWhereWhen/Videos/LV.mp4 b/WhatWhereWhen/Videos/LV.mp4
diff --git a/WhatWhereWhen/index.html b/WhatWhereWhen/index.html
@@ -11,31 +11,40 @@
     <div id="wheel-container">
         <div id="arrow"></div> <!-- Стрелочка указывает на сегмент -->
         <div id="wheel">
-            <div class="segment" style="background-color: #FF0000;" data-number="1"><div class="datanum">1</div></div>
-            <div class="segment" style="background-color: #FF7F00;" data-number="2"><div class="datanum">2</div></div>
-            <div class="segment" style="background-color: #FFFF00;" data-number="3"><div class="datanum">3</div></div>
-            <div class="segment" style="background-color: #7FFF00;" data-number="4"><div class="datanum">4</div></div>
-            <div class="segment" style="background-color: #00FF00;" data-number="5"><div class="datanum">5</div></div>
-            <div class="segment" style="background-color: #00FF7F;" data-number="6"><div class="datanum">6</div></div>
-            <div class="segment" style="background-color: #00FFFF;" data-number="7"><div class="datanum">7</div></div>
-            <div class="segment" style="background-color: #007FFF;" data-number="8"><div class="datanum">8</div></div>
-            <div class="segment" style="background-color: #0000FF;" data-number="9"><div class="datanum">9</div></div>
-            <div class="segment" style="background-color: #7F00FF;" data-number="10"><div class="datanum">10</div></div>
-            <div class="segment" style="background-color: #FF00FF;" data-number="11"><div class="datanum">11</div></div>
-            <div class="segment" style="background-color: #ff0084;" data-number="12"><div class="datanum">12</div></div>
+            <div class="segment" style="background-color: #bbb;" data-number="1"><div class="datanum">1</div></div>
+            <div class="segment" style="background-color: #777;" data-number="2"><div class="datanum">2</div></div>
+            <div class="segment" style="background-color: #bbb;" data-number="3"><div class="datanum">3</div></div>
+            <div class="segment" style="background-color: #777;" data-number="4"><div class="datanum">4</div></div>
+            <div class="segment" style="background-color: #bbb;" data-number="5"><div class="datanum">5</div></div>
+            <div class="segment" style="background-color: #777;" data-number="6"><div class="datanum">6</div></div>
+            <div class="segment" style="background-color: #bbb;" data-number="7"><div class="datanum">7</div></div>
+            <div class="segment" style="background-color: #777;" data-number="8"><div class="datanum">8</div></div>
+            <div class="segment" style="background-color: #bbb;" data-number="9"><div class="datanum">9</div></div>
+            <div class="segment" style="background-color: #777;" data-number="10"><div class="datanum">10</div></div>
+            <div class="segment" style="background-color: #bbb;" data-number="11"><div class="datanum">11</div></div>
+            <div class="segment" style="background-color: #777;" data-number="12"><div class="datanum">12</div></div>
         </div>
     </div>
 
-    <div id="question" onclick="this.style.display = 'none'; return false"></div>
+    <div id="question" onclick="this.style.display = 'none'; document.getElementById('pause').play(); return false"></div>
 
     <div id="playVS-container" onclick="this.style.display = 'none'; return false">
         <div>Против Вас играет:</div>
         <div id="photo"><img src="" alt="Пользователь не оставил фото 😖"></div>
         <div id="Name">NAME</div>
     </div>
 
-    <button id="spinButton">Крутить Колесо</button>
-    <div id="result">Выбранное число: <span id="selected-number"></span></div>
+    <button id="spinButton" style="display: none;">Крутить Колесо</button>
+    <div id="result"><span id="selected-number"></span></div>
+
+
+    <!-- AUDIO SOURCES -->
+    <audio id="gong" src="./Sounds/gong.mp3" \style="display: none;"></audio>
+    <audio id="pause" src="./Sounds/pause1.mp3" style="display: none;"></audio>
+    <audio id="start" src="./Sounds/start_game.mp3" style="display: none;"></audio>
+    <audio id="timer" src="./Sounds/timer_start.mp3" style="display: none;"></audio>
+    <audio id="spin" src="./Sounds/volchok.mp3" style="display: none;"></audio>
+    <audio id="black" src="./Sounds/yashik.mp3" style="display: none;"></audio>
 </body>
 <script src="script.js"></script>
 </html>
diff --git a/WhatWhereWhen/script.js b/WhatWhereWhen/script.js
@@ -1,6 +1,6 @@
 const wheel = document.getElementById('wheel');
 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-// ! let arr = [0];
+// let arr = [0, 1, 2, 3];
 arr = shuffle(arr);
 console.log("%c>>> Индексный порядок:", 'background: #222; color: #bada55', arr);
 let usedSegments = [];
@@ -31,6 +31,7 @@ function shuffle(array) {
 
 
 function spinWheel() {
+    document.getElementById('spin').play();
     var wheel = document.getElementById('wheel');
     var segments = wheel.getElementsByClassName('segment');
     var selectedNumberSpan = document.getElementById('selected-number');
@@ -54,15 +55,23 @@ function spinWheel() {
 
     // Обрабатываем окончание анимации
     wheel.addEventListener('transitionend', function handleTransitionEnd() {
+
         // Обновляем отображаемое число
-        selectedNumberSpan.textContent = segments[segmentToStopOn].getAttribute('data-number');
+        selectedNumberSpan.textContent = segments[QN].getAttribute('data-number');
+
+        if (QN == 10){
+            document.getElementById('question').innerHTML = Questions[QN].text;
+            document.getElementById('question').style.display = 'block';
+            document.getElementById('black').play();
+        } else {
+            // Изменяем данные о вопросе и изменяем их
+            document.getElementById('question').innerHTML = Questions[QN].text;
+            document.getElementById('question').style.display = 'block';
+            document.getElementById('Name').innerHTML = Questions[QN].vsN;
+            document.getElementById('photo').innerHTML = `<img src="${Questions[QN].vsI}" alt="Пользователь не оставил фото 😖">`;
+            document.getElementById('playVS-container').style.display = 'grid';
+        }
 
-        // Изменяем данные о вопросе и изменяем их
-        document.getElementById('question').innerHTML = Questions[segmentToStopOn].text;
-        document.getElementById('question').style.display = 'block';
-        document.getElementById('Name').innerHTML = Questions[segmentToStopOn].vsN;
-        document.getElementById('photo').innerHTML = `<img src="${Questions[segmentToStopOn].vsI}" alt="Пользователь не оставил фото 😖">`;
-        document.getElementById('playVS-container').style.display = 'grid';
 
         // Сбрасываем прокрутку для следующего использования
         wheel.style.transition = 'none';
@@ -86,6 +95,50 @@ document.getElementById('spinButton').addEventListener('click', spinWheel);
 
 
 
+document.addEventListener('keydown', function(e) {
+    if(e.keyCode == 65){
+        // A - GONG
+        document.getElementById('gong').play();
+    } else if(e.keyCode == 66){
+        // B - BLACK
+        document.getElementById('black').play();
+    } else if (e.keyCode == 67) {
+        // ! C - PAUSE
+        var audios = document.getElementsByTagName('audio');
+        for(var i = 0, len = audios.length; i < len;i++){
+            if(audios[i] != e.target){
+                audios[i].pause();
+            }
+
+        }
+    } else if (e.keyCode == 68) {
+        // ! D - STOP
+        var audios = document.getElementsByTagName('audio');
+        for(var i = 0, len = audios.length; i < len;i++){
+            if(audios[i] != e.target){
+                audios[i].pause();
+                audios[i].currentTime = 0;
+            }
+
+        }
+    } else if(e.keyCode == 69){
+        // E - Pause
+        document.getElementById('pause').play();
+    } else if(e.keyCode == 70){
+        // F - Timer
+        document.getElementById('timer').play();
+    } else if(e.keyCode == 71){
+        // G - Start
+        document.getElementById('start').play();
+    } else if(e.keyCode == 72){
+        // * H - SPIN WHEEL
+        // document.getElementById('start').play();
+        spinWheel();
+    }
+});
+
+
+
 
 
 
@@ -99,18 +152,58 @@ document.getElementById('spinButton').addEventListener('click', spinWheel);
 
 Questions = {
     "0" : {
-        "text" : "Какой всем известный термин больше не употребляется в своем изначальном значении внутри нашего класса?",
-        "vsN" : "Артём",
-        "vsI" : "./Images/Levi michi.jpg",
+        "text" : `Даже в кабинете химии меньше химикатов чем в этом месте. Про что идёт речь?`,
+        "vsN" : "Шевченко Ян Владиславович",
+        "vsI" : "./Images/Yan.jpg",
     },
     "1" : {
-        "text" : "Даже в кабинете химии меньше химикатов чем в этом месте. Про что идёт речь?",
-        "vsN" : "Артём",
-        "vsI" : "./Images/Levi michi.jpg",
+        "text" : `<video controls="controls" width="auto" height="90%" src="./Videos/LV.mp4"></video>`,
+        "vsN" : "Старцева Лариса Вячеславовна",
+        "vsI" : "./Images/SLV(t).jpg",
+    },
+    "2" : {
+        "text" : `<video controls="controls" width="auto" height="90%" src="./Videos/AK.mp4"></video>`,
+        "vsN" : "Гилязова Альфия Курбановна",
+        "vsI" : "./Images/GAK.jpg",
+    },
+    "3" : {
+        "text" : `<video controls="controls" width="auto" height="90%" src="./Videos/EN.mp4"></video>`,
+        "vsN" : "Лукина Екатерина Николаевна",
+        "vsI" : "./Images/EN.jpg",
     },
     "4" : {
-        "text" : `<video controls="controls" width="auto" height="90%" src="./Images/Black Clover - Opening 4 _ Guess Who Is Back.mp4"></video>`,
-        "vsN" : "Артём",
-        "vsI" : "./Images/Levi michi.jpg",
+        "text" : `Какой всем известный термин больше не употребляется в своем изначальном значении внутри нашего класса?`,
+        "vsN" : "Пашаzxcкий Никита Антонович",
+        "vsI" : "./Images/NN.jpg",
+    },
+    "5" : {
+        "text" : `Один волшебник сказал, что запросто может в центре комнаты поставить пустую бутылку и вползти в нее. Как он это сделает?`,
+        "vsN" : "Рожков Андрей Сергеевич",
+        "vsI" : "./Images/A.jpg",
+    },
+    "6" : {
+        "text" : `<video controls="controls" width="auto" height="90%" src="./Videos/EF.mp4"></video>`,
+        "vsN" : "Якубовская Елена Ивановна",
+        "vsI" : "./Images/YEV.jpg",
+    },
+    "7" : {
+        "text" : `Какой учитель имел настолько большое влияние, что мог заставить учеников выпить?`,
+        "vsN" : "Богданов Артём Евгеньевич",
+        "vsI" : "./Images/Art.jpg",
+    },
+    "8" : {
+        "text" : `<video controls="controls" width="auto" height="90%" src="./Videos/AL.mp4"></video>`,
+        "vsN" : "Бабетов Алексей Алимович",
+        "vsI" : "./Images/BAA.jpg",
+    },
+    "8" : {
+        "text" : `<video controls="controls" width="auto" height="90%" src="./Videos/AL.mp4"></video>`, // ! =====
+        "vsN" : "Воронова Наталья Васильевна",
+        "vsI" : "./Images/VNV.jpg",
+    },
+    "10" : {
+        "text" : `Чёрный ящик`,
+        "vsN" : "",
+        "vsI" : "",
     },
 }
diff --git a/WhatWhereWhen/style.css b/WhatWhereWhen/style.css
@@ -5,6 +5,7 @@ body {
     height: 100vh;
     margin: 0;
     background: #212121;
+    background: #203315;
     overflow: hidden;
 }
 
@@ -21,7 +22,7 @@ body {
     height: 0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
-    border-bottom: 20px solid black; /* Цвет стрелки */
+    border-bottom: 20px solid #ff0000; /* Цвет стрелки */
     z-index: 10;
 }
 #wheel {
@@ -66,8 +67,12 @@ body {
     transform: rotate(-47deg);
     width: 100%;
     text-align: center;
-    color: #fff;
     font-size: 4rem;
+
+    font-family: Arial;
+    color: #d83737;
+    color: #fff;
+    font-weight: 700;
 }
 
 .segment:first-child {
@@ -134,12 +139,11 @@ body {
     color: #fff;
     text-align: center;
     line-height: 100%;
-    font-size: 4vh;
+    font-size: 8vh;
 
-    display: grid;
     padding-top: 2vh;
     padding-bottom: 2vh;
-    grid-template-rows: 5vh auto 5vh;
+    grid-template-rows: 9vh auto 9vh;
 
     z-index: 300;
 }
@@ -152,7 +156,7 @@ body {
 }
 #photo img {
     display: flex;
-    height: 100%;
+    height: 82vh;
 }
 
 
@@ -162,6 +166,7 @@ body {
     position: fixed;
     right: 0;
     bottom: 0;
+    z-index: 300;
 }
 
 #spinButton {