Style adjustments

public/style.css

@@ -1,3 +1,16 @@
+:root {
+  --color-background-light-pink: #ffe0f0;
+  --color-text-dark: #333;
+  --color-game-container-bg: white;
+  --color-game-container-shadow: rgba(0, 0, 0, 0.1);
+  --color-board-bg: #ffefff;
+  --color-board-border: #ffccff;
+  --color-grid-lines: #ff99ff;
+  --color-intersection-hover: rgba(255, 192, 203, 0.3);
+  --color-heart-pink: #FFB6C1;
+  --color-last-move-glow: rgba(255, 255, 0, 0.7);
+}
+
 body {
   font-family: Arial, sans-serif;
   display: flex;
@@ -6,13 +19,15 @@ body {
   justify-content: center;
   min-height: 100vh;
   margin: 0;
-  background-color: #f0f0f0;
+  background-color: var(--color-background-light-pink);
+  color: var(--color-text-dark);
 }
+
 #game-container {
-  background-color: white;
+  background-color: var(--color-game-container-bg);
   padding: 20px;
-  border-radius: 8px;
+  border-radius: 12px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 20px var(--color-game-container-shadow);
   text-align: center;
 }
 
@@ -21,8 +36,8 @@ body {
   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 */
+  background-color: var(--color-board-bg);
-  border: 1px solid black; /* Border for the whole board area */
+  border: 2px solid var(--color-board-border);
 }
 
 /* Grid lines */
@@ -34,10 +49,10 @@ body {
   width: 100%;
   height: 100%;
   background-image:
-    linear-gradient(to right, black 1px, transparent 1px),
+    linear-gradient(to right, var(--color-grid-lines) 1px, transparent 1px),
-    linear-gradient(to bottom, black 1px, transparent 1px);
+    linear-gradient(to bottom, var(--color-grid-lines) 1px, transparent 1px);
   background-size: 30px 30px;
-  background-position: -1px -1px; /* Align grid lines to the top-left */
+  background-position: -1px -1px;
   pointer-events: none;
 }
 
@@ -45,6 +60,8 @@ body {
   position: absolute;
   width: 30px;
   height: 30px;
+  margin-left: -15px;
+  margin-top: -15px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -52,28 +69,62 @@ body {
   z-index: 1;
 }
 
-.intersection > div {
+.intersection:hover {
-  width: 24px;
+  background-color: var(--color-intersection-hover);
-  height: 24px;
-  border-radius: 50%;
-  border: 1px solid #333;
-  z-index: 2;
 }
 
-.intersection:hover {
+/* Heart Stone Styling */
-  background-color: rgba(0, 0, 0, 0.1); /* Subtle hover effect */
+.stone-black-heart, .stone-white-heart {
+  position: relative;
+  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-black); /* Thin black outline - this creates the line through the middle */
+  box-sizing: border-box;
+  transform: rotate(-45deg);
+  transform-origin: 0 100%;
+  top: 0;
+  left: 12px;
+}
+
+.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-heart-pink);
+}
+
+.stone-white-heart::before, .stone-white-heart::after {
+  background-color: var(--color-white);
 }
 
 
 .last-move {
-  box-shadow: 0 0 5px 3px rgba(255, 255, 0, 0.7); /* Yellow glow */
+  box-shadow: 0 0 5px 3px var(--color-last-move-glow);
 }
 #messages {
   margin-top: 10px;
   font-size: 0.9em;
-  color: #555;
+  color: var(--color-text-dark);
 }
 #player-info {
   margin-top: 10px;
   font-weight: bold;
+  color: var(--color-text-dark);
 }

src/view/board-renderer.ts

@@ -24,13 +24,13 @@ export function renderGameBoardHtml(
       const intersectionId = `intersection-${row}-${col}`;
       let stoneHtml = '';
       if (stone) {
-        const color = stone === 'black' ? 'black' : 'white';
+        const colorClass = stone === 'black' ? 'stone-black-heart' : 'stone-white-heart';
-        stoneHtml = `<div style="background-color: ${color};"></div>`;
+        stoneHtml = `<div class="${colorClass}"></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 top = (row * 30); 
-      const left = (col * 30) - 15; // 30px per grid unit, -15px to center the 30px intersection div
+      const left = (col * 30); 
 
       // HTMX attributes for making a move
       const wsAttrs = isPlayersTurn && !stone ? `ws-send="click"` : '';