UI and web socket fixes for ver1 release (#5)

* Fix websocket synchronization error with answer matching

* UI glow-up

---------

Co-authored-by: James Zheng <zhengzijames@gmail.com>

public/compete.html

@@ -14,34 +14,34 @@ <h1>Corporate Lingo Competition</h1>
         <div id="home-screen">
             <h2>Competition Time!</h2>
             <button id="compete-button" class="btn btn-primary btn-lg">Find an Opponent!</button>
+            <p id="compete-description">Welcome to our interactive two-player word matcher! Challenge a friend to a battle of speed and professionalism in this exciting game where players race against each other to match corporate lingo with their respective definition. Test your workplace vocabulary and quick thinking as you compete to see who can find the most word pairs the fastest.</p>
         </div>
 
         <div id="waiting-screen" style="display: none;">
-            <h2 id="waiting-message">Waiting for an opponent...</h2>
+            <p id="waiting-message">Waiting for an opponent...<p>
         </div>
 
         <div id="game-screen" style="display: none;">
             <div class="row mb-4">
                 <div class="col-6">
-                    <h3>Your Score</h3>
+                    <p class="progress-label">Your Score</p>
                     <div class="progress player-progress">
                         <div id="player-progress" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                 </div>
                 <div class="col-6">
-                    <h3>Opponent's Score</h3>
+                    <p class="progress-label">Opponent's Score</p>
                     <div class="progress player-progress">
                         <div id="opponent-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                 </div>
             </div>
 
-            <h2 class="text-center mb-4">Match the Word</h2>
+            <p class="text-center mb-4">Match the Word</p>
             <div class="definition-box default text-center">
                 <h3 id="definition" class="mb-0"></h3>
             </div>
             <div id="options" class="row"></div>
-            <p id="result" class="text-center mt-3"></p>
             <p id="score" class="text-center"></p>
             <p id="timer" class="text-center"></p>
         </div>

public/compete.js

@@ -59,19 +59,20 @@ socket.on("newWord", (data) => {
 });
 
 socket.on("answerResult", (data) => {
-  const resultElement = document.getElementById("result");
-  resultElement.textContent = data.correct ? "Correct!" : "Incorrect";
-  resultElement.style.color = data.correct ? "green" : "red";
 
   // Disable all word options temporarily
-  document.querySelectorAll('.word-option').forEach(option => option.style.pointerEvents = 'none');
+  // document.querySelectorAll('.word-option').forEach(option => option.style.pointerEvents = 'none');
 
-  const definitionBox = document.querySelector('.definition-box');
+  document.querySelectorAll('.word-option').forEach(option => {
+    option.classList.add("disabled");
+  });
+
+  const definitionBox = document.querySelector('.definition-box')
   const correctWordOption = Array.from(document.querySelectorAll('.word-option')).find(option => option.textContent === data.correctWord);
   const selectedWordOption = Array.from(document.querySelectorAll('.word-option')).find(option => option.textContent === data.selectedWord);
 
-  definitionBox.classList.remove("default");
-  selectedWordOption.classList.remove("default");
+  definitionBox.classList.remove("option-default");
+  selectedWordOption.classList.remove("option-default");
 
   if (data.correct) {
     definitionBox.classList.add("matched");
@@ -83,10 +84,9 @@ socket.on("answerResult", (data) => {
 
   // Wait for a moment before moving to the next question
   setTimeout(() => {
-    resultElement.textContent = "";
     definitionBox.classList.remove("matched", "wrong");
     document.querySelectorAll('.word-option').forEach(option => {
-      option.classList.remove("selected", "matched", "wrong");
+      option.classList.remove("selected", "matched", "wrong", "disabled");
       option.classList.add("default");
       option.style.pointerEvents = 'auto';
     });

public/index.html

@@ -13,9 +13,7 @@ <h1 class="text-center">Corporate Lingo Learning Game</h1>
         <h2 class="text-center">Master Your Corporate Lingo Today!</h2>
         <p class="text-center">Welcome to the ultimate game to enhance your corporate vocabulary skills!</p>
 
-        <div class="text-center mb-4">
-            <a href="compete.html" class="btn btn-primary btn-lg">Compete with Others!</a>
-        </div>
+        <button id="competeButton" onclick="window.location.href='compete.html'">Compete with Others!</button>
 
         <div class="progress-container">
             <div id="progress" class="progress-bar"></div>

public/style.css

@@ -134,6 +134,7 @@ p {
   40%, 60% { transform: translate3d(4px, 0, 0); }
 }
 
+#competeButton,
 #resetButton,
 #homeButton {
   display: block;
@@ -151,6 +152,7 @@ p {
   box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
 }
 
+#competeButton:hover,
 #resetButton:hover,
 #homeButton:hover {
   background-color: #2980b9;
@@ -181,6 +183,7 @@ p {
   height: 20px;
   background-color: #e0e0e0;
   border-radius: 10px;
+  margin-top: 2rem;
   margin-bottom: 2rem;
   overflow: hidden;
 }
@@ -194,6 +197,16 @@ p {
 
 /* New styles for the competition page */
 
+#compete-description {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  text-align: left;
+}
+
+#waiting-message {
+  margin-bottom: 14rem;
+}
+
 .definition-box {
   border-radius: 15px;
   padding: 20px;
@@ -217,6 +230,12 @@ p {
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }
 
+.progress-label {
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+  text-align: justify;
+}
+
 .player-progress {
   height: 30px;
   margin-bottom: 20px;
@@ -262,7 +281,12 @@ p {
   color: white;
 }
 
-.default {
+.option-default {
   background-color: #f8f9fa;
   color: #2c3e50;
+}
+
+.disabled {
+  pointer-events: none; /* No mouse interaction */
+  opacity: 0.5; /* Optional: visually indicate the element is disabled */
 }

server.js

@@ -79,17 +79,28 @@ io.on("connection", (socket) => {
     const correct = answer === game.cards[game.currentWord].word;
     game.scores[playerIndex] += correct ? 1 : 0;
 
-    socket.emit("answerResult", { correct, selectedWord: answer, correctWord: game.cards[game.currentWord].word, score: game.scores[playerIndex] });
-
-    // Wait for a moment before moving to the next question
-    setTimeout(() => {
-      if (game.currentWord < 19) {
-        game.currentWord++;
-        sendNextWord(gameId);
-      } else {
-        endGame(gameId);
-      }
-    }, 1300); // 1 second + 0.3 seconds of animation
+    game.players.forEach((player, index) => {
+      player.emit("answerResult", {
+          correct,
+          selectedWord: answer,
+          correctWord: game.cards[game.currentWord].word,
+          score: game.scores[playerIndex],
+          currentPlayer: playerIndex,
+      });
+    });
+
+    // Move to the next word if the answer was correct
+    if (correct) {
+      // Wait for a moment before moving to the next question
+      setTimeout(() => {
+        if (game.currentWord < game.cards.length - 1) {
+          game.currentWord++;
+          sendNextWord(gameId);
+        } else {
+          endGame(gameId);
+        }
+      }, 1300); // 1 second + 0.3 seconds of animation
+    }
   });
 
   socket.on("disconnect", () => {
@@ -112,10 +123,14 @@ function sendNextWord(gameId) {
   const options = getRandomOptions(currentWord.word, cards);
 
   game.players.forEach((player, index) => {
+
+    const opponentIndex = index === 0 ? 1 : 0;
+
     player.emit("newWord", {
       definition: currentWord.definition,
       options,
       score: game.scores[index],
+      opponentScore: game.scores[opponentIndex]
     });
   });
 }