Datamatiker

// Bygger div tiles i html'en
function buildPuzzle(bg) {
    $('div#puzzle').empty();
    for (let row = 1; row <= 4; row++)
        for (let cell = 1; cell <= 4; cell++) {
            $('#puzzle')
                .append($('<div>')
                    .attr('id', 'tile' + row + cell)
                    .addClass('img' + row + cell)
                    .addClass(bg)
                    .addClass('finished'))
        }
}

// Tilføjer options i select#images
for (i = 1; i <= 5; i++) {
    let options = $('<option>')
        .attr('value', 'bg' + i)
        .text('Lego Batman ' + i);
    $('#images').append(options);
}

// Ændrer css værdien for baggrundsbilledet
$('select#images').on('click', function changeBg() {
    $('#images option').each(function () {
        if ($(this).is(':selected')) {
            buildPuzzle($(this).val());
            clickTile();
            movesNr = 0;
            $('span#moves').text(movesNr);
            $('div#puzzle').removeClass();
        }
    })
});

var movesNr;
$('#btnShuffler').on('click', function shuffle() {
    let shuffleAmount = 100;

    // Ændre status fra 'færdig' til 'ikke-færdigt'
    for (let row = 1; row <= 4; row++) {
        for (let cell = 1; cell <= 4; cell++) {
            let div = $('div#tile' + row + cell);
            div.removeClass('finished');
            div.addClass('unfinished');
        }
    }

    // Byt tom felt med tilfældig nabobrik
    const neighbors = [1, -1, 0];
    while (0 < shuffleAmount--)
        for (let row = 1; row <= 4; row++)
            for (let cell = 1; cell <= 4; cell++) {
                let rndNeighbor = neighbors[Math.floor(Math.random() * 3)];
                let rowNeighbor = row + rndNeighbor;
                (rndNeighbor === 0) ?
                    rndNeighbor = neighbors[Math.floor(Math.random() * 2)] :
                    rndNeighbor = 0;
                let cellNeighbor = cell + rndNeighbor;

                let tile = $('div#tile' + row + cell);
                let emptyId = $('div.img44').attr('id');
                if (tile.attr('id') == emptyId)
                    if (rowNeighbor >= 1 && rowNeighbor <= 4 && cellNeighbor >= 1 && cellNeighbor <= 4) {
                        // console.log(tile.attr('id'), 'tile' + rowNeighbor + cellNeighbor);
                        swapTiles('tile' + row + cell, 'tile' + rowNeighbor + cellNeighbor);

                        movesNr = 0;
                        $('span#moves').text(movesNr);
                        $('div#puzzle').removeClass();
                    }
            }
});

// Bytter to tiles
function swapTiles(tile1, tile2) {
    let temp = $('div#' + tile1).attr('class');
    $('div#' + tile1).attr('class', $('div#' + tile2).attr('class'));
    $('div#' + tile2).attr('class', temp);

    movesNr++;
    $('span#moves').text(movesNr);
}

function clickTile() {
    $('#puzzle div').on('click', function () {
        let tile = $(this).attr('id').toString();
        let row = parseInt(tile.substring(4, 5));
        let cell = parseInt(tile.substring(5, 6));
        let empty = 'img44';

        emptyId = $('div.img44').attr('id');
        emptyRow = parseInt(emptyId.substring(4, 5));
        emptyCell = parseInt(emptyId.substring(5, 6));

        if ($(tile).attr('class') != empty && $('.unfinished').length === 16) {
            // Tjek om 'empty' har matchende row nr
            if (emptyRow === row)
                if (emptyCell < cell) 
                    while (cell > emptyCell++) {
                        swapTiles(emptyId, 'tile' + emptyRow + emptyCell);
                        emptyId = $('div.img44').attr('id');
                    }
                else
                    while (cell < emptyCell--) {
                        swapTiles(emptyId, 'tile' + emptyRow + emptyCell);
                        emptyId = $('div.img44').attr('id');
                    }

            // Tjek om 'empty' har matchende cell nr
            if (emptyCell === cell)
                if (emptyRow < row)
                    while (row > emptyRow++) {
                        swapTiles(emptyId, 'tile' + emptyRow + emptyCell);
                        emptyId = $('div.img44').attr('id');
                    }
                else
                    while (row < emptyRow--) {
                        swapTiles(emptyId, 'tile' + emptyRow + emptyCell);
                        emptyId = $('div.img44').attr('id');
                    }
        }

        // Tæl antal korrekte tiles
        let correctTiles = 0;
        for (let row = 1; row <= 4; row++)
            for (let cell = 1; cell <= 4; cell++) {
                let idNr = $('div#tile' + row + cell).attr('id').substring(4, 6);
                let classNr = $('div#tile' + row + cell).attr('class').substring(3, 5);

                if (idNr == classNr)
                    correctTiles++;
            }

        // Hvis alle tiles er rigtige
        if (correctTiles === 16 && $('.unfinished').length === 16) {
            for (let row = 1; row <= 4; row++)
                for (let cell = 1; cell <= 4; cell++) {
                    let div = $('div#tile' + row + cell);
                    div.removeClass('unfinished');
                    div.addClass('finished');
                }

            $('span#moves').text(movesNr + ' - GENNEMFØRT!');
            $('div#puzzle').addClass('completed');
        }
    })
}
clickTile();