plastische Steine

src/main/client/src/feature/game/paint.js

@@ -136,12 +136,22 @@ function paintTerritory({canvasRef, grid, territoryRadius}, grid_x, grid_y, styl
 }
 
 function paintStone({canvasRef, grid, stoneRadius}, grid_x, grid_y, color) {
-  let style = color === BLACK ?
-    "rgba(0,0,0)" :
-    "rgba(255,255,255)"
+  let outerStyle = color === BLACK ?
+    "#505050" :
+    "#fff"
+  let innerStyle = color === BLACK ?
+    "rgba(80,80,80,0)" :
+    "hsla(0,0%,100%,0)"
   let [x, y] = grid[grid_y][grid_x]
   let ctx = canvasRef.current.getContext("2d")
-  ctx.fillStyle = style
+  ctx.fillStyle = color === BLACK ? "#111" : "#ddd"
+  ctx.beginPath()
+  ctx.arc(x, y, stoneRadius, 0, TAU)
+  ctx.fill()
+  let gradient = ctx.createRadialGradient(x - (stoneRadius/4), y - (stoneRadius/4), 0, x - (stoneRadius/4), y - (stoneRadius/4), stoneRadius)
+  gradient.addColorStop(color === BLACK ? 0.55 : 0.7, innerStyle);
+  gradient.addColorStop(color === BLACK ? 0.1 : 0.2, outerStyle);
+  ctx.fillStyle = gradient
   ctx.beginPath()
   ctx.arc(x, y, stoneRadius, 0, TAU)
   ctx.fill()