Merge pull request #243 from TheSecretOrganization/232-redesign-pong-…

…game-selection-page 232 redesign pong game selection page
TheSecretOrganization · Oct 16, 2024 · 2d41938 · 2d41938
2 parents 09bba21 + 073a080
commit 2d41938
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 18 deletions.
diff --git a/django/src/games/templates/pong.html b/django/src/games/templates/pong.html
@@ -1,26 +1,41 @@
 {% 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>
+<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 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">
-		<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="/tournament/pong">Join a Tournament</a>
-	</div>
+			<div game-menu="online" class="row">
+				<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 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="/tournament/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>
+			<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 btn-success" 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>
 
 <script>

diff --git a/nginx/src/css/games.css b/nginx/src/css/games.css
@@ -5,3 +5,57 @@
 	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: 1.5rem;
+    border-radius: 5px;
+	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 {
+    border: 1px solid var(--base-clr);
+    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);
+}
diff --git a/nginx/src/css/styles.css b/nginx/src/css/styles.css
@@ -2,6 +2,7 @@
 
 :root {
 	--base-clr: #f3e2f0;
+	--secondary-base-clr: #dac3d6;
 	--line-clr: #b21313;
 	--hover-clr: #dfbac8;
 	--text-clr: #000;
@@ -43,7 +44,7 @@ body {
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 #content-wrapper {