const numRows = puzzle.length;

const numCols = puzzle[0].length;

const rowClues = [];

const colClues = [];

for (let r = 0; r < numRows; r++) {

const row = puzzle[r];

let current = [];

let size = 0;

for (let c = 0; c < numCols; c++) {

if (row[c] === 1) size++;

else if (size > 0) {

current.push(size);

size = 0;

}

}

if (size > 0) current.push(size);

rowClues.push(current.length > 0 ? current : [0]);

}

for (let c = 0; c < numCols; c++) {

let current = [];

let size = 0;

for (let r = 0; r < numRows; r++) {

if (puzzle[r][c] === 1) size++;

else if (size > 0) {

current.push(size);

size = 0;

}

}

if (size > 0) current.push(size);

colClues.push(current.length > 0 ? current : [0]);

}

return { rowClues, colClues };

const appName = 'Nonogram';

const { addToast } = useContext(ToastContext);

const [solvedPuzzle, setSolvedPuzzle] = useState([]);

const [playerGrid, setPlayerGrid] = useState([]);

const [rowClues, setRowClues] = useState([]);

const [colClues, setColClues] = useState([]);

const [gameWon, setGameWon] = useState(false);

const [message, setMessage] = useState('');

const [puzzleName, setPuzzleName] = useState('');

const initGame = useCallback(() => {

const idx = Math.floor(Math.random() * PUZZLES.length);

const puzzle = PUZZLES[idx];

setPuzzleName(PUZZLENAMES[idx]);

setSolvedPuzzle(puzzle);

const { rowClues: r, colClues: c } = generateClues(puzzle);

setRowClues(r);

setColClues(c);

setPlayerGrid(

Array(puzzle.length)

.fill(null)

.map(() => Array(puzzle[0].length).fill(0)),

);

setGameWon(false);

setMessage('');

}, []);

useEffect(() => {

initGame();

}, [initGame]);

const checkWin = useCallback(() => {

if (solvedPuzzle.length === 0) return false;

for (let r = 0; r < solvedPuzzle.length; r++) {

for (let c = 0; c < solvedPuzzle[0].length; c++) {

if (playerGrid[r][c] === 1 && solvedPuzzle[r][c] !== 1) return false;

if (playerGrid[r][c] === 0 && solvedPuzzle[r][c] === 1) return false;

}

}

return true;

}, [playerGrid, solvedPuzzle]);

useEffect(() => {

if (playerGrid.length > 0 && solvedPuzzle.length > 0 && checkWin()) {

setGameWon(true);

setMessage(`Pattern Identified :: ${puzzleName} decrypted.`);

addToast({

title: 'Success',

message: 'Puzzle Solved!',

type: 'success',

});

}

}, [playerGrid, solvedPuzzle, checkWin, addToast, puzzleName]);

const handleCellClick = (row, col, event) => {

if (gameWon) return;

event.preventDefault();

setPlayerGrid((prev) => {

const next = prev.map((r) => [...r]);

if (event.type === 'contextmenu')

next[row][col] = next[row][col] === 2 ? 0 : 2;

else next[row][col] = next[row][col] === 1 ? 0 : 1;

return next;

});

};

