Spaces:

pitangent
/

Sudoku

Running

App Files Files Community

pitangent commited on Jul 15

Commit

993038e

verified ·

1 Parent(s): 603a2e5

feat: implement minimalist Sudoku game with board generation and difficulty levels

Browse files

Files changed (3) hide show

index.html +52 -18
script.js +379 -0
style.css +187 -17

index.html CHANGED Viewed

@@ -1,19 +1,53 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sudoku</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="app-container">
+        <header>
+            <h1>Sudoku</h1>
+            <div class="controls-row">
+                <div class="difficulty-selector">
+                    <button class="diff-btn active" data-diff="easy">Easy</button>
+                    <button class="diff-btn" data-diff="medium">Medium</button>
+                    <button class="diff-btn" data-diff="hard">Hard</button>
+                </div>
+                <div class="timer" id="timerDisplay">00:00</div>
+            </div>
+        </header>
+        <main>
+            <div class="sudoku-board" id="board">
+                <!-- Grid cells will be generated via JS -->
+            </div>
+        </main>
+        <div class="actions">
+            <button id="btnNewGame">New Game</button>
+            <button id="btnUndo" disabled>Undo</button>
+            <button id="btnNotes" class="toggle-btn">Notes: Off</button>
+        </div>
+        <div class="numpad">
+            <button class="num-btn">1</button>
+            <button class="num-btn">2</button>
+            <button class="num-btn">3</button>
+            <button class="num-btn">4</button>
+            <button class="num-btn">5</button>
+            <button class="num-btn">6</button>
+            <button class="num-btn">7</button>
+            <button class="num-btn">8</button>
+            <button class="num-btn">9</button>
+            <button class="num-btn clear-btn">Clear</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,379 @@

