Add direct routes for stone svg files

src/index.ts

@@ -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);

src/view/board-renderer.tsx

@@ -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 =
+        const isLastMove = col == lastMove.col && row == lastMove.row;
-          stone === 'black' ? 'stone-black-heart' : 'stone-white-heart';
+        stoneHtml = createStoneSvg(stone, isLastMove);
-        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>
-        );
       } else {
         stoneHtml = null;
       }