From d3fcde1f0b0dcfa1f1b80d6a42bb4bb9720a7dea Mon Sep 17 00:00:00 2001
From: Mathis Degryck <madegryc@2A1.42angouleme.fr>
Date: Wed, 2 Oct 2024 22:10:07 +0200
Subject: [PATCH] Site     - Add real text to game mode     - Add WASD ZQSD
 select (front)

---
 .../server/server/templates/homePage.html     |  2 +-
 .../server/server/templates/lobbyPage.html    | 85 ++++++++++++++++---
 .../nginx/static/img/lobbyPage/up-arrow.svg   |  1 +
 .../javascript/typeResponse/typeInvitation.js |  6 +-
 .../static/style/lobbyPage/lobbyPage.css      | 64 ++++++++++++++
 5 files changed, 144 insertions(+), 14 deletions(-)
 create mode 100644 docker-compose/requirements/nginx/static/img/lobbyPage/up-arrow.svg

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
index a3bbed1..91f2f98 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
@@ -66,7 +66,7 @@
 		</div>
 		
 	</div>
-<div class="centered-text">Click on the screen to play</div>
+<div class="centered-text">Click on the TV screen to play</div>
 <div id="chatButton">
 	<span class="notification-badge"></span>
 	<img src="/static/img/homePage/bulle.png">
diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
index dffde35..04bbf5f 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
@@ -91,17 +91,50 @@
 			<div id="whatGame">
 				<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
 				<span class="line"></span>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
+				<div class="keys">
+					<div class="key">
+						<p>W</p>
+					</div>
+					<div class="key">
+						<p>S</p>
+					</div>
+					<div class="key">
+						<img src="/static/img/lobbyPage/up-arrow.svg"></img>
+					</div>
+					<div class="key">
+						<img id="down-key" src="/static/img/lobbyPage/up-arrow.svg"></img>
+					</div>
+				</div>
+				<div class="select-line">
+					<div class="select-keys">US</div>
+					<div class="not-select-keys">FR</div>
+				</div>
 			</div>
 		</div>
 		
 		<div class="menuSelected" id="multiOnlineSelected">
 			<div id="whatGame">
-				<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
+				<p>Face off in a revolutionary Pong game like never before, where the action takes place on both the floor and ceiling thanks to gravity inverters, offering a fun and unique gameplay experience!</p>
 				<span class="line"></span>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
+				<div class="keys">
+					<div class="key">
+						<p>W</p>
+					</div>
+					<div class="key">
+						<p>A</p>
+					</div>
+					<div class="key">
+						<p>S</p>
+					</div>
+					<div class="key">
+						<p>D</p>
+					</div>
+				</div>
+				<div class="select-line">
+					<div class="select-keys">US</div>
+					<div class="not-select-keys">FR</div>
+				</div>
 			</div>
-	
 			<div class="skin-select">
 				<div class="barSelection" id="bar">
 	
@@ -114,9 +147,26 @@
 
 		<div class="menuSelected" id="rankedSelected">
 			<div id="whatGame">
-				<p>AAAAAAAAAA</p>
+				<p>Prove your skills in ranked Pong mode! Compete against players worldwide, climb the leaderboard, and show everyone you've got what it takes to reach the top!</p>
 				<span class="line"></span>
-				<p>BBBBBBBBBB</p>
+				<div class="keys">
+					<div class="key">
+						<p>W</p>
+					</div>
+					<div class="key">
+						<p>A</p>
+					</div>
+					<div class="key">
+						<p>S</p>
+					</div>
+					<div class="key">
+						<p>D</p>
+					</div>
+				</div>
+				<div class="select-line">
+					<div class="select-keys">US</div>
+					<div class="not-select-keys">FR</div>
+				</div>
 			</div>
 	
 			<div class="skin-select">
@@ -131,13 +181,28 @@
 
 		<div class="menuSelected" id="tournamentSelected">
 			<div id="whatGame">
-				<p>CCCCCCCCCC</p>
+				<p>Compete in the ultimate Pong Tournament with up to 8 players, only the best will claim victory!</p>
 				<span class="line"></span>
-				<p>DDDDDDDDDD</p>
-				<br/><br/><br/><br/>
+				<div class="keys">
+					<div class="key">
+						<p>W</p>
+					</div>
+					<div class="key">
+						<p>A</p>
+					</div>
+					<div class="key">
+						<p>S</p>
+					</div>
+					<div class="key">
+						<p>D</p>
+					</div>
+				</div>
+				<div class="select-line">
+					<div class="select-keys">US</div>
+					<div class="not-select-keys">FR</div>
+				</div>
 				<span class="line"></span>
 				<p style="text-align: center;">Tournament code</p>
-				<br/>
 				<input id="tournamentCode" class="search-input" type="text" placeholder="Enter the tournament code (empty for create one)">
 			</div>
 	
diff --git a/docker-compose/requirements/nginx/static/img/lobbyPage/up-arrow.svg b/docker-compose/requirements/nginx/static/img/lobbyPage/up-arrow.svg
new file mode 100644
index 0000000..bd06fba
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/img/lobbyPage/up-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 12 12"><path fill="white" d="M6 10.5a.75.75 0 0 0 .75-.75V3.81l1.97 1.97a.75.75 0 0 0 1.06-1.06L6.53 1.47a.75.75 0 0 0-1.06 0L2.22 4.72a.75.75 0 1 0 1.06 1.06l1.97-1.97v5.94c0 .414.336.75.75.75"/></svg>
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeInvitation.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeInvitation.js
index ca9119d..4217190 100644
--- a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeInvitation.js
+++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeInvitation.js
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   typeInvitation.js                                  :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/28 00:22:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/28 16:50:17 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/02 16:35:15 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -15,7 +15,7 @@ import { pageRenderer } from '/static/javascript/main.js'
 
 function typeInvitation(content)
 {
-	CN.new("New invitation", content.username + " invit you to play !", null, () => {
+	CN.new("New invitation", content.username + " invited you to play !", null, () => {
 		pageRenderer.changePage('waitingGamePage', false, {username: content.username, id: content.invitor});
 	}, 'Join', 30000);
 }
diff --git a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
index 140e87d..a48695c 100644
--- a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
+++ b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
@@ -241,6 +241,70 @@ body {
 	align-items: center;
 }
 
+.keys {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 20px;
+	align-items: center;
+	height: 100px;
+	width: 100%;
+}
+
+.key {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	background-color: transparent;
+	border: 4px solid white;
+	width: 80px;
+	height: 80px;
+	font-size: 1.2em;
+	transition: transform 0.3s ease;
+}
+
+.key img {
+	width: 35px;
+	height: 35px;
+}
+
+#down-key {
+	transform: scaleY(-1);
+}
+
+.select-line {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 20px;
+}
+
+.select-keys {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 20px;
+	height: 35px;
+	width: 45%;
+	background-color: white;
+	color: #020202;
+	margin-top: 20px;
+}
+
+.not-select-keys {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 20px;
+	height: 35px;
+	width: 45%;
+	background-color: transparent;
+	color: white;
+	border: 2px solid white;
+	margin-top: 20px;
+}
+
 .barSelection{
 	margin: 25px;
 	width: 250px;