+const BOARD_SIZE = 9;
+const BOX_SIZE = 3;
+// True RNG Utilities
+function getTrueRandomInt(max) {
+    const randomBuffer = new Uint32Array(1);
+    window.crypto.getRandomValues(randomBuffer);
+    return randomBuffer[0] % max;
+}
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = getTrueRandomInt(i + 1);
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+// Game State
+let solutionBoard = [];
+let initialBoard = [];
+let currentBoard = [];
+let notesBoard = Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => []));
+let history = []; // For undo
+let selectedCell = null;
+let notesMode = false;
+let difficulty = 'easy'; // easy, medium, hard
+let timerInterval = null;
+let secondsElapsed = 0;
+// Sudoku Core Logic
+function getEmptyBoard() {
+    return Array.from({ length: BOARD_SIZE }, () => Array(BOARD_SIZE).fill(0));
+}
+function isValid(board, row, col, num) {
+    for (let x = 0; x < BOARD_SIZE; x++) {
+        if (board[row][x] === num) return false;
+    }
+    for (let x = 0; x < BOARD_SIZE; x++) {
+        if (board[x][col] === num) return false;
+    }
+    let startRow = row - row % BOX_SIZE, startCol = col - col % BOX_SIZE;
+    for (let i = 0; i < BOX_SIZE; i++) {
+        for (let j = 0; j < BOX_SIZE; j++) {
+            if (board[i + startRow][j + startCol] === num) return false;
+        }
+    }
+    return true;
+}
+function fillBoard(board) {
+    for (let row = 0; row < BOARD_SIZE; row++) {
+        for (let col = 0; col < BOARD_SIZE; col++) {
+            if (board[row][col] === 0) {
+                let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+                shuffleArray(nums);
+                for (let num of nums) {
+                    if (isValid(board, row, col, num)) {
+                        board[row][col] = num;
+                        if (fillBoard(board)) {
+                            return true;
+                        }
+                        board[row][col] = 0;
+                    }
+                }
+                return false;
+            }
+        }
+    }
+    return true;
+}
+function solveBoardCount(board, count = { value: 0 }) {
+    let row = -1;
+    let col = -1;
+    let isEmpty = false;
+    for (let i = 0; i < BOARD_SIZE; i++) {
+        for (let j = 0; j < BOARD_SIZE; j++) {
+            if (board[i][j] === 0) {
+                row = i;
+                col = j;
+                isEmpty = true;
+                break;
+            }
+        }
+        if (isEmpty) break;
+    }
+    if (!isEmpty) {
+        count.value++;
+        return;
+    }
+    for (let num = 1; num <= 9; num++) {
+        if (isValid(board, row, col, num)) {
+            board[row][col] = num;
+            solveBoardCount(board, count);
+            board[row][col] = 0;
+        }
+        if (count.value > 1) return; // Fast exit if more than 1 solution
+    }
+}
+function generatePuzzle(difficulty) {
+    let board = getEmptyBoard();
+    fillBoard(board);
+    solutionBoard = board.map(row => [...row]);
+    let cellsToRemove = 40; // Default easy
+    if (difficulty === 'medium') cellsToRemove = 50;
+    if (difficulty === 'hard') cellsToRemove = 60;
+    let cells = [];
+    for (let r = 0; r < BOARD_SIZE; r++) {
+        for (let c = 0; c < BOARD_SIZE; c++) {
+            cells.push({ r, c });
+        }
+    }
+    shuffleArray(cells);
+    let puzzle = solutionBoard.map(row => [...row]);
+    let removedCount = 0;
+    for (let cell of cells) {
+        if (removedCount >= cellsToRemove) break;
+        let temp = puzzle[cell.r][cell.c];
+        puzzle[cell.r][cell.c] = 0;
+        let count = { value: 0 };
+        let copy = puzzle.map(row => [...row]);
+        solveBoardCount(copy, count);
+        if (count.value !== 1) {
+            puzzle[cell.r][cell.c] = temp; // Put it back
+        } else {
+            removedCount++;
+        }
+    }
+    return puzzle;
+}
+// Timer Logic
+function startTimer() {
+    clearInterval(timerInterval);
+    secondsElapsed = 0;
+    updateTimerDisplay();
+    timerInterval = setInterval(() => {
+        secondsElapsed++;
+        updateTimerDisplay();
+    }, 1000);
+}
+function updateTimerDisplay() {
+    let m = Math.floor(secondsElapsed / 60).toString().padStart(2, '0');
+    let s = (secondsElapsed % 60).toString().padStart(2, '0');
+    document.getElementById('timerDisplay').innerText = `${m}:${s}`;
+}
+function stopTimer() {
+    clearInterval(timerInterval);
+}
+// UI Initialization
+function initGame() {
+    history = [];
+    selectedCell = null;
+    notesBoard = Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => []));
+    updateUndoBtn();
+    currentBoard = generatePuzzle(difficulty);
+    initialBoard = currentBoard.map(row => [...row]);
+    renderBoard();
+    startTimer();
+}
+function renderBoard() {
+    const boardEl = document.getElementById('board');
+    boardEl.innerHTML = '';
+    for (let r = 0; r < BOARD_SIZE; r++) {
+        for (let c = 0; c < BOARD_SIZE; c++) {
+            const cell = document.createElement('div');
+            cell.classList.add('cell');
+            cell.dataset.r = r;
+            cell.dataset.c = c;
+            if (initialBoard[r][c] !== 0) {
+                cell.classList.add('fixed');
+                cell.innerText = initialBoard[r][c];
+            } else if (currentBoard[r][c] !== 0) {
+                cell.classList.add('user-input');
+                cell.innerText = currentBoard[r][c];
+                // Check if it's an error relative to solution board
+                if (currentBoard[r][c] !== solutionBoard[r][c]) {
+                    cell.classList.add('error');
+                }
+            } else {
+                // Render Notes
+                if (notesBoard[r][c].length > 0) {
+                    const notesGrid = document.createElement('div');
+                    notesGrid.classList.add('notes-grid');
+                    for (let i = 1; i <= 9; i++) {
+                        const noteNum = document.createElement('div');
+                        noteNum.classList.add('note-num');
+                        if (notesBoard[r][c].includes(i)) {
+                            noteNum.innerText = i;
+                        }
+                        notesGrid.appendChild(noteNum);
+                    }
+                    cell.appendChild(notesGrid);
+                }
+            }
+            if (selectedCell && selectedCell.r === r && selectedCell.c === c) {
+                cell.classList.add('selected');
+            } else if (selectedCell && currentBoard[selectedCell.r][selectedCell.c] !== 0 && currentBoard[r][c] === currentBoard[selectedCell.r][selectedCell.c]) {
+                cell.classList.add('highlight');
+            } else if (selectedCell && initialBoard[selectedCell.r][selectedCell.c] !== 0 && initialBoard[r][c] === initialBoard[selectedCell.r][selectedCell.c]) {
+                cell.classList.add('highlight');
+            }
+            cell.addEventListener('click', () => selectCell(r, c));
+            boardEl.appendChild(cell);
+        }
+    }
+}
+function selectCell(r, c) {
+    if (selectedCell && selectedCell.r === r && selectedCell.c === c) {
+        selectedCell = null;
+    } else {
+        selectedCell = { r, c };
+    }
+    renderBoard();
+}
+// Interaction
+function handleInput(num) {
+    if (!selectedCell) return;
+    const { r, c } = selectedCell;
+    if (initialBoard[r][c] !== 0) return; // Cannot edit fixed cells
+    saveHistory();
+    if (num === 0) {
+        currentBoard[r][c] = 0;
+    } else if (notesMode) {
+        if (currentBoard[r][c] === 0) {
+            const idx = notesBoard[r][c].indexOf(num);
+            if (idx > -1) {
+                notesBoard[r][c].splice(idx, 1);
+            } else {
+                notesBoard[r][c].push(num);
+                notesBoard[r][c].sort((a, b) => a - b);
+            }
+        }
+    } else {
+        currentBoard[r][c] = num;
+        notesBoard[r][c] = []; // Clear notes when filled
+        clearRelatedNotes(r, c, num);
+    }
+    renderBoard();
+    checkWin();
+}
+function clearRelatedNotes(r, c, num) {
+    for (let i = 0; i < BOARD_SIZE; i++) {
+        removeNote(r, i, num);
+        removeNote(i, c, num);
+    }
+    let startR = r - r % BOX_SIZE;
+    let startC = c - c % BOX_SIZE;
+    for (let i = 0; i < BOX_SIZE; i++) {
+        for (let j = 0; j < BOX_SIZE; j++) {
+            removeNote(startR + i, startC + j, num);
+        }
+    }
+}
+function removeNote(r, c, num) {
+    const idx = notesBoard[r][c].indexOf(num);
+    if (idx > -1) notesBoard[r][c].splice(idx, 1);
+}
+// History & Undo
+function saveHistory() {
+    history.push({
+        board: currentBoard.map(row => [...row]),
+        notes: notesBoard.map(row => row.map(cellNotes => [...cellNotes]))
+    });
+    updateUndoBtn();
+}
+function undo() {
+    if (history.length === 0) return;
+    const lastState = history.pop();
+    currentBoard = lastState.board;
+    notesBoard = lastState.notes;
+    updateUndoBtn();
+    renderBoard();
+}
+function updateUndoBtn() {
+    document.getElementById('btnUndo').disabled = history.length === 0;
+}
+// Win Check
+function checkWin() {
+    let complete = true;
+    for (let r = 0; r < BOARD_SIZE; r++) {
+        for (let c = 0; c < BOARD_SIZE; c++) {
+            if (currentBoard[r][c] === 0 || currentBoard[r][c] !== solutionBoard[r][c]) {
+                complete = false;
+                break;
+            }
+        }
+    }
+    if (complete) {
+        stopTimer();
+        setTimeout(() => alert('Congratulations! You solved the Sudoku!'), 100);
+    }
+}
+// Event Listeners
+document.getElementById('btnNewGame').addEventListener('click', initGame);
+document.getElementById('btnUndo').addEventListener('click', undo);
+document.getElementById('btnNotes').addEventListener('click', (e) => {
+    notesMode = !notesMode;
+    e.target.innerText = `Notes: ${notesMode ? 'On' : 'Off'}`;
+    e.target.classList.toggle('active', notesMode);
+});
+document.querySelectorAll('.num-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+        const text = e.target.innerText;
+        if (text === 'Clear') {
+            handleInput(0);
+        } else {
+            handleInput(parseInt(text));
+        }
+    });
+});
+document.querySelectorAll('.diff-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+        document.querySelectorAll('.diff-btn').forEach(b => b.classList.remove('active'));
+        e.target.classList.add('active');
+        difficulty = e.target.dataset.diff;
+        initGame();
+    });
+});
+document.addEventListener('keydown', (e) => {
+    if (!selectedCell) return;
+    if (e.key >= '1' && e.key <= '9') {
+        handleInput(parseInt(e.key));
+    } else if (e.key === 'Backspace' || e.key === 'Delete') {
+        handleInput(0);
+    } else if (e.key === 'n' || e.key === 'N') {
+        document.getElementById('btnNotes').click();
+    } else if (e.key === 'ArrowUp') {
+        if (selectedCell.r > 0) selectCell(selectedCell.r - 1, selectedCell.c);
+    } else if (e.key === 'ArrowDown') {
+        if (selectedCell.r < BOARD_SIZE - 1) selectCell(selectedCell.r + 1, selectedCell.c);
+    } else if (e.key === 'ArrowLeft') {
+        if (selectedCell.c > 0) selectCell(selectedCell.r, selectedCell.c - 1);
+    } else if (e.key === 'ArrowRight') {
+        if (selectedCell.c < BOARD_SIZE - 1) selectCell(selectedCell.r, selectedCell.c + 1);
+    }
+});
+// Start Game
+initGame();

