<style>
@keyframes zoom {
+ from {
+ opacity: 100%;
+ transform: scale(1);
+ }
to {
opacity: 0%;
transform: scale(30);
}
#word {
text-align: center;
- font-size: 500%;
+ font-size: 400%;
font-weight: bold;
}
#interface {
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>
<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>
<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 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 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");
+ const reboot = document.getElementById("reboot");
+
+ 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);
+ }
+
+ reboot.addEventListener('click', event => {
+ socket.emit('reboot');
+ });
+
+ 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();
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('show-word', (word) => {
word_div.textContent = word;
- word_div.style.opacity = "100%";
- word_div.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(() => {
- word_div.style.opacity = "0%";
- word_div.className = "";
- }, 900);
+ fade_element(word_div);
+ });
+
+ socket.on('correct', () => {
+ input.value = "";
+ level_div.style.visibility = "hidden";
+ result.textContent = "Complete!";
+ result.style.color = "green";
+ fade_element(result);
+ });
+
+ socket.on('incorrect', () => {
+ input.value = "";
+ result.textContent = "Nope!";
+ result.style.color = "red";
+ fade_element(result);
});
</script>
projects / zombocom-ai / blobdiff