Added funny green text

MavenBack/src/main/webapp/baseStyle.css

@@ -60,7 +60,9 @@ p, h1, th, td {color: white;}
 	float: right;
 	text-decoration: none;	
 }
+/*nav bar elements with class left will be shifted left*/
 .navBar a.left{float:left;}
+/*changes color when hovering over links*/
 .navBar a:hover{
 	background-color: #8c463d;
 }
@@ -69,15 +71,15 @@ table, td, th{
 	border: 2px solid white;
 	text-align: center;
 	border-spacing: 0;
-	border-collapse: collapse;
+	border-collapse: collapse;/*removes the double border*/
 }
 
 tr:nth-child(even) {
 	/*background-color: #8c463d;*/
-	background-color: #373738;
+	background-color: #373738;/*alternates color of table rows*/
 }
 
-td a, td a:visited {
+td a, td a:visited {/*changes color of links and table elements after they have been clicked on */
 	color: #57e5ff;
 }
 
@@ -105,20 +107,20 @@ footer a:hover {
 }
 
 
-@media (max-width: 847px) {
+@media (max-width: 847px) {/*mobile and smaller screen info*/
 	.navBar {
-		display: flex;
+		display: flex;/*changes to flex display and arranges the links into a column*/
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 	}
-	.navBar a {
+	.navBar a {/*links take up all of the navbar width */
 		float: none;
 		width: 100%;
 		padding: 6px;
 	}
 
-	#userButton {
+	#userButton {/*login button is lowest in the column*/
 		order: 4;
 	}
 	footer {

MavenBack/src/main/webapp/games.html

@@ -53,10 +53,11 @@
 			login.open('GET', '/api/users');
 			login.send();
 
-
+		//below 3 functions all make post requests to the server for when a game is either accepted, declined, or canceled by the original user 
+		//post requests are different for each but overall function structure is the same 
 			function acceptGame(id) {
 				var idNum = id.target.id.substring(id.target.id.indexOf("accept") + 6);
-				var postData = 'acceptGame=1&id=' + idNum;
+				var postData = 'acceptGame=1&id=' + idNum;//postData is either acceptGame, declineGame, or cancelGame
 				document.getElementById(id.target.id).disabled = true;
 				document.getElementById('decline' + idNum).disabled = true;
 				var ajaxRequest = new XMLHttpRequest();
@@ -123,7 +124,7 @@
 				var myScore = document.getElementById('myScore').value;
 				var theirScore = document.getElementById('theirScore').value;
 				var postData = 'newGame=1&to=' + toUser + '&myScore=' + myScore + '&theirScore=' + theirScore;
-				document.getElementById("submitButton").disabled = true;
+				document.getElementById("submitButton").disabled = true;//disables the submit button until the server sucessfully accepts the request 
 				var ajaxRequest = new XMLHttpRequest();
 				ajaxRequest.open('POST', '/api/games');
 				ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
@@ -159,7 +160,7 @@
 						var games = JSON.parse(gamesReq.responseText);
 						for (var i = 0; i < games.length; i++) {
 
-							var newRow = document.createElement('tr');
+							var newRow = document.createElement('tr');//create new table row and user links 
 							var date = document.createElement('td');
 							var winner = document.createElement('td');
 							var loser = document.createElement('td');
@@ -199,7 +200,7 @@
 							winnerScore.innerHTML = games[i].winnerScore;
 							loserScore.innerHTML = games[i].loserScore;
 
-							if (games[i].receiver == us.id) {
+							if (games[i].receiver == us.id) {//if we are the reciever, generate an accept and decline button 
 								var accept = document.createElement('button');
 								var decline = document.createElement('button');
 								accept.innerHTML = "\&#10003;";
@@ -210,7 +211,7 @@
 								decline.onclick = function(bruh = games[i].id){declineGame(bruh)};
 								action.appendChild(accept);
 								action.appendChild(decline);
-							} else {
+							} else {//if we are not the reciever, generate a cancel butto 
 								var cancel = document.createElement('button');
 								cancel.innerHTML = "X";
 								cancel.id = "cancel" + games[i].id;
@@ -231,7 +232,7 @@
 						}
 					}
 				}
-				gamesReq.open('GET', '/api/games?status=PENDING&user=' + us.id);
+				gamesReq.open('GET', '/api/games?status=PENDING&user=' + us.id);//make a request for all pending games with our id for the table 
 				gamesReq.send();
 			}
 		</script>
@@ -242,22 +243,22 @@
 			<a id="userButton" href="/login">...</a> <!--Leads to user page to display user name, stats, etc.-->
 			<a href = "/games">Manage Your Games</a> <!--Leads to seprate page for ppl to register their games-->
 		</div>
-		<div class="recent" role="main"> <!-- Using this class as a temporary to look decent while I work on the backend & functionality -->
+		<div class="recent" role="main"> <!-- div were people can input scores and submit  -->
 			<h1 class = "heading"><u>Create new game:</u></h1>
 			<p id="errorMessage" style="color: red;"></p>
 			<p>Opponent Username:</p>
-			<input type="text" id="toUser" placeholder="aford1">
+			<input type="text" id="toUser" placeholder="aford1"><!--opponent username input-->
 			<p>My Score:</p>
-			<input type="number" id="myScore" placeholder="1">
+			<input type="number" id="myScore" placeholder="1"><!--our score input-->
 			<p>Their Score:</p>
-			<input type="number" id="theirScore" placeholder="21">
+			<input type="number" id="theirScore" placeholder="21"><!--opponent score input-->
 			<div class = "buttonContainer">
 				<p>
 					<button type="button" id="submitButton" onclick="submitGame()">Submit Game</button>
 				</p>
 			</div> 
 		</div>
-		<div class ="pendingGames">
+		<div class ="pendingGames"><!--div for pending games table-->
 			<h1 class = "heading"><u>Your Pending Games:</u></h1>
 			<div style="overflow-x:auto;">
 				<table id="gamesTable" class="leaderboard"> <!-- Using this class as a temporary to look decent while I work on the backend & functionality -->

MavenBack/src/main/webapp/gamesStyle.css

@@ -1,13 +1,13 @@
 .leaderboard{float:left;}
 .recent{float: right;}
 
-.pendingGames{
+.pendingGames{/*pending games is floating right and takes up 75% of thes screen */
 	float: right;
 	padding: 10px;	
 	width: 75%;
 	/*background: #262521;*/
 }
-.recent{
+.recent{/*recent games floats left and is 25% of the screen */
 	float: left;
 	padding: 10px;
 	width: 20%;
@@ -26,7 +26,7 @@ table{
 	width: 100%;
 }
 
-input[type=text], input[type=number]{
+input[type=text], input[type=number]{/*number/text input info */
   width: 95%;
   padding: 12px 20px;
   margin: auto;	
@@ -44,7 +44,7 @@ input[type=text], input[type=number]{
 	justify-content: center;
 
 }
-#submitButton{
+#submitButton{/*button is flex in center of div */
 	/*background-color: #7fa751;*/
 	background-color: #8c463d;
 	text-align: center;
@@ -61,23 +61,23 @@ input[type=text], input[type=number]{
 
 	cursor: pointer;
 }
-#submitButton:hover{
+#submitButton:hover{/*changes button hover color */
 	background-color: white;
 	color: #8c463d;
 }
 
-#submitButton:disabled {
+#submitButton:disabled {/*changes button color when disabled by js in games.html */
 	background-color: #57403d;
 }
 
 @media (max-width: 800px) {
-	.pendingGames, .recent{
+	.pendingGames, .recent{/*table and input divs take up whole screen and are stacked on top of each other */
 		float:none;
 		width: 100%;
 
 	}
 
-	input[type=text], input[type=number]{
+	input[type=text], input[type=number]{ /*input fields take up whole screen */
 		margin: 0px;	
 		width: 100%;
 	}

MavenBack/src/main/webapp/home.html

@@ -68,8 +68,8 @@ <h1>Welcome to the Ping Pong Page.</h1>
 			<p id = "descript">Join the ranks. Beat your friends. Get good kid.</p>
 		</div>
 		<div class = "links">
-			<a href= "/qa"><p class = "learn">What is this? ></p></a>
-			<a href= "."><p>Play Pong ></p></a>
+			<a href= "/qa"><p class = "learn">What is this? ></p></a><!--Leads to q&a page-->
+			<a href= "."><p>Play Pong ></p></a><!--leads to index-->
 		</div>	
 	</body>
 </html>

MavenBack/src/main/webapp/index.html

@@ -79,7 +79,7 @@
 					if(gamesReq.readyState == 4 && gamesReq.status == 200){
 						var games = JSON.parse(gamesReq.responseText);
 						for (var i = 0; i < games.length; i++) {
-							var newRow = document.createElement('tr');
+							var newRow = document.createElement('tr');//create new row elements for recent games table 
 							var date = document.createElement('td');
 							var winner = document.createElement('td');
 							var loser = document.createElement('td');
@@ -108,7 +108,7 @@
 							var month = months[dateDate.getMonth()];
 							var year = dateDate.getFullYear();
 							date.innerHTML = day + " " + hr + ":" + min + ampm + " " + month + " " + d + ", " + year;
-							winnerLink.innerHTML = games[i].winner == games[i].sender ? games[i].senderName : games[i].receiverName;
+							winnerLink.innerHTML = games[i].winner == games[i].sender ? games[i].senderName : games[i].receiverName;//checks if sender or reciever is the winner
 							loserLink.innerHTML = games[i].winner == games[i].sender ? games[i].receiverName : games[i].senderName;
 							winnerLink.href = "/user/" + winnerLink.innerHTML;
 							loserLink.href = "/user/" + loserLink.innerHTML;
@@ -133,7 +133,7 @@
 						}
 					}
 				}
-				gamesReq.open('GET', '/api/games?status=FILED');
+				gamesReq.open('GET', '/api/games?status=FILED');//sends a request for all games that have been filed(accepted by both users)
 				gamesReq.send();
 
 				var playerTable = document.getElementById("playerTable");
@@ -143,7 +143,7 @@
 					if(usersReq.readyState == 4 && usersReq.status == 200){
 						var users = JSON.parse(usersReq.responseText);
 						for (var i = 0; i < users.length; i++) {
-							var newRow = document.createElement('tr');
+							var newRow = document.createElement('tr');//create new row elements for users table 
 							var user = document.createElement('td');
 							var userLink = document.createElement('a');
 							var elo = document.createElement('td');
@@ -163,7 +163,7 @@
 					}
 				}
 				usersReq.open('GET', '/api/users?ranks=50&mRD=300&cached=1');
-				usersReq.send();
+				usersReq.send();//makes a request for all players that have less than 300 RD so that new/inactive players are now shown 
 			});
 		</script>
 
@@ -201,7 +201,7 @@
 		<a href = "/games">Manage Your Games</a> <!--Leads to seprate page for ppl to register their games-->
 	</div>
 	<div class = "tablesContainer" role="main">
-		<div class = "topPlayers">
+		<div class = "topPlayers"><!--div for players table-->
 
 			<h1 class ="heading"><u>Top Players</u></h1>
 
@@ -216,7 +216,7 @@ <h1 class ="heading"><u>Top Players</u></h1>
 			</div>
 
 		</div>
-		<div class = "recentGames">
+		<div class = "recentGames"><!--div for recent games table-->
 
 			<h1 class = "heading"><u>Recent Games</u></h1>
 
@@ -235,7 +235,7 @@ <h1 class = "heading"><u>Recent Games</u></h1>
 		</div>
 	</div>
 	<footer style="text-align: center;">
-  		<p><a href="/qa">Click here to learn more about the Ping Pong Page!</a></p>
+  		<p><a href="/qa">Click here to learn more about the Ping Pong Page!</a></p><!--leads to q&a page-->
 	</footer>
 	</body>
 </html>

MavenBack/src/main/webapp/login.html

@@ -49,17 +49,17 @@
 				var email = document.getElementById('email').value;
 				var auth = document.getElementById('auth').value;
 				var postData = 'email=' + email;
-				document.getElementById('submitButton').disabled = true;
+				document.getElementById('submitButton').disabled = true;//disables button until end of function 
 				if (auth != "") {
-					postData += '&authCode=' + auth;
+					postData += '&authCode=' + auth;//if an auth code has been entered, the post request will contain it 
 				}
 				var ajaxRequest = new XMLHttpRequest();
 				ajaxRequest.open('POST', '/api/auth');
 				ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 				ajaxRequest.send(postData);
 				ajaxRequest.onreadystatechange = function(){
 					if (ajaxRequest.readyState == 4) {
-						if (ajaxRequest.status == 200 && auth != "") {
+						if (ajaxRequest.status == 200 && auth != "") {//if request is sucessful without a auth, user has logged in 
 							// User has successfully logged in!
 							window.location.replace("/");
 						} else if (ajaxRequest.status == 200) {

MavenBack/src/main/webapp/loginStyle.css

@@ -2,7 +2,7 @@
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);/*places input container in the center of the screen*/
 	width: 500px;
 	height: 600px;
 	background: #262521;
@@ -47,15 +47,15 @@ input[type=text]{
 	left: 50px;
 	top: 30px;
 
-	cursor: pointer;
+	cursor: pointer;/*changes cursor to pointer when hovering*/
 }
 
-.emailBtn:hover{
+.emailBtn:hover{/*changes button color when hovering*/
 	background-color: white;
 	color: #8c463d;
 }
 
-.emailBtn:disabled {
+.emailBtn:disabled {/*changes email button when disabled*/
 	background-color: #57403d;
 }
 
@@ -64,12 +64,12 @@ p {
 }
 
 @media (max-width: 800px) {
-	.inputContainer{
+	.inputContainer{/*makes the input div the whole screen width*/
 		width: 95vw;
 		align-items: center;
 	}
 
-	.emailBtn{
+	.emailBtn{/*submit button is roughly 70% of the screen */
 		width: 70vw;
 		margin: auto;
 		left: 0px;