html

ready up button
utastudents · Apr 16, 2024 · 67cf84c · 67cf84c
1 parent d7a054c
commit 67cf84c
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/html/index.html b/html/index.html
@@ -53,16 +53,20 @@
             margin-top: 20px;
             font-size: 18px;
         }
+
+        #ready-button {
+            margin-top: 20px;
+        }
     </style>
 </head>
 <body>
     <div id="lobby-container">
         <label for="username">Username:</label>
         <input type="text" id="username" maxlength="20">
         <button id="joinButton">Join Game</button>
-        <button id="readyButton" style="display: none;">Ready Up</button>
         <div id="lobby-status">Waiting for players...</div>
         <div id="players-in-lobby">Players in Lobby:</div>
+        <button id="ready-button">Ready Up</button> <!-- Ready Up button -->
         <label id="topMessage"></label>
         <table id="wordSearchBoard" style="display:none;"></table>
         <label id="bottomMessage"></label>
@@ -89,7 +93,6 @@
                 document.getElementById("lobby-status").innerHTML = "Waiting for other players...";
             } else if (msg.action === "join") {
                 document.getElementById("lobby-status").innerHTML = "Joined the game!";
-                document.getElementById("readyButton").style.display = "inline"; // Show ready button after joining
             }
         };
 
@@ -112,11 +115,11 @@
             }
         });
 
-        // Add event listener for the Ready Up button
-        document.getElementById("readyButton").addEventListener("click", function() {
-            // Send a message to the server indicating that the player is ready
+        // Event listener for the Ready Up button
+        document.getElementById("ready-button").addEventListener("click", function() {
             connection.send(JSON.stringify({ action: "ready" }));
-            document.getElementById("readyButton").disabled = true; // Disable the button after clicking
+            // Optionally, you can disable the button after clicking
+            document.getElementById("ready-button").disabled = true;
         });
     </script>
 </body>