return (

<div className="min-h-screen bg-[#050505] text-white selection:bg-emerald-500/30 font-sans">

<Seo

title="Nonogram | Fezcodex"

description="Solve complex picture logic puzzles using numerical identifiers."

keywords={['Fezcodex', 'nonogram', 'puzzle', 'logic', 'game']}

/>

<div className="mx-auto max-w-7xl px-6 py-24 md:px-12">

<header className="mb-20">

<Link

to="/apps"

className="mb-8 inline-flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors uppercase tracking-widest"

>

<ArrowLeftIcon weight="bold" />

<span>Applications</span>

</Link>

<div className="flex flex-col md:flex-row md:items-end justify-between gap-12">

<div className="space-y-4">

<BreadcrumbTitle title="Nonogram" slug="ng" variant="brutalist" />

<p className="text-xl text-gray-400 max-w-2xl font-light leading-relaxed">

Picture logic protocol. Decrypt the pattern through grid-based

identification.

</p>

</div>

<div className="flex gap-12 font-mono">

<div className="flex flex-col">

<span className="text-[10px] text-gray-600 uppercase tracking-widest">

Target

</span>

<span className="text-3xl font-black text-emerald-500">

{puzzleName}

</span>

</div>

<div className="flex flex-col">

<span className="text-[10px] text-gray-600 uppercase tracking-widest">

Status

</span>

<span

className={`text-3xl font-black ${gameWon ? 'text-emerald-500' : 'text-white'}`}

>

{gameWon ? 'SOLVED' : 'ACTIVE'}

</span>

</div>

</div>

</div>

</header>

<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">

{/* Main Action Column */}

<div className="lg:col-span-7 flex flex-col items-center">

<div className="relative border border-white/10 bg-white/[0.02] backdrop-blur-sm p-8 md:p-16 rounded-sm overflow-hidden group w-full flex items-center justify-center">

<div className="absolute inset-0 opacity-5 pointer-events-none">

<GenerativeArt

seed={appName + puzzleName}

className="w-full h-full"

/>

</div>

<div className="absolute top-0 left-0 w-1 h-0 group-hover:h-full bg-emerald-500 transition-all duration-500" />

<div className="relative z-10">

{/* Nonogram Grid Container */}

<div className="flex flex-col items-center">

<div className="flex">

<div className="w-20 h-20" />

<div className="flex gap-1">

{colClues.map((clues, i) => (

<div

key={i}

className="w-10 h-20 flex flex-col-reverse items-center justify-end font-mono text-[10px] text-gray-500 border-b border-white/5 pb-2"

>

{clues.map((c, j) => (

<span key={j}>{c}</span>

))}

</div>

))}

</div>

</div>

<div className="flex">

<div className="flex flex-col gap-1 pr-4">

{rowClues.map((clues, i) => (

<div

key={i}

className="h-10 w-20 flex items-center justify-end font-mono text-[10px] text-gray-500 border-r border-white/5 pr-2"

>

{clues.map((c, j) => (

<span key={j} className="ml-1">

{c}

</span>

))}

</div>

))}

</div>

<div

className="grid gap-1"

style={{

gridTemplateColumns: `repeat(${solvedPuzzle[0]?.length || 5}, 40px)`,

}}

>

{playerGrid.map((row, r) =>

row.map((cell, c) => (

<button

key={`${r}-${c}`}

onClick={(e) => handleCellClick(r, c, e)}

onContextMenu={(e) => handleCellClick(r, c, e)}

className={`w-10 h-10 border border-white/10 rounded-sm transition-all duration-150 flex items-center justify-center

>

{cell === 2 && (

<XIcon size={16} className="text-gray-600" />

)}

</button>

)),

)}

</div>

</div>

</div>

</div>

</div>

{message && (

<p className="mt-8 text-xl font-mono text-emerald-400 uppercase tracking-widest text-center">

{message}

</p>

)}

</div>

{/* Info Column */}

<div className="lg:col-span-5 space-y-8">

<div className="bg-white/5 border border-white/10 p-8 rounded-sm">

<div className="flex items-center gap-3 mb-6 text-emerald-500">

<LightbulbIcon size={20} weight="bold" />

<h4 className="font-mono text-[10px] font-bold uppercase tracking-widest">

Logic_Manual

</h4>

</div>

<ul className="space-y-4 text-xs font-mono text-gray-500 uppercase tracking-wider leading-relaxed">

<li className="flex gap-3">

<span className="text-emerald-500">01</span> Fill cells based

on row/column numbers.

</li>

<li className="flex gap-3">

<span className="text-emerald-500">02</span> Numbers represent

consecutive filled blocks.

</li>

<li className="flex gap-3">

<span className="text-emerald-500">03</span> Left-click to

fill, Right-click to mark empty space.

</li>

</ul>

</div>

<div className="flex flex-col gap-3">

<button

onClick={initGame}

className="w-full py-4 bg-white text-black font-black uppercase tracking-[0.3em] hover:bg-emerald-400 transition-all text-sm flex items-center justify-center gap-3"

>

<ShapesIcon weight="bold" size={18} />

New Pattern

</button>

<button

onClick={() =>

setPlayerGrid(

Array(solvedPuzzle.length)

.fill(null)

.map(() => Array(solvedPuzzle[0].length).fill(0)),

)

}

className="w-full py-3 border border-white/10 text-gray-500 hover:text-white hover:bg-white/5 transition-all font-mono text-[10px] uppercase tracking-widest flex items-center justify-center gap-2"

>

<EraserIcon />

Clear Current

</button>

</div>

</div>

</div>

</div>

</div>

);