style.css CHANGED Viewed

@@ -1,28 +1,198 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+    --bg-color: #fdfaf6; /* Warm off-white */
+    --text-primary: #3d2b1f; /* Dark brown */
+    --text-secondary: #5c4a3d;
+    --border-color: #d4c4b7;
+    --border-thick: #8a7360;
+    --cell-bg: #fffcf8;
+    --cell-bg-selected: #e9dec9;
+    --cell-bg-highlight: #f2e9d8;
+    --cell-bg-error: #f8dcd2;
+    --text-error: #a83232;
+    --btn-bg: #eae0d5;
+    --btn-hover: #dfcebd;
+    --font-heading: 'Libre Baskerville', serif;
+    --font-ui: 'Source Sans 3', sans-serif;
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 body {
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    font-family: var(--font-ui);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 1rem;
+}
+.app-container {
+    max-width: 500px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+header {
+    text-align: center;
 }
 h1 {
+    font-family: var(--font-heading);
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+.controls-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+.difficulty-selector {
+    display: flex;
+    gap: 0.5rem;
+}
+.timer {
+    font-family: var(--font-heading);
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: var(--text-secondary);
+}
+button {
+    font-family: var(--font-ui);
+    background-color: var(--btn-bg);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.2s, transform 0.1s;
+}
+button:hover:not(:disabled) {
+    background-color: var(--btn-hover);
+}
+button:active:not(:disabled) {
+    transform: scale(0.98);
+}
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.diff-btn.active {
+    background-color: var(--border-thick);
+    color: var(--bg-color);
+    border-color: var(--border-thick);
+}
+.sudoku-board {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(9, 1fr);
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    border: 2px solid var(--border-thick);
+    background-color: var(--border-color); /* Grid lines color */
+    gap: 1px;
+}
+.cell {
+    background-color: var(--cell-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: var(--font-heading);
+    font-size: clamp(1.2rem, 5vw, 2rem);
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+    color: var(--text-primary);
+}
+/* Thicker borders for 3x3 boxes */
+.cell:nth-child(3n) { border-right: 2px solid var(--border-thick); }
+.cell:nth-child(9n) { border-right: none; }
+.cell:nth-child(n+19):nth-child(-n+27),
+.cell:nth-child(n+46):nth-child(-n+54) {
+    border-bottom: 2px solid var(--border-thick);
+}
+.cell.selected { background-color: var(--cell-bg-selected); }
+.cell.highlight { background-color: var(--cell-bg-highlight); }
+.cell.error { color: var(--text-error); background-color: var(--cell-bg-error); }
+.cell.fixed { font-weight: bold; color: var(--text-primary); }
+.cell.user-input { color: var(--text-secondary); }
+.notes-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    width: 100%;
+    height: 100%;
+    padding: 2px;
+}
+.note-num {
+    font-family: var(--font-ui);
+    font-size: clamp(0.5rem, 2vw, 0.7rem);
+    color: var(--text-secondary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+}
+.actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+.actions button {
+    flex: 1;
+}
+.toggle-btn.active {
+    background-color: var(--border-thick);
+    color: var(--bg-color);
+}
+.numpad {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 0.5rem;
 }
+.num-btn {
+    font-family: var(--font-heading);
+    font-size: 1.5rem;
+    padding: 0.75rem 0;
 }
+.clear-btn {
+    grid-column: span 5;
+    font-family: var(--font-ui);
+    font-size: 1.2rem;
 }
+@media (min-width: 600px) {
+    .app-container {
+        max-width: 600px;
+    }
 }