- update deploy script

- random +x stuff because I switched directories
- change heart stones to use inline svgs

justfile

@@ -8,7 +8,8 @@ build:
     bun build --compile --minify --target bun --outfile ./target/gomoku ./src/index.ts
 
 deploy: build
-    rsync -avz target/gomoku sepiatonesxyz:~/gomoku
+    rsync -avz target/gomoku sepiatonesxyz:~/gomoku/gomoku
+    rsync -avz --delete public/ sepiatonesxyz:~/gomoku/public
 
 test:
     bun test

public/icons/heart.svg

@@ -1,3 +0,0 @@
-<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="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" stroke-linecap="round" stroke-linejoin="round"></path>
-</svg>

public/index.html

@@ -47,7 +47,7 @@
         <div id="button-box"></div>
       </div>
 
-      <script src="scripts/display-ws-connection.js"></script>
+      <script src="scripts/make-ws-connection.js"></script>
       <script src="scripts/send-ws-messages.js"></script>
       <script src="scripts/profile-editor.js"></script>
       <script src="scripts/copy-game-link.js"></script>

public/scripts/make-ws-connection.js

@@ -8,7 +8,13 @@ const gameId = gameIdMeta.content;
 const playerId = playerIdMeta.content;
 
 // Dynamically construct WebSocket URL
-const wsUrl = `ws://${window.location.host}/ws?gameId=${gameId}&playerId=${playerId}`;
+let wsProtocol;
+if (window.location.protocol === 'https:') {
+  wsProtocol = 'wss';
+} else {
+  wsProtocol = 'ws';
+}
+const wsUrl = `${wsProtocol}://${window.location.host}/ws?gameId=${gameId}&playerId=${playerId}`;
 
 // Get the game container element
 const gameContainer = document.getElementById('ws-container');

public/style.css

@@ -149,48 +149,20 @@ body {
   width: 24px;
   height: 24px;
   margin: auto;
-  overflow: hidden;
 }
 
-.stone-black-heart::before,
-.stone-black-heart::after,
-.stone-white-heart::before,
-.stone-white-heart::after {
-  content: '';
-  position: absolute;
-  width: 12px;
-  height: 20px;
-  border-radius: 50% 50% 0 0;
-  border: 1px solid var(--color-neutral-900);
-  box-sizing: border-box;
-  transform: rotate(-45deg);
-  transform-origin: 0 100%;
-  top: 0;
-  left: 12px;
+.stone-black-heart {
+  fill: var(--color-primary);
+  stroke: var(--color-neutral-900);
 }
 
-.last-move.stone-white-heart::after,
-.last-move.stone-black-heart::after,
-.last-move.stone-white-heart::before,
-.last-move.stone-black-heart::before {
-  border: 2px solid var(--color-info) !important;
+.stone-white-heart {
+  stroke: var(--color-neutral-900);
+  fill: var(--color-on-primary);
 }
 
-.stone-black-heart::after,
-.stone-white-heart::after {
-  left: 0;
-  transform: rotate(45deg);
-  transform-origin: 100% 100%;
-}
-
-.stone-black-heart::before,
-.stone-black-heart::after {
-  background-color: var(--color-primary-light);
-}
-
-.stone-white-heart::before,
-.stone-white-heart::after {
-  background-color: var(--color-on-primary);
+.last-move {
+  stroke: var(--color-info) !important;
 }
 
 .player-name {

src/view/board-renderer.tsx

@@ -1,3 +1,4 @@
+import { Html } from '@elysiajs/html';
 import { GomokuGame } from '../game/game-instance';
 
 export function renderGameBoardHtml(
@@ -12,13 +13,32 @@ export function renderGameBoardHtml(
     for (let col = 0; col < game.board[row].length; col++) {
       const stone = game.board[row][col];
       const intersectionId = `intersection-${row}-${col}`;
-      let stoneHtml = '';
+      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 = `<div class="${colorClass} ${lastMoveClass}"></div>`;
+        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;
       }
 
       // Calculate top and left for absolute positioning, offset by half the intersection div size
@@ -37,7 +57,7 @@ export function renderGameBoardHtml(
                     style="top: ${top}%; left: ${left}%;"
                     ${wsAttrs}
                 >
-                    ${stoneHtml}
+                    ${stoneHtml ? stoneHtml : ''}
                 </div>`;
     }
   }