From 1288445cdb96878cb44de34ebac4441b1e991d4d Mon Sep 17 00:00:00 2001
From: croueAlec <alec.croue@gmail.com>
Date: Mon, 14 Oct 2024 17:31:13 +0200
Subject: [PATCH 1/7] main column added for pong selection page

---
 django/src/games/templates/pong.html | 42 +++++++++++++++-------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/django/src/games/templates/pong.html b/django/src/games/templates/pong.html
index ae2d9c85..a7651514 100644
--- a/django/src/games/templates/pong.html
+++ b/django/src/games/templates/pong.html
@@ -1,26 +1,30 @@
 {% extends "./extends/base.html" %}
 
 {% block content %}
-<div class="container">
-	<div game-menu="main">
-		<a class="btn btn-primary text-decoration-none" data-route href="/pong/local">Local Game</a>
-		<button class="btn btn-danger" menu-id="online">Online Play</button>
+<div class="container-fluid d-flex vh-70">
+	<div class="row justify-content-center align-items-center w-100">
+		<div class="col-12 col-md-6" id="main-pong-column">
+			<div game-menu="main" class="row">
+				<a class="btn btn-lg btn-primary text-decoration-none mb-4" data-route href="/pong/local">Local Game</a>
+				<button class="btn btn-lg btn-danger mt-4" menu-id="online">Online Play</button>
+			</div>
+
+			<div game-menu="online" class="row">
+				<a class="btn btn-primary text-decoration-none" data-route href="/pong/online">Create a Room</a>
+				<button class="btn btn-danger text-decoration-none" menu-id="join">Join a Room</button>
+				<a class="btn btn-warning text-decoration-none" data-route href="/tounament/pong">Join a Tournament</a>
+			</div>
+
+			<div game-menu="join" class="row">
+				<form class="form-group" id="join-form">
+					<input class="form-control" type="text" id="join-id" placeholder="Room Id">
+					<button type="submit" class="btn btn-primary">Join</button>
+				</form>
+			</div>
+
+			<button class="btn btn-success" id="back-btn" menu-id="main">Back</button>
+		</div>
 	</div>
-
-	<div game-menu="online">
-		<a class="btn btn-primary text-decoration-none" data-route href="/pong/online">Create a Room</a>
-		<button class="btn btn-danger text-decoration-none" menu-id="join">Join a Room</button>
-		<a class="btn btn-warning text-decoration-none" data-route href="/tounament/pong">Join a Tournament</a>
-	</div>
-
-	<div game-menu="join">
-		<form class="form-group" id="join-form">
-			<input class="form-control" type="text" id="join-id" placeholder="Room Id">
-			<button type="submit" class="btn btn-primary">Join</button>
-		</form>
-	</div>
-
-	<button class="btn btn-success" id="back-btn" menu-id="main">Back</button>
 </div>
 
 <script>

From 70799ef9bbb6f976e47be8478405eaad1e036979 Mon Sep 17 00:00:00 2001
From: croueAlec <alec.croue@gmail.com>
Date: Tue, 15 Oct 2024 13:08:20 +0200
Subject: [PATCH 2/7] pong selection page buttons now almost look right

---
 django/src/games/templates/pong.html | 22 ++++++++++++----------
 nginx/src/css/games.css              | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/django/src/games/templates/pong.html b/django/src/games/templates/pong.html
index a7651514..0da654ad 100644
--- a/django/src/games/templates/pong.html
+++ b/django/src/games/templates/pong.html
@@ -3,26 +3,28 @@
 {% block content %}
 <div class="container-fluid d-flex vh-70">
 	<div class="row justify-content-center align-items-center w-100">
-		<div class="col-12 col-md-6" id="main-pong-column">
+		<div class="col-12 col-md-3" id="main-pong-column">
 			<div game-menu="main" class="row">
-				<a class="btn btn-lg btn-primary text-decoration-none mb-4" data-route href="/pong/local">Local Game</a>
-				<button class="btn btn-lg btn-danger mt-4" menu-id="online">Online Play</button>
+				<a class="btn pong-selection-buttons text-decoration-none mb-4" data-route
+					href="/pong/local"><strong>Local Game</strong></a>
+				<button class="btn pong-selection-buttons mt-4" menu-id="online"><strong>Online Play</strong></button>
 			</div>
 
 			<div game-menu="online" class="row">
-				<a class="btn btn-primary text-decoration-none" data-route href="/pong/online">Create a Room</a>
-				<button class="btn btn-danger text-decoration-none" menu-id="join">Join a Room</button>
-				<a class="btn btn-warning text-decoration-none" data-route href="/tounament/pong">Join a Tournament</a>
+				<a class="btn pong-selection-buttons text-decoration-none mb-2" data-route href="/pong/online">Create a
+					Room</a>
+				<button class="btn pong-selection-buttons text-decoration-none mt-2 mb-4" menu-id="join">Join a Room</button>
+				<a class="btn pong-selection-buttons text-decoration-none my-4" data-route href="/tounament/pong">Join a Tournament</a>
 			</div>
 
 			<div game-menu="join" class="row">
