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

made the socket correctly connect to the backend

Browse source
This commit is contained in:
Maieul BOYER 2025-12-22 15:31:58 +01:00
parent cfbce3b916
commit a940447039
No known key found for this signature in database
1 changed files with 76 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,10 +3,35 @@ import tttPage from "./ttt.html?raw";
import { showError, showInfo, showSuccess } from "@app/toast"; import { showError, showInfo, showSuccess } from "@app/toast";
import { io, Socket } from "socket.io-client"; import { io, Socket } from "socket.io-client";
// get the name of the machine used to connect
const machineHostName = window.location.hostname;
console.log(
"connect to login at https://" + machineHostName + ":8888/app/login",
);
export let __socket: Socket | undefined = undefined;
document.addEventListener("ft:pageChange", () => {
if (__socket !== undefined) __socket.close();
__socket = undefined;
console.log("Page changed");
});
export function getSocket(): Socket {
let addressHost = `wss://${machineHostName}:8888`;
// let addressHost = `wss://localhost:8888`;
if (__socket === undefined)
__socket = io(addressHost, {
path: "/api/ttt/socket.io/",
secure: true,
transports: ["websocket"],
});
return __socket;
}
// Route handler for the Tic-Tac-Toe page. // Route handler for the Tic-Tac-Toe page.
// Instantiates the game logic and binds UI events. // Instantiates the game logic and binds UI events.
async function handleTTT(): Promise<RouteHandlerReturn> { async function handleTTT(): Promise<RouteHandlerReturn> {
const socket: Socket = io("http://localhost:80"); const socket: Socket = getSocket();
return { return {
html: tttPage, html: tttPage,
@ -15,9 +40,11 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
return; return;
} }
const cells = app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell"); const cells =
const restartBtn = app.querySelector<HTMLButtonElement>("#ttt-restart-btn"); app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
const grid = app.querySelector('.ttt-grid'); // Not sure about this one const restartBtn =
app.querySelector<HTMLButtonElement>("#ttt-restart-btn");
const grid = app.querySelector(".ttt-grid"); // Not sure about this one
const updateUI = (boardState: (string | null)[]) => { const updateUI = (boardState: (string | null)[]) => {
boardState.forEach((state, idx) => { boardState.forEach((state, idx) => {
@ -25,41 +52,44 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
}); });
}; };
socket.on('gameState', (data) => { socket.on("gameState", (data) => {
updateUI(data.board); updateUI(data.board);
if (data.lastResult && data.lastResult !== 'ongoing') { if (data.lastResult && data.lastResult !== "ongoing") {
grid?.classList.add('pointer-events-none'); grid?.classList.add("pointer-events-none");
if (data.lastResult === 'winX') { if (data.lastResult === "winX") {
showSuccess('X won !'); showSuccess("X won !");
} if (data.lastResult === 'winO') { }
showSuccess('O won !'); if (data.lastResult === "winO") {
} if (data.lastResult === 'draw') { showSuccess("O won !");
showInfo('Draw !'); }
if (data.lastResult === "draw") {
showInfo("Draw !");
} }
} }
if (data.reset) { if (data.reset) {
grid?.classList.remove('pointer-events-none'); grid?.classList.remove("pointer-events-none");
showInfo('Game Restarted'); showInfo("Game Restarted");
} }
}); });
socket.on('error', (msg) => { socket.on("error", (msg) => {
showError(msg); showError(msg);
}); });
cells?.forEach(function(c, idx) { cells?.forEach(function(c, idx) {
c.addEventListener('click', () => { c.addEventListener("click", () => {
socket.emit('makeMove', idx); socket.emit("makeMove", idx);
}); });
}); });
restartBtn?.addEventListener('click', () => { restartBtn?.addEventListener("click", () => {
socket.emit('resetGame'); socket.emit("resetGame");
}); });
}, },
} };
} }
addRoute('/ttt', handleTTT); addRoute("/ttt", handleTTT);