sepia
/
gomoku
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Style the title box

This commit is contained in:
sepia 2025-07-20 16:16:28 -05:00
parent c112fa99cf
commit 605c111c73
5 changed files with 82 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -18,7 +18,7 @@
</head> </head>
<body> <body>
<div id="game-container" hx-ext="ws"> <div id="game-container" hx-ext="ws">
<div id="player-info"></div> <div id="title-box" class="title-box"></div>
<div id="game-board" class="game-board-grid"></div> <div id="game-board" class="game-board-grid"></div>
<div id="messages" hx-swap-oob="beforeend"></div> <div id="messages" hx-swap-oob="beforeend"></div>
</div> </div>

3
public/icons/disconnected.svg Executable file
View File

@ -0,0 +1,3 @@
<svg data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m3 3 8.735 8.735m0 0a.374.374 0 1 1 .53.53m-.53-.53.53.53m0 0L21 21M14.652 9.348a3.75 3.75 0 0 1 0 5.304m2.121-7.425a6.75 6.75 0 0 1 0 9.546m2.121-11.667c3.808 3.807 3.808 9.98 0 13.788m-9.546-4.242a3.733 3.733 0 0 1-1.06-2.122m-1.061 4.243a6.75 6.75 0 0 1-1.625-6.929m-.496 9.05c-3.068-3.067-3.664-7.67-1.79-11.334M12 12h.008v.008H12V12Z" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 562 B

27
public/style.css
View File

@ -1,6 +1,6 @@
:root { :root {
--color-background-light-pink: #ffe0f0; --color-background-light-pink: #ffe0f0;
--color-text-dark: #333; --color-text: #333;
--color-game-container-bg: white; --color-game-container-bg: white;
--color-game-container-shadow: rgba(0, 0, 0, 0.1); --color-game-container-shadow: rgba(0, 0, 0, 0.1);
--color-board-bg: #ffefff; --color-board-bg: #ffefff;
@ -23,7 +23,7 @@ body {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
background-color: var(--color-background-light-pink); background-color: var(--color-background-light-pink);
color: var(--color-text-dark); color: var(--color-text);
} }
#game-container { #game-container {
@ -122,13 +122,12 @@ body {
#messages { #messages {
margin-top: 10px; margin-top: 10px;
font-size: 0.9em; font-size: 0.9em;
color: var(--color-text-dark); color: var(--color-text);
} }
#player-info { #title-box {
margin-top: 10px;
font-weight: bold; font-weight: bold;
color: var(--color-text-dark); color: var(--color-text);
} }
#game-link-container { #game-link-container {
@ -140,25 +139,20 @@ body {
margin-top: 20px; margin-top: 20px;
} }
#copy-link-button, #copy-link-button {
#copy-success-message {
position: absolute; position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
top: 0; bottom: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
padding: 8px 15px; padding: 8px 15px;
border-radius: 5px; border-radius: 5px;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box;
} }
#copy-link-button { #copy-link-button {
background-color: var(--color-board-border); background-color: var(--color-board-border);
color: var(--color-text-dark); color: var(--color-text);
border: none; border: none;
cursor: pointer; cursor: pointer;
gap: 8px; gap: 8px;
@ -173,7 +167,8 @@ body {
background-color: var(--color-success-purple); background-color: var(--color-success-purple);
} }
#copy-link-button img.icon { img.icon {
width: 20px; width: 1em;
height: 20px; height: 1em;
vertical-align: middle;
} }

4
src/view/board-renderer.ts
View File

@ -52,6 +52,6 @@ export function renderGameBoardHtml(
return boardHtml; return boardHtml;
} }
export function renderPlayerInfoHtml(gameId: string, playerId: string): string { export function renderTitleBoxHtml(gameId: string, playerId: string): string {
return `<div id="player-info">You are: ${playerId}<br/>Game ID: ${gameId}</div>`; return `<div id="title-box">You are: ${playerId}<br/>Game ID: ${gameId}</div>`;
} }

70
src/web-socket-handler.ts
View File

