thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2024-11-17 01:16:33 +00:00
Code

reimplement endgame

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-24 17:30:35 +02:00
parent 0f705ee45a
commit 8333df9580
2 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
client.mts
View File

@ -27,6 +27,7 @@ let circle = true;
let pendingEvts: Point[] = [];
let shapes: Shape[] = [];
let myId: number | null = null;
let canvasMsg: string = "Offline";
function drawGridBackground(ctx: CanvasRenderingContext2D, origin: Point) {
ctx.strokeStyle = "white";
@ -53,7 +54,7 @@ function resizeCanvas(ctx: CanvasRenderingContext2D) {
function coordToGridIndex(origin: Point, clientPos: Point): [number, number] | undefined {
// Coord relative to origin of the grid (origin)
// Coord relative to origin of the grid (origin)
const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y };
const gridIndex: [number, number] = [Math.floor(3 * pt.x / GRID_SIZE), Math.floor(3 * pt.y / GRID_SIZE)];
if (gridIndex[0] >= 0 && gridIndex[0] <= 2 && gridIndex[1] >= 0 && gridIndex[1] <= 2) {
@ -62,7 +63,7 @@ function coordToGridIndex(origin: Point, clientPos: Point): [number, number] | u
return undefined;
}
function handlePendingEvts(gridOrigin: Point, ws: WebSocket) {
function handlePendingEvts(ws: WebSocket, gridOrigin: Point) {
for (const evt of pendingEvts) {
const gridIndex = coordToGridIndex(gridOrigin, evt);
if (gridIndex) {
@ -74,22 +75,6 @@ function handlePendingEvts(gridOrigin: Point, ws: WebSocket) {
pendingEvts = [];
}
/*function drawGrid(ctx: CanvasRenderingContext2D, grid: number[]){
for (let y = 0; y < 3; ++y) {
for (let x = 0; x < 3; ++x) {
switch (grid[y*3+x]) {
case 0: ctx.fillStyle = "black"; break;
case myId: ctx.fillStyle = "green"; break;
default: ctx.fillStyle = "blue"; break;
}
const rx = x + x * 100;
const ry = y + y * 100;
ctx.fillRect(rx, ry, 90, 90);
}
}
}*/
function drawCircle(ctx: CanvasRenderingContext2D, center: Point) {
const radius = SHAPE_SIZE/2;
ctx.beginPath();
@ -137,14 +122,20 @@ function updateGridState(ctx: CanvasRenderingContext2D, gridOrigin: Point) {
}
}
// update loop, called every frame
function update(ctx: CanvasRenderingContext2D, time: number, ws: WebSocket) {
const gridOrigin: Point = {
x: ctx.canvas.width / 2 - GRID_SIZE / 2,
y: ctx.canvas.height / 2 - GRID_SIZE / 2
};
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = "white";
ctx.font = "24px sans-serif";
ctx.fillText(canvasMsg, 10, 30);
drawGridBackground(ctx, gridOrigin);
handlePendingEvts(gridOrigin, ws);
handlePendingEvts(ws, gridOrigin);
updateGridState(ctx, gridOrigin);
window.requestAnimationFrame(t => update(ctx, t, ws));
@ -174,7 +165,8 @@ function init() {
switch (msg.kind) {
case "hello": {
myId = (msg.data as Hello).id;
console.log(`connected to server with id ${myId}`);
canvasMsg = `connected to server with id ${myId}`;
console.log(canvasMsg);
break;
}
case "update": {
@ -182,6 +174,16 @@ function init() {
console.log(grid);
break;
}
case "endgame": {
const issue = (msg.data as EndGame).issue;
switch (issue) {
case "win": canvasMsg = "you won"; break;
case "lose": canvasMsg = "you lose"; break;
case "draw": canvasMsg = "it's a draw!"; break;
default: throw new Error(`unexpected ${issue}`);
}
break;
}
default: {
console.warn("unhandled message kind:", msg.kind);
break;

4
server.mts
View File

@ -5,6 +5,7 @@ const port = 1234
const wss = new WebSocketServer({ port });
let grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
let endGame = false;
console.log(`waiting for connection on ws://localhost:${port}`);
@ -42,7 +43,7 @@ wss.on("connection", (ws) => {
currentPlayer = player;
}
if (clients.length < 2 || player!.id != currentPlayer?.id) {
if (clients.length < 2 || player!.id != currentPlayer?.id || endGame) {
return;
}
@ -68,6 +69,7 @@ wss.on("connection", (ws) => {
data: { issue: "draw" } as EndGame
};
c.ws.send(JSON.stringify(msg));
endGame = true;
}
} else {
console.log(`player ${winnerId} won !`);