import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import "./styles.css"; type Direction = "N" | "E" | "S" | "W"; type Tile = { openings: Direction[]; role?: "source" | "sink" }; type Status = "playing" | "won"; const SIZE = 5; const SOURCE = 10; const SINK = 14; const PATH = [10, 11, 6, 7, 8, 13, 18, 19, 14]; const DIRECTIONS: Direction[] = ["N", "E", "S", "W"]; const DELTAS: Record = { N: [-1, 0], E: [0, 1], S: [1, 0], W: [0, -1], }; const OPPOSITE: Record = { N: "S", E: "W", S: "N", W: "E" }; const TILES: Tile[] = [ { openings: ["E", "S"] }, { openings: ["E", "W"] }, { openings: ["N", "E", "S"] }, { openings: ["N", "W"] }, { openings: ["N", "S"] }, { openings: ["N", "E"] }, { openings: ["S", "E"] }, { openings: ["E", "W"] }, { openings: ["W", "S"] }, { openings: ["N", "E", "W"] }, { openings: ["E"], role: "source" }, { openings: ["W", "N"] }, { openings: ["E", "S"] }, { openings: ["N", "S"] }, { openings: ["S"], role: "sink" }, { openings: ["N", "S", "E"] }, { openings: ["N", "W"] }, { openings: ["E", "W"] }, { openings: ["N", "E"] }, { openings: ["W", "N"] }, { openings: ["N", "E"] }, { openings: ["N", "S"] }, { openings: ["N", "E", "W"] }, { openings: ["S", "W"] }, { openings: ["N", "S"] }, ]; function rotateDirection(direction: Direction, rotation: number) { return DIRECTIONS[(DIRECTIONS.indexOf(direction) + rotation) % 4]; } function getOpenings(index: number, rotations: number[]) { return TILES[index].openings.map((direction) => rotateDirection(direction, rotations[index])); } function createBoard(level: number) { const rotations = TILES.map((_, index) => ((index * 3 + level * 7 + (index % 4) * level) % 4)); PATH.forEach((index, pathIndex) => { rotations[index] = ((level + pathIndex * 3) % 3) + 1; }); return rotations; } function getPowered(rotations: number[]) { const powered = new Set([SOURCE]); const queue = [SOURCE]; while (queue.length > 0) { const index = queue.shift(); if (index === undefined) break; const row = Math.floor(index / SIZE); const column = index % SIZE; for (const direction of getOpenings(index, rotations)) { const [rowDelta, columnDelta] = DELTAS[direction]; const nextRow = row + rowDelta; const nextColumn = column + columnDelta; if (nextRow < 0 || nextRow >= SIZE || nextColumn < 0 || nextColumn >= SIZE) continue; const nextIndex = nextRow * SIZE + nextColumn; if (getOpenings(nextIndex, rotations).includes(OPPOSITE[direction]) && !powered.has(nextIndex)) { powered.add(nextIndex); queue.push(nextIndex); } } } return powered; } function formatTime(seconds: number) { const minutes = Math.floor(seconds / 60); return minutes + ":" + String(seconds % 60).padStart(2, "0"); } export default function App() { const [level, setLevel] = useState(1); const [rotations, setRotations] = useState(() => createBoard(1)); const [history, setHistory] = useState([]); const [moves, setMoves] = useState(0); const [seconds, setSeconds] = useState(0); const [status, setStatus] = useState("playing"); const [hintIndex, setHintIndex] = useState(null); const [best, setBest] = useState(null); const hintTimer = useRef(null); const powered = useMemo(() => getPowered(rotations), [rotations]); useEffect(() => { const saved = Number(window.localStorage.getItem("rune-circuit-best") || 0); setBest(saved > 0 ? saved : null); }, []); useEffect(() => { if (status !== "playing") return; const timer = window.setInterval(() => setSeconds((value) => value + 1), 1000); return () => window.clearInterval(timer); }, [status]); useEffect(() => { if (!powered.has(SINK) || status !== "playing") return; setStatus("won"); const nextBest = best === null ? moves : Math.min(best, moves); setBest(nextBest); window.localStorage.setItem("rune-circuit-best", String(nextBest)); }, [best, moves, powered, status]); const rotate = useCallback((index: number, amount = 1) => { if (status !== "playing") return; setHistory((current) => [...current.slice(-29), rotations]); setRotations((current) => current.map((rotation, tileIndex) => tileIndex === index ? (rotation + amount + 4) % 4 : rotation)); setMoves((value) => value + 1); setHintIndex(null); }, [rotations, status]); const undo = () => { if (history.length === 0 || status !== "playing") return; const previous = history[history.length - 1]; setHistory((current) => current.slice(0, -1)); setRotations(previous); setMoves((value) => Math.max(0, value - 1)); }; const showHint = () => { const firstUnpowered = PATH.find((index) => !powered.has(index)); const target = firstUnpowered === undefined ? PATH[PATH.length - 1] : firstUnpowered; setHintIndex(target); if (hintTimer.current) window.clearTimeout(hintTimer.current); hintTimer.current = window.setTimeout(() => setHintIndex(null), 1600); }; const startLevel = (nextLevel: number) => { setLevel(nextLevel); setRotations(createBoard(nextLevel)); setHistory([]); setMoves(0); setSeconds(0); setStatus("playing"); setHintIndex(null); }; return (

RUNE CIRCUITArchive restoration console

SPECIMENNO. {String(level).padStart(3, "0")}

IN

{TILES.map((tile, index) => { const openings = getOpenings(index, rotations); const isPowered = powered.has(index); return ( ); })}

OUT

CLICK TO ROTATE CLOCKWISE · RIGHT CLICK FOR COUNTERCLOCKWISE

MOVES{String(moves).padStart(2, "0")}

TIME{formatTime(seconds)}

BEST{best === null ? "—" : String(best).padStart(2, "0")}

CONTINUITY{Math.round((powered.size / TILES.length) * 100)}%

{status === "won" && (
ARCHIVE ONLINE
Current restored in {moves} moves.

The next specimen uses a new rotation cipher. Your archive-best is {best} moves.

)}

); }