Site

- Started multi online game
Django
    - Add some path

docker-compose/requirements/djangoserver/file/server/server/templates/waitingGamePage.html

@@ -0,0 +1,9 @@
+<div id="topBar">
+	<h1>PTME</h1>
+</div>
+<div style='color: white; position: absolute; left: 50%; top: 50%; text-align: center; transform: translate(-50%, -50%); font-size: 5vh;'>
+	<p id="sentence">Waiting for other players to start the game</p>
+</div>
+<div id="returnToLobbyButton" style="position: absolute; bottom: 50px; left: 50%; transform: translate(-50%, 0); background-color: white; padding: 10px; cursor: pointer;">
+	<p>Return to lobby</p>
+</div>

docker-compose/requirements/djangoserver/file/server/server/urls.py

@@ -22,7 +22,9 @@ urlpatterns = [
 	path("homePage",views.homePage, name='homePage'),
 	path("lobbyPage", views.lobbyPage, name='lobbyPage'),
 	path("multiLocalGamePage", views.multiLocalGamePage, name='multiLocalGamePage'),
+	path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'),
 	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'),
 	path("verify", views.verify, name='verify'),

docker-compose/requirements/djangoserver/file/server/server/views.py

@@ -37,11 +37,23 @@ def multiLocalGamePage(request):
 		return(HttpResponse("you are not logged in",status=403))
 	return render(request, "multiLocalGamePage.html", {})
 
+def waitingGamePage(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, "waitingGamePage.html", {})
+
 def game(request):
 	if(not request.session.get("logged_in", False)):
 		return(HttpResponse("you are not logged in",status=403))
 	return redirect("/lobby")
 
+def wait_game(request):
+	if(not request.session.get("logged_in", False)):
+		return(HttpResponse("you are not logged in",status=403))
+	return redirect("/lobby")
+
 def verify(request):
 	req_token = request.GET.get('token', None)
 	if(req_token == None):

docker-compose/requirements/nginx/static/javascript/Page.js

@@ -6,11 +6,12 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/25 00:00:21 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/14 00:57:30 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/14 21:36:06 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import { multiLocalGamePage } from "/static/javascript/multiLocalGame/multiLocalGamePage.js"
+import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
 import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
 import { HomePage } from "/static/javascript/homePage/main.js";
 
@@ -21,6 +22,7 @@ class Page
 		{url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'PTME - Home'},
 		{url:'/lobby', servUrl: '/lobbyPage', class: LobbyPage, name: 'lobbyPage', title: 'PTME - Lobby'},
 		{url:'/game', servUrl: '/multiLocalGamePage', class: multiLocalGamePage, name: 'multiLocalGamePage', title: 'PTME - Game'},
+		{url:'/wait_game', servUrl: '/waitingGamePage', class: WaitingGamePage, name: 'waitingGamePage', title: 'PTME - Wait for a game'},
 	]
 
 	constructor()

docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/09/14 01:28:25 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/14 23:21:38 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -32,7 +32,6 @@ class LobbyPage
 		const	startButton = document.getElementsByClassName('buttonStartGame')[0];
 
 		listSelectCard = document.getElementsByClassName('select-card');
-		gameMode = 0;
 		document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
 		document.getElementById('closePopupBtn').addEventListener('click', hideGameMode);
 		window.addEventListener('click', closeClickOutsiteGameMode);
@@ -40,6 +39,7 @@ class LobbyPage
 		listSelectCard[1].addEventListener('click', selectGameModeTwo);
 		listSelectCard[2].addEventListener('click', selectGameModeThree);
 		listSelectCard[3].addEventListener('click', selectGameModeFour);
+		document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[gameMode].innerHTML;
 		for (let i = 0; i < document.body.children.length; i++)
 		{
 			document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
@@ -53,7 +53,6 @@ class LobbyPage
 	{
 		const	startButton = document.getElementsByClassName('buttonStartGame')[0];
 
-		gameMode = 0;
 		startButton.removeEventListener('click', startMode);
 		document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
 		document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
@@ -76,7 +75,7 @@ function startMode()
 	if (gameMode == 0)
 		startMultiLocal();
 	else if (gameMode == 1)
-		alert("Not implemented");
+		startMatchmaking();
 	else if (gameMode == 2)
 		alert("Not implemented");
 	else if (gameMode == 3)
@@ -85,7 +84,8 @@ function startMode()
 
 function startMultiLocal()
 {
-	console.log(1);
+	document.body.style.animation = "none";
+	document.body.offsetHeight;
 	document.body.style.animation = "startGameAnim 0.5s";
 	document.body.style.opacity = 0;
 	setTimeout(() => {
@@ -93,6 +93,17 @@ function startMultiLocal()
 	}, 500);
 }
 
+function startMatchmaking()
+{
+	document.body.style.animation = "none";
+	document.body.offsetHeight;
+	document.body.style.animation = "startGameAnim 0.5s";
+	document.body.style.opacity = 0;
+	setTimeout(() => {
+		pageRenderer.changePage("waitingGamePage");
+	}, 500);
+}
+
 function showGameMode()
 {
 	document.getElementById('loginPopup').style.display = 'flex';

docker-compose/requirements/nginx/static/javascript/login/main.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/13 11:12:15 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/14 23:59:41 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/javascript/typeResponse/typeLogin.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/02 00:39:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/12 18:23:13 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/09/14 23:59:52 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

docker-compose/requirements/nginx/static/javascript/waitingGame/main.js

@@ -0,0 +1,62 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   main.js                                            :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/09/14 21:20:45 by edbernar          #+#    #+#             */
+/*   Updated: 2024/09/14 23:24:24 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+import { sendRequest } from "/static/javascript/websocket.js";
+import { pageRenderer } from '/static/javascript/main.js'
+
+let	intervalPoints = null;
+
+class WaitingGamePage
+{
+	static create()
+	{
+		const	returnButton	= document.getElementById('returnToLobbyButton');
+		const	sentence		= document.getElementById('sentence');
+		const	text			= sentence.innerText;
+		let		points			= "";
+
+		document.body.style.opacity = 1;
+		for (let i = 0; i < document.body.children.length; i++)
+		{
+			document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
+		}
+		intervalPoints = setInterval(() => {
+			if (points.length < 3)
+				points += '.';
+			else
+				points = '';
+			sentence.innerText = text + points;
+		}, 500);
+		sendRequest("game", {action: 0})
+		returnButton.addEventListener('click', returnToLobby);
+	}
+
+	static dispose()
+	{
+		if (intervalPoints)
+			clearInterval(intervalPoints);
+		intervalPoints = null;
+	}
+}
+
+function returnToLobby()
+{
+	for (let i = 0; i < document.body.children.length; i++)
+	{
+		document.body.children[i].style.animation = "anim3 0.6s";
+	}
+	setTimeout(() => {
+		pageRenderer.changePage('lobbyPage');
+	}, 500);
+}
+
+export { WaitingGamePage };

docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css

@@ -30,6 +30,15 @@
 	}
 }
 
+@keyframes anim3 {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
 * {
 	margin: 0;
 	padding: 0;