tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- add checkbox to play with bot in lobby page
   - fix bug when input for nb bot is null
   - secure request 0 tournament
   - change time to reconnect in websocket
Game
   - fix bug camera when player move up to down or reverse in goal animation
This commit is contained in:
Kum1ta
2024-10-12 17:18:39 +02:00
parent be60de564a
commit 7f7bb7457a
8 changed files with 91 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
View File

@ -124,6 +124,14 @@
<div class="select-keys USButton">US</div>
<div class="not-select-keys FRButton">FR</div>
</div>
<span class="line" id="tournament-line1"></span>
<div style="display: flex; flex-direction: row; justify-content: space-between; padding-inline: 10px;">
<p>With bot</p>
<label class="switch">
<input type="checkbox" id="checkBoxBot">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="skin-select">
<div class="barSelection" id="bar">

3
docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/10/09 15:24:50 by edbernar ### ########.fr */
/* Updated: 2024/10/12 17:15:26 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -214,6 +214,7 @@ class goalSelecter
this.renderer.setAnimationLoop(this.#loop.bind(this));
div.removeEventListener('click', this.boundshowGoals);
div.addEventListener('click', this.boundshowGoals);
console.warn("gerer le resize pour les bar et goal selector");
}
showGoals()

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/10/10 17:30:36 by edbernar ### ########.fr */
/* Updated: 2024/10/12 17:08:11 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -32,6 +32,7 @@ let barSelector = null;
let goalSelector = null;
let timeout = null;
let layoutSelected = {US: true, FR: false};
let withBot = false;
class LobbyPage
{
@ -45,7 +46,9 @@ class LobbyPage
const tournamentCodeInput = document.getElementById('tournamentCode');
const func = [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
const nbBot = document.getElementById('nbBot');
const checkBoxBot = document.getElementById('checkBoxBot');
withBot = false;
document.body.style.opacity = 1;
if (userMeInfo.id == -1)
waitForLogin().then(() => usernameP.innerHTML = userMeInfo.username);
@ -92,6 +95,7 @@ class LobbyPage
startButton.addEventListener('click', startMode);
methButton.addEventListener('click', goBackHome);
document.getElementsByClassName('menuSelected')[gameMode].style.display = 'flex';
checkBoxBot.addEventListener('click', () => withBot = !withBot);
}
static dispose()
@ -188,12 +192,13 @@ function startMatchmaking(ranked)
function startTournmament()
{
const code = document.getElementById('tournamentCode').value;
const nbBot = document.getElementById('nbBot').value;
let nbBot = document.getElementById('nbBot').value;
if (code != '')
sendRequest("tournament", {action: 0, code: code});
else if (nbBot != '')
else
{
nbBot = nbBot == '' ? 0 : nbBot;
if (parseInt(nbBot) >= 0 && parseInt(nbBot) <= 7)
sendRequest("tournament", {action: 0, code: '', nbBot: parseInt(nbBot)});
else
@ -435,4 +440,4 @@ function changeDisplayedLayout(isUS)
}
}
export { LobbyPage, layoutSelected };
export { LobbyPage, layoutSelected, withBot };

5
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/10/11 11:08:30 by edbernar ### ########.fr */
/* Updated: 2024/10/12 16:58:41 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -338,6 +338,8 @@ class Player
if (this.object.position.y >= this.limits.up)
{
clearInterval(this.interval);
this.object.position.y = this.limits.up;
this.camera.position.y = 2.34;
this.interval = null;
}
}, 5);
@ -356,6 +358,7 @@ class Player
clearInterval(this.interval);
this.interval = null;
this.object.position.y = this.limits.down;
this.camera.position.y = 1;
}
}, 5);
}

8
docker-compose/requirements/nginx/static/javascript/typeResponse/typeTournament.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:29:50 by edbernar #+# #+# */
/* Updated: 2024/10/08 13:03:19 by edbernar ### ########.fr */
/* Updated: 2024/10/12 16:27:44 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -47,11 +47,11 @@ function typeTournament(content)
function joinTournament(content)
{
if (!content.exist)
if (content.exist != 'undefined' && !content.exist)
CN.new("Information", "No game for this code");
else if (content.isFull)
else if (content.isFull != 'undefined' && content.isFull)
CN.new("Information", "Cannot join because the game is full");
else if (content.started)
else if (content.started != 'undefined' && content.started)
CN.new("Information", "This tournament has already started");
else
{

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

@ -6,11 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/14 21:20:45 by edbernar #+# #+# */
/* Updated: 2024/10/11 10:54:35 by edbernar ### ########.fr */
/* Updated: 2024/10/12 17:10:44 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { lastSelected, lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js';
import { withBot } from '/static/javascript/lobbyPage/main.js';
import { sendRequest } from "/static/javascript/websocket.js";
import { pageRenderer } from '/static/javascript/main.js'
@ -47,7 +48,7 @@ class WaitingGamePage
if (opponentInfo && typeof(opponentInfo) != 'boolean')
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, opponent: opponentInfo.id});
else
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, isRanked: opponentInfo ? true : false});
sendRequest("game", {action: 0, skinId: lastSelected ? lastSelected.id : 0, goalId: goalId, isRanked: opponentInfo ? true : false, bot: withBot});
timeout = null;
}, isTournament ? 1500 : 500);
if (!opponentInfo || !isTournament)

4
docker-compose/requirements/nginx/static/javascript/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/10/09 11:03:11 by edbernar ### ########.fr */
/* Updated: 2024/10/12 16:30:37 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -100,7 +100,7 @@ function launchSocket()
{
setTimeout(() => {
launchSocket();
}, 500);
}, 5000);
}
};
}

60
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

@ -64,7 +64,6 @@ body {
.main{
padding-block: 45px;
padding-inline: 150px;
display: flex;
flex-direction: row;
gap: 9vw;
@ -543,6 +542,65 @@ body {
font-size: 0.8rem;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
@media (max-aspect-ratio: 1/1){
.main {
flex-direction: column;