import { useState, useEffect, useCallback, useRef, useMemo } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; import { Trophy, RotateCcw, Clock, Lightbulb, X } from "lucide-react"; // ── Required Databases ───────────────────────────────────────────── export const REQUIRED_DATABASES = [ { type: "share", path: "md:_share/queens_game_2/a157ed34-eb60-489b-b3df-c750511736ca", alias: "queens_game_2" }, ]; // ── Types ────────────────────────────────────────────────────────── type CellState = "empty" | "x" | "queen"; type Difficulty = "easy" | "medium" | "hard" | "expert"; type Coord = [number, number]; const N = (v: unknown): number => (v != null ? Number(v) : 0); const DIFFICULTY_MAP: Record = { easy: { size: 6, label: "Easy 6×6" }, medium: { size: 7, label: "Medium 7×7" }, hard: { size: 8, label: "Hard 8×8" }, expert: { size: 9, label: "Expert 9×9" }, }; // LinkedIn Queens color palette const REGION_COLORS = [ "#E88774", "#E4DF7A", "#96A8D8", "#A0D4A0", "#C8A0D4", "#C4C0C0", "#F0C8A0", "#F0A0B4", "#80C8C8", ]; const DIFFICULTY_COLORS: Record = { easy: "#A0D4A0", medium: "#96A8D8", hard: "#E88774", expert: "#C8A0D4", }; // ── Game Logic ───────────────────────────────────────────────────── function areDiagAdjacent(r1: number, c1: number, r2: number, c2: number): boolean { return Math.abs(r1 - r2) <= 1 && Math.abs(c1 - c2) <= 1 && !(r1 === r2 && c1 === c2); } function getConflicts(grid: CellState[][], regions: number[][]): Set { const n = grid.length; const conflicts = new Set(); const queens: Coord[] = []; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (grid[r][c] === "queen") queens.push([r, c]); for (let i = 0; i < queens.length; i++) { for (let j = i + 1; j < queens.length; j++) { const [r1, c1] = queens[i]; const [r2, c2] = queens[j]; if (r1 === r2 || c1 === c2 || regions[r1][c1] === regions[r2][c2] || areDiagAdjacent(r1, c1, r2, c2)) { conflicts.add(`${r1},${c1}`); conflicts.add(`${r2},${c2}`); } } } return conflicts; } function checkWin(grid: CellState[][], regions: number[][]): boolean { const n = grid.length; const queens: Coord[] = []; const usedRows = new Set(); const usedCols = new Set(); const usedRegions = new Set(); for (let r = 0; r < n; r++) { for (let c = 0; c < n; c++) { if (grid[r][c] === "queen") { queens.push([r, c]); usedRows.add(r); usedCols.add(c); usedRegions.add(regions[r][c]); } } } if (queens.length !== n) return false; if (usedRows.size !== n || usedCols.size !== n || usedRegions.size !== n) return false; for (let i = 0; i < queens.length; i++) for (let j = i + 1; j < queens.length; j++) if (areDiagAdjacent(queens[i][0], queens[i][1], queens[j][0], queens[j][1])) return false; return true; } // ── Hint Engine ──────────────────────────────────────────────────── const REGION_NAMES = ["coral", "yellow", "blue", "green", "lavender", "gray", "peach", "pink", "teal"]; type Hint = { message: string; strategy: string; highlightGreen: Coord[]; highlightBlue: Coord[]; }; function generateHint(grid: CellState[][], regions: number[][]): Hint | null { const n = grid.length; const rName = (id: number) => REGION_NAMES[id % REGION_NAMES.length]; const emptyCells: Coord[] = []; const queenCells: Coord[] = []; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) { if (grid[r][c] === "empty") emptyCells.push([r, c]); if (grid[r][c] === "queen") queenCells.push([r, c]); } const allNeighbors = (r: number, c: number): Coord[] => { const out: Coord[] = []; for (let dr = -1; dr <= 1; dr++) for (let dc = -1; dc <= 1; dc++) { if (dr === 0 && dc === 0) continue; const nr = r + dr, nc = c + dc; if (nr >= 0 && nr < n && nc >= 0 && nc < n) out.push([nr, nc]); } return out; }; // Strategy 1: Eliminate around placed queens for (const [qr, qc] of queenCells) { const rowT: Coord[] = []; for (let c = 0; c < n; c++) if (c !== qc && grid[qr][c] === "empty") rowT.push([qr, c]); if (rowT.length > 0) return { strategy: "Row elimination", message: `There's a ♛ in row ${qr + 1}. Since each row can only have one queen, every other empty cell in this row can be eliminated.`, highlightGreen: rowT, highlightBlue: [[qr, qc]] }; const colT: Coord[] = []; for (let r = 0; r < n; r++) if (r !== qr && grid[r][qc] === "empty") colT.push([r, qc]); if (colT.length > 0) return { strategy: "Column elimination", message: `There's a ♛ in column ${qc + 1}. Since each column can only have one queen, every other empty cell in this column can be eliminated.`, highlightGreen: colT, highlightBlue: [[qr, qc]] }; const qReg = regions[qr][qc]; const regT: Coord[] = []; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if ((r !== qr || c !== qc) && regions[r][c] === qReg && grid[r][c] === "empty") regT.push([r, c]); if (regT.length > 0) return { strategy: "Region elimination", message: `There's a ♛ in the ${rName(qReg)} region. Since each color region only gets one queen, all other empty cells in that region can be eliminated.`, highlightGreen: regT, highlightBlue: [[qr, qc]] }; const adjT: Coord[] = []; for (const [nr, nc] of allNeighbors(qr, qc)) if (grid[nr][nc] === "empty") adjT.push([nr, nc]); if (adjT.length > 0) return { strategy: "Adjacency elimination", message: `Queens can't touch each other — not even diagonally. The cells surrounding this ♛ can all be eliminated.`, highlightGreen: adjT, highlightBlue: [[qr, qc]] }; } // Strategy 2: Forced placement for (let r = 0; r < n; r++) { if (grid[r].some(c => c === "queen")) continue; const emp: Coord[] = []; for (let c = 0; c < n; c++) if (grid[r][c] === "empty") emp.push([r, c]); if (emp.length === 1) return { strategy: "Forced placement (row)", message: `Row ${r + 1} has only one empty cell left. That cell must be the queen!`, highlightGreen: emp, highlightBlue: [] }; } for (let c = 0; c < n; c++) { let hq = false; const emp: Coord[] = []; for (let r = 0; r < n; r++) { if (grid[r][c] === "queen") hq = true; if (grid[r][c] === "empty") emp.push([r, c]); } if (!hq && emp.length === 1) return { strategy: "Forced placement (column)", message: `Column ${c + 1} has only one empty cell left. That cell must be the queen!`, highlightGreen: emp, highlightBlue: [] }; } for (let reg = 0; reg < n; reg++) { let hq = false; const emp: Coord[] = []; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) { if (regions[r][c] !== reg) continue; if (grid[r][c] === "queen") hq = true; if (grid[r][c] === "empty") emp.push([r, c]); } if (!hq && emp.length === 1) return { strategy: "Forced placement (region)", message: `The ${rName(reg)} region has only one empty cell left — that's where its queen goes!`, highlightGreen: emp, highlightBlue: [] }; } // Strategy 3: Region confinement for (let reg = 0; reg < n; reg++) { let hq = false; const emp: Coord[] = []; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) { if (regions[r][c] !== reg) continue; if (grid[r][c] === "queen") hq = true; if (grid[r][c] === "empty") emp.push([r, c]); } if (hq || emp.length === 0) continue; const rows = new Set(emp.map(([r]) => r)); if (rows.size === 1) { const row = [...rows][0]; const targets: Coord[] = []; for (let c = 0; c < n; c++) if (regions[row][c] !== reg && grid[row][c] === "empty") targets.push([row, c]); if (targets.length > 0) return { strategy: "Region confinement (row)", message: `All remaining cells in the ${rName(reg)} region are in row ${row + 1}. The queen for that region must be here, so other cells in this row can be eliminated.`, highlightGreen: targets, highlightBlue: emp }; } const cols = new Set(emp.map(([, c]) => c)); if (cols.size === 1) { const col = [...cols][0]; const targets: Coord[] = []; for (let r = 0; r < n; r++) if (regions[r][col] !== reg && grid[r][col] === "empty") targets.push([r, col]); if (targets.length > 0) return { strategy: "Region confinement (column)", message: `All remaining cells in the ${rName(reg)} region are in column ${col + 1}. The queen for that region must be here, so other cells in this column can be eliminated.`, highlightGreen: targets, highlightBlue: emp }; } } // Strategy 4: Line claims region for (let r = 0; r < n; r++) { if (grid[r].some(c => c === "queen")) continue; const emp: Coord[] = []; for (let c = 0; c < n; c++) if (grid[r][c] === "empty") emp.push([r, c]); if (emp.length === 0) continue; const rs = new Set(emp.map(([, c]) => regions[r][c])); if (rs.size === 1) { const reg = [...rs][0]; const targets: Coord[] = []; for (let rr = 0; rr < n; rr++) { if (rr === r) continue; for (let cc = 0; cc < n; cc++) if (regions[rr][cc] === reg && grid[rr][cc] === "empty") targets.push([rr, cc]); } if (targets.length > 0) return { strategy: "Line claims region", message: `Row ${r + 1}'s empty cells all belong to the ${rName(reg)} region. The queen for this row must come from that region, so ${rName(reg)} cells in other rows can be eliminated.`, highlightGreen: targets, highlightBlue: emp }; } } for (let c = 0; c < n; c++) { let hq = false; const emp: Coord[] = []; for (let r = 0; r < n; r++) { if (grid[r][c] === "queen") hq = true; if (grid[r][c] === "empty") emp.push([r, c]); } if (hq || emp.length === 0) continue; const rs = new Set(emp.map(([r]) => regions[r][c])); if (rs.size === 1) { const reg = [...rs][0]; const targets: Coord[] = []; for (let rr = 0; rr < n; rr++) for (let cc = 0; cc < n; cc++) { if (cc === c) continue; if (regions[rr][cc] === reg && grid[rr][cc] === "empty") targets.push([rr, cc]); } if (targets.length > 0) return { strategy: "Line claims region", message: `Column ${c + 1}'s empty cells all belong to the ${rName(reg)} region, so ${rName(reg)} cells in other columns can be eliminated.`, highlightGreen: targets, highlightBlue: emp }; } } // Strategy 5: Contradiction elimination for (const [er, ec] of emptyCells) { const elim = new Set(); elim.add(`${er},${ec}`); for (let i = 0; i < n; i++) { elim.add(`${er},${i}`); elim.add(`${i},${ec}`); } for (const [nr, nc] of allNeighbors(er, ec)) elim.add(`${nr},${nc}`); for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (regions[r][c] === regions[er][ec]) elim.add(`${r},${c}`); for (let reg = 0; reg < n; reg++) { if (reg === regions[er][ec]) continue; let hq = false, hasR = false; for (let r = 0; r < n && !hq; r++) for (let c = 0; c < n && !hq; c++) { if (regions[r][c] !== reg) continue; if (grid[r][c] === "queen") hq = true; if (grid[r][c] === "empty" && !elim.has(`${r},${c}`)) hasR = true; } if (!hq && !hasR) return { strategy: "Contradiction elimination", message: `If you placed a queen at row ${er + 1}, col ${ec + 1}, it would eliminate every remaining cell in the ${rName(reg)} region — making the puzzle unsolvable. So this cell can be X'd.`, highlightGreen: [[er, ec]], highlightBlue: [] }; } } if (emptyCells.length > 0) return { strategy: "General tip", message: `Look for regions, rows, or columns with very few empty cells. Start with the most constrained area.`, highlightGreen: [], highlightBlue: [] }; return null; } // ── Timer Hook ───────────────────────────────────────────────────── function useTimer(running: boolean) { const [seconds, setSeconds] = useState(0); const intervalRef = useRef | null>(null); useEffect(() => { if (running) { intervalRef.current = setInterval(() => setSeconds(s => s + 1), 1000); } else if (intervalRef.current) { clearInterval(intervalRef.current); } return () => { if (intervalRef.current) clearInterval(intervalRef.current); }; }, [running]); const reset = useCallback(() => setSeconds(0), []); const formatted = useMemo(() => { const m = Math.floor(seconds / 60); const s = seconds % 60; return `${m}:${s.toString().padStart(2, "0")}`; }, [seconds]); return { seconds, formatted, reset }; } // ── Border Helpers ───────────────────────────────────────────────── function getCellBorders(r: number, c: number, n: number, regions: number[][]) { const bw = "3px", bc = "#000", thin = "1px solid rgba(0,0,0,0.2)"; return { borderTop: r === 0 || regions[r - 1][c] !== regions[r][c] ? `${bw} solid ${bc}` : thin, borderBottom: r === n - 1 || regions[r + 1]?.[c] !== regions[r][c] ? `${bw} solid ${bc}` : thin, borderLeft: c === 0 || regions[r][c - 1] !== regions[r][c] ? `${bw} solid ${bc}` : thin, borderRight: c === n - 1 || regions[r][c + 1] !== regions[r][c] ? `${bw} solid ${bc}` : thin, }; } // ── Main Component ───────────────────────────────────────────────── export default function QueensGame() { const [difficulty, setDifficulty] = useState("medium"); const [gameState, setGameState] = useState<"loading" | "playing" | "won">("loading"); const [grid, setGrid] = useState([]); const [regions, setRegions] = useState([]); const [puzzleId, setPuzzleId] = useState(null); const [history, setHistory] = useState([]); const [isDragging, setIsDragging] = useState(false); const [dragApplied, setDragApplied] = useState(new Set()); const [activeHint, setActiveHint] = useState(null); const [hintsUsed, setHintsUsed] = useState(0); const [puzzleSeed, setPuzzleSeed] = useState(0); const n = DIFFICULTY_MAP[difficulty].size; const timerRunning = gameState === "playing"; const { formatted: timerDisplay, reset: resetTimer } = useTimer(timerRunning); // ── Fetch a random puzzle from DB ──────────────────────────────── const puzzleQuery = useSQLQuery( `SELECT puzzle_id, regions FROM "queens_game_2"."main"."queens_puzzles" WHERE difficulty = '${difficulty}' ORDER BY md5(cast(puzzle_id as varchar) || '${puzzleSeed}') LIMIT 1`, ); // Load puzzle when query returns useEffect(() => { const rows = Array.isArray(puzzleQuery.data) ? puzzleQuery.data : []; if (rows.length === 0) return; const row = rows[0]; const id = N(row.puzzle_id); const regionsData = typeof row.regions === "string" ? JSON.parse(row.regions) : row.regions; setPuzzleId(id); setRegions(regionsData); setGrid(Array.from({ length: DIFFICULTY_MAP[difficulty].size }, () => new Array(DIFFICULTY_MAP[difficulty].size).fill("empty") )); setHistory([]); setActiveHint(null); setHintsUsed(0); resetTimer(); setGameState("playing"); }, [puzzleQuery.data, difficulty, puzzleSeed]); // ── Game interactions ──────────────────────────────────────────── const conflicts = useMemo(() => { if (gameState !== "playing") return new Set(); return getConflicts(grid, regions); }, [grid, regions, gameState]); const queenCount = useMemo(() => { let c = 0; for (const row of grid) for (const cell of row) if (cell === "queen") c++; return c; }, [grid]); const startGame = useCallback((diff: Difficulty) => { setDifficulty(diff); setActiveHint(null); setGameState("loading"); setPuzzleSeed(Date.now()); // triggers new puzzle fetch }, []); const handleCellClick = useCallback((r: number, c: number) => { if (gameState !== "playing") return; setActiveHint(null); setGrid(prev => { setHistory(h => [...h, prev.map(row => [...row])]); const ng = prev.map(row => [...row]); const cur = ng[r][c]; ng[r][c] = cur === "empty" ? "x" : cur === "x" ? "queen" : "empty"; return ng; }); }, [gameState]); useEffect(() => { if (gameState === "playing" && grid.length > 0 && checkWin(grid, regions)) { setGameState("won"); } }, [grid, gameState, regions]); const handleMouseDown = useCallback((r: number, c: number, e: React.MouseEvent) => { e.preventDefault(); setIsDragging(true); setDragApplied(new Set([`${r},${c}`])); handleCellClick(r, c); }, [handleCellClick]); const handleMouseEnter = useCallback((r: number, c: number) => { if (!isDragging) return; if (dragApplied.has(`${r},${c}`)) return; setDragApplied(prev => new Set(prev).add(`${r},${c}`)); setActiveHint(null); setGrid(prev => { if (prev[r][c] !== "empty") return prev; setHistory(h => [...h, prev.map(row => [...row])]); const ng = prev.map(row => [...row]); ng[r][c] = "x"; return ng; }); }, [isDragging, dragApplied]); const handleMouseUp = useCallback(() => { setIsDragging(false); setDragApplied(new Set()); }, []); const handleUndo = useCallback(() => { if (history.length === 0) return; setActiveHint(null); setGrid(history[history.length - 1]); setHistory(h => h.slice(0, -1)); }, [history]); const handleClear = useCallback(() => { if (gameState !== "playing") return; setActiveHint(null); setHistory(h => [...h, grid.map(row => [...row])]); setGrid(Array.from({ length: n }, () => new Array(n).fill("empty"))); }, [gameState, grid, n]); const handleHint = useCallback(() => { if (gameState !== "playing" || grid.length === 0) return; const hint = generateHint(grid, regions); setActiveHint(hint); setHintsUsed(h => h + 1); }, [gameState, grid, regions]); // Auto-start const hasStarted = useRef(false); useEffect(() => { if (!hasStarted.current) { hasStarted.current = true; setPuzzleSeed(Date.now()); } }, []); useEffect(() => { const handler = () => { setIsDragging(false); setDragApplied(new Set()); }; window.addEventListener("mouseup", handler); return () => window.removeEventListener("mouseup", handler); }, []); // ── Loading ────────────────────────────────────────────────────── if (gameState === "loading" || grid.length === 0) { return (

