diff --git a/src/main/client/src/feature/game/paint.js b/src/main/client/src/feature/game/paint.js index 56cd3a6..4f38213 100644 --- a/src/main/client/src/feature/game/paint.js +++ b/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()