init

2026-10-23 19:23:03 +02:00
parent 8c8240de63
commit 19428550ca
90 changed files with 6912 additions and 0 deletions
@@ -0,0 +1,34 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import type { PlayerState } from '../net/types';
+import { drawBoard, setupCanvas } from '../render/draw';
+import styles from './BoardCanvas.module.css';
+
+interface Props {
+  state: PlayerState;
+  width: number;
+  height: number;
+  cell: number;
+  hideStack?: boolean;
+  highlighted?: boolean;
+  /** Rendered on top of the board (flashes, countdown, results). */
+  children?: ReactNode;
+}
+
+export function BoardCanvas({ state, width, height, cell, hideStack, highlighted, children }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = setupCanvas(canvas, width * cell, height * cell);
+    drawBoard(ctx, state, width, height, { cell, hideStack, showGrid: cell >= 14 });
+  }, [state, width, height, cell, hideStack]);
+
+  return (
+    <div className={[styles.frame, highlighted ? styles.highlighted : '', state.alive ? '' : styles.dead].join(' ')}>
+      <canvas ref={canvasRef} className={styles.canvas} />
+      {!state.alive && <div className={styles.out}>{state.place ? `#${state.place}` : 'OUT'}</div>}
+      {children}
+    </div>
+  );
+}