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         from {
  15             opacity: 100%;
  16             transform: scale(1);
  17         }
  18         to {
  19             opacity: 0%;
  20             transform: scale(30);
  21         }
  22     }
  23     .zoom-tardis {
  24         animation-name: zoom;
  25         animation-duration: 2s;
  26         animation-timing-function: ease-in;
  27         animation-fill-mode: forwards;
  28     }
  29     @keyframes fade {
  30         from {
  31             opacity: 100%;
  32         }
  33         to {
  34             opacity: 0%;
  35         }
  36     }
  37     .fade-out {
  38         animation-name: fade;
  39         animation-duration: 0.8s;
  40         animation-timing-function: ease-in;
  41         animation-fill-mode: forwards;
  42     }
  43     #welcome {
  44         position: fixed;
  45         width: 100%;
  46         top: 50%;
  47         left: 50%;
  48         transform: translate(-50%, -50%);
  49     }
  50     #game {
  51         position: relative;
  52     }
  53     #word {
  54         text-align: center;
  55         font-size: 400%;
  56         font-weight: bold;
  57     }
  58     #interface {
  59         width: 100%;
  60     }
  61     #input {
  62         display: block;
  63         margin-left: auto;
  64         margin-right: auto;
  65         width: 60%;
  66         font-size: 200%;
  67         border-width: 5px;
  68     }
  69     #reboot {
  70         position: fixed;
  71         right: 5px;
  72         bottom: 5px;
  73     }
  74     #welcome-message {
  75         font-size: 120%;
  76         font-weight: bold;
  77         text-align: center;
  78     }
  79     #result {
  80         position: fixed;
  81         width: 100%;
  82         top: 50%;
  83         left: 50%;
  84         transform: translate(-50%, -50%);
  85         font-size: 500%;
  86         text-align: center;
  87     }
  88   </style>
  89 </head>
  90
  91 <body>
  92   <div id="content">
  93
  94     <div id="welcome" style="visibility: hidden">
  95       <div id="header" align="center">
  96         <p>
  97           <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
  98         </p>
  99       </div>
 100
 101       <div id="welcome-message">
 102         <div id="timer_div" style="visibility: hidden">
 103           Entering TARDIS in <span id="timer"></span> seconds.
 104         </div>
 105         <br>
 106         Companions present: <span id="companions">1</span>/4
 107       </div>
 108     </div>
 109
 110     <div id="game" style="visibility: hidden">
 111       <h1 id="level"></h1>
 112
 113       <div id="word">
 114         &nbsp;
 115       </div>
 116       <div id="interface">
 117         <form id="form">
 118           <input id="input">
 119           </input>
 120         </form>
 121       </div>
 122
 123       <div id="result">
 124       </div>
 125
 126     </div>
 127
 128     <div id="over" style="visibility: hidden">
 129       <img src="/doctor-profile.png" style="float:left; max-width:150px">
 130       <h1>Congratulations</h1>
 131
 132       <p>
 133         You're a right handy lot of companions! You made that look
 134         almost as impressive as the time I saved the planet of
 135         Kashyyyk from certain destruction with nothing more than a
 136         pair of knitting needles.
 137       </p>
 138
 139     </div>
 140
 141     <button id="reboot">
 142       Reboot Tardis
 143     </button>
 144
 145   </div>
 146
 147   <script src="/socket.io/socket.io.js"></script>
 148   <script>
 149     const socket = io("/tardis");
 150
 151     const welcome = document.getElementById("welcome");
 152     const game = document.getElementById("game");
 153     const level_div = document.getElementById("level");
 154     const word_div = document.getElementById("word");
 155     const header = document.getElementById("header");
 156     const companions = document.getElementById("companions");
 157     const timer_div = document.getElementById("timer_div");
 158     const timer = document.getElementById("timer");
 159     const welcome_message = document.getElementById("welcome-message");
 160     const form = document.getElementById("form");
 161     const input = document.getElementById("input");
 162     const result = document.getElementById("result");
 163     const reboot = document.getElementById("reboot");
 164
 165     function fade_element(elt) {
 166         elt.style.opacity = "100%";
 167         elt.className = "fade-out";
 168         // Arrange to clear the class name when the animation is over
 169         // This will allow for it to be restarted on the next word.
 170         setTimeout(() => {
 171             elt.style.opacity = "0%";
 172             elt.className = "";
 173         }, 900);
 174     }
 175
 176     reboot.addEventListener('click', event => {
 177         socket.emit('reboot');
 178     });
 179
 180     form.addEventListener('submit', event => {
 181         event.preventDefault();
 182         socket.emit('answer', input.value);
 183         input.value = "";
 184     });
 185
 186     socket.on('companions', (count) => {
 187         companions.textContent = count.toString();
 188     });
 189
 190     socket.on('timer', (value) => {
 191         timer_div.style.visibility = "visible";
 192         timer.textContent = value.toString();
 193
 194         if (value === 0) {
 195             welcome_message.style.visibility = "hidden";
 196             timer_div.style.visibility = "hidden";
 197             header.className = "zoom-tardis";
 198             // Clear that className after the animation is complete
 199             setTimeout(() => {
 200                 header.style.visibility = "hidden"
 201                 header.className = "";
 202             }, 2200);
 203         }
 204     });
 205
 206     socket.on('state', (state) => {
 207         input.value = "";
 208         if (state === "game") {
 209             welcome.style.visibility = "hidden";
 210             game.style.visibility = "visible";
 211         } else if (state === "over") {
 212             game.style.visibility = "hidden";
 213             over.style.visibility = "visible";
 214         } else if (state === "welcome") {
 215             welcome.style.visibility = "visible";
 216             welcome_message.style.visibility = "visible";
 217             header.style.opacity = "100%";
 218             header.style.transform = "scale(1)";
 219             header.style.visibility = "visible";
 220             game.style.visibility = "hidden";
 221             level_div.style.visibility = "hidden";
 222             over.style.visibility = "hidden";
 223         }
 224     });
 225
 226     socket.on('level', (level) => {
 227         input.value = "";
 228         level_div.textContent = level;
 229         level_div.style.visibility = "visible";
 230     });
 231
 232     socket.on('show-word', (word) => {
 233         word_div.textContent = word;
 234         fade_element(word_div);
 235     });
 236
 237     socket.on('correct', () => {
 238         input.value = "";
 239         level_div.style.visibility = "hidden";
 240         result.textContent = "Complete!";
 241         result.style.color = "green";
 242         fade_element(result);
 243     });
 244
 245     socket.on('incorrect', () => {
 246         input.value = "";
 247         result.textContent = "Nope!";
 248         result.style.color = "red";
 249         fade_element(result);
 250     });
 251
 252   </script>
 253 </body>
 254 </html>