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

(tic-tac-toe): Added history button to check player's tic-tac-toe matches history

Browse source
This commit is contained in:
apetitco 2026-01-13 15:42:32 +01:00 • committed by Nigel
parent 5eec958663
commit deb391807a
3 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -82,3 +82,8 @@
font-bold font-bold
hover:bg-gray-500 hover:bg-gray-500
} }
#historyBtn {
@apply
text-white
}

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

@ -1,5 +1,6 @@
<div class="displaybox"> <div class="displaybox">
<div class="mainboxDisplay" id="mainbox"> <div class="mainboxDisplay" id="mainbox">
<button class="btn-style absolute top-4 left-6" id="historyBtn">History</button>
<button class="btn-style absolute top-4 right-6" id="JoinQueueBtn">Join Queue</button> <button class="btn-style absolute top-4 right-6" id="JoinQueueBtn">Join Queue</button>
<h1 class="text-3xl font-bold text-gray-800"> <h1 class="text-3xl font-bold text-gray-800">
Tic-tac-toe Box<span id="t-username"></span> Tic-tac-toe Box<span id="t-username"></span>

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

@ -1,5 +1,5 @@
import "./ttt.css" import "./ttt.css"
import {addRoute, setTitle, type RouteHandlerReturn} from "@app/routing"; import {addRoute, setTitle, navigateTo, type RouteHandlerReturn} from "@app/routing";
import tttPage from "./ttt.html?raw"; import tttPage from "./ttt.html?raw";
import {showError, showInfo} from "@app/toast"; import {showError, showInfo} from "@app/toast";
import {io} from "socket.io-client"; import {io} from "socket.io-client";
@ -54,13 +54,14 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
if (user === null) if (user === null)
return; return;
const userXString = document.getElementById("playerX-name");
const userOString = document.getElementById("playerO-name");
const currentPlayerIndicator = document.getElementById("currentPlayer"); const currentPlayerIndicator = document.getElementById("currentPlayer");
const currentPlayerTimer = document.getElementById("currentPlayerTimer");
const historyButton = document.getElementById("historyBtn");
const joinQueueBtn = document.getElementById("JoinQueueBtn"); const joinQueueBtn = document.getElementById("JoinQueueBtn");
const currentPlayerTimer = document.getElementById("currentPlayerTimer")
const result_message = document.getElementById("ttt-end-screen"); const result_message = document.getElementById("ttt-end-screen");
if (!userXString || !userOString || !currentPlayerIndicator || !joinQueueBtn || !currentPlayerTimer || !result_message) { const userOString = document.getElementById("playerO-name");
const userXString = document.getElementById("playerX-name");
if (!currentPlayerIndicator || !currentPlayerTimer || !historyButton || !joinQueueBtn || !result_message || !userOString || !userXString) {
return showError('fatal error'); return showError('fatal error');
} }
@ -79,6 +80,11 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
socket.emit("enqueue"); socket.emit("enqueue");
}); });
//TODO: Redirect to /app/ttt
historyButton.addEventListener("click", () => {
navigateTo("/app/ttt/games");
});
let curGame: CurrentGameInfo | null = null; let curGame: CurrentGameInfo | null = null;
let curGameX: { id: string, name: string } | null = null; let curGameX: { id: string, name: string } | null = null;
let curGameO: { id: string, name: string } | null = null; let curGameO: { id: string, name: string } | null = null;