import React, { useState, useEffect, useRef } from "react"; import dayjs from "dayjs"; // ------ Mini-Puzzle Generation Utilities ------ // function generateMiniSudoku(seed) { // Deterministically generate a 4x4 sudoku with 1-2 blanks (using seed) // Ensure each row/col/box has 1-4 exactly once, blank out 2 const baseGrids = [ [ [1, 2, 3, 4], [3, 4, 1, 2], [2, 1, 4, 3], [4, 3, 2, 1], ], [ [4, 3, 2, 1], [2, 1, 4, 3], [1, 2, 3, 4], [3, 4, 1, 2], ], [ [1, 3, 2, 4], [4, 2, 1, 3], [2, 4, 3, 1], [3, 1, 4, 2], ], ]; // Use seed to pick base and blanks const grid = JSON.parse(JSON.stringify(baseGrids[seed % baseGrids.length])); let random = mulberry32(seed); // Randomize rows within bands for (let band = 0; band < 2; band++) { if (random() > 0.5) { let [a, b] = [band * 2, band * 2 + 1]; [grid[a], grid[b]] = [grid[b], grid[a]]; } } // Randomize columns within stacks for (let stack = 0; stack < 2; stack++) { if (random() > 0.5) { for (let r = 0; r < 4; r++) { let [a, b] = [stack * 2, stack * 2 + 1]; [grid[r][a], grid[r][b]] = [grid[r][b], grid[r][a]]; } } } // Blank out 2-3 cells (always blanks, not the whole row/col) let blanks = [], positions = []; for (let r = 0; r < 4; r++) { for (let c = 0; c < 4; c++) { positions.push([r, c]); } } for (let i = 0; i < 3; i++) { let idx = Math.floor(random() * positions.length); blanks.push(positions[idx]); positions.splice(idx, 1); } const puzzle = grid.map((row, r) => row.map((val, c) => blanks.some(([br, bc]) => br === r && bc === c) ? null : val ) ); return { puzzle, solution: grid }; } // Seed pnrg function mulberry32(a) { return function () { var t = (a += 0x6d2b79f5); t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // Pattern sequence puzzle (pick the next shape) function generatePatternSequence(seed) { const patterns = [ { seq: [1, 2, 3, 4], options: [5, 6, 7], answer: 5 }, // +1 each time { seq: [2, 4, 8, 16], options: [24, 32, 20], answer: 32 }, // x2 { seq: [3, 1, 4, 2], options: [6, 3, 5], answer: 6 }, // +2, -2 { seq: [10, 8, 6, 4], options: [2, 0, 3], answer: 2 }, // -2 each time { seq: [1, 3, 6, 10], options: [12, 15, 17], answer: 15 }, // +2, +3, +4 { seq: [5, 10, 20, 40], options: [60, 50, 80], answer: 80 }, // x2 ]; const idx = seed % patterns.length; return patterns[idx]; } // --- PUZZLE ROTATION: Sudoku on even days, Pattern on odd --- // function getTodayPuzzle(todayStr) { // e.g., '2026-03-02' as seed const daySeed = parseInt(todayStr.split("-").join("")); if (parseInt(todayStr.slice(-1)) % 2 === 0) { return { type: 'sudoku', ...generateMiniSudoku(daySeed) }; } else { return { type: 'pattern', ...generatePatternSequence(daySeed) }; } } // -- Streak storage (usesSharedStorage) -- // const STREAK_KEY = 'mini-logic-puzzle-streak'; const HISTORY_KEY = 'mini-logic-puzzle-history'; export default function App() { const [dateStr, setDateStr] = useState(dayjs().format('YYYY-MM-DD')); const [puzzle, setPuzzle] = useState(null); const [loading, setLoading] = useState(true); const [streak, setStreak] = useSharedStorage(STREAK_KEY, { count: 0, lastSolved: null }); const [history, setHistory] = useSharedStorage(HISTORY_KEY, []); // [{ date: 'YYYY-MM-DD', time: 23, solved: true }] useEffect(() => { setLoading(true); setTimeout(() => { const p = getTodayPuzzle(dateStr); setPuzzle(p); setLoading(false); }, 300); // Simulate loading }, [dateStr]); // Modal for challenge friends const [challengeModal, setChallengeModal] = useState(false); // --- Sudoku State --- // const [inputs, setInputs] = useState(Array(4) .fill(0) .map(() => Array(4).fill(''))); // --- Pattern State --- // const [patternChoice, setPatternChoice] = useState(null); // Timer const [timer, setTimer] = useState(0); const timerRef = useRef(null); const [startTime, setStartTime] = useState(null); // State feedback const [solved, setSolved] = useState(false); const [incorrect, setIncorrect] = useState(false); // On loading/refresh, reset all states useEffect(() => { setInputs(Array(4).fill(0).map(() => Array(4).fill(''))); setPatternChoice(null); setSolved(false); setIncorrect(false); setTimer(0); setStartTime(null); }, [puzzle]); // Start timer on first interaction const handleFirstInteraction = () => { if (startTime) return; setStartTime(Date.now()); timerRef.current = setInterval(() => { setTimer(prev => prev + 1); }, 1000); }; useEffect(() => () => clearInterval(timerRef.current), []); // --- Sudoku Input Handling --- // const handleInput = (r, c, val) => { handleFirstInteraction(); // Only allow 1-4 if (val === "" || (/^[1-4]$/.test(val))) { setInputs((prev) => { const next = prev.map((row) => [...row]); next[r][c] = val; return next; }); } }; // --- Sudoku Check --- // const sudokuIsComplete = puzzle && puzzle.type === 'sudoku' && puzzle.puzzle.every((row, r) => row.every((cell, c) => cell !== null || inputs[r][c] !== '') ); const checkSudoku = () => { // Compare user input to solution where puzzle is blank let correct = true; for (let r = 0; r < 4; r++) { for (let c = 0; c < 4; c++) { if (puzzle.puzzle[r][c] === null) { if (parseInt(inputs[r][c]) !== puzzle.solution[r][c]) correct = false; } } } recordResult(correct); }; // --- Pattern Check --- // const checkPattern = () => { recordResult(patternChoice === puzzle.answer); }; // --- Record Result & Streak Logic --- // function recordResult(correct) { if (correct) { setSolved(true); setIncorrect(false); clearInterval(timerRef.current); const now = Date.now(); // Update streak const today = dateStr; let newStreak = streak; if (!streak.lastSolved || dayjs(today).diff(dayjs(streak.lastSolved), 'day') === 1) { newStreak = { count: (streak.count || 0) + 1, lastSolved: today }; } else if (streak.lastSolved !== today) { newStreak = { count: 1, lastSolved: today }; } // else same day, don't double count setStreak(newStreak); // Add to history (overwrite today's) setHistory((h) => { const filtered = h.filter((x) => x.date !== today); return [ ...filtered, { date: today, time: Math.max(Math.round((now - (startTime || now)) / 1000), timer), solved: true }, ]; }); } else { setIncorrect(true); setTimeout(() => setIncorrect(false), 1500); } } // --- Challenge Friends (Local) --- // // Records of challenged friends today const [friendChallenges, setFriendChallenges] = useSharedStorage("mlp-friend-chal", []); // [{name,date,time,solved}] const [friendName, setFriendName] = useState(""); const [showFriendSection, setShowFriendSection] = useState(false); // Friend typing interaction const [friendInputs, setFriendInputs] = useState(Array(4) .fill(0) .map(() => Array(4).fill(''))); const [friendPatternChoice, setFriendPatternChoice] = useState(null); const [friendSolved, setFriendSolved] = useState(false); const [friendTimer, setFriendTimer] = useState(0); const friendTimerRef = useRef(null); const [friendStartTime, setFriendStartTime] = useState(null); // Reset on open useEffect(() => { if (!showFriendSection) return; setFriendInputs(Array(4).fill(0).map(() => Array(4).fill(''))); setFriendPatternChoice(null), setFriendSolved(false); setFriendTimer(0), setFriendStartTime(null); }, [showFriendSection, puzzle]); // Friend first move - start timer const handleFriendFirst = () => { if (friendStartTime) return; setFriendStartTime(Date.now()); friendTimerRef.current = setInterval(() => { setFriendTimer((t) => t + 1); }, 1000); }; useEffect(() => () => clearInterval(friendTimerRef.current), []); // Friend sudoku input const handleFriendInput = (r, c, val) => { handleFriendFirst(); if (val === "" || (/^[1-4]$/.test(val))) { setFriendInputs((prev) => { const next = prev.map((row) => [...row]); next[r][c] = val; return next; }); } }; // Submit friend challenge function friendCheck() { let correct = true; if (puzzle.type === 'sudoku') { for (let r = 0; r < 4; r++) for (let c = 0; c < 4; c++) { if (puzzle.puzzle[r][c] === null) { if (parseInt(friendInputs[r][c]) !== puzzle.solution[r][c]) correct = false; } } } else { correct = friendPatternChoice === puzzle.answer; } if (correct) { setFriendSolved(true); clearInterval(friendTimerRef.current); setFriendChallenges((arr) => [ ...arr.filter(x => x.date !== dateStr || x.name !== friendName), { name: friendName, date: dateStr, time: Math.max(Math.round((Date.now() - (friendStartTime || Date.now())) / 1000), friendTimer), solved: true }, ]); } else { setFriendSolved(false); setTimeout(() => setFriendSolved(false), 1400); } } // --- UI --- // // History sorted desc const sortedHistory = [...history].sort((a, b) => dayjs(b.date).diff(dayjs(a.date))); // Friends for today const todayFriends = friendChallenges.filter(x => x.date === dateStr); // Loading State if (loading || !puzzle) { return (

