feat: Implement Sudoku game with grid generation, validation, and solving features

- Added Sudoku grid generation with varying difficulty levels (easy, medium, hard).
- Implemented Sudoku solving functionality.
- Created a user interface for inputting and checking Sudoku solutions.
- Added validation for user inputs and error handling for invalid grids.
- Introduced a Docker configuration for easy deployment.

.gitignore

@@ -30,6 +30,9 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
+# local editor settings (can contain infrastructure credentials)
+.vscode/
+
 # env files (can opt-in for committing if needed)
 .env*
 

README.md

@@ -1,36 +1,63 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Sudoku
 
-## Getting Started
+Application Sudoku developpee avec Next.js (App Router), React et TypeScript.
 
-First, run the development server:
+Site en production: [sudoku.arthurp.fr](https://sudoku.arthurp.fr)
+
+## Fonctionnalites
+
+- Generation de grilles Sudoku.
+- Interface web simple et rapide a charger.
+- Build de production via Next.js.
+
+## Stack technique
+
+- Next.js 16
+- React 19
+- TypeScript
+- ESLint
+
+## Lancer en local
+
+Prerequis:
+
+- Node.js 20+
+- npm
+
+Installation et demarrage:
+
+```bash
+npm install
+npm run dev
+```
+
+Application disponible sur [http://localhost:3000](http://localhost:3000).
+
+## Scripts utiles
 
 ```bash
 npm run dev
-# or
+npm run build
-yarn dev
+npm run start
-# or
+npm run lint
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Lancer avec Docker Compose
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```bash
+docker compose up --build
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Le service expose l'application sur le port `3005` de la machine locale.
 
-## Learn More
+## Deploiement
 
-To learn more about Next.js, take a look at the following resources:
+Workflow recommande avant push GitHub:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+1. Verifier la qualite du code: `npm run lint`
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+2. Verifier le build de prod: `npm run build`
+3. Verifier les fichiers a publier: `git status` puis `git add` cible
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Backlink
 
-## Deploy on Vercel
+Ce depot supporte le site Sudoku publie ici: [https://sudoku.arthurp.fr](https://sudoku.arthurp.fr)
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  sudoku-app:
+    image: node:20-alpine
+    working_dir: /app
+    volumes:
+      - ./:/app
+    command: sh -c "npm install && npm run build && npm start"
+    ports:
+      - "3005:3000"
+    restart: unless-stopped

src/app/page.tsx

@@ -1,65 +1,213 @@
-import Image from "next/image";
+"use client";
+import { useState } from "react";
+import { generateSudoku, solveSudoku, Difficulty, SudokuGrid } from "./sudokuGenerator";
+
+function cloneGrid(grid: SudokuGrid): SudokuGrid {
+  return grid.map(row => [...row]);
+}
+
+function getInvalidCells(grid: SudokuGrid): boolean[][] {
+  const invalid: boolean[][] = Array.from({ length: 9 }, () => Array(9).fill(false));
+  for (let row = 0; row < 9; row++) {
+    for (let col = 0; col < 9; col++) {
+      const val = grid[row][col];
+      if (val === 0) continue;
+      for (let k = 0; k < 9; k++) {
+        if (k !== col && grid[row][k] === val) invalid[row][col] = true;
+        if (k !== row && grid[k][col] === val) invalid[row][col] = true;
+      }
+      const startRow = row - row % 3;
+      const startCol = col - col % 3;
+      for (let i = 0; i < 3; i++) {
+        for (let j = 0; j < 3; j++) {
+          const r = startRow + i;
+          const c = startCol + j;
+          if ((r !== row || c !== col) && grid[r][c] === val) invalid[row][col] = true;
+        }
+      }
+    }
+  }
+  return invalid;
+}
+
+function SudokuBoard({ grid, onChange, editable, invalidCells, fixedCells }: { grid: SudokuGrid; onChange?: (row: number, col: number, value: number) => void; editable?: boolean; invalidCells?: boolean[][]; fixedCells?: boolean[][] }) {
+  return (
+    <table className="border border-gray-400 mx-auto" style={{background:'#fff',borderRadius:16,boxShadow:'0 2px 16px #e0e0e0'}}>
+      <tbody>
+        {grid.map((row, i) => (
+          <tr key={i}>
+            {row.map((cell, j) => (
+              <td key={j} style={{width:40,height:40,border:'1px solid #bdbdbd',textAlign:'center',background:'#fafafa',fontSize:20,fontWeight:'bold',color:'#222',borderRight:(j%3===2&&j!==8)?'2px solid #222':'',borderBottom:(i%3===2&&i!==8)?'2px solid #222':''}}>
+                {editable && onChange ? (
+                  fixedCells && fixedCells[i][j] ? (
+                    <span style={{color:'#222',fontWeight:'bold',userSelect:'none'}}>{cell}</span>
+                  ) : (
+                    <input
+                      type="number"
+                      min={0}
+                      max={9}
+                      value={cell === 0 ? "" : cell}
+                      onChange={e => onChange(i, j, Number(e.target.value))}
+                      style={{width:'100%',height:'100%',textAlign:'center',background:'#fff',border:'none',outline:'none',fontSize:20,fontWeight:'bold',color:invalidCells && invalidCells[i][j] ? '#d32f2f' : '#222'}}
+                    />
+                  )
+                ) : (
+                  cell !== 0 ? (
+                    <span style={{color:invalidCells && invalidCells[i][j] ? '#d32f2f' : '#222',fontWeight:'bold'}}>{cell}</span>
+                  ) : ""
+                )}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
 
 export default function Home() {
+  const [difficulty, setDifficulty] = useState<Difficulty>("easy");
+  const [grid, setGrid] = useState<SudokuGrid | null>(null);
+  const [solvedGrid, setSolvedGrid] = useState<SudokuGrid | null>(null);
+  const [error, setError] = useState<string>("");
+  const [customGrid, setCustomGrid] = useState<SudokuGrid>(Array.from({ length: 9 }, () => Array(9).fill(0)));
+  const [showCustom, setShowCustom] = useState(false);
+  const [userGrid, setUserGrid] = useState<SudokuGrid | null>(null);
+  const [checkResult, setCheckResult] = useState<string>("");
+
+  const handleGenerate = () => {
+    const generated = generateSudoku(difficulty);
+    setGrid(generated);
+    setUserGrid(cloneGrid(generated));
+    setSolvedGrid(null);
+    setError("");
+    setShowCustom(false);
+    setCheckResult("");
+  };
+
+  const handleUserChange = (row: number, col: number, value: number) => {
+    if (!userGrid) return;
+    if (value < 0 || value > 9) return;
+    setUserGrid(prev => {
+      if (!prev) return null;
+      const copy = cloneGrid(prev);
+      copy[row][col] = value;
+      return copy;
+    });
+  };
+
+  const handleCheck = () => {
+    if (!userGrid || !grid) return;
+    const invalid = getInvalidCells(userGrid);
+    const hasInvalid = invalid.flat().some(Boolean);
+    if (hasInvalid) {
+      setCheckResult("Erreur : La grille contient des chiffres en conflit (ligne, colonne ou bloc). Les chiffres invalides sont en rouge.");
+      return;
+    }
+    for (let i = 0; i < 9; i++) {
+      for (let j = 0; j < 9; j++) {
+        if (userGrid[i][j] === 0) {
+          setCheckResult("La grille n'est pas entièrement remplie.");
+          return;
+        }
+      }
+    }
+    for (let i = 0; i < 9; i++) {
+      for (let j = 0; j < 9; j++) {
+        if (grid[i][j] !== 0 && userGrid[i][j] !== grid[i][j]) {
+          setCheckResult("Erreur : Vous avez modifié une case pré-remplie.");
+          return;
+        }
+      }
+    }
+    setCheckResult("Bravo ! La solution est correcte.");
+  };
+
+  const handleSolve = () => {
+    if (!grid) return;
+    const gridCopy = cloneGrid(grid);
+    const solved = solveSudoku(gridCopy);
+    if (solved) {
+      setSolvedGrid(gridCopy);
+      setError("");
+    } else {
+      setError("Grille non résoluble.");
+    }
+  };
+
+  const handleCustomSolve = () => {
+    const invalid = getInvalidCells(customGrid);
+    const hasInvalid = invalid.flat().some(Boolean);
+    if (hasInvalid) {
+      setSolvedGrid(null);
+      setError("Erreur : La grille contient des chiffres en conflit (ligne, colonne ou bloc). Les chiffres invalides sont en rouge.");
+      return;
+    }
+    const gridCopy = cloneGrid(customGrid);
+    const solved = solveSudoku(gridCopy);
+    if (solved) {
+      setSolvedGrid(gridCopy);
+      setError("");
+    } else {
+      setSolvedGrid(null);
+      setError("Grille non résoluble.");
+    }
+  };
+
+  const handleCustomChange = (row: number, col: number, value: number) => {
+    if (value < 0 || value > 9) return;
+    setCustomGrid(prev => {
+      const copy = cloneGrid(prev);
+      copy[row][col] = value;
+      return copy;
+    });
+  };
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div style={{minHeight:'100vh',background:'#f5f5f5',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'flex-start',fontFamily:'Inter, Arial, sans-serif',padding:'32px 0'}}>
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <div style={{width:'100%',maxWidth:480,background:'#fff',borderRadius:24,boxShadow:'0 2px 24px #e0e0e0',padding:'32px 24px',margin:'24px 0'}}>
-        <Image
+        <h1 style={{fontSize:32,fontWeight:800,marginBottom:24,color:'#222',textAlign:'center',letterSpacing:'-1px'}}>Sudoku</h1>
-          className="dark:invert"
+        <div style={{display:'flex',gap:12,flexWrap:'wrap',justifyContent:'center',alignItems:'center',marginBottom:24}}>
-          src="/next.svg"
+          <label style={{fontWeight:600,color:'#222'}}>Niveau :</label>
-          alt="Next.js logo"
+          <select value={difficulty} onChange={e => setDifficulty(e.target.value as Difficulty)} style={{padding:'6px 12px',borderRadius:8,border:'1px solid #bdbdbd',fontWeight:500,color:'#222',background:'#fafafa'}}>
-          width={100}
+            <option value="easy">Facile</option>
-          height={20}
+            <option value="medium">Moyen</option>
-          priority
+            <option value="hard">Difficile</option>
-        />
+          </select>
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <button onClick={handleGenerate} style={{padding:'8px 18px',background:'#1976d2',color:'#fff',border:'none',borderRadius:8,fontWeight:600,cursor:'pointer',boxShadow:'0 1px 4px #e0e0e0'}}>Générer</button>
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+          <button onClick={handleSolve} style={{padding:'8px 18px',background:'#388e3c',color:'#fff',border:'none',borderRadius:8,fontWeight:600,cursor:'pointer',boxShadow:'0 1px 4px #e0e0e0'}} disabled={!grid}>Résoudre</button>
-            To get started, edit the page.tsx file.
+          <button onClick={() => {setShowCustom(true); setGrid(null); setSolvedGrid(null); setError("");}} style={{padding:'8px 18px',background:'#fbc02d',color:'#222',border:'none',borderRadius:8,fontWeight:600,cursor:'pointer',boxShadow:'0 1px 4px #e0e0e0'}}>Entrer une grille</button>
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+        {grid && userGrid && (
-          <a
+          <div style={{marginBottom:32,display:'flex',flexDirection:'column',alignItems:'center'}}>
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            <h2 style={{fontSize:20,fontWeight:700,marginBottom:12,color:'#222'}}>Remplissez la grille</h2>
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            <SudokuBoard
-            target="_blank"
+              grid={userGrid}
-            rel="noopener noreferrer"
+              onChange={handleUserChange}
-          >
+              editable={true}
-            <Image
+              invalidCells={getInvalidCells(userGrid)}
-              className="dark:invert"
+              fixedCells={grid.map(row => row.map(cell => cell !== 0))}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
             />
-            Deploy Now
+            <button onClick={handleCheck} style={{marginTop:16,padding:'8px 18px',background:'#7b1fa2',color:'#fff',border:'none',borderRadius:8,fontWeight:600,cursor:'pointer',boxShadow:'0 1px 4px #e0e0e0'}}>Vérifier</button>
-          </a>
+            {checkResult && <div style={{marginTop:10,color:checkResult.startsWith('Bravo') ? '#388e3c' : '#d32f2f',fontWeight:600}}>{checkResult}</div>}
-          <a
+          </div>
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+        )}
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        {showCustom && (
-            target="_blank"
+          <div style={{marginBottom:32,display:'flex',flexDirection:'column',alignItems:'center'}}>
-            rel="noopener noreferrer"
+            <h2 style={{fontSize:20,fontWeight:700,marginBottom:12,color:'#222'}}>Saisissez votre grille</h2>
-          >
+            <SudokuBoard grid={customGrid} onChange={handleCustomChange} editable={true} invalidCells={getInvalidCells(customGrid)} />
-            Documentation
+            <button onClick={handleCustomSolve} style={{marginTop:16,padding:'8px 18px',background:'#388e3c',color:'#fff',border:'none',borderRadius:8,fontWeight:600,cursor:'pointer',boxShadow:'0 1px 4px #e0e0e0'}}>Résoudre ma grille</button>
-          </a>
+          </div>
-        </div>
+        )}
-      </main>
+        {solvedGrid && (
+          <div style={{marginBottom:32}}>
+            <h2 style={{fontSize:20,fontWeight:700,marginBottom:12,color:'#222'}}>Solution</h2>
+            <SudokuBoard grid={solvedGrid} />
+          </div>
+        )}
+        {error && <div style={{color:'#d32f2f',marginTop:16,fontWeight:600}}>{error}</div>}
+      </div>
+      <footer style={{marginTop:24,color:'#222',fontWeight:500,fontSize:14,opacity:0.7}}>© 2026 Sudoku App.</footer>
     </div>
   );
 }

src/app/sudokuGenerator.ts

@@ -0,0 +1,93 @@
+// Générateur de grilles de sudoku avec différents niveaux de difficulté
+// Facile, Moyen, Difficile
+
+export type Difficulty = 'easy' | 'medium' | 'hard';
+
+export type SudokuGrid = number[][];
+
+function shuffle<T>(array: T[]): T[] {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+function isSafe(grid: SudokuGrid, row: number, col: number, num: number): boolean {
+  for (let x = 0; x < 9; x++) {
+    if (grid[row][x] === num || grid[x][col] === num) return false;
+  }
+  const startRow = row - row % 3;
+  const startCol = col - col % 3;
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
+      if (grid[startRow + i][startCol + j] === num) return false;
+    }
+  }
+  return true;
+}
+
+function fillGrid(grid: SudokuGrid): boolean {
+  for (let row = 0; row < 9; row++) {
+    for (let col = 0; col < 9; col++) {
+      if (grid[row][col] === 0) {
+        const numbers = shuffle([1,2,3,4,5,6,7,8,9]);
+        for (const num of numbers) {
+          if (isSafe(grid, row, col, num)) {
+            grid[row][col] = num;
+            if (fillGrid(grid)) return true;
+            grid[row][col] = 0;
+          }
+        }
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+function removeCells(grid: SudokuGrid, difficulty: Difficulty): SudokuGrid {
+  const gridCopy = grid.map(row => [...row]);
+  let cellsToRemove;
+  switch (difficulty) {
+    case 'easy': cellsToRemove = 36; break;
+    case 'medium': cellsToRemove = 46; break;
+    case 'hard': cellsToRemove = 54; break;
+    default: cellsToRemove = 36;
+  }
+  while (cellsToRemove > 0) {
+    const row = Math.floor(Math.random() * 9);
+    const col = Math.floor(Math.random() * 9);
+    if (gridCopy[row][col] !== 0) {
+      gridCopy[row][col] = 0;
+      cellsToRemove--;
+    }
+  }
+  return gridCopy;
+}
+
+
+export function generateSudoku(difficulty: Difficulty = 'easy'): SudokuGrid {
+  const grid: SudokuGrid = Array.from({ length: 9 }, () => Array(9).fill(0));
+  fillGrid(grid);
+  return removeCells(grid, difficulty);
+}
+
+// Résolution d'une grille de sudoku
+export function solveSudoku(grid: SudokuGrid): boolean {
+  for (let row = 0; row < 9; row++) {
+    for (let col = 0; col < 9; col++) {
+      if (grid[row][col] === 0) {
+        for (let num = 1; num <= 9; num++) {
+          if (isSafe(grid, row, col, num)) {
+            grid[row][col] = num;
+            if (solveSudoku(grid)) return true;
+            grid[row][col] = 0;
+          }
+        }
+        return false;
+      }
+    }
+  }
+  return true;
+}