-				<form class="form-group" id="join-form">
+				<form class="form-group my-4" id="join-form">
 					<input class="form-control" type="text" id="join-id" placeholder="Room Id">
-					<button type="submit" class="btn btn-primary">Join</button>
+					<button type="submit" class="btn pong-selection-buttons">Join</button>
 				</form>
 			</div>
-
-			<button class="btn btn-success" id="back-btn" menu-id="main">Back</button>
+			
+			<button class="btn pong-selection-buttons px-3" id="back-btn" menu-id="main">Back</button>
 		</div>
 	</div>
 </div>
diff --git a/nginx/src/css/games.css b/nginx/src/css/games.css
index 840512ec..e8d01c7c 100644
--- a/nginx/src/css/games.css
+++ b/nginx/src/css/games.css
@@ -5,3 +5,19 @@
 	border: 3px solid lightskyblue;
 	margin: 0 auto;
 }
+
+.pong-selection-buttons {
+    border: 1px solid var(--line-clr);
+    background-color: var(--base-clr);
+	color: var(--secondary-text-clr);
+    padding: 2rem;
+    border-radius: 5px;
+    width: 95%;
+	font-size: large;
+}
+
+.pong-selection-buttons:hover {
+    border: 1px solid var(--base-clr);
+    background-color: var(--hover-clr);
+	color: var(--secondary-text-clr);
+}

From 066bedc54d313d3ef8bee95a7ee90f15dd60f382 Mon Sep 17 00:00:00 2001
From: croueAlec <alec.croue@gmail.com>
Date: Tue, 15 Oct 2024 16:00:03 +0200
Subject: [PATCH 3/7] the hidden css class will now override any other display
 rule

---
 nginx/src/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nginx/src/css/styles.css b/nginx/src/css/styles.css