Loading today's puzzle...

); } return (

Mini Logic Puzzle Challenge

Each day brings a bite-sized logic puzzle. Solve for your streak, or challenge a friend for today's brainy break!

{/* STREAK + HISTORY CARD */}

🏆 Streak: {streak.count || 0} {streak.lastSolved && Last: {dayjs(streak.lastSolved).format('MMM D')}}

{sortedHistory.slice(0, 7).map(h => (

{dayjs(h.date).format('ddd')} {h.solved ? '✅' : '❌'} {h.time ?? '—'}s

))} {sortedHistory.length === 0 &&

No solved puzzles yet

}

{/* PUZZLE CARD */}

{puzzle.type === 'sudoku' ? 'Mini Sudoku' : 'Pattern Sequence'} {dayjs(dateStr).format('dddd, MMM D')}

{/* --- SUDOKU PUZZLE --- */} {puzzle.type === 'sudoku' && (

{puzzle.puzzle.map((row, r) => row.map((cell, c) => (

{cell !== null ? ( {cell} ) : ( handleInput(r, c, e.target.value.replace(/[^1-4]/g, ''))} disabled={solved} onFocus={handleFirstInteraction} className="w-full h-full text-center font-mono text-lg bg-transparent text-foreground focus:outline-none" /> )}

)))}

Fill the missing numbers (1-4). Each number appears once per row/col/box.

)} {/* --- PATTERN SEQUENCE --- */} {puzzle.type === 'pattern' && (

{puzzle.seq.map((num, idx) => ( {num} ))} ?

{puzzle.options.map((num, idx) => ( ))}

Pick the next number in the sequence.

)}

