5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
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">
21 animation-duration: 2s;
22 animation-timing-function: ease-in;
23 animation-fill-mode: forwards;
30 transform: translate(-50%, -50%);
68 <div id="header" align="center">
70 <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
74 <div id="welcome-message">
75 <div id="timer_div" style="visibility: hidden">
76 Entering TARDIS in <span id="timer"></span> seconds.
79 Companions present: <span id="companions">1</span>/4
83 <div id="game" style="display: none">
84 <h1 id="step">Step 1: Calibrate the Trans-Dimensional Field Accelerator</h1>
100 <script src="/socket.io/socket.io.js"></script>
102 const socket = io("/tardis");
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");
110 socket.on('companions', (count) => {
111 companions.textContent = count.toString();
114 socket.on('timer', (value) => {
115 console.log("Receiving timer value of " + value);
116 timer_div.style.visibility = "visible";
117 timer.textContent = value.toString();
120 welcome_message.style.visibility = "hidden";
121 timer_div.style.visibility = "hidden";
122 header.className = "zoom-tardis";