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

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

@ -52,6 +52,6 @@ export function renderGameBoardHtml(
return boardHtml;
}
export function renderPlayerInfoHtml(gameId: string, playerId: string): string {
return `<div id="player-info">You are: ${playerId}<br/>Game ID: ${gameId}</div>`;
export function renderTitleBoxHtml(gameId: string, playerId: string): string {
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 {
renderGameBoardHtml,
renderPlayerInfoHtml,
} from './view/board-renderer';
interface MakeMoveMessage {
@ -109,7 +108,7 @@ export class WebSocketHandler {
}
this.connections.set(
gameId,
connectionsInGame.filter((conn) => conn !== ws),
connectionsInGame.filter((conn) => conn.data.query.playerId !== ws.data.query.playerId),
);
if (this.connections.get(gameId)?.length === 0) {
this.connections.delete(gameId);
@ -119,6 +118,9 @@ export class WebSocketHandler {
// Notify remaining players about disconnect
this.sendMessageToGame(gameId, `${playerId} disconnected.`);
}
this.sendTitleBoxesForGame(gameId);
console.log(`${playerId} disconnected from game ${gameId}`);
}
@ -138,8 +140,6 @@ export class WebSocketHandler {
const updatedBoardHtml = renderGameBoardHtml(game, playerId);
ws.send(updatedBoardHtml);
const updatedPlayerInfoHtml = renderPlayerInfoHtml(game.id, playerId);
ws.send(updatedPlayerInfoHtml);
if (game.status === 'finished') {
if (game.winner === 'draw') {
@ -166,13 +166,15 @@ export class WebSocketHandler {
} else {
console.log(`No connections to update for game ${gameId}.`);
}
this.sendTitleBoxesForGame(gameId);
}
public sendMessageToGame(gameId: string, message: string): void {
const connections = this.connections.get(gameId);
if (connections) {
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>');
}
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 {
return this.games.get(gameId);
}