```tsx 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // --- Configuration & Constants --- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const GRID_SIZE = 400; // Size of the central demonstration area const CELL_COUNT = 4; // 4x4 squares (5x5 intersection points) const CELL_SIZE = GRID_SIZE / CELL_COUNT; const OFFSET_X = (VIEW_WIDTH - GRID_SIZE) / 2; const OFFSET_Y = (VIEW_HEIGHT - GRID_SIZE) / 2; const COLORS = { bg: '#0f172a', // Slate 900 gridBase: '#1e293b', // Slate 800 gridLine: '#334155', // Slate 700 blackStone: '#0f172a',// Deep dark blackStoneRim: '#06b6d4', // Cyan 500 whiteStone: '#f8fafc',// Slate 50 whiteStoneRim: '#8b5cf6', // Violet 500 liberty: '#10b981', // Emerald 500 (Safe) danger: '#ef4444', // Red 500 (Atari) textMain: '#e2e8f0', // Slate 200 textSub: '#94a3b8', // Slate 400 accent: '#f59e0b', // Amber 500 }; // --- Types --- interface Stone { id: number; x: number; // Logical grid coordinates (0-4) y: number; type: 'black' | 'white'; status: 'appearing' | 'normal' | 'captured'; } interface LibertyMarker { id: string; x: number; y: number; status: 'active' | 'blocked'; } export default function GoRulesTechAnim() { // --- State --- const [phase, setPhase] = useState(0); const [stones, setStones] = useState([]); const [liberties, setLiberties] = useState([]); const [scanLineY, setScanLineY] = useState(0); const [resetKey, setResetKey] = useState(0); // --- Refs for animation frame loops (if needed for smooth non-CSS motion) --- const requestRef = useRef(); // --- Animation Sequence Controller --- useEffect(() => { let timer: NodeJS.Timeout; let isActive = true; const runSequence = async () => { // Helper to wait safely const wait = (ms: number) => new Promise(r => setTimeout(r, ms)); if (!isActive) return; // Phase 0: Initialization & Grid Scan setPhase(0); setStones([]); setLiberties([]); await wait(2000); // Phase 1: Place Black Stone (Center) if (!isActive) return; setPhase(1); const centerStone: Stone = { id: 1, x: 2, y: 2, type: 'black', status: 'appearing' }; setStones([centerStone]); await wait(500); setStones(prev => prev.map(s => ({ ...s, status: 'normal' }))); await wait(1500); // Phase 2: Show Liberties (Qi) if (!isActive) return; setPhase(2); // Liberties for (2,2) are (2,1), (2,3), (1,2), (3,2) setLiberties([ { id: 'l1', x: 2, y: 1, status: 'active' }, { id: 'l2', x: 1, y: 2, status: 'active' }, { id: 'l3', x: 3, y: 2, status: 'active' }, { id: 'l4', x: 2, y: 3, status: 'active' }, ]); await wait(2500); // Phase 3: White Approaches (Block liberties) if (!isActive) return; setPhase(3); // Move 3.1: Top setStones(prev => [...prev, { id: 2, x: 2, y: 1, type: 'white', status: 'appearing' }]); setLiberties(prev => prev.map(l => l.x === 2 && l.y === 1 ? { ...l, status: 'blocked' } : l)); await wait(1000); // Move 3.2: Left setStones(prev => [...prev, { id: 3, x: 1, y: 2, type: 'white', status: 'appearing' }]); setLiberties(prev => prev.map(l => l.x === 1 && l.y === 2 ? { ...l, status: 'blocked' } : l)); await wait(1000); // Move 3.3: Right setStones(prev => [...prev, { id: 4, x: 3, y: 2, type: 'white', status: 'appearing' }]); setLiberties(prev => prev.map(l => l.x === 3 && l.y === 2 ? { ...l, status: 'blocked' } : l)); await wait(1500); // Phase 4: Atari (Last liberty warning) if (!isActive) return; setPhase(4); await wait(2000); // Phase 5: Capture if (!isActive) return; setPhase(5); // Place last white stone setStones(prev => [...prev, { id: 5, x: 2, y: 3, type: 'white', status: 'appearing' }]); setLiberties(prev => prev.map(l => l.x === 2 && l.y === 3 ? { ...l, status: 'blocked' } : l)); await wait(800); // Capture effect: Mark black stone as captured setStones(prev => prev.map(s => s.type === 'black' ? { ...s, status: 'captured' } : s)); await wait(4000); if (isActive) setResetKey(k => k + 1); // Loop }; runSequence(); return () => { isActive = false; clearTimeout(timer); }; }, [resetKey]); // --- RAF Loop for Scanner --- useEffect(() => { const animate = (time: number) => { const speed = 0.2; // pixels per ms const y = (time * speed) % (VIEW_HEIGHT + 200) - 100; setScanLineY(y); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // --- Helpers --- const toScreen = (gx: number, gy: number) => ({ x: OFFSET_X + gx * CELL_SIZE, y: OFFSET_Y + gy * CELL_SIZE }); return (

{/* CSS Styles Injection */}

); } ```