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

add: TicTacToe online view

Browse Source
This commit is contained in:
Namonay 2024-03-22 16:26:37 +01:00 committed by AdrienLSH
parent 2c508fab46
commit 381159400f
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/static/css/tictactoe.css Normal file
View File

@ -0,0 +1,5 @@
#canva {
width: 660px;
height:660px;
margin: 0px auto;
}

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

@ -20,8 +20,7 @@ export default class extends AbstractAuthenticatedView {
else else
{ {
let nb_players = this.input.value; let nb_players = this.input.value;
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players, this.gamemode);
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players);
this.button.innerHTML = lang.get("matchmakingStopSearch"); this.button.innerHTML = lang.get("matchmakingStopSearch");
} }
@ -36,7 +35,10 @@ export default class extends AbstractAuthenticatedView {
{ {
if (data.detail === "game_found") if (data.detail === "game_found")
{ {
navigateTo(`/games/${data.game_id}`); if (this.gamemode.value == "pong")
navigateTo(`/games/${data.game_id}`);
else
navigateTo(`/games/${this.gamemode.value}/${data.game_id}`);
return; return;
} }
this.display_data(data); this.display_data(data);
@ -52,7 +54,8 @@ 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");
this.gamemode = document.getElementById("game-choice");
let container = document.getElementById("nb-players-container"); let container = document.getElementById("nb-players-container");
let gameChoice = document.getElementById("game-choice"); let gameChoice = document.getElementById("game-choice");
@ -68,7 +71,7 @@ export default class extends AbstractAuthenticatedView {
gameChoice.addEventListener("change", function() gameChoice.addEventListener("change", function()
{ {
if (this.value === "TicTacToe") if (this.value === "tictactoe")
{ {
container.style.display = 'none'; container.style.display = 'none';
document.getElementById("nb-players-input").value = 2; document.getElementById("nb-players-input").value = 2;
@ -94,8 +97,8 @@ export default class extends AbstractAuthenticatedView {
<div> <div>
<div class='form-floating mb-2'> <div class='form-floating mb-2'>
<select class='form-control' id='game-choice'> <select class='form-control' id='game-choice'>
<option value='Pong'>Pong</option> <option value='pong'>Pong</option>
<option value='TicTacToe'>TicTacToe</option> <option value='tictactoe'>ticTacToe</option>
</select> </select>
<label for='game-choice'>${lang.get("gamemodeChoice")}</label> <label for='game-choice'>${lang.get("gamemodeChoice")}</label>
</div> </div>

19
frontend/static/js/views/TicTacToeOnlineView.js
View File

@ -1,21 +1,27 @@
import AbstractView from "./abstracts/AbstractView.js"; import AbstractView from "./abstracts/AbstractView.js";
import { lang } from "../index.js";
import { TicTacToe } from "../api/game/TicTacToeGame.js"
export default class extends AbstractView export default class extends AbstractView
{ {
constructor(params, titleKey) constructor(params, titleKey)
{ {
super(params, lang.get('ticTacToeTitle'));
this.params = params; this.params = params;
this.titleKey = titleKey; this.titleKey = titleKey;
this.height = 660;
this.width = 660;
} }
async postInit() async postInit()
{ {
this.Morpion = new TicTacToe(this.height, this.width, 60, 60, document.getElementById("Morpion"));
this.Morpion.DrawSuperMorpion();
} }
async leavePage() async leavePage()
{ {
} }
setTitle() setTitle()
@ -24,7 +30,12 @@ export default class extends AbstractView
} }
async getHtml() { async getHtml() {
return `<h1>Work in progress bozo</h1> return `
<img src="https://cdn.discordapp.com/attachments/1089527100681240716/1219360784224616498/Snapinsta.app_424926392_1109913580191337_8974514051687331181_n_1080.jpg?ex=660b0539&is=65f89039&hm=25dbcab44e50ec8ca3019dab476293a1001c224c6b6312bd9e30fba1f72667b5&">`; <link rel="stylesheet" href="/static/css/tictactoe.css">
<div id="canva">
<canvas id="Morpion" width="${this.width}" height="${this.height}"></canvas>
</div>
<h1>Work in progress bozo</h1>
<img src="https://cdn.discordapp.com/attachments/1089527100681240716/1219360784224616498/Snapinsta.app_424926392_1109913580191337_8974514051687331181_n_1080.jpg?ex=660b0539&is=65f89039&hm=25dbcab44e50ec8ca3019dab476293a1001c224c6b6312bd9e30fba1f72667b5&">`;
} }
} }