From c065e1cb76e806215b96da3de1f0a9b438f28fe0 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Wed, 2 Oct 2024 00:11:28 +0200
Subject: [PATCH] Site     - fix bug cause of last commit     - starting
 tournamemnt page

---
 .../file/server/server/templates/index.html   |   1 +
 .../server/server/templates/lobbyPage.html    |  30 +-
 .../server/templates/tournamentPage.html      | 123 +++++++
 .../djangoserver/file/server/server/urls.py   |   3 +-
 .../djangoserver/file/server/server/views.py  |   7 +
 .../nginx/static/img/tournamentPage/eye.svg   |   1 +
 .../nginx/static/javascript/Page.js           |   4 +-
 .../nginx/static/javascript/lobbyPage/3d.js   |   5 +-
 .../tournamentPage/TournamentPage.js          |   2 +-
 .../static/style/lobbyPage/lobbyPage.css      |   1 +
 .../style/tournamentPage/tournamentPage.css   | 314 ++++++++++++++++++
 11 files changed, 476 insertions(+), 15 deletions(-)
 create mode 100644 docker-compose/requirements/djangoserver/file/server/server/templates/tournamentPage.html
 create mode 100644 docker-compose/requirements/nginx/static/img/tournamentPage/eye.svg
 create mode 100644 docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/index.html b/docker-compose/requirements/djangoserver/file/server/server/templates/index.html
index 4955b63..b2489fb 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/index.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/index.html
@@ -15,6 +15,7 @@
 	<link rel='stylesheet' type='text/css' href='/static/style/profilPage/profil.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/settings/settings.css'>
 	<link rel='stylesheet' type='text/css' href='/static/style/index/loading.css'>
+	<link rel='stylesheet' type='text/css' href='/static/style/tournamentPage/tournamentPage.css'>
 	<script type="module" src='/static/javascript/main.js'></script>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
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 b26ef8a..dffde35 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
@@ -28,18 +28,30 @@
 	</div>
 </div>
 
-<div class="popup" id="popup-background">
+<div class="popup-background" id="popup-skin-selector">
 	<div class="popup-skin">
 		<h1>Select your skin</h1>
 		<div class="color-grid">
-			<div class="color-box"></div>
-			<div class="color-box"></div>
-			<div class="color-box"></div>
-			<div class="color-box"></div>
-			<div class="color-box"></div>
-			<div class="color-box"></div>
-			<div class="color-box"></div>
-			<div class="color-box"></div>
+			<div class="color-box color-box-skin"></div>
+			<div class="color-box color-box-skin"></div>
+			<div class="color-box color-box-skin"></div>
+			<div class="color-box color-box-skin"></div>
+			<div class="color-box color-box-skin"></div>
+			<div class="color-box color-box-skin"></div>
+			<div class="color-box color-box-skin"></div>
+			<div class="color-box color-box-skin"></div>
+		</div>
+	</div>
+</div>
+
+<div class="popup-background" id="popup-goal-selector">
+	<div class="popup-skin">
+		<h1>Select your skin</h1>
+		<div class="color-grid">
+			<div class="color-box color-box-goal"></div>
+			<div class="color-box color-box-goal"></div>
+			<div class="color-box color-box-goal"></div>
+			<div class="color-box color-box-goal"></div>
 		</div>
 	</div>
 </div>
diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/tournamentPage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/tournamentPage.html
new file mode 100644
index 0000000..bd09b7a
--- /dev/null
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/tournamentPage.html
@@ -0,0 +1,123 @@
+<div id="tournamentPage">
+	<div class="top-bracket">
+		<p id="actuality-tournament">Waiting for opponent...</p>
+		<p id="code-tournament">Code : 45HW28</p>
+	</div>
+	<div class="bracket">
+		<div class="left">
+			<div class="container">
+				<p id="user-1">username1</p>
+				<div class="circle" id="pfp-1"></div>
+				<div class="vertical-line">
+					<div class="horizontal-container">
+						<div class="horizontal-line"></div>
+						<div class="circle" id="pfp-3">
+							<div class="container" style="margin-top: 50px;">
+								<p style="position: absolute; top: -30px; " id="user-3">username3</p>
+								<p style="position: absolute; bottom: -340px;" id="user-9">username9</p>
+								<div class="vertical-line-demi">
+									<div class="horizontal-container-final">
+										<div class="horizontal-line"></div>
+										<div class="circle" id="pfp-12"></div>
+										<p id="user-12">username12</p>
+										<p style="position:absolute; right: 25px; bottom: 83px; color: white; font-size: 35px;">VS</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="circle" id="pfp-2"></div>
+				<p id="user-2">username2</p>
+				<div class="container">
+					<p id="user-4">username4</p>
+					<div class="circle" id="pfp-4"></div>
+					<div class="vertical-line">
+						<div class="horizontal-container">
+							<div class="horizontal-line"></div>
+							<div class="circle" id="pfp-9"></div>
+						</div>
+					</div>
+					<div class="circle" id="pfp-5"></div>
+					<p id="user-5">username5</p>
+				</div>
+			</div>
+		</div>
+
+		<div class="right">
+			<div class="container" style="left: 350px;">
+				<div class="horizontal-container" style="margin-top: 75px;">
+					<p style="margin-right: 10px;" id="user-58">username58</p>
+					<div class="circle" id="pfp-58">
+					</div>
+					<div class="horizontal-line"></div>
+					<div class="container" style="margin-left: -25px;">
+						<div style="display: flex; flex-direction: row; ">
+							<div class="circle" id="pfp-27">
+								<div class="horizontal-container" style="position: absolute; left: 280px; transform: translateY(-38%); display: flex; flex-direction: row; align-items: center; justify-items: center; z-index: -1;">
+									<div class="horizontal-line"></div>
+									<div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;">
+										<p style="position: absolute; top: -55px" id="user-13">username13</p>
+										<div class="circle" id="pfp-15"></div>
+										<div class="vertical-line"></div>
+										<p style="position: absolute; bottom: -55px;" id="user-14">username14</p>
+										<div class="circle" id="pfp-14"></div>
+									</div>
+								</div>
+							</div>
+							
+						</div>
+						<div class="vertical-line-demi" style="height: 260px;">
+							<p style="position: absolute; top: -105px" id="user-27">username27</p>
+							<p style="position: absolute; bottom: -105px" id="user-31">username31</p>
+							<div class="horizontal-container-final"></div>
+						</div>
+						<div style="display: flex; flex-direction: row;">
+							<div class="circle" id="pfp-31">
+								<div class="horizontal-container" style="position: absolute; left: 280px;  transform: translateY(-37%); z-index: -1;">
+									<div class="horizontal-line"></div>
+									<div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;">
+										<div class="circle" id="pfp-15"></div>
+										<p style="position: absolute; top: -55px;" id="user-15">username15</p>
+										<div class="vertical-line"></div>
+										<p style="position: absolute; bottom: -55px;" id="user-16">username16</p>
+										<div class="circle" id="pfp-16"></div>
+			
+									</div>
+		
+								</div>
+							</div>
+						</div>
+		
+					</div>
+				</div>
+				
+			</div>
+		</div>
+		<div class="all-tournament">
+			<div class="info-tournament">
+				<p id="info-title">Informations</p>
+				<div class="info">
+					<div class="alert-info">
+						<p>edbernard won against madegryc !</p>
+						<img src="/static/img/tournamentPage/eye.svg" id="eye"></img>
+					</div>
+				</div>
+			</div>
+			<div class="chat-tournament">
+				<p id="chat-title">Chat</p>
+				<div class="chat"></div>
+				<div class="inputMessageDiv">
+					<textarea type="text" id="inputMessage" placeholder="Enter your message here"></textarea>
+					<p id="sendButton">></p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="bottom">
+		<div class="buttonStartGame">
+			<p>Start</p>
+		</div>
+	</div>
+</div>
+
diff --git a/docker-compose/requirements/djangoserver/file/server/server/urls.py b/docker-compose/requirements/djangoserver/file/server/server/urls.py
index b6521db..4fb9a9a 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/urls.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/urls.py
@@ -25,7 +25,7 @@ urlpatterns = [
 	path("multiOnlineGamePage", views.multiOnlineGamePage, name='multiOnlineGamePage'),
 	path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'),
 	path("profilPage", views.profilPage, name='profilPage'),
-	# path("game", views.game, name='game'),
+	path("game", views.game, name='game'),
 	path("wait_game", views.game, name='wait_game'),
     path("login42", views.login42, name='login42'),
     path("logout", views.logout, name='logout'),
@@ -34,6 +34,7 @@ urlpatterns = [
 	path("pfp/<str>", views.pfp, name='pfp'),
 	path("banner/<str>", views.banner, name='banner'),
 	path("settingsPage", views.settingsPage, name='settingsPage'),
+	path("tournamentPage", views.tournamentPage, name='tournamentPage'),
 ]
 
 handler404 = "server.views.handler404"
diff --git a/docker-compose/requirements/djangoserver/file/server/server/views.py b/docker-compose/requirements/djangoserver/file/server/server/views.py
index a249d49..6c51511 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/views.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/views.py
@@ -158,3 +158,10 @@ def	settingsPage(request):
 	if(not request.session.get("logged_in", False)):
 		return(HttpResponse("you are not logged in",status=403))
 	return render(request, "settingsPage.html", {})
+
+def	tournamentPage(request):
+	if(request.method != "POST"):
+		return index(request)
+	if(not request.session.get("logged_in", False)):
+		return(HttpResponse("you are not logged in",status=403))
+	return render(request, "tournamentPage.html", {})
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/img/tournamentPage/eye.svg b/docker-compose/requirements/nginx/static/img/tournamentPage/eye.svg
new file mode 100644
index 0000000..2c91439
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/img/tournamentPage/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1200 1200"><path fill="#020202" d="M779.843 599.925c0 95.331-80.664 172.612-180.169 172.612c-99.504 0-180.168-77.281-180.168-172.612c0-95.332 80.664-172.612 180.168-172.612c99.505-.001 180.169 77.281 180.169 172.612M600 240.521c-103.025.457-209.814 25.538-310.904 73.557C214.038 351.2 140.89 403.574 77.394 468.219C46.208 501.218 6.431 549 0 599.981c.76 44.161 48.13 98.669 77.394 131.763c59.543 62.106 130.786 113.018 211.702 154.179C383.367 931.674 487.712 958.015 600 959.48c103.123-.464 209.888-25.834 310.866-73.557c75.058-37.122 148.243-89.534 211.74-154.179c31.185-32.999 70.962-80.782 77.394-131.763c-.76-44.161-48.13-98.671-77.394-131.764c-59.543-62.106-130.824-112.979-211.74-154.141C816.644 268.36 712.042 242.2 600 240.521m-.076 89.248c156.119 0 282.675 120.994 282.675 270.251S756.043 870.27 599.924 870.27S317.249 749.275 317.249 600.02c0-149.257 126.556-270.251 282.675-270.251"/></svg>
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/Page.js b/docker-compose/requirements/nginx/static/javascript/Page.js
index e7ad144..ac97f04 100644
--- a/docker-compose/requirements/nginx/static/javascript/Page.js
+++ b/docker-compose/requirements/nginx/static/javascript/Page.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/25 00:00:21 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/01 15:12:50 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/01 23:03:17 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -32,7 +32,7 @@ class Page
 		{suffix: false, url:'/wait_game', servUrl: '/waitingGamePage', class: WaitingGamePage, name: 'waitingGamePage', title: 'METH - Wait for a game'},
 		{suffix: true, url:'/profil', servUrl: '/profilPage', class: ProfilPage, name: 'profilPage', title: 'METH - Profil'},
 		{suffix: false, url:'/settings', servUrl: '/settingsPage', class: settingsPage, name: 'settingsPage', title: 'METH - Settings'},
-		// {suffix: true, url:'/tournament', servUrl: '/tournamentPage', class: TournamentPage, name: 'tournamentPage', title: 'METH - Tournament'},
+		{suffix: true, url:'/tournament', servUrl: '/tournamentPage', class: TournamentPage, name: 'tournamentPage', title: 'METH - Tournament'},
 	]
 
 	constructor()
