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     #welcome {
  26         position: fixed;
  27         width: 100%;
  28         top: 50%;
  29         left: 50%;
  30         transform: translate(-50%, -50%);
  31     }
  32     #game {
  33         position: relative;
  34     }
  35     #word {
  36         text-align: center;
  37         font-size: 500%;
  38         font-weight: bold;
  39     }
  40     #interface {
  41         width: 100%;
  42     }
  43     #input {
  44         display: block;
  45         margin-left: auto;
  46         margin-right: auto;
  47         width: 60%;
  48         font-size: 200%;
  49         border-width: 5px;
  50     }
  51     #reboot {
  52         position: fixed;
  53         right: 5px;
  54         bottom: 5px;
  55     }
  56     #welcome-message {
  57         font-size: 120%;
  58         font-weight: bold;
  59         text-align: center;
  60     }
  61   </style>
  62 </head>
  63
  64 <body>
  65   <div id="content">
  66
  67     <div id="welcome">
  68       <div id="header" align="center">
  69         <p>
  70           <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
  71         </p>
  72       </div>
  73
  74       <div id="welcome-message">
  75         <div id="timer_div" style="visibility: hidden">
  76           Entering TARDIS in <span id="timer"></span> seconds.
  77         </div>
  78         <br>
  79         Companions present: <span id="companions">1</span>/4
  80       </div>
  81     </div>
  82
  83     <div id="game" style="display: none">
  84       <h1 id="step">Step 1: Calibrate the Trans-Dimensional Field Accelerator</h1>
  85
  86       <div id="word">
  87         What
  88       </div>
  89       <div id="interface">
  90         <input id="input">
  91         </input>
  92       </div>
  93       <button id="reboot">
  94         Reboot Tardis
  95       </button>
  96     </div>
  97
  98   </div>
  99
 100   <script src="/socket.io/socket.io.js"></script>
 101   <script>
 102     const socket = io("/tardis");
 103
 104     const header = document.getElementById("header");
 105     const companions = document.getElementById("companions");
 106     const timer_div = document.getElementById("timer_div");
 107     const timer = document.getElementById("timer");
 108     const welcome_message = document.getElementById("welcome-message");
 109
 110     socket.on('companions', (count) => {
 111         companions.textContent = count.toString();
 112     });
 113
 114     socket.on('timer', (value) => {
 115         console.log("Receiving timer value of " + value);
 116         timer_div.style.visibility = "visible";
 117         timer.textContent = value.toString();
 118
 119         if (value === 0) {
 120             welcome_message.style.visibility = "hidden";
 121             timer_div.style.visibility = "hidden";
 122             header.className = "zoom-tardis";
 123         }
 124     });
 125
 126   </script>
 127 </body>
 128 </html>