index 7a719317..77a95d02 100644
--- a/nginx/src/css/styles.css
+++ b/nginx/src/css/styles.css
@@ -43,7 +43,7 @@ body {
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 #content-wrapper {

From 9ef4114c3ed3fcd87d2c7591d31c0b52665cdc5e Mon Sep 17 00:00:00 2001
From: croueAlec <alec.croue@gmail.com>
Date: Tue, 15 Oct 2024 16:10:02 +0200
Subject: [PATCH 4/7] added new secondary color

---
 nginx/src/css/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nginx/src/css/styles.css b/nginx/src/css/styles.css
index 77a95d02..d234913d 100644
--- a/nginx/src/css/styles.css
+++ b/nginx/src/css/styles.css
@@ -2,6 +2,7 @@
 
 :root {
 	--base-clr: #f3e2f0;
+	--secondary-base-clr: #debfd8;
 	--line-clr: #b21313;
 	--hover-clr: #dfbac8;
 	--text-clr: #000;

From affa48b3d23c1cca4b325cc444d03b845be55488 Mon Sep 17 00:00:00 2001
From: croueAlec <alec.croue@gmail.com>
Date: Tue, 15 Oct 2024 17:13:57 +0200
Subject: [PATCH 5/7] changed secondary base color

---
 nginx/src/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nginx/src/css/styles.css b/nginx/src/css/styles.css
index d234913d..82f7530f 100644
--- a/nginx/src/css/styles.css
+++ b/nginx/src/css/styles.css
@@ -2,7 +2,7 @@
 
 :root {
 	--base-clr: #f3e2f0;
-	--secondary-base-clr: #debfd8;
+	--secondary-base-clr: #dac3d6;
 	--line-clr: #b21313;
 	--hover-clr: #dfbac8;
 	--text-clr: #000;

From 5d9d431e97802f4d453c212a65265893e5647da3 Mon Sep 17 00:00:00 2001
From: croueAlec <alec.croue@gmail.com>
Date: Tue, 15 Oct 2024 17:15:26 +0200
Subject: [PATCH 6/7] added secondary button styles, fixed back button display
 issue, added row divider, changed focus style for buttons on game page

---
 django/src/games/templates/pong.html | 37 +++++++++++++++---------
 nginx/src/css/games.css              | 43 ++++++++++++++++++++++++++--
 2 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/django/src/games/templates/pong.html b/django/src/games/templates/pong.html
index 0da654ad..6f548c03 100644
--- a/django/src/games/templates/pong.html
+++ b/django/src/games/templates/pong.html
@@ -1,30 +1,39 @@
 {% extends "./extends/base.html" %}
 
 {% block content %}
-<div class="container-fluid d-flex vh-70">
-	<div class="row justify-content-center align-items-center w-100">
+<div class="container-fluid">
+	<div class="row justify-content-center align-items-center w-35 h-100">
 		<div class="col-12 col-md-3" id="main-pong-column">
 			<div game-menu="main" class="row">
-				<a class="btn pong-selection-buttons text-decoration-none mb-4" data-route
-					href="/pong/local"><strong>Local Game</strong></a>
-				<button class="btn pong-selection-buttons mt-4" menu-id="online"><strong>Online Play</strong></button>
+				<a class="btn pong-selection-buttons pong-btn-scnd-color text-decoration-none mb-4 w-100 fw-bold"
+					data-route href="/pong/local">Local Game</a>
+				<button class="btn pong-selection-buttons mt-4 w-100 fw-bold" menu-id="online">Online Play</button>
 			</div>
 
 			<div game-menu="online" class="row">
-				<a class="btn pong-selection-buttons text-decoration-none mb-2" data-route href="/pong/online">Create a
+				<a class="btn pong-selection-buttons pong-btn-scnd-color text-decoration-none mb-2 w-100 fw-bold"
+					data-route href="/pong/online">Create a
 					Room</a>
-				<button class="btn pong-selection-buttons text-decoration-none mt-2 mb-4" menu-id="join">Join a Room</button>
-				<a class="btn pong-selection-buttons text-decoration-none my-4" data-route href="/tounament/pong">Join a Tournament</a>
+				<button class="btn pong-selection-buttons text-decoration-none mt-2 mb-4 w-100 fw-bold"
+					menu-id="join">Join a Room</button>
+				<hr class="row-divider">
+				<a class="btn pong-selection-buttons pong-btn-scnd-color text-decoration-none my-4 w-100 fw-bold"
+					data-route href="/tounament/pong">Join a Tournament</a>
 			</div>
 
-			<div game-menu="join" class="row">
-				<form class="form-group my-4" id="join-form">
-					<input class="form-control" type="text" id="join-id" placeholder="Room Id">
-					<button type="submit" class="btn pong-selection-buttons">Join</button>
+			<div game-menu="join" class="row w-100">
+				<form class="form-group my-4 w-100" id="join-form">
+					<div class="form-floating w-100 room-input-container mb-4">
+						<input class="form-control w-100 room-input" type="text" id="join-id" placeholder="Room Id">
+						<label for="join-id" class="w-100 room-input">Room ID</label>
+					</div>
+					<button type="submit"
+						class="btn pong-selection-buttons pong-btn-scnd-color text-decoration-none mb-4 w-100 fw-bold">Join</button>
 				</form>
 			</div>
-			
-			<button class="btn pong-selection-buttons px-3" id="back-btn" menu-id="main">Back</button>
+
+			<button class="btn pong-selection-buttons px-3 w-90 h-90 mx-auto fw-bold" id="back-btn"
+				menu-id="main">Back</button>
 		</div>
 	</div>
 </div>
diff --git a/nginx/src/css/games.css b/nginx/src/css/games.css
index e8d01c7c..2bdf90ed 100644
--- a/nginx/src/css/games.css
+++ b/nginx/src/css/games.css
@@ -10,10 +10,20 @@
     border: 1px solid var(--line-clr);
     background-color: var(--base-clr);
 	color: var(--secondary-text-clr);
-    padding: 2rem;
+    padding: 1.5rem;
     border-radius: 5px;
-    width: 95%;
+    /* width: 95%; */
 	font-size: large;
+	box-sizing: border-box;
+}
+
+.pong-btn-scnd-color {
+    background-color: var(--secondary-base-clr);
+}
+
+.pong-btn-scnd-color:focus {
+	border: 3px solid var(--selection-clr) !important;
+	border-radius: 0.5rem !important;
 }
 
 .pong-selection-buttons:hover {
@@ -21,3 +31,32 @@
     background-color: var(--hover-clr);
 	color: var(--secondary-text-clr);
 }
+
+.pong-selection-buttons:focus {
+	border: 3px solid var(--selection-clr) !important;
+	border-radius: 0.5rem !important;
+    background-color: var(--hover-clr);
+	color: var(--secondary-text-clr);
+}
+
+.row-divider {
+    border: 1px solid var(--line-clr);
+    width: 75%;
+    margin: 0.5rem auto;
+}
+
+#back-btn {
+	display:block;
+}
+
+.room-input-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    border: 1px solid var(--line-clr);
+    border-radius: 5px;
+}
+
+.room-input {
+    background-color: var(--light-base-clr);
+}

From 073a0800f0759f0ee886d9612bc3e2b8eced7baa Mon Sep 17 00:00:00 2001
From: croueAlec <alec.croue@gmail.com>
Date: Wed, 16 Oct 2024 11:01:19 +0200
Subject: [PATCH 7/7] remove unnecessary comments in games.css

---
 nginx/src/css/games.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/nginx/src/css/games.css b/nginx/src/css/games.css
index 2bdf90ed..f7dc6cea 100644
--- a/nginx/src/css/games.css
+++ b/nginx/src/css/games.css
@@ -12,7 +12,6 @@
 	color: var(--secondary-text-clr);
     padding: 1.5rem;
     border-radius: 5px;
-    /* width: 95%; */
 	font-size: large;
 	box-sizing: border-box;
 }