@ -2,7 +2,6 @@ import { ElysiaWS } from 'elysia/dist/ws';
import { GameInstance } from './game/game-instance'; import { GameInstance } from './game/game-instance';
import { import {
renderGameBoardHtml, renderGameBoardHtml,
renderPlayerInfoHtml,
} from './view/board-renderer'; } from './view/board-renderer';
interface MakeMoveMessage { interface MakeMoveMessage {
@ -109,7 +108,7 @@ export class WebSocketHandler {
} }
this.connections.set( this.connections.set(
gameId, gameId,
connectionsInGame.filter((conn) => conn !== ws), connectionsInGame.filter((conn) => conn.data.query.playerId !== ws.data.query.playerId),
); );
if (this.connections.get(gameId)?.length === 0) { if (this.connections.get(gameId)?.length === 0) {
this.connections.delete(gameId); this.connections.delete(gameId);
@ -119,6 +118,9 @@ export class WebSocketHandler {
// Notify remaining players about disconnect // Notify remaining players about disconnect
this.sendMessageToGame(gameId, `${playerId} disconnected.`); this.sendMessageToGame(gameId, `${playerId} disconnected.`);
} }
this.sendTitleBoxesForGame(gameId);
console.log(`${playerId} disconnected from game ${gameId}`); console.log(`${playerId} disconnected from game ${gameId}`);
} }
@ -138,8 +140,6 @@ export class WebSocketHandler {
const updatedBoardHtml = renderGameBoardHtml(game, playerId); const updatedBoardHtml = renderGameBoardHtml(game, playerId);
ws.send(updatedBoardHtml); ws.send(updatedBoardHtml);
const updatedPlayerInfoHtml = renderPlayerInfoHtml(game.id, playerId);
ws.send(updatedPlayerInfoHtml);
if (game.status === 'finished') { if (game.status === 'finished') {
if (game.winner === 'draw') { if (game.winner === 'draw') {
@ -166,13 +166,15 @@ export class WebSocketHandler {
} else { } else {
console.log(`No connections to update for game ${gameId}.`); console.log(`No connections to update for game ${gameId}.`);
} }
this.sendTitleBoxesForGame(gameId);
} }
public sendMessageToGame(gameId: string, message: string): void { public sendMessageToGame(gameId: string, message: string): void {
const connections = this.connections.get(gameId); const connections = this.connections.get(gameId);
if (connections) { if (connections) {
connections.forEach((ws) => { connections.forEach((ws) => {
ws.send('<div id="messages">' + message + '</div>'); this.sendMessage(ws, message);
}); });
} }
} }
@ -181,6 +183,64 @@ export class WebSocketHandler {
targetWs.send('<div id="messages">' + message + '</div>'); targetWs.send('<div id="messages">' + message + '</div>');
} }
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!`)
return;
}
const connections = this.connections.get(gameId);
if (!connections) {
console.log(`Attempted to send title boxes for game ${gameId}, but no players are connected.`)
return;
}
var message = "";
switch (game.status) {
case 'waiting': {
message = "Waiting for players...";
}
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';
message = `${blackTag} vs ${whiteTag}`;
}
case 'finished': {
switch (game.winner) {
case 'draw': {
message = "Game ended in draw.";
}
case 'black': {
message = `${game.players.black} wins!`;
}
case 'white': {
message = `${game.players.white} wins!`;
}
}
}
}
connections.forEach((connection) => {this.sendTitleBox(connection, message)});
}
private playerTag(gameId: string, playerId: string) {
var connectionIcon = `<img src="/icons/disconnected.svg" alt="Disconnected" class="icon" />`
const connections = this.connections.get(gameId);
if (connections) {
connections.forEach((ws) => {
if (ws.data.query.playerId === playerId) {
console.log(`Connection exists for player ${playerId}`);
connectionIcon = '';
}
});
}
return `<span>${playerId}${connectionIcon}</span>`
}
public getGame(gameId: string): GameInstance | undefined { public getGame(gameId: string): GameInstance | undefined {
return this.games.get(gameId); return this.games.get(gameId);
} }