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

feat(tournament): allow the creation of a tournament

Browse source 
A tournament can be created (by the "owner")
Any other players can join said tournament.
The information is currently not displayed in the frontend, but does
exists and is passed to the frontend using a socket.io event
This commit is contained in:
Maieul BOYER 2026-01-07 20:04:38 +01:00 • committed by Maix0
parent 272c6f319c
commit 2195207297
9 changed files with 558 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/pages/pong/pong.css
View file

@ -8,8 +8,8 @@
.btn-style {
@apply
w-25
h-8
min-w-25
min-h-8
border
border-gray-500
rounded-3xl

12
frontend/src/pages/pong/pong.html
View file

@ -2,8 +2,13 @@
<div id="mainbox" class="mainboxDisplay">
<button id="QueueBtn" class="btn-style absolute top-4 left-6">Queue Up</button>
<button id="LocalBtn" class="btn-style absolute top-14 left-6">Local Game</button>
<span id="queue-info" class="flex rounded-3xl border-7 border-gray-500 bg-gray-500 absolute top-4 right-6">?👤 ?⏳ ?▮•▮</span> <!-- total | in queue | games-->
<button id="play-info" class="pong-how-to-play absolute top-14 right-6">?</button> <!-- how to play?-->
<span id="queue-info" class="flex rounded-3xl border-7 border-gray-500 bg-gray-500 absolute top-4 right-6">?👤
?⏳ ?▮•▮</span> <!-- total | in queue | games-->
<button id="TourBtn"
class="min-25 min-h-8 border border-gray-500 rounded-3xl bg-gray-500 text-white cursor-pointer shadow-[0_2px_0_0_black] transition-all hover:bg-blue-200 active:bg-gray-400 active:translate-y-px active:shadow-[0_2px_0_0_black] absolute top-16 right-6">
<span class="mx-2">Create Tournament</span>
</button> <!-- Tournament Button -->
<button id="play-info" class="pong-how-to-play absolute top-26 right-6">?</button> <!-- how to play?-->
<br>
<h1 class="text-3xl font-bold text-gray-800">
Pong Box<span id="t-username"></span>
@ -25,7 +30,8 @@
down:
<kbd class="pong-protips-key">S</kbd>
<br>
You are <span class="text-red-500">red</span>. <br> Your goal is to bounce the ball back to the adversary.
You are <span class="text-red-500">red</span>. <br> Your goal is to bounce the ball back to the
adversary.
<br>
<span class="text-gray-400">local games keys for the left paddle:<br>
up:

315
frontend/src/pages/pong/pong.ts
View file

@ -1,14 +1,20 @@
import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
import authHtml from './pong.html?raw';
import io from 'socket.io-client';
import {
addRoute,
navigateTo,
setTitle,
type RouteHandlerParams,
type RouteHandlerReturn,
} from "@app/routing";
import authHtml from "./pong.html?raw";
import io from "socket.io-client";
import type { CSocket, GameMove, GameUpdate } from "./socket";
import { showError, showInfo } from "@app/toast";
import { showError, showInfo, showSuccess } from "@app/toast";
import { getUser, type User } from "@app/auth";
import { isNullish } from "@app/utils";
import client from "@app/api";
import "./pong.css";
declare module 'ft_state' {
declare module "ft_state" {
interface State {
pongSock?: CSocket;
}
@ -20,59 +26,131 @@ enum QueueState {
Ready = "Ready-ing",
Iddle = "Queue Up",
In_local = "In Local",
};
}
enum ReadyState {
readyUp = "ready ok",
readyDown = "not ready",
};
}
enum TourBtnState {
Joined = "Joined",
Started = "Started",
AbleToJoin = "Join Tournament",
AbleToCreate = "Create Tournament",
AbleToStart = "Start Tournament",
AbeToProcreate = "He would be proud",
}
document.addEventListener("ft:pageChange", (newUrl) => {
if (newUrl.detail.startsWith('/app/pong') || newUrl.detail.startsWith('/pong')) return;
if (
newUrl.detail.startsWith("/app/pong") ||
newUrl.detail.startsWith("/pong")
)
return;
if (window.__state.pongSock !== undefined) window.__state.pongSock.close();
window.__state.pongSock = undefined;
});
export function getSocket(): CSocket {
if (window.__state.pongSock === undefined)
window.__state.pongSock = io(window.location.host, { path: "/api/pong/socket.io/" }) as any as CSocket;
window.__state.pongSock = io(window.location.host, {
path: "/api/pong/socket.io/",
}) as any as CSocket;
return window.__state.pongSock;
}
function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
setTitle('Pong Game Page');
function pongClient(
_url: string,
_args: RouteHandlerParams,
): RouteHandlerReturn {
setTitle("Pong Game Page");
return {
html: authHtml, postInsert: async (app) => {
html: authHtml,
postInsert: async (app) => {
const DEFAULT_COLOR = "white";
const SELF_COLOR = "red";
const user = getUser();
let currentGame: GameUpdate | null = null;
let opponent: User | null = null;
const rdy_btn = document.querySelector<HTMLButtonElement>('#readyup-btn');
const rdy_btn =
document.querySelector<HTMLButtonElement>("#readyup-btn");
const batLeft = document.querySelector<HTMLDivElement>("#batleft");
const batRight = document.querySelector<HTMLDivElement>("#batright");
const batRight =
document.querySelector<HTMLDivElement>("#batright");
const ball = document.querySelector<HTMLDivElement>("#ball");
const score = document.querySelector<HTMLDivElement>("#score-board");
const playerL = document.querySelector<HTMLDivElement>('#player-left');
const playerR = document.querySelector<HTMLDivElement>('#player-right');
const queueBtn = document.querySelector<HTMLButtonElement>("#QueueBtn");
const LocalGameBtn = document.querySelector<HTMLButtonElement>("#LocalBtn");
const gameBoard = document.querySelector<HTMLDivElement>("#pongbox");
const queue_infos = document.querySelector<HTMLSpanElement>("#queue-info");
const how_to_play_btn = document.querySelector<HTMLButtonElement>("#play-info");
const protips = document.querySelector<HTMLDivElement>("#protips-box");
const score =
document.querySelector<HTMLDivElement>("#score-board");
const playerL =
document.querySelector<HTMLDivElement>("#player-left");
const playerR =
document.querySelector<HTMLDivElement>("#player-right");
const queueBtn =
document.querySelector<HTMLButtonElement>("#QueueBtn");
const LocalGameBtn =
document.querySelector<HTMLButtonElement>("#LocalBtn");
const gameBoard =
document.querySelector<HTMLDivElement>("#pongbox");
const queue_infos =
document.querySelector<HTMLSpanElement>("#queue-info");
const how_to_play_btn =
document.querySelector<HTMLButtonElement>("#play-info");
const protips =
document.querySelector<HTMLDivElement>("#protips-box");
const tournamentBtn =
document.querySelector<HTMLButtonElement>("#TourBtn");
let socket = getSocket();
if (isNullish(user)) { // if no user (no loggin / other) : GTFO
if (isNullish(user)) {
// if no user (no loggin / other) : GTFO
navigateTo("/app");
return;
}
if (!batLeft || !batRight || !ball || !score || !queueBtn || !playerL || !playerR || !gameBoard || !queue_infos || !LocalGameBtn || !rdy_btn) // sanity check
return showError('fatal error');
if (!how_to_play_btn || !protips)
showError('missing protips'); // not a fatal error
if (
!batLeft ||
!batRight ||
!ball ||
!score ||
!queueBtn ||
!playerL ||
!playerR ||
!gameBoard ||
!queue_infos ||
!LocalGameBtn ||
!rdy_btn ||
!tournamentBtn
)
// sanity check
return showError("fatal error");
if (!how_to_play_btn || !protips) showError("missing protips"); // not a fatal error
tournamentBtn.addEventListener("click", () => {
showInfo(`Button State: ${tournamentBtn.innerText}`);
switch (tournamentBtn.innerText) {
case TourBtnState.AbleToStart:
//socket.emit('')
break;
case TourBtnState.AbleToJoin:
socket.emit("tourRegister");
break;
case TourBtnState.AbleToCreate:
socket.emit("tourCreate");
break;
case TourBtnState.AbeToProcreate:
showError("We are developpers, this is impossible !");
break;
case TourBtnState.Joined:
socket.emit("tourUnregister");
break;
case TourBtnState.Started:
showInfo("tournament Started");
//socket.emit("tourStart");
break;
}
});
// ---
// keys handler
@ -81,35 +159,43 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
if (how_to_play_btn && protips)
how_to_play_btn.addEventListener("click", () => {
protips.classList.toggle("hidden");
how_to_play_btn.innerText = how_to_play_btn.innerText === '?' ? 'x' : '?';
how_to_play_btn.innerText =
how_to_play_btn.innerText === "?" ? "x" : "?";
});
document.addEventListener("keydown", (e) => {keys[e.key.toLowerCase()] = true;});
document.addEventListener("keyup", (e) => {keys[e.key.toLowerCase()] = false;});
document.addEventListener("keydown", (e) => {
keys[e.key.toLowerCase()] = true;
});
document.addEventListener("keyup", (e) => {
keys[e.key.toLowerCase()] = false;
});
setInterval(() => { // key sender
if (keys['escape'] === true && protips && how_to_play_btn) {
setInterval(() => {
// key sender
if (keys["escape"] === true && protips && how_to_play_btn) {
protips.classList.add("hidden");
how_to_play_btn.innerText = '?';
how_to_play_btn.innerText = "?";
}
if (queueBtn.innerText !== QueueState.InGame)//we're in game ? continue | gtfo
if (queueBtn.innerText !== QueueState.InGame)
//we're in game ? continue | gtfo
return;
if (currentGame === null) return;
let packet: GameMove = {
move: null,
moveRight: null,
}
};
if (queueBtn.innerText !== QueueState.InGame)//we're in game ? continue | gtfo
if (queueBtn.innerText !== QueueState.InGame)
//we're in game ? continue | gtfo
return;
if (currentGame === null) return;
if ((keys['w'] !== keys['s']))
packet.move = keys['w'] ? 'up' : 'down';
if (currentGame.local && (keys['o'] !== keys['l']))
packet.moveRight = keys['o'] ? 'up' : 'down';
socket.emit('gameMove', packet);
if (keys["w"] !== keys["s"])
packet.move = keys["w"] ? "up" : "down";
if (currentGame.local && keys["o"] !== keys["l"])
packet.moveRight = keys["o"] ? "up" : "down";
socket.emit("gameMove", packet);
}, 1000 / 60);
// ---
// keys end
@ -121,12 +207,25 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
const DEFAULT_POSITIONS: GameUpdate = {
gameId: "",
ball: { size: 16, x: 800 / 2, y: 450 / 2 },
left:{id:"", paddle:{x:40, y:185, width:12, height:80}, score:0},
right:{id:"", paddle:{x:748, y:185, width:12, height:80}, score:0},
local:false
left: {
id: "",
paddle: { x: 40, y: 185, width: 12, height: 80 },
score: 0,
},
right: {
id: "",
paddle: { x: 748, y: 185, width: 12, height: 80 },
score: 0,
},
local: false,
};
function resetBoard(batLeft : HTMLDivElement, batRight : HTMLDivElement, playerL : HTMLDivElement, playerR : HTMLDivElement) {
function resetBoard(
batLeft: HTMLDivElement,
batRight: HTMLDivElement,
playerL: HTMLDivElement,
playerR: HTMLDivElement,
) {
render(DEFAULT_POSITIONS);
batLeft.style.backgroundColor = DEFAULT_COLOR;
batRight.style.backgroundColor = DEFAULT_COLOR;
@ -154,10 +253,11 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
ball.style.height = `${state.ball.size * 2}px`;
ball.style.width = `${state.ball.size * 2}px`;
score.innerText = `${state.left.score} | ${state.right.score}`
}
socket.on('gameUpdate', (state: GameUpdate) => {
render(state);});
score.innerText = `${state.left.score} | ${state.right.score}`;
};
socket.on("gameUpdate", (state: GameUpdate) => {
render(state);
});
// ---
// position logic (client) end
// ---
@ -166,11 +266,18 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// queue evt
// ---
// utils
function set_pretty(batU : HTMLDivElement, txtU : HTMLDivElement, txtO : HTMLDivElement, colorYou : string) {
function set_pretty(
batU: HTMLDivElement,
txtU: HTMLDivElement,
txtO: HTMLDivElement,
colorYou: string,
) {
batU.style.backgroundColor = colorYou;
txtU.style.color = colorYou;
txtU.innerText = isNullish(user) ? "you" : user.name;
txtO.innerText = isNullish(opponent) ? "the mechant" : opponent.name;
txtO.innerText = isNullish(opponent)
? "the mechant"
: opponent.name;
}
async function get_opponent(opponent_id: string) {
let t = await client.getUser({ user: opponent_id });
@ -194,11 +301,16 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
return;
}
queueBtn.innerText = QueueState.InQueu;
socket.emit('enqueue');
socket.emit("enqueue");
});
LocalGameBtn.addEventListener("click", () => {
if (queueBtn.innerText !== QueueState.Iddle || currentGame !== null) {
showError("cant launch a local game while in queue/in game");
if (
queueBtn.innerText !== QueueState.Iddle ||
currentGame !== null
) {
showError(
"cant launch a local game while in queue/in game",
);
return;
}
socket.emit("localGame");
@ -209,13 +321,13 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
showInfo("rdy-evt");
switch (rdy_btn.innerText) {
case ReadyState.readyDown:
socket.emit('readyUp');
socket.emit("readyUp");
rdy_btn.innerText = ReadyState.readyUp;
rdy_btn.classList.remove("text-red-600");
rdy_btn.classList.add("text-green-600");
break;
case ReadyState.readyUp:
socket.emit('readyDown');
socket.emit("readyDown");
rdy_btn.innerText = ReadyState.readyDown;
rdy_btn.classList.remove("text-green-600");
rdy_btn.classList.add("text-red-600");
@ -225,44 +337,47 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
});
socket.on('newGame', async (state) => {
socket.on("newGame", async (state) => {
render(state);
await get_opponent(state.left.id == user.id ? state.right.id : state.left.id);
await get_opponent(
state.left.id == user.id ? state.right.id : state.left.id,
);
queueBtn.innerText = QueueState.InGame;
queueBtn.style.color = 'red';
queueBtn.style.color = "red";
batLeft.style.backgroundColor = DEFAULT_COLOR;
batRight.style.backgroundColor = DEFAULT_COLOR;
if (state.left.id === user.id) {
set_pretty(batLeft, playerL, playerR, SELF_COLOR);
} else if (state.right.id === user.id) {
set_pretty(batRight, playerR, playerL, SELF_COLOR);
} else
showError("couldn't find your id in game");
rdy_btn.classList.remove('hidden');
} else showError("couldn't find your id in game");
rdy_btn.classList.remove("hidden");
rdy_btn.classList.add("text-red-600");
rdy_btn.innerText = ReadyState.readyDown;
});
socket.on('rdyEnd', () => {
socket.on("rdyEnd", () => {
rdy_btn.classList.remove("text-green-600");
rdy_btn.classList.remove("text-red-600");
rdy_btn.classList.add('hidden');
rdy_btn.classList.add("hidden");
});
socket.on("gameEnd", (winner) => {
rdy_btn.classList.add('hidden');
rdy_btn.classList.add("hidden");
queueBtn.innerHTML = QueueState.Iddle;
queueBtn.style.color = 'white';
queueBtn.style.color = "white";
if (!isNullish(currentGame)) {
let new_div = document.createElement('div');
let new_div = document.createElement("div");
let end_txt = "";
if ((user.id === currentGame.left.id && winner === 'left') ||
(user.id === currentGame.right.id && winner === 'right'))
end_txt = 'won! #yippe';
else
end_txt = 'lost #sadge';
new_div.innerText = 'you ' + end_txt;
if (
(user.id === currentGame.left.id &&
winner === "left") ||
(user.id === currentGame.right.id && winner === "right")
)
end_txt = "won! #yippe";
else end_txt = "lost #sadge";
new_div.innerText = "you " + end_txt;
new_div.className = "pong-end-screen";
gameBoard.appendChild(new_div);
setTimeout(() => {
@ -270,25 +385,61 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}, 3 * 1000);
if (currentGame.local) {
LocalGameBtn.innerText = "Local Game"
LocalGameBtn.innerText = "Local Game";
}
}
resetBoard(batLeft, batRight, playerL, playerR);
})
socket.on('updateInformation', (e) => {
});
socket.on("updateInformation", (e) => {
queue_infos.innerText = `${e.totalUser}👤 ${e.inQueue}⏳ ${e.totalGames}▮•▮`;
});
socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`)); // MAYBE: play a sound? to notify user that smthing happend
socket.on("queueEvent", (e) => showInfo(`QueueEvent: ${e}`)); // MAYBE: play a sound? to notify user that smthing happend
// ---
// queue evt end
// ---
socket.on("tournamentInfo", (s) => {
// no tournament => we can create it !
if (s === null) {
tournamentBtn.innerText = TourBtnState.AbleToCreate;
// create tournament
return;
}
let weIn = s.players.some((p) => p.id === user.id);
let imOwner = s.ownerId === user.id;
switch (s.state) {
case "ended":
tournamentBtn.innerText = TourBtnState.AbleToCreate;
break;
case "playing":
tournamentBtn.innerText = TourBtnState.Started;
break;
case "prestart":
if (imOwner) {
tournamentBtn.innerText = TourBtnState.AbleToStart;
} else {
tournamentBtn.innerText = weIn
? TourBtnState.Joined
: TourBtnState.AbleToJoin;
}
break;
}
console.log(s.players);
});
socket.on("tournamentRegister", ({ kind, msg }) => {
if (kind === "success") showSuccess(msg ?? "Success");
if (kind === "failure") showError(msg ?? "An error Occured");
});
// init
rdy_btn.classList.add('hidden');
rdy_btn.classList.add("hidden");
queueBtn.innerText = QueueState.Iddle;
rdy_btn.innerText = ReadyState.readyUp;
resetBoard(batLeft, batRight, playerL, playerR);
}
}
},
};
addRoute('/pong', pongClient);
}
addRoute("/pong", pongClient);

72
frontend/src/pages/pong/socket.ts
View file

@ -1,36 +1,42 @@
import { Socket } from 'socket.io-client';
export type UpdateInfo = {
inQueue: number,
totalUser: number,
totalGames : number
}
inQueue: number;
totalUser: number;
totalGames: number;
};
export type PaddleData = {
x: number,
y: number,
x: number;
y: number;
width: number,
height: number,
width: number;
height: number;
};
export type GameUpdate = {
gameId: string;
left: { id: string, paddle: PaddleData, score: number };
right: { id: string, paddle: PaddleData, score: number };
left: { id: string; paddle: PaddleData; score: number };
right: { id: string; paddle: PaddleData; score: number };
ball: { x: number, y: number, size: number };
local: boolean,
}
ball: { x: number; y: number; size: number };
local: boolean;
};
export type GameMove = {
move: 'up' | 'down' | null,
move: 'up' | 'down' | null;
// only used in local games
moveRight: 'up' | 'down' | null,
}
moveRight: 'up' | 'down' | null;
};
export type TourInfo = {
ownerId: string;
state: 'prestart' | 'playing' | 'ended';
players: { id: string; name: string; score: number }[];
currentGameInfo: GameUpdate | null;
};
// TODO: add new evt such as "local play", "ready-up" see: ./pong.ts
export interface ClientToServer {
enqueue: () => void;
dequeue: () => void;
@ -39,18 +45,36 @@ export interface ClientToServer {
debugInfo: () => void;
gameMove: (up: GameMove) => void;
connectedToGame: (gameId: string) => void;
localGame: () => void,
};
localGame: () => void;
// TOURNAMENT
tourRegister: () => void;
tourUnregister: () => void;
tourCreate: () => void;
}
export interface ServerToClient {
forceDisconnect: (reason: string) => void;
queueEvent: (msg: 'registered' | 'unregistered') => void;
rdyEnd:() => void,
updateInformation: (info: UpdateInfo) => void,
newGame: (initState: GameUpdate) => void, // <- consider this the gameProc eg not start of game but wait for client to "ready up"
gameUpdate: (state: GameUpdate) => void,
rdyEnd: () => void;
updateInformation: (info: UpdateInfo) => void;
newGame: (initState: GameUpdate) => void;
gameUpdate: (state: GameUpdate) => void;
gameEnd: (winner: 'left' | 'right') => void;
};
// TOURNAMENT
tournamentRegister: (res: {
kind: 'success' | 'failure';
msg?: string;
}) => void;
tournamentCreateMsg: (res: {
kind: 'success' | 'failure';
msg?: string;
}) => void;
tournamentInfo: (info: TourInfo | null) => void;
}
export type SSocket = Socket<ClientToServer, ServerToClient>;
export type CSocket = Socket<ServerToClient, ClientToServer>;

24
nginx-dev/nginx.conf
View file

@ -31,6 +31,30 @@ http {
proxy_ssl_verify off;
proxy_pass https://localhost:8888;
}
location /api/chat/socket.io/ {
proxy_ssl_verify off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_read_timeout 3600s;
proxy_pass https://localhost:8888;
}
location /api/pong/socket.io/ {
proxy_ssl_verify off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_read_timeout 3600s;
proxy_pass https://localhost:8888;
}
location /api/ttt/socket.io/ {
proxy_ssl_verify off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_read_timeout 3600s;
proxy_pass https://localhost:8888;
}
location /assets {
proxy_pass http://localhost:5173;
proxy_ssl_verify off;

17
src/@shared/src/utils/index.ts
View file

@ -149,3 +149,20 @@ export function escape(s: string): string {
c => '&#' + c.charCodeAt(0) + ';',
);
}
export function shuffle<T>(array: T[]) {
let currentIndex = array.length;
// While there remain elements to shuffle...
while (currentIndex != 0) {
// Pick a remaining element...
const randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex],
array[currentIndex],
];
}
}

72
src/pong/src/socket.ts
View file

@ -1,34 +1,41 @@
import { Socket } from 'socket.io';
export type UpdateInfo = {
inQueue: number,
totalUser: number,
totalGames : number
}
inQueue: number;
totalUser: number;
totalGames: number;
};
export type PaddleData = {
x: number,
y: number,
x: number;
y: number;
width: number,
height: number,
width: number;
height: number;
};
export type GameUpdate = {
gameId: string;
left: { id: string, paddle: PaddleData, score: number };
right: { id: string, paddle: PaddleData, score: number };
left: { id: string; paddle: PaddleData; score: number };
right: { id: string; paddle: PaddleData; score: number };
ball: { x: number, y: number, size: number };
local: boolean,
}
ball: { x: number; y: number; size: number };
local: boolean;
};
export type GameMove = {
move: 'up' | 'down' | null,
move: 'up' | 'down' | null;
// only used in local games
moveRight: 'up' | 'down' | null,
}
moveRight: 'up' | 'down' | null;
};
export type TourInfo = {
ownerId: string;
state: 'prestart' | 'playing' | 'ended';
players: { id: string; name: string; score: number }[];
currentGameInfo: GameUpdate | null;
};
export interface ClientToServer {
enqueue: () => void;
@ -38,18 +45,37 @@ export interface ClientToServer {
debugInfo: () => void;
gameMove: (up: GameMove) => void;
connectedToGame: (gameId: string) => void;
localGame: () => void,
};
localGame: () => void;
// TOURNAMENT
tourRegister: () => void;
tourUnregister: () => void;
tourCreate: () => void;
// tourStart: () => void;
}
export interface ServerToClient {
forceDisconnect: (reason: string) => void;
queueEvent: (msg: 'registered' | 'unregistered') => void;
rdyEnd:() => void,
updateInformation: (info: UpdateInfo) => void,
newGame: (initState: GameUpdate) => void,
gameUpdate: (state: GameUpdate) => void,
rdyEnd: () => void;
updateInformation: (info: UpdateInfo) => void;
newGame: (initState: GameUpdate) => void;
gameUpdate: (state: GameUpdate) => void;
gameEnd: (winner: 'left' | 'right') => void;
};
// TOURNAMENT
tournamentRegister: (res: {
kind: 'success' | 'failure';
msg?: string;
}) => void;
tournamentCreateMsg: (res: {
kind: 'success' | 'failure';
msg?: string;
}) => void;
tournamentInfo: (info: TourInfo | null) => void;
}
export type SSocket = Socket<ClientToServer, ServerToClient>;
export type CSocket = Socket<ServerToClient, ClientToServer>;

92
src/pong/src/state.ts
View file

@ -2,9 +2,10 @@ import { UserId } from '@shared/database/mixin/user';
import { newUUID } from '@shared/utils/uuid';
import { FastifyInstance } from 'fastify';
import { Pong } from './game';
import { GameMove, GameUpdate, SSocket } from './socket';
import { isNullish } from '@shared/utils';
import { GameMove, GameUpdate, SSocket, TourInfo } from './socket';
import { isNullish, shuffle } from '@shared/utils';
import { PongGameId, PongGameOutcome } from '@shared/database/mixin/pong';
import { Tournament } from './tour';
type PUser = {
id: UserId;
@ -23,6 +24,7 @@ class StateI {
private queue: Set<UserId> = new Set();
private queueInterval: NodeJS.Timeout;
private games: Map<GameId, Pong> = new Map();
private tournament: Tournament | null = null;
public constructor(private fastify: FastifyInstance) {
this.queueInterval = setInterval(() => this.queuerFunction());
@ -39,8 +41,71 @@ class StateI {
};
}
private registerForTournament(sock: SSocket, name: string | null) {
const user = this.users.get(sock.authUser.id);
if (isNullish(user)) return;
if (isNullish(this.tournament)) {
sock.emit('tournamentRegister', { kind: 'failure', msg: 'No tournament exists' });
return;
}
if (this.tournament.started) {
sock.emit('tournamentRegister', { kind: 'failure', msg: 'No tournament already started' });
return;
}
const udb = this.fastify.db.getUser(user.id);
if (isNullish(udb)) {
sock.emit('tournamentRegister', { kind: 'failure', msg: 'User not found' });
return;
}
this.tournament.addUser(user.id, name ?? udb.name);
sock.emit('tournamentRegister', { kind: 'success', msg: 'Registered to Tournament' });
return;
}
private unregisterForTournament(sock: SSocket) {
const user = this.users.get(sock.authUser.id);
if (isNullish(user)) return;
if (isNullish(this.tournament)) {
sock.emit('tournamentRegister', { kind: 'failure', msg: 'No tournament exists' });
return;
}
if (this.tournament.started) {
sock.emit('tournamentRegister', { kind: 'failure', msg: 'No tournament already started' });
return;
}
this.tournament.removeUser(user.id);
sock.emit('tournamentRegister', { kind: 'success', msg: 'Unregistered to Tournament' });
return;
}
private createTournament(sock: SSocket) {
const user = this.users.get(sock.authUser.id);
if (isNullish(user)) return;
if (this.tournament !== null) {
sock.emit('tournamentCreateMsg', { kind: 'failure', msg: 'A tournament already exists' });
return ;
}
this.tournament = new Tournament(user.id);
this.registerForTournament(sock, null);
}
private tournamentStart(sock: SSocket) {
if (isNullish(this.tournament)) return;
const user = this.users.get(sock.authUser.id);
if (isNullish(user)) return;
this.tournament.start();
}
private queuerFunction(): void {
const values = Array.from(this.queue.values());
shuffle(values);
while (values.length >= 2) {
const id1 = values.pop();
const id2 = values.pop();
@ -148,7 +213,7 @@ class StateI {
socket,
id: socket.authUser.id,
windowId: socket.id,
updateInterval: setInterval(() => this.updateClient(socket), 3000),
updateInterval: setInterval(() => this.updateClient(socket), 100),
currentGame: null,
});
this.fastify.log.info('Registered new user');
@ -162,6 +227,12 @@ class StateI {
socket.on('gameMove', (e) => this.gameMove(socket, e));
socket.on('localGame', () => this.newLocalGame(socket));
// todo: allow passing nickname
socket.on('tourRegister', () => this.registerForTournament(socket, null));
socket.on('tourUnregister', () => this.unregisterForTournament(socket));
socket.on('tourCreate', () => this.createTournament(socket));
}
private updateClient(socket: SSocket): void {
@ -170,6 +241,21 @@ class StateI {
totalUser: this.users.size,
totalGames: this.games.size,
});
let tourInfo: TourInfo | null = null;
if (this.tournament !== null) {
tourInfo = {
ownerId: this.tournament.owner,
state: this.tournament.started ? 'playing' : 'prestart',
players: this.tournament.users.values().toArray(),
currentGameInfo: (() => {
if (this.tournament.currentGame === null) return null;
const game = this.games.get(this.tournament.currentGame);
if (isNullish(game)) return null;
return StateI.getGameUpdateData(this.tournament.currentGame, game);
})(),
};
}
socket.emit('tournamentInfo', tourInfo);
}
private cleanupUser(socket: SSocket): void {

54
src/pong/src/tour.ts Normal file
View file

@ -0,0 +1,54 @@
import { PongGameId } from '@shared/database/mixin/pong';
import { UserId } from '@shared/database/mixin/user';
import { shuffle } from '@shared/utils';
import { newUUID } from '@shared/utils/uuid';
import { Pong } from './game';
type TourUser = {
id: UserId;
score: number;
name: string;
};
export class Tournament {
public users: Map<UserId, TourUser> = new Map();
public currentGame: PongGameId | null = null;
public games: Map<PongGameId, Pong> = new Map();
public started: boolean = false;
public gameUpdate: NodeJS.Timeout | undefined;
constructor(public owner: UserId) { }
public addUser(id: UserId, name: string) {
if (this.started) return;
this.users.set(id, { id, name, score: 0 });
}
public removeUser(id: UserId) {
if (this.started) return;
this.users.delete(id);
}
public start() {
this.started = true;
const users = Array.from(this.users.keys());
const comb: [UserId, UserId][] = [];
for (let i = 0; i < users.length; i++) {
for (let j = i + 1; j < users.length; j++) {
comb.push([users[i], users[j]]);
}
}
shuffle(comb);
comb.forEach(shuffle);
comb.forEach(([u1, u2]) => {
const gameId = newUUID() as PongGameId;
const g = new Pong(u1, u2);
this.games.set(gameId, g);
});
this.currentGame = this.games.keys().next().value ?? null;
}
}