rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

(tic-tac-toe): Added button to restart game.

Browse source
This commit is contained in:
Alessandro Petitcollin 2025-12-07 01:31:29 +01:00
parent 9653b0cbe6
commit fb1b69a0ae
2 changed files with 35 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/pages/ttt/ttt.html
View file

@ -10,4 +10,7 @@
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
</div> </div>
</div> <button id="ttt-restart-btn" class="mt-8 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Restart Game
</button>
</div>

37
frontend/src/pages/ttt/ttt.ts
View file

@ -75,6 +75,12 @@ class TTC {
return 'ongoing'; return 'ongoing';
} }
public reset(): void {
this.board = [null,null,null,null,null,null,null,null,null];
this.currentPlayer = 'X';
this.isGameOver = false;
};
// Attempts to place the current player's mark on the specified cell. // Attempts to place the current player's mark on the specified cell.
// @param idx - The index of the board (0-8) to place the mark. // @param idx - The index of the board (0-8) to place the mark.
// @returns The resulting game state, or `invalidMove` if the move is illegal. // @returns The resulting game state, or `invalidMove` if the move is illegal.
@ -119,13 +125,24 @@ async function handleTTT(): Promise<RouteHandlerReturn>
return { return {
html: tttPage, html: tttPage,
postInsert: async (app) => { postInsert: async (app) => {
let cells = app?.querySelectorAll<HTMLDivElement>(".ttt-grid-cell"); if (!app) {
return;
}
const cells = app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
const restartBtn = app.querySelector<HTMLButtonElement>("#ttt-restart-btn");
const updateUI = () => {
const board_state = board.getBoard();
board_state.forEach((cell_state, cell_idx) => {
cells[cell_idx].innerText = cell_state !== null ? cell_state : " ";
});
};
console.log(cells); console.log(cells);
cells?.forEach(function (c, idx) { cells?.forEach(function (c, idx) {
c.addEventListener('click', () => c.addEventListener('click', () => {
{
const result = board.makeMove(idx); const result = board.makeMove(idx);
switch(result) switch(result)
{ {
@ -140,6 +157,7 @@ async function handleTTT(): Promise<RouteHandlerReturn>
case ('winX'): { case ('winX'): {
showSuccess('X won'); showSuccess('X won');
app?.querySelector('.ttt-grid')?.classList.add('pointer-events-none');
break; break;
} }
case ('winO'): { case ('winO'): {
@ -152,9 +170,16 @@ async function handleTTT(): Promise<RouteHandlerReturn>
const board_state = board.getBoard(); const board_state = board.getBoard();
board_state.forEach( function (cell_state, cell_idx) { board_state.forEach( function (cell_state, cell_idx) {
cells[cell_idx].innerText = cell_state !== null ? cell_state : " "; cells[cell_idx].innerText = cell_state !== null ? cell_state : " ";
}) });
})
}) updateUI();
});
});
restartBtn?.addEventListener('click', () => {
board.reset();
updateUI();
showInfo('Game Restarted');
});
} }
} }
} }