{!solved && puzzle.type === 'sudoku' && ( )} {!solved && puzzle.type === 'pattern' && ( )} {solved && ( 🎉 Correct! +1 streak )} {incorrect && ( Incorrect, try again! )} {!solved && ⏱️ {timer}s} {solved && ( )}

{/* Challenge Friend Modal Section */} {challengeModal && (

Challenge a Friend

Give your device or try with a friend. Track their time!

setFriendName(e.target.value.slice(0,16))} placeholder="Friend's first name" className="rounded px-3 py-2 border border-border bg-background text-foreground" disabled={!!todayFriends.find(x => x.name === friendName)} /> {!friendName &&

Enter a name to begin

} {!!todayFriends.find(x => x.name === friendName) && (

{friendName} has completed today's challenge!

)} {!todayFriends.find(x => x.name === friendName) && friendName && ( <> {puzzle.type === 'sudoku' ? (

{puzzle.puzzle.map((row, r) => row.map((cell, c) => (

{cell!==null ? ( {cell} ) : ( handleFriendInput(r,c,e.target.value.replace(/[^1-4]/g, ''))} disabled={friendSolved} onFocus={handleFriendFirst} className="w-full h-full text-center font-mono text-lg bg-transparent text-foreground focus:outline-none" /> )}

)))}

⏱️ {friendTimer}s

{friendSolved && Solved! ({friendTimer}s)}

) : (

{puzzle.seq.map((num, idx) => ( {num} ))} ?

{puzzle.options.map((num, idx) => ( ))}

⏱️ {friendTimer}s

{friendSolved && Solved! ({friendTimer}s)}

)} )} {/* List challenged friends today */} {todayFriends.length > 0 && (

Today's Friends:

{todayFriends.map(f=>(

{f.name} ✅ {f.time}s

))}

)}

); }