import React from "react" import { useFireproof } from "use-fireproof" // --- 4x4 puzzle generator --- function shuffle(arr) { const a = arr.slice() for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]] } return a } function generatePuzzle4x4(difficulty) { // Generate a valid 4x4 sudoku solution const base = [1, 2, 3, 4] let solution = null const tries = 100 for (let t = 0; t < tries; t++) { const row0 = shuffle(base) // rows 1-3 must be valid permutations avoiding row0 const grid = [row0, null, null, null] // Simple backtrack for 4x4 const solved = solve4x4(grid.map(r => r ? r.slice() : [0, 0, 0, 0])) if (solved) { solution = solved; break } } if (!solution) solution = [[1,2,3,4],[3,4,1,2],[2,1,4,3],[4,3,2,1]] // Remove cells based on difficulty const clues = difficulty === "easy" ? 10 : difficulty === "medium" ? 8 : 6 const board = solution.map(r => r.slice()) const positions = shuffle(Array.from({ length: 16 }, (_, i) => i)) let removed = 0 for (const pos of positions) { if (removed >= 16 - clues) break const r = Math.floor(pos / 4), c = pos % 4 board[r][c] = 0 removed++ } return { solution, board } } function solve4x4(grid) { const empty = [] for (let r = 0; r < 4; r++) for (let c = 0; c < 4; c++) if (grid[r][c] === 0) empty.push([r, c]) if (empty.length === 0) return grid const [r, c] = empty[0] const nums = shuffle([1, 2, 3, 4]) for (const n of nums) { if (isValid4x4(grid, r, c, n)) { grid[r][c] = n const res = solve4x4(grid) if (res) return res grid[r][c] = 0 } } return null } function isValid4x4(grid, r, c, n) { for (let i = 0; i < 4; i++) if (grid[r][i] === n || grid[i][c] === n) return false const br = Math.floor(r / 2) * 2, bc = Math.floor(c / 2) * 2 for (let dr = 0; dr < 2; dr++) for (let dc = 0; dc < 2; dc++) if (grid[br + dr][bc + dc] === n) return false return true } function hasConflict(board, idx) { const v = board[idx] if (!v) return false const row = Math.floor(idx / 4), col = idx % 4 for (let i = 0; i < 4; i++) { const ri = row * 4 + i, ci = i * 4 + col if (ri !== idx && board[ri] === v) return true if (ci !== idx && board[ci] === v) return true } const br = Math.floor(row / 2) * 2, bc = Math.floor(col / 2) * 2 for (let dr = 0; dr < 2; dr++) for (let dc = 0; dc < 2; dc++) { const bi = (br + dr) * 4 + (bc + dc) if (bi !== idx && board[bi] === v) return true } return false } export default function App() { const { useDocument, useLiveQuery, database } = useFireproof("quick-sudoku-v2") // Current game document const { doc: game, merge: mergeGame } = useDocument({ _id: "current-game", board: null, solution: null, clues: null, notes: null, difficulty: "easy", solved: false, startedAt: null, solveTime: null }) // Best times const { docs: bestDocs } = useLiveQuery("type", { key: "best" }) const [selected, setSelected] = React.useState(null) const [notesMode, setNotesMode] = React.useState(false) const [elapsed, setElapsed] = React.useState(0) const [autoStarted, setAutoStarted] = React.useState(false) // Timer React.useEffect(() => { if (!game.board || game.solved) return const iv = setInterval(() => { setElapsed(Math.floor((Date.now() - (game.startedAt || Date.now())) / 1000)) }, 1000) return () => clearInterval(iv) }, [game.board, game.solved, game.startedAt]) // Auto-start a puzzle on first load if none exists React.useEffect(() => { if (!autoStarted && game.board === null) { setAutoStarted(true) const { solution, board } = generatePuzzle4x4("easy") const clues = board.map(r => r.slice()) const notes = Array.from({ length: 16 }, () => []) database.put({ _id: "current-game", type: "game", board: board.flat(), solution: solution.flat(), clues: clues.flat(), notes, difficulty: "easy", solved: false, startedAt: Date.now(), solveTime: null, }) } }, [autoStarted, game.board]) const difficulty = game.difficulty || "easy" async function startNewPuzzle(diff) { const d = diff || difficulty const { solution, board } = generatePuzzle4x4(d) const clues = board.map(r => r.slice()) const notes = Array.from({ length: 16 }, () => []) await database.put({ _id: "current-game", type: "game", board: board.flat(), solution: solution.flat(), clues: clues.flat(), notes, difficulty: d, solved: false, startedAt: Date.now(), solveTime: null, }) setSelected(null) setNotesMode(false) setElapsed(0) } async function handleSetDifficulty(d) { await database.put({ ...game, difficulty: d }) } async function placeDigit(n) { if (selected === null || !game.board) return if (game.clues[selected]) return if (game.solved) return const newBoard = [...game.board] const newNotes = game.notes.map(x => x.slice()) if (notesMode) { const cur = newNotes[selected] || [] newNotes[selected] = cur.includes(n) ? cur.filter(y => y !== n) : [...cur, n].sort() } else { newBoard[selected] = newBoard[selected] === n ? 0 : n newNotes[selected] = [] } // Check win const solved = !notesMode && newBoard.every((v, i) => v !== 0 && v === game.solution[i]) const solveTime = solved ? Math.floor((Date.now() - game.startedAt) / 1000) : null await database.put({ ...game, board: newBoard, notes: newNotes, solved, solveTime }) if (solved) { const existing = bestDocs.find(b => b.difficulty === difficulty) if (!existing || solveTime < existing.time) { await database.put(existing ? { ...existing, time: solveTime } : { type: "best", difficulty, time: solveTime } ) } } } async function clearCell() { if (selected === null || !game.board || game.clues?.[selected]) return const newBoard = [...game.board] const newNotes = game.notes.map(x => x.slice()) newBoard[selected] = 0 newNotes[selected] = [] await database.put({ ...game, board: newBoard, notes: newNotes }) } const c = { page: "min-h-screen bg-black text-white font-sans pb-12", header: "sticky top-0 bg-black border-b border-[#444] px-4 py-3 flex items-center justify-between z-10", title: "text-xl font-bold tracking-tight", tagline: "text-xs text-[#888]", main: "max-w-md mx-auto px-4 py-4 space-y-4", section: "border border-[rgba(255,255,255,0.2)] rounded-lg p-4", h2: "text-sm uppercase tracking-widest text-[#D4FF00] mb-3 font-bold", btn: "min-h-[44px] px-4 py-2 bg-[#D4FF00] text-black font-bold rounded hover:opacity-90 disabled:opacity-50 transition-opacity", btnGhost: "min-h-[44px] px-3 py-2 border border-[rgba(255,255,255,0.3)] text-white rounded hover:bg-[rgba(255,255,255,0.07)] transition-colors", btnActive: "min-h-[44px] px-3 py-2 bg-[#D4FF00] text-black font-bold rounded", row: "flex items-center justify-between py-2 border-b border-[#333] last:border-0", dim: "text-[#888] text-sm", } const boardFlat = game.board || Array(16).fill(0) const solutionFlat = game.solution || Array(16).fill(0) const cluesFlat = game.clues || Array(16).fill(0) const notesArr = game.notes || Array.from({ length: 16 }, () => []) return (