♛

Loading puzzle...

); } // ── Win Screen ─────────────────────────────────────────────────── if (gameState === "won") { return (

Puzzle Complete!

{DIFFICULTY_MAP[difficulty].label} · Puzzle #{puzzleId} · {timerDisplay} {hintsUsed > 0 && · {hintsUsed} hint{hintsUsed !== 1 ? "s" : ""}}

Play again

{(Object.entries(DIFFICULTY_MAP) as [Difficulty, { size: number; label: string }][]).map(([key, val]) => ( ))}

); } // ── Playing Screen ─────────────────────────────────────────────── return (

♛ Queens #{puzzleId} · {DIFFICULTY_MAP[difficulty].label}

{timerDisplay}

♛ {queenCount} / {n} placed {conflicts.size > 0 && ( ⚠ {conflicts.size} conflict{conflicts.size !== 1 ? "s" : ""} )}

{activeHint && (

{activeHint.strategy}

{activeHint.message}

)}

{(Object.entries(DIFFICULTY_MAP) as [Difficulty, { size: number; label: string }][]).map(([key, val]) => ( ))}

Click: empty → ✕ → ♛ → empty | Drag: paint ✕ marks | No two ♛ can touch

); } // ── Board Component ──────────────────────────────────────────────── function BoardDisplay({ n, grid, regions, conflicts, interactive, onMouseDown, onMouseEnter, highlightGreen, highlightBlue, }: { n: number; grid: CellState[][]; regions: number[][]; conflicts: Set; interactive: boolean; onMouseDown?: (r: number, c: number, e: React.MouseEvent) => void; onMouseEnter?: (r: number, c: number) => void; highlightGreen?: Coord[]; highlightBlue?: Coord[]; }) { const cellSize = n <= 6 ? 62 : n <= 7 ? 56 : n <= 8 ? 50 : 44; const greenSet = useMemo(() => { const s = new Set(); if (highlightGreen) for (const [r, c] of highlightGreen) s.add(`${r},${c}`); return s; }, [highlightGreen]); const blueSet = useMemo(() => { const s = new Set(); if (highlightBlue) for (const [r, c] of highlightBlue) s.add(`${r},${c}`); return s; }, [highlightBlue]); if (grid.length === 0 || regions.length === 0) return null; return (

{grid.map((row, r) => row.map((cell, c) => { const regionId = regions[r]?.[c] ?? 0; const isConflict = conflicts.has(`${r},${c}`); const key = `${r},${c}`; const isGreen = greenSet.has(key); const isBlue = blueSet.has(key); const borders = getCellBorders(r, c, n, regions); const bgColor = isConflict ? "#FFBABA" : REGION_COLORS[regionId % REGION_COLORS.length]; return (

onMouseDown(r, c, e) : undefined} onMouseEnter={interactive && onMouseEnter ? () => onMouseEnter(r, c) : undefined} > {cell === "queen" && ( ♛ )} {cell === "x" && ( ✕ )} {isGreen && cell === "empty" && ( ✕ )}

); }) )}

); }

Queens Puzzle

AI Prompts Used

Comments