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