{/* Difficulty */}

Difficulty

{["easy", "medium", "hard"].map(d => ( ))}

{/* Board */}

Board ·{" "} {game.solved ? Solved! : `${String(Math.floor(elapsed / 60)).padStart(2, "0")}:${String(elapsed % 60).padStart(2, "0")}`}

{!game.board ? (

Tap New Puzzle to begin.

) : (

{boardFlat.map((v, i) => { const row = Math.floor(i / 4), col = i % 4 const isClue = cluesFlat[i] !== 0 const isSelected = selected === i const conflict = hasConflict(boardFlat, i) // Thick borders for 2x2 boxes const borderR = col === 1 ? "border-r-2 border-r-white" : "border-r border-r-[#444]" const borderB = row === 1 ? "border-b-2 border-b-white" : "border-b border-b-[#444]" let bg = "bg-black" let textColor = "text-[#D4FF00]" if (isSelected) { bg = "bg-[#D4FF00]"; textColor = "text-black" } else if (conflict) { bg = "bg-red-900" } else if (isClue) { bg = "bg-[#1a1a1a]"; textColor = "text-white" } return ( ) })}

)}

{/* Controls */} {game.board && (

Controls

{game.solved ? (

Solved in {game.solveTime}s! Hit New Puzzle to play again.

) : ( <>

{[1, 2, 3, 4].map(n => ( ))}

)}

)} {/* Best Times */}

Best Times

{["easy", "medium", "hard"].map(d => { const best = bestDocs.find(b => b.difficulty === d) return (

{d[0].toUpperCase() + d.slice(1)} {best ? `${best.time}s` : "—"}

) })}

) }

Difficulty

Board · 00:00

Best Times