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

76
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 { 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.
// Instantiates the game logic and binds UI events.
async function handleTTT(): Promise<RouteHandlerReturn> {
const socket: Socket = io("http://localhost:80");
const socket: Socket = getSocket();
return {
html: tttPage,
@ -15,9 +40,11 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
return;
}
const cells = app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
const restartBtn = app.querySelector<HTMLButtonElement>("#ttt-restart-btn");
const grid = app.querySelector('.ttt-grid'); // Not sure about this one
const cells =
app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
const restartBtn =
app.querySelector<HTMLButtonElement>("#ttt-restart-btn");
const grid = app.querySelector(".ttt-grid"); // Not sure about this one
const updateUI = (boardState: (string | null)[]) => {
boardState.forEach((state, idx) => {
@ -25,41 +52,44 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
});
};
socket.on('gameState', (data) => {
socket.on("gameState", (data) => {
updateUI(data.board);
if (data.lastResult && data.lastResult !== 'ongoing') {
grid?.classList.add('pointer-events-none');
if (data.lastResult === 'winX') {
showSuccess('X won !');
} if (data.lastResult === 'winO') {
showSuccess('O won !');
} if (data.lastResult === 'draw') {
showInfo('Draw !');
if (data.lastResult && data.lastResult !== "ongoing") {
grid?.classList.add("pointer-events-none");
if (data.lastResult === "winX") {
showSuccess("X won !");
}
if (data.lastResult === "winO") {
showSuccess("O won !");
}
if (data.lastResult === "draw") {
showInfo("Draw !");
}
}
if (data.reset) {
grid?.classList.remove('pointer-events-none');
showInfo('Game Restarted');
grid?.classList.remove("pointer-events-none");
showInfo("Game Restarted");
}
});
socket.on('error', (msg) => {
socket.on("error", (msg) => {
showError(msg);
});
cells?.forEach(function (c, idx) {
c.addEventListener('click', () => {
socket.emit('makeMove', idx);
cells?.forEach(function(c, idx) {
c.addEventListener("click", () => {
socket.emit("makeMove", idx);
});
});
restartBtn?.addEventListener('click', () => {
socket.emit('resetGame');
restartBtn?.addEventListener("click", () => {
socket.emit("resetGame");
});
},
}
};
}
addRoute('/ttt', handleTTT);
addRoute("/ttt", handleTTT);