git.cworth.org Git - zombocom-ai/blob - tardis.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6   <title>ZOMBO</title>
   7   <link href="/zombo.css" rel="stylesheet" type="text/css">
   8   <meta name="viewport" content="width=device-width,initial-scale=1">
   9   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10   <meta name="HandheldFriendly" content="true">
  11
  12   <style>
  13     @keyframes zoom {
  14         to {
  15             opacity: 0%;
  16             transform: scale(30);
  17         }
  18     }
  19     .zoom-tardis {
  20         animation-name: zoom;
  21         animation-duration: 2s;
  22         animation-timing-function: ease-in;
  23         animation-fill-mode: forwards;
  24     }
  25     @keyframes fade {
  26         from {
  27             opacity: 100%;
  28         }
  29         to {
  30             opacity: 0%;
  31         }
  32     }
  33     .fade-out {
  34         animation-name: fade;
  35         animation-duration: 0.8s;
  36         animation-timing-function: ease-in;
  37         animation-fill-mode: forwards;
  38     }
  39     #welcome {
  40         position: fixed;
  41         width: 100%;
  42         top: 50%;
  43         left: 50%;
  44         transform: translate(-50%, -50%);
  45     }
  46     #game {
  47         position: relative;
  48     }
  49     #word {
  50         text-align: center;
  51         font-size: 500%;
  52         font-weight: bold;
  53     }
  54     #interface {
  55         width: 100%;
  56     }
  57     #input {
  58         display: block;
  59         margin-left: auto;
  60         margin-right: auto;
  61         width: 60%;
  62         font-size: 200%;
  63         border-width: 5px;
  64     }
  65     #reboot {
  66         position: fixed;
  67         right: 5px;
  68         bottom: 5px;
  69     }
  70     #welcome-message {
  71         font-size: 120%;
  72         font-weight: bold;
  73         text-align: center;
  74     }
  75     #result {
  76         position: fixed;
  77         width: 100%;
  78         top: 50%;
  79         left: 50%;
  80         transform: translate(-50%, -50%);
  81         font-size: 500%;
  82         text-align: center;
  83     }
  84   </style>
  85 </head>
  86
  87 <body>
  88   <div id="content">
  89
  90     <div id="welcome">
  91       <div id="header" align="center">
  92         <p>
  93           <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
  94         </p>
  95       </div>
  96
  97       <div id="welcome-message">
  98         <div id="timer_div" style="visibility: hidden">
  99           Entering TARDIS in <span id="timer"></span> seconds.
 100         </div>
 101         <br>
 102         Companions present: <span id="companions">1</span>/4
 103       </div>
 104     </div>
 105
 106     <div id="game" style="visibility: hidden">
 107       <h1 id="level"></h1>
 108
 109       <div id="word">
 110         &nbsp;
 111       </div>
 112       <div id="interface">
 113         <form id="form">
 114           <input id="input">
 115           </input>
 116         </form>
 117       </div>
 118
 119       <div id="result">
 120       </div>
 121
 122       <button id="reboot">
 123         Reboot Tardis
 124       </button>
 125     </div>
 126
 127   </div>
 128
 129   <script src="/socket.io/socket.io.js"></script>
 130   <script>
 131     const socket = io("/tardis");
 132
 133     const welcome = document.getElementById("welcome");
 134     const game = document.getElementById("game");
 135     const level_div = document.getElementById("level");
 136     const word_div = document.getElementById("word");
 137     const header = document.getElementById("header");
 138     const companions = document.getElementById("companions");
 139     const timer_div = document.getElementById("timer_div");
 140     const timer = document.getElementById("timer");
 141     const welcome_message = document.getElementById("welcome-message");
 142     const form = document.getElementById("form");
 143     const input = document.getElementById("input");
 144     const result = document.getElementById("result");
 145
 146     function fade_element(elt) {
 147         elt.style.opacity = "100%";
 148         elt.className = "fade-out";
 149         // Arrange to clear the class name when the animation is over
 150         // This will allow for it to be restarted on the next word.
 151         setTimeout(() => {
 152             elt.style.opacity = "0%";
 153             elt.className = "";
 154         }, 900);
 155     }
 156
 157     form.addEventListener('submit', event => {
 158         event.preventDefault();
 159         socket.emit('answer', input.value);
 160         input.value = "";
 161     });
 162
 163     socket.on('companions', (count) => {
 164         companions.textContent = count.toString();
 165     });
 166
 167     socket.on('timer', (value) => {
 168         console.log("Receiving timer value of " + value);
 169         timer_div.style.visibility = "visible";
 170         timer.textContent = value.toString();
 171
 172         if (value === 0) {
 173             welcome_message.style.visibility = "hidden";
 174             timer_div.style.visibility = "hidden";
 175             header.className = "zoom-tardis";
 176         }
 177     });
 178
 179     socket.on('state', (state) => {
 180         if (state === "game") {
 181             welcome.style.visibility = "hidden";
 182             game.style.visibility = "visible";
 183         }
 184     });
 185
 186     socket.on('level', (level) => {
 187         level_div.textContent = level;
 188         level_div.style.visibility = "visible";
 189     });
 190
 191     socket.on('show-word', (word) => {
 192         word_div.textContent = word;
 193         fade_element(word_div);
 194     });
 195
 196     socket.on('correct', () => {
 197         level_div.style.visibility = "hidden";
 198         result.textContent = "Complete!";
 199         result.style.color = "green";
 200         fade_element(result);
 201     });
 202
 203     socket.on('incorrect', () => {
 204         result.textContent = "Nope!";
 205         result.style.color = "red";
 206         fade_element(result);
 207     });
 208
 209   </script>
 210 </body>
 211 </html>