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

Add direct routes for stone svg files

This commit is contained in:
sepia 2025-07-29 18:39:49 -05:00
parent f6b64fc569
commit b0a759dd26
2 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/index.ts
View File

@ -4,6 +4,7 @@ import { staticPlugin } from '@elysiajs/static';
import { cookie } from '@elysiajs/cookie';
import { WebSocketHandler } from './web-socket-handler';
import { ElysiaWS } from 'elysia/dist/ws';
import { createStoneSvg } from './view/board-renderer';
const wsHandler = new WebSocketHandler();
export type WS = ElysiaWS<{ query: { playerId: string; gameId: string } }>;
@ -90,6 +91,20 @@ const app = new Elysia()
headers: { 'Content-Type': 'text/html' },
status: 200,
});
})
.get('/black-stone.svg', () => {
const stoneSvg = createStoneSvg('black', false);
return new Response(String(stoneSvg), {
headers: { 'Content-Type': 'image/svg+xml' },
status: 200,
});
})
.get('/white-stone.svg', () => {
const stoneSvg = createStoneSvg('white', false);
return new Response(String(stoneSvg), {
headers: { 'Content-Type': 'image/svg+xml' },
status: 200,
});
});
const port = Number(process.env.PORT || 3000);

52
src/view/board-renderer.tsx
View File

@ -3,6 +3,34 @@ import { GomokuGame } from '../game/game-instance';
import { PlayerConnection } from '../player-connection';
import { GameServer } from '../game-server';
export function createStoneSvg(
color: 'black' | 'white',
isHighlighted: boolean = false,
): JSX.Element {
const colorClass =
color === 'black' ? 'stone-black-heart' : 'stone-white-heart';
const lastMoveClass = isHighlighted ? 'last-move' : '';
return (
<svg
xmlns="http://www.w3.org/2000/svg"
class={`${colorClass} ${lastMoveClass}`}
viewBox="0 0 24 24"
width="24"
height="24"
>
<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
fill="none"
stroke-width="1.5"
/>
</svg>
);
}
export function broadcastBoard(server: GameServer) {
server.connections.forEach((conn: PlayerConnection) =>
broadcastBoardToPlayer(server, conn),
@ -34,28 +62,8 @@ function renderGameBoardHtml(
const intersectionId = `intersection-${row}-${col}`;
let stoneHtml: JSX.Element | null;
if (stone) {
const colorClass =
stone === 'black' ? 'stone-black-heart' : 'stone-white-heart';
const lastMoveClass =
col == lastMove.col && row == lastMove.row ? 'last-move' : '';
stoneHtml = (
<svg
xmlns="http://www.w3.org/2000/svg"
class={`${colorClass} ${lastMoveClass}`}
viewBox="0 0 24 24"
width="24"
height="24"
>
<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
fill="none"
stroke-width="1.5"
/>
</svg>
);
const isLastMove = col == lastMove.col && row == lastMove.row;
stoneHtml = createStoneSvg(stone, isLastMove);
} else {
stoneHtml = null;
}