+ socket.on('state', (state) => {
+ if (state === "game") {
+ welcome.style.visibility = "hidden";
+ game.style.visibility = "visible";
+ }
+ });
+
+ socket.on('level', (level) => {
+ level_div.textContent = level;
+ });
+
+ 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);
+ });
+