Under the hood

Captures pointer strokes and redraws each one N times around the centre (rotated) plus a mirrored copy, with a rotating hue. Trails accumulate on the canvas.

'use client';

import * as React from 'react';

import { Win98Button } from '@/components/ui/win-98-button';

const SIZE = 480;

export function KaleidoscopeGame() {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const [segments, setSegments] = React.useState(8);
  const drawing = React.useRef(false);
  const last = React.useRef<{ x: number; y: number } | null>(null);
  const hue = React.useRef(0);

  const clear = React.useCallback(() => {
    const ctx = canvasRef.current?.getContext('2d');
    if (!ctx) return;
    ctx.fillStyle = '#14110b';
    ctx.fillRect(0, 0, SIZE, SIZE);
  }, []);

  React.useEffect(() => {
    clear();
  }, [clear]);

  const pos = (e: React.PointerEvent) => {
    const r = canvasRef.current!.getBoundingClientRect();
    return {
      x: ((e.clientX - r.left) / r.width) * SIZE - SIZE / 2,
      y: ((e.clientY - r.top) / r.height) * SIZE - SIZE / 2,
    };
  };

  const stroke = (a: { x: number; y: number }, b: { x: number; y: number }) => {
    const ctx = canvasRef.current?.getContext('2d');
    if (!ctx) return;
    hue.current = (hue.current + 4) % 360;
    ctx.strokeStyle = `hsl(${hue.current} 80% 60%)`;
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.save();
    ctx.translate(SIZE / 2, SIZE / 2);
    for (let i = 0; i < segments; i++) {
      ctx.rotate((Math.PI * 2) / segments);
      ctx.beginPath();
      ctx.moveTo(a.x, a.y);
      ctx.lineTo(b.x, b.y);
      ctx.stroke();
      // mirrored
      ctx.beginPath();
      ctx.moveTo(a.x, -a.y);
      ctx.lineTo(b.x, -b.y);
      ctx.stroke();
    }
    ctx.restore();
  };

  return (
    <div className="flex w-full max-w-[520px] flex-col items-center gap-5">
      <canvas
        ref={canvasRef}
        width={SIZE}
        height={SIZE}
        onPointerDown={(e) => {
          drawing.current = true;
          last.current = pos(e);
          canvasRef.current?.setPointerCapture(e.pointerId);
        }}
        onPointerMove={(e) => {
          if (!drawing.current) return;
          const p = pos(e);
          if (last.current) stroke(last.current, p);
          last.current = p;
        }}
        onPointerUp={() => {
          drawing.current = false;
          last.current = null;
        }}
        className="aspect-square w-full max-w-full touch-none rounded-full border border-foreground/20"
      />
      <div className="flex items-center gap-2">
        <Win98Button onClick={() => setSegments((s) => (s % 12) + 4)} aria-label="symmetry">
          {segments}-fold
        </Win98Button>
        <Win98Button onClick={clear}>Clear</Win98Button>
      </div>
      <div className="font-mono text-[11px] uppercase tracking-[0.12em] opacity-45">
        drag inside the circle to draw
      </div>
    </div>
  );
}