Render stones at grid intersections instead of inside cells

public/scripts/send-ws-messages.js

@@ -1,5 +1,5 @@
 document.addEventListener('htmx:wsConfigSend', function (e) {
-  if (e.target.classList.contains('board-cell')) {
+  if (e.target.classList.contains('intersection')) {
     const row = parseInt(e.target.dataset.row);
     const col = parseInt(e.target.dataset.col);
 

public/style.css

@@ -1,5 +1,6 @@
 body {
   font-family: Arial, sans-serif;
+  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -14,33 +15,56 @@ body {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   text-align: center;
 }
+
 .game-board-grid {
-  display: grid;
-  grid-template-columns: repeat(15, 1fr);
-  width: 450px; /* 15 * 30px */
-  height: 450px; /* 15 * 30px */
-  border: 1px solid black;
+  position: relative;
+  width: calc(14 * 30px); /* 14 gaps of 30px between 15 lines */
+  height: calc(14 * 30px); /* 14 gaps of 30px between 15 lines */
   margin-top: 20px;
+  background-color: #deb887; /* Wood color */
+  border: 1px solid black; /* Border for the whole board area */
 }
-.board-cell {
+
+/* Grid lines */
+.game-board-grid::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image:
+    linear-gradient(to right, black 1px, transparent 1px),
+    linear-gradient(to bottom, black 1px, transparent 1px);
+  background-size: 30px 30px;
+  background-position: -1px -1px; /* Align grid lines to the top-left */
+  pointer-events: none;
+}
+
+.intersection {
+  position: absolute;
   width: 30px;
   height: 30px;
-  border: 1px solid #ccc;
-  box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  z-index: 1;
 }
-.board-cell:hover {
-  background-color: #e0e0e0;
-}
-.board-cell > div {
+
+.intersection > div {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid #333;
+  z-index: 2;
 }
+
+.intersection:hover {
+  background-color: rgba(0, 0, 0, 0.1); /* Subtle hover effect */
+}
+
+
 .last-move {
   box-shadow: 0 0 5px 3px rgba(255, 255, 0, 0.7); /* Yellow glow */
 }

src/view/board-renderer.ts

@@ -21,22 +21,27 @@ export function renderGameBoardHtml(
   for (let row = 0; row < gameState.board.length; row++) {
     for (let col = 0; col < gameState.board[row].length; col++) {
       const stone = gameState.board[row][col];
-      const cellId = `cell-${row}-${col}`;
+      const intersectionId = `intersection-${row}-${col}`;
       let stoneHtml = '';
       if (stone) {
         const color = stone === 'black' ? 'black' : 'white';
         stoneHtml = `<div style="background-color: ${color};"></div>`;
       }
 
+      // Calculate top and left for absolute positioning, offset by half the intersection div size
+      const top = (row * 30) - 15; // 30px per grid unit, -15px to center the 30px intersection div
+      const left = (col * 30) - 15; // 30px per grid unit, -15px to center the 30px intersection div
+
       // HTMX attributes for making a move
       const wsAttrs = isPlayersTurn && !stone ? `ws-send="click"` : '';
 
       boardHtml += `
                 <div 
-                    id="${cellId}" 
-                    class="board-cell" 
+                    id="${intersectionId}" 
+                    class="intersection" 
                     data-row="${row}" 
                     data-col="${col}"
+                    style="top: ${top}px; left: ${left}px;"
                     ${wsAttrs}
                 >
                     ${stoneHtml}