PRZESUWKA — osiem kafelków

<main><header><span class="eyebrow">Układanka liczbowa</span><h1>PRZE<br>SUWKA.</h1></header><div class="desktop-split"><section><div id="board" class="board" aria-label="Przesuwanka 3 na 3"></div><p id="status" class="status" role="status">Ułóż liczby od 1 do 8. Puste pole na końcu.</p></section><aside><span class="eyebrow">Wykonane ruchy</span><div id="score" class="metric">0</div><p>Kliknij kafelek obok pustego pola. Strzałki przesuwają puste pole.</p><button id="reset" type="button">Wymieszaj</button><p class="target">CEL<br>1 2 3<br>4 5 6<br>7 8 ·</p></aside></div></main>

*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--ink)}main{width:min(100% - 32px,980px);margin:32px auto}h1{font-size:clamp(32px,7vw,64px);line-height:1;margin:12px 0 20px;letter-spacing:-.045em}p{line-height:1.55}button{font:inherit;min-height:44px;padding:10px 16px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;cursor:pointer}button:hover{background:var(--ink);color:var(--bg)}button:disabled{cursor:default;opacity:.55}button:focus-visible,canvas:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}.eyebrow{font:12px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.status{min-height:48px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:8px}.metric{font:700 28px ui-monospace,monospace}small{line-height:1.5}canvas{display:block;width:100%;height:auto;border:1px solid currentColor;touch-action:none}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.controls button{min-width:54px;touch-action:none;user-select:none}.board{display:grid;gap:5px}.board button{padding:0;aspect-ratio:1;min-width:0;font-size:clamp(18px,5vw,30px)}@media(max-width:600px){main{width:calc(100% - 24px);margin:20px auto}h1{margin-bottom:16px}.desktop-split{display:block!important}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root{--bg:#ec592d;--ink:#211b19;--focus:#fff}h1{font-size:clamp(64px,12vw,124px);font-weight:900;line-height:.82}.desktop-split{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:40px}.board{grid-template-columns:repeat(3,1fr);gap:4px;background:#211b19;border:4px solid}.board button{background:#f4eadc;border:0;font-size:clamp(38px,10vw,70px);font-weight:800;color:#211b19}.board button.empty{background:#211b19}.metric{font-size:84px}.target{font-family:ui-monospace,monospace;line-height:1.8;letter-spacing:.5em}

function slideTile(board,index){const blank=board.indexOf(0);if(Math.abs(Math.floor(blank/3)-Math.floor(index/3))+Math.abs(blank%3-index%3)!==1)return board;const result=board.slice();[result[index],result[blank]]=[result[blank],result[index]];return result;}
function puzzleSolved(board){return board.every((value,index)=>value===(index+1)%9);}
function shufflePuzzle(random=Math.random){let board=[1,2,3,4,5,6,7,8,0],previous=-1;for(let step=0;step<100;step++){const blank=board.indexOf(0),choices=board.map((_,i)=>i).filter(i=>i!==previous&&slideTile(board,i)!==board);const next=choices[Math.floor(random()*choices.length)];previous=blank;board=slideTile(board,next);}return puzzleSolved(board)?slideTile(board,7):board;}
$(function(){
    let board,moves,won;
    function render(){$('#board button').each(function(i){const n=board[i];$(this).text(n||'').toggleClass('empty',n===0).attr('aria-label',n?'Kafelek '+n:'Puste pole').attr('aria-disabled',n===0||won?'true':'false');});$('#score').text(moves);}
    function reset(){board=[1,2,3,4,0,6,7,5,8];moves=0;won=false;$('#board').empty();for(let i=0;i<9;i++)$('<button>',{type:'button','data-cell':i}).appendTo('#board');render();}
    function move(i){if(won)return;const next=slideTile(board,i);if(next===board)return;board=next;moves++;won=puzzleSolved(board);$('#status').text(won?'Ułożone! Liczba ruchów: '+moves+'.':'Ruch '+moves+'.');render();}
    $('#board').on('click','button',function(){move(Number($(this).attr('data-cell')));}).on('keydown',function(event){const blank=board.indexOf(0),next={ArrowLeft:blank%3?blank-1:-1,ArrowRight:blank%3<2?blank+1:-1,ArrowUp:blank>=3?blank-3:-1,ArrowDown:blank<6?blank+3:-1}[event.key];if(next!==undefined){event.preventDefault();if(next>=0)move(next);}});
    $('#reset').on('click',function(){board=shufflePuzzle();moves=0;won=false;$('#status').text('Nowy układ. Ułóż liczby od 1 do 8.');render();});reset();
});