From adeb6f93113a5d212cc459bf3c6ce0d8841bc600 Mon Sep 17 00:00:00 2001
From: andy-tieu <andytieu325@gmail.com>
Date: Mon, 5 Aug 2024 04:18:11 -0500
Subject: [PATCH] Added additional comments to help explain functionality and
 what needs to be implemented still

---
 html/index.html |  3 +++
 html/index.js   | 41 +++++++++++++++++++++++++++++------------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/html/index.html b/html/index.html
index 820f94e..be4f449 100644
--- a/html/index.html
+++ b/html/index.html
@@ -33,6 +33,7 @@ <h4>Please type in a username</h4>
                     <!-- <button type = "button">Join lobby</button> -->
                 </div>
                 <div class = "left" id = "howTo">
+                    <!-- This div is just text explaining how the game works -->
                     <h2>How to play:</h2><br>
                     <p>The user must decide between guessing letters or solving the word(s).</p><br>
                     <p>If the user guesses a letter correctly, they are allowed a spin on the wheel.</p><br>
@@ -40,6 +41,7 @@ <h2>How to play:</h2><br>
                 </div>
             </div>
             <div class = "right">
+                <!-- This is the all-time leaderboard of all players that have connected -->
                 <h2 class = "leaderboardTitle">Leaderboard</h2><br>
                 <p class = "player">1.</p><br>
                 <p class = "player">2.</p><br>
@@ -133,6 +135,7 @@ <h1>user inputs should be here</h1>
                 </div>
             </div>
             <div class = "right">
+                <!-- This is the leaderboard for the current ongoing game only -->
                 <h2 class = "leaderboardTitle">Leaderboard</h2><br>
                 <p class = "player">1. John - 1500</p><br>
                 <p class = "player">2. Bob - 700</p><br>
diff --git a/html/index.js b/html/index.js
index 52ebc58..5e33c26 100644
--- a/html/index.js
+++ b/html/index.js
@@ -1,3 +1,4 @@
+// global variables and necessary classes to send JSON data to backend are stored here
 var id = -1;
 var lobbyId = -1;
 var lobbyPlayerCount = -1;
@@ -66,21 +67,29 @@ connection.onmessage = function (evt) {
         }
     } */
 }
-
+// nameSubmit() takes the text value given by the user, saves it using the same structure as Player class, and
+// then sending it to the backend to save the user's information
 function nameSubmit() {
     var usernameInput = document.getElementById("username").value;
     console.log(usernameInput);
     //alert(usernameInput);
 
-    P = new Player();
-    P.playerName = usernameInput;
-    P.playerID = id;
-    P.points = 0;
+    if(usernameInput) {
+        P = new Player();
+        P.playerName = usernameInput;
+        P.playerID = id;
+        P.points = 0;
 
-    connection.send(JSON.stringify(P));
-    console.log(JSON.stringify(P));
+        connection.send(JSON.stringify(P));
+        console.log(JSON.stringify(P));
+    }
+    else {
+        // add message here to send to user when username is invalid
+    }
 }
-
+// gameStart() works by hiding the lobby screen and then enabling the game screen to become visible
+// The start also only works when the amount of players is valid (need to add/change function to do this for all
+// players once one person starts or let other players know when someone else has started)
 function gameStart() {
     var lobbyScreen = document.getElementById("lobbyScreen");
     var gameScreen = document.getElementById("gameScreen");
@@ -94,7 +103,7 @@ function gameStart() {
         console.log("Game has been started with " + lobbyPlayerCount + " players");
     }
 }
-
+// gameStartTest() is a temporary function to allow testing the game without the need of a second player
 function gameStartTest() {
     var lobbyScreen = document.getElementById("lobbyScreen");
     var gameScreen = document.getElementById("gameScreen");
@@ -102,7 +111,7 @@ function gameStartTest() {
     lobbyScreen.style.display = "none";
     gameScreen.style.display = "flex";
 }
-
+// sendUserGuess() takes user input to allow for the game to happen (validity checking needs to be added)
 function sendUserGuess() {
     var userGuess = document.getElementById("userGuess").value;
 
@@ -110,7 +119,7 @@ function sendUserGuess() {
 
     UG.playerID = id;
     UG.userGuess = userGuess;
-
+    // The input is only sent if the input is not empty or (valid; needs to be implemented)
     if(userGuess) {
         document.getElementById("userFeedback").innerHTML = "";
         connection.send(JSON.stringify(UG));
@@ -119,4 +128,12 @@ function sendUserGuess() {
     else {
         document.getElementById("userFeedback").innerHTML = "Please enter a valid character or word(s)";
     }
-}
\ No newline at end of file
+}
+
+/*
+IMPORTANT!: TO DO
+- NEED TO IMPLEMENT FUNCTIONALITY TO SHOW LETTERS AS VALID GUESSES OCCUR
+- NEED TO HAVE A WAY TO SHOW ROUND # AND TO SWITCH TO A NEW ROUND
+- HAVE TO SEND ROUND UPDATES TO ALL PLAYERS
+- (MAY NEED TO WORK ON BOTH FRONTEND AND BACKEND TO IMPLEMENT THESE OR ONE INDIVIDUALLY)
+*/
\ No newline at end of file