Update static/js/game.js

static/js/game.js

@@ -22,7 +22,7 @@ function startGame() {
             document.getElementById('sessionInfo').style.display = 'block';
             document.getElementById('playButton').style.display = 'none';
             if (data.status === 'ready') {
-                startGamePlay();
+                startWordInput();
             } else {
                 checkGameStatus();
             }
@@ -34,18 +34,50 @@ function checkGameStatus() {
         .then(response => response.json())
         .then(data => {
             if (data.status === 'ready') {
-                startGamePlay();
+                startWordInput();
             } else {
                 setTimeout(checkGameStatus, 2000);  // Check again in 2 seconds
             }
         });
 }
 
-function startGamePlay() {
+function startWordInput() {
     document.getElementById('waitingMessage').style.display = 'none';
     document.getElementById('wordInput').style.display = 'block';
 }
 
+function submitWord() {
+    const word = document.getElementById('wordInputField').value;
+    if (word.length !== 7) {
+        alert('Word must be 7 letters long');
+        return;
+    }
+    fetch('/submit_word', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ session_id: sessionId, player_id: playerId, word: word }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'waiting_for_opponent') {
+            document.getElementById('wordInput').style.display = 'none';
+            document.getElementById('waitingMessage').style.display = 'block';
+            document.getElementById('waitingMessage').textContent = 'Waiting for opponent to submit their word...';
+        } else if (data.status === 'game_started') {
+            startGamePlay();
+        }
+    });
+}
+
+function startGamePlay() {
+    document.getElementById('waitingMessage').style.display = 'none';
+    document.getElementById('wordInput').style.display = 'none';
+    document.getElementById('gameArea').style.display = 'block';
+    updateGameState();
+}
+
 function submitWord() {
     const word = document.getElementById('wordInputField').value;
     if (word.length !== 7) {