starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

view: Removed online tictactoe and put it in single Matchmaking view

Browse Source
This commit is contained in:
Namonay 2024-03-22 13:36:47 +01:00 committed by AdrienLSH
parent 522e685a01
commit 0ea07200fd
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/static/js/views/HomeView.js
View File

@ -12,7 +12,6 @@ export default class extends AbstractAuthenticatedView {
<h1>${lang.get('homeTitle', 'Home')}</h1> <h1>${lang.get('homeTitle', 'Home')}</h1>
<a href="/matchmaking" data-link>${lang.get('homeOnline', 'Play online')}</a> <a href="/matchmaking" data-link>${lang.get('homeOnline', 'Play online')}</a>
<a href="/games/offline" data-link>${lang.get('homeOffline', 'Play offline')}</a> <a href="/games/offline" data-link>${lang.get('homeOffline', 'Play offline')}</a>
<a href="/tictactoeonline" data-link>${lang.get('ticTacToeOnline')}</a>
<a href="/tictactoe" data-link>${lang.get('ticTacToe')}</a> <a href="/tictactoe" data-link>${lang.get('ticTacToe')}</a>
<a href="/settings" data-link>${lang.get('homeSettings', 'Settings')}</a> <a href="/settings" data-link>${lang.get('homeSettings', 'Settings')}</a>
<a href="/logout" data-link>${lang.get('homeLogout', 'Logout')}</a> <a href="/logout" data-link>${lang.get('homeLogout', 'Logout')}</a>

23
frontend/static/js/views/MatchMakingView.js
View File

@ -53,6 +53,9 @@ export default class extends AbstractAuthenticatedView {
this.button = document.getElementById("toggle-search"); this.button = document.getElementById("toggle-search");
this.input = document.getElementById("nb-players-input"); this.input = document.getElementById("nb-players-input");
let container = document.getElementById("nb-players-container");
let gameChoice = document.getElementById("game-choice");
this.button.onclick = this.toggle_search.bind(this); this.button.onclick = this.toggle_search.bind(this);
this.input.addEventListener('keydown', async ev => { this.input.addEventListener('keydown', async ev => {
@ -63,6 +66,17 @@ export default class extends AbstractAuthenticatedView {
await this.toggle_search.bind(this); await this.toggle_search.bind(this);
}); });
gameChoice.addEventListener("change", function()
{
if (this.value === "TicTacToe")
{
container.style.display = 'none';
document.getElementById("nb-players-input").value = 2;
}
else
container.style.display = 'block';
})
let update = () => { let update = () => {
this.button.disabled = (this.input.value < 2 || this.input.value > 4); this.button.disabled = (this.input.value < 2 || this.input.value > 4);
}; };
@ -77,7 +91,15 @@ export default class extends AbstractAuthenticatedView {
<div class='container-fluid'> <div class='container-fluid'>
<div class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'> <div class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
<h4 class='text-center fw-semibold mb-4' id="title">${lang.get("matchmakingTitle")}</h4> <h4 class='text-center fw-semibold mb-4' id="title">${lang.get("matchmakingTitle")}</h4>
<div>
<div class='form-floating mb-2'> <div class='form-floating mb-2'>
<select class='form-control' id='game-choice'>
<option value='Pong'>Pong</option>
<option value='TicTacToe'>TicTacToe</option>
</select>
<label for='game-choice'>${lang.get("gamemodeChoice")}</label>
</div>
<div class='form-floating mb-2' id='nb-players-container'>
<input type='number' min='2' value='2' max='4' class='form-control' id='nb-players-input' placeholder='${lang.get("matchmakingNbPlayers")}'> <input type='number' min='2' value='2' max='4' class='form-control' id='nb-players-input' placeholder='${lang.get("matchmakingNbPlayers")}'>
<label for='nb-players-input' id='username-label'>${lang.get("matchmakingNbPlayers")}</label> <label for='nb-players-input' id='username-label'>${lang.get("matchmakingNbPlayers")}</label>
<span class='text-danger' id='username'></span> <span class='text-danger' id='username'></span>
@ -88,6 +110,7 @@ export default class extends AbstractAuthenticatedView {
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
} }