From fa6b2b01c2287749280f99b8d1c525e21453dd3c Mon Sep 17 00:00:00 2001
From: Anteneh Denbel <112484153+Antenehden@users.noreply.github.com>
Date: Tue, 6 Aug 2024 17:00:45 -0500
Subject: [PATCH] Update with fixes

---
 html/index.html | 416 ++++++++++++++++++++++++------------------------
 1 file changed, 208 insertions(+), 208 deletions(-)
diff --git a/html/index.html b/html/index.html
index 242a59d..984724a 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,208 +1,208 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Turn of Destiny</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin: 20px;
-        }
-        .game-board {
-            display: grid;
-            grid-template-columns: repeat(7, 40px);
-            gap: 5px;
-            margin-bottom: 20px;
-        }
-        .black-cell {
-            background-color: black;
-        }
-        .game-board div {
-            width: 40px;
-            height: 40px;
-            border: 1px solid #000;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        .info-section {
-            display: flex;
-            justify-content: space-between;
-            width: 100%;
-            max-width: 600px;
-            margin-bottom: 20px;
-        }
-        .lobby-leaderboard, .current-game {
-            border: 1px solid #000;
-            padding: 10px;
-        }
-        .current-game {
-            flex: 1;
-            margin-left: 10px;
-        }
-        .leaderboard-table, .score-table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-        .leaderboard-table th, .leaderboard-table td, .score-table th, .score-table td {
-            border: 1px solid #000;
-            padding: 5px;
-            text-align: center;
-        }
-        .actions {
-            text-align: center;
-            margin-top: 20px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Turn of Destiny</h1>
-
-    <div class="info-section">
-        <div class="lobby-leaderboard">
-            <h2>Lobby Leaderboard</h2>
-            <table class="leaderboard-table" id="leaderboard-table">
-                <tr><th>Rank</th><th>User</th><th>Score</th></tr>
-            </table> <!--leaderboard here -->
-        </div>
-
-        <div class="current-game">
-            <h2>Current Game</h2>
-            <p id="category">Category: Games</p>
-            <div class="game-board" id="game-board"></div> <!--board here -->
-            <p id="guess">Guess: </p>
-            <p id="timer">Timer: </p>
-            <p id="stake">Stake: </p>
-            <h3>Scores</h3>
-            <table class="score-table" id="score-table"></table> <!--table here -->
-            <p id="status">Status: </p>
-            <p id="round">Round: </p>
-            <p id="winner">Winner: </p>
-        </div>
-    </div>
-
-    <div class="actions">
-        <input type="text" id="vowelInput" placeholder="Enter vowel">
-        <button id="buyVowelButton">Buy Vowel</button>
-        <input type="text" id="consonantInput" placeholder="Enter consonant">
-        <button id="selectConsonantButton">Select Consonant</button>
-        <input type="text" id="solutionInput" placeholder="Enter solution">
-        <button id="solvePuzzleButton">Solve Puzzle</button>
-    </div>
-    
-    <script>
-        let socket;
-        const gameBoard = document.getElementById('game-board');
-        const guessDisplay = document.getElementById('guess');
-        const timerDisplay = document.getElementById('timer');
-        const stakeDisplay = document.getElementById('stake');
-        const scoreTable = document.getElementById('score-table');
-        const statusDisplay = document.getElementById('status');
-        const roundDisplay = document.getElementById('round');
-        const winnerDisplay = document.getElementById('winner');
-    
-        //const joinButton = document.getElementById('joinButton');
-        const buyVowelButton = document.getElementById('buyVowelButton');
-        const selectConsonantButton = document.getElementById('selectConsonantButton');
-        const solvePuzzleButton = document.getElementById('solvePuzzleButton');
-
-        const vowelInput = document.getElementById('vowelInput');
-        const consonantInput = document.getElementById('consonantInput');
-        const solutionInput = document.getElementById('solutionInput');
-    
-        function connectWebSocket() {
-            socket = new WebSocket('ws://localhost:9105');
-            socket.onopen = function() {
-                console.log('WebSocket connection established');
-                joinGame();
-            };
-            socket.onmessage = function(event) {
-                const message = JSON.parse(event.data);
-                console.log('Message from server: ', message);
-                updateGameState(message);
-            };
-            socket.onclose = function() {
-                console.log('WebSocket connection closed');
-            };
-            socket.onerror = function(error) {
-                console.error('WebSocket error: ', error);
-            };
-        }
-    
-        /*function joinGame() {
-            const message = { action: 'join' };
-            socket.send(JSON.stringify(message));
-        }*/
-    
-        function updateGameState(gameState) {
-            //Update board
-            gameBoard.innerHTML = '';
-            gameState.rounds[gameState.currentRoundIndex].word.wordsforgame.forEach(word => {
-                word.split('').forEach(letter => {
-                    const cell = document.createElement('div');
-                    cell.textContent = gameState.rounds[gameState.currentRoundIndex].correctguesses.includes(letter) ? letter : '_';
-                    gameBoard.appendChild(cell);
-                });
-            });
-    
-            //Update UI
-            guessDisplay.textContent = 'Guess: ' + (gameState.rounds[gameState.currentRoundIndex].guess || '');
-            timerDisplay.textContent = 'Timer: ' + (gameState.rounds[gameState.currentRoundIndex].timer || '');
-            stakeDisplay.textContent = 'Stake: ' + (gameState.rounds[gameState.currentRoundIndex].stake.currentStake || '');
-            statusDisplay.textContent = 'Status: ' + (gameState.isGameActive ? 'active' : 'closed');
-            roundDisplay.textContent = 'Round: ' + (gameState.currentRoundIndex + 1) + '/' + gameState.rounds.length;
-            winnerDisplay.textContent = 'Winner: ' + (gameState.winner ? gameState.winner.name : '');
-    
-            //Update score table
-            scoreTable.innerHTML = '';
-            gameState.players.forEach(player => {
-                const row = document.createElement('tr');
-                const nameCell = document.createElement('td');
-                const scoreCell = document.createElement('td');
-                nameCell.textContent = player.name;
-                scoreCell.textContent = player.score;
-                row.appendChild(nameCell);
-                row.appendChild(scoreCell);
-                scoreTable.appendChild(row);
-            });
-    
-            // Enable or disable buttons if less than 2 players
-            const buttonsEnabled = gameState.players.length >= 2;
-            buyVowelButton.disabled = !buttonsEnabled;
-            selectConsonantButton.disabled = !buttonsEnabled;
-            solvePuzzleButton.disabled = !buttonsEnabled;
-        }
-    
-        //joinButton.addEventListener('click', joinGame);
-        buyVowelButton.addEventListener('click', () => {
-            const vowel = vowelInput.value.trim().toLowerCase();
-            if (vowel) {
-                const message = { action: 'BUY_VOWEL', value: vowel };
-                socket.send(JSON.stringify(message));
-            }
-        });
-        selectConsonantButton.addEventListener('click', () => {
-            const consonant = consonantInput.value.trim().toLowerCase();
-            if (consonant) {
-                const message = { action: 'SELECT_CONSONANT', value: consonant };
-                socket.send(JSON.stringify(message));
-            }
-        });
-        solvePuzzleButton.addEventListener('click', () => {
-            const solution = solutionInput.value.trim().toLowerCase();
-            if (solution) {
-                const message = { action: 'SOLVE_PUZZLE', value: solution };
-                socket.send(JSON.stringify(message));
-            }
-        });
-    
-        // Connect to WebSocket when the page loads
-        window.onload = connectWebSocket;
-    </script>
-    
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Turn of Destiny</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 20px;
+        }
+        .game-board {
+            display: grid;
+            grid-template-columns: repeat(7, 40px);
+            gap: 5px;
+            margin-bottom: 20px;
+        }
+        .black-cell {
+            background-color: black;
+        }
+        .game-board div {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .info-section {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            max-width: 600px;
+            margin-bottom: 20px;
+        }
+        .lobby-leaderboard, .current-game {
+            border: 1px solid #000;
+            padding: 10px;
+        }
+        .current-game {
+            flex: 1;
+            margin-left: 10px;
+        }
+        .leaderboard-table, .score-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        .leaderboard-table th, .leaderboard-table td, .score-table th, .score-table td {
+            border: 1px solid #000;
+            padding: 5px;
+            text-align: center;
+        }
+        .actions {
+            text-align: center;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Turn of Destiny</h1>
+
+    <div class="info-section">
+        <div class="lobby-leaderboard">
+            <h2>Lobby Leaderboard</h2>
+            <table class="leaderboard-table" id="leaderboard-table">
+                <tr><th>Rank</th><th>User</th><th>Score</th></tr>
+            </table> <!--leaderboard here -->
+        </div>
+
+        <div class="current-game">
+            <h2>Current Game</h2>
+            <p id="category">Category: Games</p>
+            <div class="game-board" id="game-board"></div> <!--board here -->
+            <p id="guess">Guess: </p>
+            <p id="timer">Timer: </p>
+            <p id="stake">Stake: </p>
+            <h3>Scores</h3>
+            <table class="score-table" id="score-table"></table> <!--table here -->
+            <p id="status">Status: </p>
+            <p id="round">Round: </p>
+            <p id="winner">Winner: </p>
+        </div>
+    </div>
+
+    <div class="actions">
+        <input type="text" id="vowelInput" placeholder="Enter vowel">
+        <button id="buyVowelButton">Buy Vowel</button>
+        <input type="text" id="consonantInput" placeholder="Enter consonant">
+        <button id="selectConsonantButton">Select Consonant</button>
+        <input type="text" id="solutionInput" placeholder="Enter solution">
+        <button id="solvePuzzleButton">Solve Puzzle</button>
+    </div>
+    
+    <script>
+        let socket;
+        const gameBoard = document.getElementById('game-board');
+        const guessDisplay = document.getElementById('guess');
+        const timerDisplay = document.getElementById('timer');
+        const stakeDisplay = document.getElementById('stake');
+        const scoreTable = document.getElementById('score-table');
+        const statusDisplay = document.getElementById('status');
+        const roundDisplay = document.getElementById('round');
+        const winnerDisplay = document.getElementById('winner');
+    
+        //const joinButton = document.getElementById('joinButton');
+        const buyVowelButton = document.getElementById('buyVowelButton');
+        const selectConsonantButton = document.getElementById('selectConsonantButton');
+        const solvePuzzleButton = document.getElementById('solvePuzzleButton');
+
+        const vowelInput = document.getElementById('vowelInput');
+        const consonantInput = document.getElementById('consonantInput');
+        const solutionInput = document.getElementById('solutionInput');
+    
+        function connectWebSocket() {
+            socket = new WebSocket('ws://localhost:9105');
+            socket.onopen = function() {
+                console.log('WebSocket connection established');
+                joinGame();
+            };
+            socket.onmessage = function(event) {
+                const message = JSON.parse(event.data);
+                console.log('Message from server: ', message);
+                updateGameState(message);
+            };
+            socket.onclose = function() {
+                console.log('WebSocket connection closed');
+            };
+            socket.onerror = function(error) {
+                console.error('WebSocket error: ', error);
+            };
+        }
+    
+        /*function joinGame() {
+            const message = { action: 'join' };
+            socket.send(JSON.stringify(message));
+        }*/
+    
+        function updateGameState(gameState) {
+            //Update board
+            gameBoard.innerHTML = '';
+            gameState.rounds[gameState.currentRoundIndex].word.wordsforgame.forEach(word => {
+                word.split('').forEach(letter => {
+                    const cell = document.createElement('div');
+                    cell.textContent = gameState.rounds[gameState.currentRoundIndex].correctguesses.includes(letter) ? letter : '_';
+                    gameBoard.appendChild(cell);
+                });
+            });
+    
+            //Update UI
+            guessDisplay.textContent = 'Guess: ' + (gameState.rounds[gameState.currentRoundIndex].guess || '');
+            timerDisplay.textContent = 'Timer: ' + (gameState.rounds[gameState.currentRoundIndex].timer || '');
+            stakeDisplay.textContent = 'Stake: ' + (gameState.rounds[gameState.currentRoundIndex].stake.currentStake || '');
+            statusDisplay.textContent = 'Status: ' + (gameState.isGameActive ? 'active' : 'closed');
+            roundDisplay.textContent = 'Round: ' + (gameState.currentRoundIndex + 1) + '/' + gameState.rounds.length;
+            winnerDisplay.textContent = 'Winner: ' + (gameState.winner ? gameState.winner.name : '');
+    
+            //Update score table
+            scoreTable.innerHTML = '';
+            gameState.players.forEach(player => {
+                const row = document.createElement('tr');
+                const nameCell = document.createElement('td');
+                const scoreCell = document.createElement('td');
+                nameCell.textContent = player.name;
+                scoreCell.textContent = player.score;
+                row.appendChild(nameCell);
+                row.appendChild(scoreCell);
+                scoreTable.appendChild(row);
+            });
+    
+            // Enable or disable buttons if less than 2 players
+            const buttonsEnabled = gameState.players.length >= 2;
+            buyVowelButton.disabled = !buttonsEnabled;
+            selectConsonantButton.disabled = !buttonsEnabled;
+            solvePuzzleButton.disabled = !buttonsEnabled;
+        }
+    
+        //joinButton.addEventListener('click', joinGame);
+        buyVowelButton.addEventListener('click', () => {
+            const vowel = vowelInput.value.trim().toLowerCase();
+            if (vowel) {
+                const message = { action: 'BUY_VOWEL', value: vowel };
+                socket.send(JSON.stringify(message));
+            }
+        });
+        selectConsonantButton.addEventListener('click', () => {
+            const consonant = consonantInput.value.trim().toLowerCase();
+            if (consonant) {
+                const message = { action: 'SELECT_CONSONANT', value: consonant };
+                socket.send(JSON.stringify(message));
+            }
+        });
+        solvePuzzleButton.addEventListener('click', () => {
+            const solution = solutionInput.value.trim().toLowerCase();
+            if (solution) {
+                const message = { action: 'SOLVE_PUZZLE', value: solution };
+                socket.send(JSON.stringify(message));
+            }
+        });
+    
+        // Connect to WebSocket when the page loads
+        window.onload = connectWebSocket;
+    </script>
+    
+</body>
+</html>
