Format
This commit is contained in:
parent
2aa8ee78a9
commit
7cbeef6482
6 changed files with 114 additions and 78 deletions
|
|
@ -24,13 +24,14 @@ export function renderGameBoardHtml(
|
|||
const intersectionId = `intersection-${row}-${col}`;
|
||||
let stoneHtml = '';
|
||||
if (stone) {
|
||||
const colorClass = stone === 'black' ? 'stone-black-heart' : 'stone-white-heart';
|
||||
const colorClass =
|
||||
stone === 'black' ? 'stone-black-heart' : 'stone-white-heart';
|
||||
stoneHtml = `<div class="${colorClass}"></div>`;
|
||||
}
|
||||
|
||||
// Calculate top and left for absolute positioning, offset by half the intersection div size
|
||||
const top = (row * 30);
|
||||
const left = (col * 30);
|
||||
const top = row * 30;
|
||||
const left = col * 30;
|
||||
|
||||
// HTMX attributes for making a move
|
||||
const wsAttrs = isPlayersTurn && !stone ? `ws-send="click"` : '';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { ElysiaWS } from 'elysia/dist/ws';
|
||||
import { GameInstance } from './game/game-instance';
|
||||
import {
|
||||
renderGameBoardHtml,
|
||||
} from './view/board-renderer';
|
||||
import { renderGameBoardHtml } from './view/board-renderer';
|
||||
|
||||
interface MakeMoveMessage {
|
||||
gameId: string;
|
||||
|
|
@ -108,7 +106,9 @@ export class WebSocketHandler {
|
|||
}
|
||||
this.connections.set(
|
||||
gameId,
|
||||
connectionsInGame.filter((conn) => conn.data.query.playerId !== ws.data.query.playerId),
|
||||
connectionsInGame.filter(
|
||||
(conn) => conn.data.query.playerId !== ws.data.query.playerId,
|
||||
),
|
||||
);
|
||||
if (this.connections.get(gameId)?.length === 0) {
|
||||
this.connections.delete(gameId);
|
||||
|
|
@ -186,35 +186,43 @@ export class WebSocketHandler {
|
|||
private sendTitleBox(targetWs: WS, message: string): void {
|
||||
targetWs.send('<div id="title-box">' + message + '</div>');
|
||||
}
|
||||
|
||||
|
||||
private sendTitleBoxesForGame(gameId: string): void {
|
||||
const game = this.games.get(gameId);
|
||||
if (!game) {
|
||||
console.error(`Tried to send title boxes for game ${gameId}, but it doesn't exist!`)
|
||||
console.error(
|
||||
`Tried to send title boxes for game ${gameId}, but it doesn't exist!`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
const connections = this.connections.get(gameId);
|
||||
if (!connections) {
|
||||
console.log(`Attempted to send title boxes for game ${gameId}, but no players are connected.`)
|
||||
console.log(
|
||||
`Attempted to send title boxes for game ${gameId}, but no players are connected.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
var message = "";
|
||||
var message = '';
|
||||
switch (game.status) {
|
||||
case 'waiting': {
|
||||
message = "Waiting for players...";
|
||||
message = 'Waiting for players...';
|
||||
break;
|
||||
}
|
||||
case 'playing': {
|
||||
const blackTag = game.players.black ? this.playerTag(gameId, game.players.black) : 'Unknown';
|
||||
const whiteTag = game.players.white ? this.playerTag(gameId, game.players.white) : 'Unknown';
|
||||
const blackTag = game.players.black
|
||||
? this.playerTag(gameId, game.players.black)
|
||||
: 'Unknown';
|
||||
const whiteTag = game.players.white
|
||||
? this.playerTag(gameId, game.players.white)
|
||||
: 'Unknown';
|
||||
message = `${blackTag} vs ${whiteTag}`;
|
||||
break;
|
||||
}
|
||||
case 'finished': {
|
||||
switch (game.winner) {
|
||||
case 'draw': {
|
||||
message = "Game ended in draw.";
|
||||
message = 'Game ended in draw.';
|
||||
break;
|
||||
}
|
||||
case 'black': {
|
||||
|
|
@ -229,12 +237,14 @@ export class WebSocketHandler {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
connections.forEach((connection) => {this.sendTitleBox(connection, message)});
|
||||
|
||||
connections.forEach((connection) => {
|
||||
this.sendTitleBox(connection, message);
|
||||
});
|
||||
}
|
||||
|
||||
private playerTag(gameId: string, playerId: string) {
|
||||
var connectionIcon = `<img src="/icons/disconnected.svg" alt="Disconnected" class="icon" />`
|
||||
var connectionIcon = `<img src="/icons/disconnected.svg" alt="Disconnected" class="icon" />`;
|
||||
const connections = this.connections.get(gameId);
|
||||
if (connections) {
|
||||
connections.forEach((ws) => {
|
||||
|
|
@ -244,7 +254,7 @@ export class WebSocketHandler {
|
|||
}
|
||||
});
|
||||
}
|
||||
return `<span>${playerId}${connectionIcon}</span>`
|
||||
return `<span>${playerId}${connectionIcon}</span>`;
|
||||
}
|
||||
|
||||
public getGame(gameId: string): GameInstance | undefined {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue