center board decorations on lines

src/main/client/src/feature/game/Game.jsx

@@ -39,7 +39,6 @@ export const Game = () => {
   let [cursor_x, setCursor_x] = useState(-1)
   let [cursor_y, setCursor_y] = useState(-1)
   let [zoom, setZoom] = useState(0)
-  let [boardDecorations, setBoardDecorations] = useState(true)
   let {gameId} = useParams()
   let navigate = useNavigate()
   let stompClient = useContext(StompContext)
@@ -67,7 +66,7 @@ export const Game = () => {
     let zoomFactor = 1 + (zoom * 0.0625)
     width = Math.trunc(width * zoomFactor)
     margin = Math.trunc(margin * zoomFactor)
-    step = Math.trunc(step * zoomFactor)
+    step = step * zoomFactor
     let grid = []
     for (let y = 0; y < dim; y++) {
       grid[y] = []
@@ -105,7 +104,6 @@ export const Game = () => {
       step,
       grid,
       canvasRef,
-      boardDecorations,
       isCursorInBounds: function(x, y) {
         return x >= 0 && x < dim && y >= 0 && y < dim
       },
@@ -114,7 +112,7 @@ export const Game = () => {
       territoryRadius: getRadius(step * 0.125),
       hoshiRadius: getRadius(step * 0.0625),
     }
-  }, [board.length, canvasRef, zoom, boardDecorations])
+  }, [board.length, canvasRef, zoom])
 
   let onMouseMove = useCallback((e) => {
     if (gameHasEnded) {
@@ -178,9 +176,6 @@ export const Game = () => {
     if (!board.length) {
       return
     }
-    if (!context.boardDecorations) {
-      return
-    }
     paintBoardDecorations(context)
   }, [context, board.length])
 

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

@@ -15,7 +15,7 @@ export function paintGrid({width, margin, canvasRef, grid, hoshis, hoshiRadius,
   let ctx = canvasRef.current.getContext("2d")
   ctx.fillStyle = kirsch
   if (boardDecorations) {
-    ctx.fillRect(0.625 * margin, 0.625 *  margin, width - 1.25 * margin, width - 1.25 * margin)
+    ctx.fillRect(0.625 * margin, 0.625 * margin, width - 1.25 * margin, width - 1.25 * margin)
   } else {
     ctx.fillRect(0, 0, width, width)
   }
@@ -50,15 +50,23 @@ export function paintBoardDecorations({width, margin, canvasRef, grid}) {
   ctx.fillStyle = kirsch
   ctx.fillRect(0, 0, width, width)
   ctx.fillStyle = asch
+  let size = Math.trunc(margin / 4)
+  ctx.font = size + "px sans-serif"
+  ctx.textAlign = "center"
   for (let grid_x = 0; grid_x < grid.length; grid_x++) {
     let [x] = grid[0][grid_x]
+    ctx.textBaseline = "top"
     ctx.fillText(decoX[grid_x], x, 0.25 * margin)
+    ctx.textBaseline = "alphabetic"
     ctx.fillText(decoX[grid_x], x, width - 0.25 * margin)
   }
+  ctx.textBaseline = "middle"
   for (let grid_y = 0; grid_y < grid.length; grid_y++) {
     let [, y] = grid[grid.length - grid_y - 1][0]
-    ctx.fillText(grid_y + 1, 0.25 * margin, y)
-    ctx.fillText(grid_y + 1, width -  0.25 * margin, y)
+    ctx.textAlign = "start"
+    ctx.fillText(grid_y + 1, 0.125 * margin, y)
+    ctx.textAlign = "end"
+    ctx.fillText(grid_y + 1, width -  0.125 * margin, y)
   }
 }