}
}
+function start_welcome_timer() {
+ const tardis = state.tardis;
+ tardis.timer = 30;
+ emit_tardis_timer();
+ tardis_interval = setInterval(emit_tardis_timer, 1000);
+}
+
io_tardis.on("connection", (socket) => {
if (! socket.request.session.name) {
console.log("Error: Someone showed up at the Tardis without a name.");
// Let the new user know the state of the game
socket.emit("state", tardis.state);
+ // And the level if relevant
+ if (tardis.state === "game") {
+ socket.emit("level", levels[tardis.level].title);
+ }
+
// Put each of our boys into a different room
switch (name[0]) {
case 'C':
}
if (tardis.companions.count === 0) {
- tardis.timer = 30;
- emit_tardis_timer();
- tardis_interval = setInterval(emit_tardis_timer, 1000);
+ start_welcome_timer();
}
if (! tardis.companions.names.includes(name)) {
}
});
+ socket.on('reboot', () => {
+ const tardis = state.tardis;
+
+ if (show_word_interval) {
+ clearInterval(show_word_interval);
+ show_word_interval = 0;
+ }
+
+ tardis.state = "welcome";
+ io_tardis.emit("state", tardis.state);
+ io_tardis.emit('companions', tardis.companions.count);
+
+ start_welcome_timer();
+ });
+
socket.on('disconnect', () => {
const names = tardis.companions.names;
<style>
@keyframes zoom {
+ from {
+ opacity: 100%;
+ transform: scale(1);
+ }
to {
opacity: 0%;
transform: scale(30);
<body>
<div id="content">
- <div id="welcome">
+ <div id="welcome" style="visibility: hidden">
<div id="header" align="center">
<p>
<img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
<div id="result">
</div>
- <button id="reboot">
- Reboot Tardis
- </button>
</div>
+ <div id="over" style="visibility: hidden">
+ <img src="/doctor-profile.png" style="float:left; max-width:150px">
+ <h1>Congratulations</h1>
+
+ <p>
+ You're a right handy lot of companions! You made that look
+ almost as impressive as the time I saved the planet of
+ Kashyyyk from certain destruction with nothing more than a
+ pair of knitting needles.
+ </p>
+
+ </div>
+
+ <button id="reboot">
+ Reboot Tardis
+ </button>
+
</div>
<script src="/socket.io/socket.io.js"></script>
const form = document.getElementById("form");
const input = document.getElementById("input");
const result = document.getElementById("result");
+ const reboot = document.getElementById("reboot");
function fade_element(elt) {
elt.style.opacity = "100%";
}, 900);
}
+ reboot.addEventListener('click', event => {
+ socket.emit('reboot');
+ });
+
form.addEventListener('submit', event => {
event.preventDefault();
socket.emit('answer', input.value);
welcome_message.style.visibility = "hidden";
timer_div.style.visibility = "hidden";
header.className = "zoom-tardis";
+ // Clear that className after the animation is complete
+ setTimeout(() => {
+ header.style.visibility = "hidden"
+ header.className = "";
+ }, 2200);
}
});
socket.on('state', (state) => {
+ input.value = "";
if (state === "game") {
welcome.style.visibility = "hidden";
game.style.visibility = "visible";
+ } else if (state === "over") {
+ game.style.visibility = "hidden";
+ over.style.visibility = "visible";
+ } else if (state === "welcome") {
+ welcome.style.visibility = "visible";
+ welcome_message.style.visibility = "visible";
+ header.style.opacity = "100%";
+ header.style.transform = "scale(1)";
+ header.style.visibility = "visible";
+ game.style.visibility = "hidden";
+ level_div.style.visibility = "hidden";
+ over.style.visibility = "hidden";
}
});
socket.on('level', (level) => {
+ input.value = "";
level_div.textContent = level;
level_div.style.visibility = "visible";
});
});
socket.on('correct', () => {
+ input.value = "";
level_div.style.visibility = "hidden";
result.textContent = "Complete!";
result.style.color = "green";
});
socket.on('incorrect', () => {
+ input.value = "";
result.textContent = "Nope!";
result.style.color = "red";
fade_element(result);