transform: scale(30);
}
}
- .zoom-now {
+ .zoom-tardis {
animation-name: zoom;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
+ @keyframes fade {
+ from {
+ opacity: 100%;
+ }
+ to {
+ opacity: 0%;
+ }
+ }
+ .fade-out {
+ animation-name: fade;
+ animation-duration: 0.8s;
+ animation-timing-function: ease-in;
+ animation-fill-mode: forwards;
+ }
#welcome {
position: fixed;
width: 100%;
font-weight: bold;
text-align: center;
}
+ #result {
+ position: fixed;
+ width: 100%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 500%;
+ text-align: center;
+ }
</style>
</head>
</p>
</div>
- <p id="welcome-message">
- Waiting to enter Tardis.
+ <div id="welcome-message">
+ <div id="timer_div" style="visibility: hidden">
+ Entering TARDIS in <span id="timer"></span> seconds.
+ </div>
<br>
Companions present: <span id="companions">1</span>/4
- </p>
+ </div>
</div>
- <div id="game" style="display: none">
- <h1 id="step">Step 1: Calibrate the Trans-Dimensional Field Accelerator</h1>
+ <div id="game" style="visibility: hidden">
+ <h1 id="level"></h1>
<div id="word">
- What
+
</div>
<div id="interface">
- <input id="input">
- </input>
+ <form id="form">
+ <input id="input">
+ </input>
+ </form>
</div>
+
+ <div id="result">
+ </div>
+
<button id="reboot">
Reboot Tardis
</button>
</div>
</div>
+
+ <script src="/socket.io/socket.io.js"></script>
+ <script>
+ const socket = io("/tardis");
+
+ const welcome = document.getElementById("welcome");
+ const game = document.getElementById("game");
+ const level_div = document.getElementById("level");
+ const word_div = document.getElementById("word");
+ const header = document.getElementById("header");
+ const companions = document.getElementById("companions");
+ const timer_div = document.getElementById("timer_div");
+ const timer = document.getElementById("timer");
+ const welcome_message = document.getElementById("welcome-message");
+ const form = document.getElementById("form");
+ const input = document.getElementById("input");
+ const result = document.getElementById("result");
+
+ function fade_element(elt) {
+ elt.style.opacity = "100%";
+ elt.className = "fade-out";
+ // Arrange to clear the class name when the animation is over
+ // This will allow for it to be restarted on the next word.
+ setTimeout(() => {
+ elt.style.opacity = "0%";
+ elt.className = "";
+ }, 900);
+ }
+
+ form.addEventListener('submit', event => {
+ event.preventDefault();
+ socket.emit('answer', input.value);
+ input.value = "";
+ });
+
+ socket.on('companions', (count) => {
+ companions.textContent = count.toString();
+ });
+
+ socket.on('timer', (value) => {
+ console.log("Receiving timer value of " + value);
+ timer_div.style.visibility = "visible";
+ timer.textContent = value.toString();
+
+ if (value === 0) {
+ welcome_message.style.visibility = "hidden";
+ timer_div.style.visibility = "hidden";
+ header.className = "zoom-tardis";
+ }
+ });
+
+ socket.on('state', (state) => {
+ if (state === "game") {
+ welcome.style.visibility = "hidden";
+ game.style.visibility = "visible";
+ }
+ });
+
+ socket.on('level', (level) => {
+ level_div.textContent = level;
+ level_div.style.visibility = "visible";
+ });
+
+ socket.on('show-word', (word) => {
+ word_div.textContent = word;
+ fade_element(word_div);
+ });
+
+ socket.on('correct', () => {
+ level_div.style.visibility = "hidden";
+ result.textContent = "Complete!";
+ result.style.color = "green";
+ fade_element(result);
+ });
+
+ socket.on('incorrect', () => {
+ result.textContent = "Nope!";
+ result.style.color = "red";
+ fade_element(result);
+ });
+
+ </script>
</body>
</html>