diff --git a/index.html b/index.html index f16ba75..6de1647 100644 --- a/index.html +++ b/index.html @@ -27,9 +27,7 @@ -
- Disconnected -
+
Disconnected
diff --git a/public/scripts/copy-game-link.js b/public/scripts/copy-game-link.js index b432bbf..6adcac4 100644 --- a/public/scripts/copy-game-link.js +++ b/public/scripts/copy-game-link.js @@ -10,4 +10,4 @@ function copyGameLink() { console.error('Failed to copy link: ', err); }); } -} \ No newline at end of file +} diff --git a/public/scripts/display-ws-connection.js b/public/scripts/display-ws-connection.js index 7e3ccf7..1bb9cb3 100644 --- a/public/scripts/display-ws-connection.js +++ b/public/scripts/display-ws-connection.js @@ -22,12 +22,10 @@ htmx.trigger(gameContainer, ' and connect'); // Update the game link input const gameLinkInput = document.getElementById('game-link'); if (!gameLinkInput) { - console.error('Missing game-link element.') + console.error('Missing game-link element.'); } gameLinkInput.value = - window.location.origin + - window.location.pathname + - `?gameId=${gameId}`; + window.location.origin + window.location.pathname + `?gameId=${gameId}`; // Update the WebSocket status indicator const wsStatusDiv = document.getElementById('ws-status'); diff --git a/public/scripts/send-ws-messages.js b/public/scripts/send-ws-messages.js index a03fcd4..fc503be 100644 --- a/public/scripts/send-ws-messages.js +++ b/public/scripts/send-ws-messages.js @@ -1,13 +1,13 @@ -document.addEventListener('htmx:wsConfigSend', function(e) { - if (e.target.classList.contains('board-cell')) { - const row = parseInt(e.target.dataset.row); - const col = parseInt(e.target.dataset.col); - - // Set the custom JSON data - e.detail.parameters = { - type: "make_move", - row: row, - col: col - }; - } -}); \ No newline at end of file +document.addEventListener('htmx:wsConfigSend', function (e) { + if (e.target.classList.contains('board-cell')) { + const row = parseInt(e.target.dataset.row); + const col = parseInt(e.target.dataset.col); + + // Set the custom JSON data + e.detail.parameters = { + type: 'make_move', + row: row, + col: col, + }; + } +}); diff --git a/public/style.css b/public/style.css index 7ecfb04..1107a45 100644 --- a/public/style.css +++ b/public/style.css @@ -52,4 +52,4 @@ body { #player-info { margin-top: 10px; font-weight: bold; -} \ No newline at end of file +} diff --git a/src/game/WebSocketHandler.ts b/src/game/WebSocketHandler.ts index a95d089..ca06342 100644 --- a/src/game/WebSocketHandler.ts +++ b/src/game/WebSocketHandler.ts @@ -12,7 +12,7 @@ interface MakeMoveMessage { col: number; } -type WS = ElysiaWS<{query: {playerId: string, gameId: string}}>; +type WS = ElysiaWS<{ query: { playerId: string; gameId: string } }>; export class WebSocketHandler { private connections: Map>; private games: Map; @@ -23,7 +23,7 @@ export class WebSocketHandler { } public handleConnection(ws: WS): void { - const {gameId, playerId} = ws.data.query; + const { gameId, playerId } = ws.data.query; if (!this.connections.has(gameId)) { this.connections.set(gameId, []); @@ -53,14 +53,13 @@ export class WebSocketHandler { private handleMakeMove(ws: WS, message: MakeMoveMessage): void { const { row, col } = message; - const {gameId, playerId} = ws.data.query; - console.log(`Handling make_move message in game ${gameId} from player ${playerId}: ${{message}}`); + const { gameId, playerId } = ws.data.query; + console.log( + `Handling make_move message in game ${gameId} from player ${playerId}: ${{ message }}`, + ); if (!gameId || !playerId || row === undefined || col === undefined) { - this.sendMessage( - ws, - 'Error: missing gameId, playerId, row, or col', - ); + this.sendMessage(ws, 'Error: missing gameId, playerId, row, or col'); return; } @@ -74,10 +73,7 @@ export class WebSocketHandler { ([_, id]) => id === playerId, )?.[0] as ('black' | 'white') | undefined; if (!playerColor) { - this.sendMessage( - ws, - 'Error: you are not a player in this game', - ); + this.sendMessage(ws, 'Error: you are not a player in this game'); return; } @@ -102,11 +98,13 @@ export class WebSocketHandler { } public handleDisconnect(ws: WS): void { - const {gameId, playerId} = ws.data.query; + const { gameId, playerId } = ws.data.query; const connectionsInGame = this.connections.get(gameId); if (!connectionsInGame) { - console.error(`Disconnecting WebSocket for player ${playerId} from game ${gameId}, but that game has no connections!`); + console.error( + `Disconnecting WebSocket for player ${playerId} from game ${gameId}, but that game has no connections!`, + ); return; } this.connections.set( @@ -127,28 +125,30 @@ export class WebSocketHandler { public broadcastGameState(gameId: string): void { const game = this.games.get(gameId); if (!game) { - console.warn('Attempted to broadcast state of game ${gameId}, which is not loaded.'); + console.warn( + 'Attempted to broadcast state of game ${gameId}, which is not loaded.', + ); return; } const connectionsToUpdate = this.connections.get(gameId); if (connectionsToUpdate) { connectionsToUpdate.forEach((ws) => { - const {gameId, playerId} = ws.data.query; + const { gameId, playerId } = ws.data.query; const updatedBoardHtml = renderGameBoardHtml(game, playerId); ws.send(updatedBoardHtml); - const updatedPlayerInfoHtml = renderPlayerInfoHtml( - game.id, - playerId, - ); + const updatedPlayerInfoHtml = renderPlayerInfoHtml(game.id, playerId); ws.send(updatedPlayerInfoHtml); if (game.status === 'finished') { if (game.winner === 'draw') { this.sendMessageToGame(gameId, 'Game ended in draw.'); } else if (game.winner) { - this.sendMessageToGame(gameId, `${game.winner.toUpperCase()} wins!`); + this.sendMessageToGame( + gameId, + `${game.winner.toUpperCase()} wins!`, + ); } } else if (game.status === 'playing') { const clientPlayerColor = Object.entries(game.players).find( @@ -168,27 +168,21 @@ export class WebSocketHandler { } } - public sendMessageToGame( - gameId: string, - message: string, - ): void { + public sendMessageToGame(gameId: string, message: string): void { const connections = this.connections.get(gameId); if (connections) { connections.forEach((ws) => { - ws.send('
' + message + '
') + ws.send('
' + message + '
'); }); } } - public sendMessage( - targetWs: WS, - message: string, - ): void { - targetWs.send('
' + message + '
') + public sendMessage(targetWs: WS, message: string): void { + targetWs.send('
' + message + '
'); } public getGame(gameId: string): GameInstance | undefined { - return this.games.get(gameId) + return this.games.get(gameId); } createGame(gameId?: string): GameInstance { diff --git a/src/index.ts b/src/index.ts index d5bda5c..980c688 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,8 +16,8 @@ const app = new Elysia() .use(cookie()) .ws('/ws', { query: t.Object({ - gameId: t.String(), - playerId: t.String(), + gameId: t.String(), + playerId: t.String(), }), open(ws) { const { gameId, playerId } = ws.data.query; diff --git a/src/view/board-renderer.ts b/src/view/board-renderer.ts index 82181cc..f028b7a 100644 --- a/src/view/board-renderer.ts +++ b/src/view/board-renderer.ts @@ -12,9 +12,8 @@ export function renderGameBoardHtml( let boardHtml = '
'; const currentPlayerColor = - Object.entries(gameState.players).find( - ([_, id]) => id === playerId, - )?.[0] || null; + Object.entries(gameState.players).find(([_, id]) => id === playerId)?.[0] || + null; const isPlayersTurn = gameState.status === 'playing' && gameState.currentPlayer === currentPlayerColor; @@ -30,9 +29,7 @@ export function renderGameBoardHtml( } // HTMX attributes for making a move - const wsAttrs = isPlayersTurn && !stone - ? `ws-send="click"` - : ''; + const wsAttrs = isPlayersTurn && !stone ? `ws-send="click"` : ''; boardHtml += `