JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div class="content" id="content"></div>

CSS

*, body {
    margin:0;
    padding:0;
}
.clear {
    clear: both;
}
.block {
    background-color:red;
}
.block:hover {
    background-color:grey;
    cursor: pointer;
}
.content {
    background-color:blue;
}
.player {
    background-color: green;
    position: absolute;
}
.left {
    float:left;
}

JavaScript

heightBlock = widthBlock = 50;
genGrid(5, 10);
endMove = true;

function genGrid(rows, cols) {
    var newGrid = '<div class="grid" id="grid">';
    for (var i = 1; i <= rows; i++) {
        for (var j = 1; j <= cols; j++) {
            newGrid += '<div class="block left" id="' + i + '-' + j + '">' + i + '-' + j + '</div>';
        }
        newGrid += '<div class="clear"></div>';
    }
    newGrid += '</div>';
    $("#content").append(newGrid);
    $(".block").css({
        "height": heightBlock + "px",
            "width": widthBlock + "px",
            "line-height": heightBlock + "px",
            "text-align": "center"
    });
    genPlayer();
}

function isset(el) {
    return el.length > 0;
}

function genPlayer(row, col) {
    row = row || 1;
    col = col || 1;
    if (isset($("#" + row + "-" + col))) {
        $("#grid").append('<div id="player" class="player"></div>');
        $("#player").css({
            "height": heightBlock + "px",
                "width": widthBlock + "px",
                "top": (heightBlock * (row - 1)) + "px",
                "left": (widthBlock * (col - 1)) + "px"
        });
        genEventClick(".block");
    }
}

function genEventClick(el) {
    if (isset($(el))) {
        $(el).each(function () {
            $(this).on("click", function (e) {
                if (endMove) {
                    endMove = false;
                    var blockId = $(this).attr("id");
                    movePlayerTo(blockId.substring(0, blockId.lastIndexOf("-")), blockId.substring(blockId.lastIndexOf("-") + 1, blockId.length));
                }
            });
        });
    }
}

function movePlayerTo(row, col) {
    row = row || 1;
    col = col || 1;
    var playerTop = parseInt($("#player").css("top"));
    var playerLeft = parseInt($("#player").css("left"));
    var rowTop = (row - 1) * heightBlock;
    var colLeft = (col - 1) * widthBlock;
    $("#player").animate({
        top: "+=" + (rowTop - playerTop)
    }, Math.abs((rowTop -...