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

Initial commit

Browse source
This commit is contained in:
Alessandro Petitcollin 2026-01-10 18:12:04 +01:00 • committed by Maix0
parent 19cae8ae63
commit 830d733f1b
1 changed files with 165 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import "./ttt.css"
import { addRoute, type RouteHandlerReturn } from "@app/routing";
import {addRoute, type RouteHandlerReturn} from "@app/routing";
import tttPage from "./ttt.html?raw";
import { showError, showInfo, showSuccess, showWarn } from "@app/toast";
import { io } from "socket.io-client";
import type { GameUpdate, CSocket as Socket } from "./socket";
import { updateUser } from "@app/auth";
import {showError, showInfo, showSuccess, showWarn} from "@app/toast";
import {io} from "socket.io-client";
import type {CSocket as Socket, GameUpdate} from "./socket";
import {updateUser} from "@app/auth";
import client from "@app/api";
@ -19,7 +19,7 @@ enum QueueState {
InQueue = "In Queue",
InGame = "In Game",
Idle = "Join Queue",
};
}
document.addEventListener("ft:pageChange", () => {
if (window.__state.tttSock !== undefined) window.__state.tttSock.close();
@ -30,7 +30,7 @@ document.addEventListener("ft:pageChange", () => {
export function getSocket(): Socket {
if (window.__state.tttSock === undefined)
window.__state.tttSock = io(window.location.host, { path: "/api/ttt/socket.io/" }) as any as Socket;
window.__state.tttSock = io(window.location.host, {path: "/api/ttt/socket.io/"}) as any as Socket;
if (window.__state.tttkeepAliveInterval === undefined)
window.__state.tttkeepAliveInterval = setInterval(() => window.__state.tttSock?.emit('keepalive'), 100);
return window.__state.tttSock;
@ -77,8 +77,8 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
});
let curGame: CurrentGameInfo | null = null;
let curGameX: {id: string, name: string} | null = null;
let curGameO: {id: string, name: string} | null = null;
let curGameX: { id: string, name: string } | null = null;
let curGameO: { id: string, name: string } | null = null;
socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));
socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
@ -87,7 +87,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
currentPlayerTimer.innerText = "";
joinQueueBtn.innerText = QueueState.InGame;
curGame = { ...gameState, lastState: null };
curGame = {...gameState, lastState: null};
let resX = await client.getUser({user: curGame.playerX});
@ -109,8 +109,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
userOString.classList.remove('text-gray-800');
userXString.classList.remove('text-red-800');
userXString.classList.add('text-gray-800');
}
else if (user.id === curGameX.id) {
} else if (user.id === curGameX.id) {
userXString.classList.add('text-red-800');
userXString.classList.remove('text-gray-800');
userOString.classList.remove('text-red-800');
@ -129,6 +128,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
};
const makeEnd = (type: 'win' | 'conceded' | 'draw', player: 'X' | 'O') => {
// TODO: Enhance the draw notification
if (type === 'draw') {
showWarn('It\'s a draw !')
}
@ -145,6 +145,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
default:
return;
}
// TODO: Enhance the win/loss notification
if (youWin)
showSuccess('You won the game !');
else
@ -165,8 +166,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
curGame = {...u, lastState: curGame.lastState};
if (curGame.currentPlayer === 'X')
{
if (curGame.currentPlayer === 'X') {
currentPlayerIndicator.innerText = "<";
} else if (curGame.currentPlayer === 'O') {
currentPlayerIndicator.innerText = ">";
@ -190,10 +190,10 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
}
});
cells?.forEach(function(c, idx) {
cells?.forEach(function (c, idx) {
c.addEventListener("click", () => {
if (socket) {
socket.emit("gameMove", { index: idx });
socket.emit("gameMove", {index: idx});
}
});
});