diff --git a/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js b/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
index 082299c..ec3df9e 100644
--- a/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
+++ b/docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/13 13:59:46 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/01 19:55:19 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/02 00:01:05 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -87,7 +87,8 @@ class barSelecter
 	{
 		const	popup	=	document.getElementById('popup-skin-selector');
 
-		if (event.target.getAttribute('class') == 'popup-skin-selector')
+		console.log("Gros fdp de tes morts")
+		if (event.target.getAttribute('id') == 'popup-skin-selector')
 			popup.style.display = 'none';
 	}
 
diff --git a/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js b/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
index d1e1532..fc497ea 100644
--- a/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
+++ b/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/10/01 13:42:29 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/01 18:36:53 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/01 23:04:34 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
diff --git a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
index 041459c..140e87d 100644
--- a/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
+++ b/docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
@@ -84,6 +84,7 @@ body {
 	background-color: rgba(0, 0, 0, 0.5);
 	justify-content: center;
 	align-items: center;
+	backdrop-filter: blur(5px);
 	z-index: 700;
 }
 
diff --git a/docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css b/docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
new file mode 100644
index 0000000..aefd86c
--- /dev/null
+++ b/docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
@@ -0,0 +1,314 @@
+#tournamentPage {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #020202;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+#tournamentPage .bracket {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 70%;
+  transform: scale(0.8);
+}
+
+#tournamentPage .top-bracket {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100px;
+}
+
+#tournamentPage #actuality-tournament {
+  color: white;
+  font-size: 30px;
+  margin: 0;
+}
+
+#tournamentPage #code-tournament {
+  color: #BFBFBF;
+  font-size: 20px;
+  margin: 0;
+}
+
+#tournamentPage p {
+  color: #BFBFBF;
+  margin: 0;
+}
+
+#tournamentPage .left{
+  padding: 82px;
+  /* width: 50%; */
+  height: 100%;
+}
+
+#tournamentPage .right{
+  padding: 82px;
+  padding-top: 120px;
+  /* width: 50%; */
+  height: 100%;
+}
+
+#tournamentPage .container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#tournamentPage .mid-container {
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+  margin-top: 50px;
+}
+
+#tournamentPage .circle {
+  width: 50px;
+  height: 50px;
+  background-color: #D9D9D9;
+  border-radius: 50%;
+}
+
+#tournamentPage .vertical-line {
+  width: 6px;
+  height: 100px;
+  background-color: #BFBFBF;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+#tournamentPage .vertical-line-demi {
+  width: 6px;
+  height: 300px;
+  background-color: #BFBFBF;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+#tournamentPage .horizontal-container {
+  display: flex;
+  position: relative;
+  align-items: center;
+  margin-left: auto;
+  left: 75px;
+}
+
+#tournamentPage .horizontal-container-right {
+  display: flex;
+  position: relative;
+  align-items: center;
+  margin-left: auto;
+  left: 50px;
+}
+
+#tournamentPage .horizontal-container-final {
+  display: flex;
+  position: relative;
+  align-items: center;
+  margin-left: auto;
+  left: 130px;
+  padding-bottom: 50px;
+}
+
+#tournamentPage .horizontal-container-final p {
+  margin-left: 10px;
+}
+
+#tournamentPage .horizontal-line {
+  width: 100px;
+  height: 6px;
+  background-color: #BFBFBF;
+}
+
+#tournamentPage .all-tournament {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 36%;
+  height: 700px;
+  margin-left: 400px;
+  margin-bottom: 20px;
+}
+
+#tournamentPage .info-tournament {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #131313;
+  padding: 20px;
+  margin-bottom: 25px;
+}
+
+#tournamentPage .info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 95%;
+  height: 100%;
+  background-color: #090909;
+  padding: 20px;
+}
+
+#tournamentPage #info-title {
+  color: white;
+  font-size: 20px;
+  margin-bottom: 15px;
+}
+
+#tournamentPage .alert-info {
+  display: flex;
+  /* flex-direction: row; */
+  justify-content: space-between;
+  width: 90%;
+  height: 10%;
+  background-color: #BFBFBF;
+  padding: 20px;
+}
+
+#tournamentPage .alert-info p{
+  color: #020202;
+  font-size: 15px;
+}
+
+#tournamentPage .alert-info img{
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+#tournamentPage .chat-tournament {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #131313;
+  padding: 20px;
+}
+
+#tournamentPage .chat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: calc(100% - 40px);
+  height: 100%;
+  background-color: #090909;
+  padding: 20px;
+}
+
+#tournamentPage #chat-title {
+  color: white;
+  font-size: 20px;
+  margin-bottom: 15px;
+}
+
+#tournamentPage .message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: purple;
+  padding: 20px;
+}
+
+#tournamentPage .message-user {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: orange;
+  padding: 20px;
+}
+
+#tournamentPage #chat-input-tournament {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: red;
+  padding: 20px;
+}
+
+#tournamentPage .inputMessageDiv {
+  margin: 0;
+  width: 100%;
+  height: 50px;
+  background-color: #0B0B0B;
+  bottom: 10px;
+  color: white;
+  display: flex;
+  flex-direction: row;
+}
+
+#tournamentPage #inputMessage {
+  user-select: text;
+  background-color: #0f0f0f;
+  width: 100%;
+  overflow: hidden;
+  resize: none;
+  border: 0;
+  color: white;
+  padding: 15px 5% 15px 5%;
+}
+
+#tournamentPage .inputMessageDiv p {
+  margin: 0;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-family: "Poppins";
+  font-weight: bolder;
+  font-size: 35px;
+  margin-top: -2px;
+}
+
+#tournamentPage .bottom {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	margin-block: 25px;
+}
+
+#tournamentPage .buttonStartGame {
+	background-color: white;
+	padding: 10px;
+	cursor: pointer;
+	width: 150px;
+  height: 30px;
+	text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+	transition: transform 0.3s ease;
+}
+
+#tournamentPage .buttonStartGame p {
+  color: #020202;
+}
+
+#tournamentPage .buttonStartGame:hover {
+	transform: scale(1.1);
+}
\ No newline at end of file