git.cworth.org Git - zombocom-ai/blob - bus.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-into {
  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     #jumpstart {
  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     #form {
  89         width: 100%;
  90     }
  91     #code {
  92         width: 95%;
  93     }
  94     #output {
  95         width: 100%;
  96     }
  97     #error {
  98         font-family: monospace;
  99         color: red;
 100         white-space: pre-wrap;
 101     }
 102   </style>
 103 </head>
 104
 105 <body>
 106   <div id="content">
 107
 108     <div id="welcome" style="visibility: hidden">
 109       <div id="header" align="center">
 110         <p>
 111           <img src="images/1403010940_The_Magic_School_Bus_in_the_apocalypse.png">
 112         </p>
 113       </div>
 114
 115       <div id="welcome-message">
 116         <div id="timer_div" style="visibility: hidden">
 117           Entering Magic School Bus in <span id="timer"></span> seconds.
 118         </div>
 119         <br>
 120         Students present: <span id="students">1</span>/4
 121       </div>
 122     </div>
 123
 124     <div id="program" style="visibility: hidden">
 125       <h1>Magic School Bus</h1>
 126       </h1>
 127       <form id="form">
 128         <textarea id="code" rows="15" width="100%"></textarea>
 129         <button type="submit">Run code</button>
 130       </form>
 131       <div id="error">
 132       </div>
 133       <img id="output"></img>
 134    </div>
 135
 136     <button id="jumpstart">
 137       Jumpstart Magic School Bus
 138     </button>
 139
 140   </div>
 141
 142   <script src="/socket.io/socket.io.js"></script>
 143   <script>
 144     const socket = io("/bus");
 145
 146     const welcome = document.getElementById("welcome");
 147     const program = document.getElementById("program");
 148     const header = document.getElementById("header");
 149     const companions = document.getElementById("students");
 150     const timer_div = document.getElementById("timer_div");
 151     const timer = document.getElementById("timer");
 152     const form = document.getElementById("form");
 153     const code = document.getElementById("code");
 154     const welcome_message = document.getElementById("welcome-message");
 155     const jumpstart = document.getElementById("jumpstart");
 156     const output = document.getElementById("output");
 157     const error = document.getElementById("error");
 158
 159     function fade_element(elt) {
 160         elt.style.opacity = "100%";
 161         elt.className = "fade-out";
 162         // Arrange to clear the class name when the animation is over
 163         // This will allow for it to be restarted on the next word.
 164         setTimeout(() => {
 165             elt.style.opacity = "0%";
 166             elt.className = "";
 167         }, 900);
 168     }
 169
 170     jumpstart.addEventListener('click', event => {
 171         socket.emit('jumpstart');
 172     });
 173
 174     form.addEventListener('submit', event => {
 175         event.preventDefault();
 176         socket.emit('run', code.value);
 177     });
 178
 179     socket.on('students', (count) => {
 180         students.textContent = count.toString();
 181     });
 182
 183     socket.on('code', (code_string) => {
 184         code.value = code_string;
 185     });
 186
 187     socket.on('timer', (value) => {
 188         timer_div.style.visibility = "visible";
 189         timer.textContent = value.toString();
 190
 191         if (value === 0) {
 192             welcome_message.style.visibility = "hidden";
 193             timer_div.style.visibility = "hidden";
 194             header.className = "zoom-into";
 195             // Clear that className after the animation is complete
 196             setTimeout(() => {
 197                 header.style.visibility = "hidden"
 198                 header.className = "";
 199             }, 2200);
 200         }
 201     });
 202
 203     socket.on('error', (error_message) => {
 204         error.textContent = error_message;
 205     });
 206
 207     socket.on('state', (state) => {
 208         if (state === "program") {
 209             welcome.style.visibility = "hidden";
 210             program.style.visibility = "visible";
 211         } else if (state === "welcome") {
 212             welcome.style.visibility = "visible";
 213             welcome_message.style.visibility = "visible";
 214             header.style.opacity = "100%";
 215             header.style.transform = "scale(1)";
 216             header.style.visibility = "visible";
 217             program.style.visibility = "hidden";
 218             output.src = "";
 219         }
 220     });
 221
 222     socket.on('output', (filename) => {
 223         error.textContent = "";
 224         output.src = filename;
 225     });
 226
 227   </script>
 228 </body>
 229 </html>