JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="main" class="main">Chargement...</div>

CSS

table {
    border-spacing: 0px;
    border-collapse: collapse;
}
.overlay {
    background-color: black;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.main {
    position: relative;
    width: 360px;
}
.player {
    width: 36px;
    height: 36px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}
table tr td {
    line-height: 36px;
    text-align: center;
    padding: 0;
}
table tr td span {
    display: block;
    height: 36px;
    width: 36px;
    cursor: pointer;
    background-color: green;
}
.progressBar {
    background-color:red;
    height: 50px;
    width: 0px;
    margin: -25px auto 0;
    text-align: center;
    line-height: 50px;
}
.progressBarBloc {
    height: 50px;
    width: 100%;
    margin-top: 50%;
    text-align: center;
}
.endDig {
    color: #fff;
    display: inline-block;
    line-height: initial;
    text-align: center;
    width: 100%;
}
.closeOverlay {
    background-color: yellow;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
}

JavaScript

$(function () {
    init();
    var moveEnd = true;

    function init() {
        preLoader();
    }

    function preLoader() {
        preloadImg([
            'img/imageName.jpg',
            'img/anotherOne.jpg',
            'img/blahblahblah.jpg']);
        loaded();
    }

    function loaded() {
        getGridState();
    }

    function createGrid(gridState) {
        console.log(gridState);
        if (gridState !== false) {
            var cols = 10;
            var rows = 10;
            var table = "<table>";
            if (cols >= 0 && rows >= 0) {
                for (var i = 0; i < cols; i++) {
                    table += "<tr>";
                    for (var j = 0; j < rows; j++) {
                        var numCase = i + "-" + j;
                        table += "<td>";
                        table += "<span id='case" + numCase + "' class='case'>";
                        table += numCase;
                        table += "</span>";
                        table += "</td>";
                    }
                    table += "</tr>";
                }
            }
            table += "</table>";
            $("#main").html(table);
            $(".case").on("click", function () {
                clicked($(this));
            });
            addPlayer();
        }
    }

    function addPlayer() {
        $("#main").append("<div id='player' class='player'>O</div>");
        addOverlay();
    }

    function addOverlay() {
        $("#main").append("<div id=\"overlay\" class=\"overlay\">" +
            "<div id=\"digLoad\" class=\"digLoad\">" +
            "<div id=\"endDig\" class=\"endDig\">" +
            "test ...<br>" +
            "<div id=\"closeOverlay\" class=\"closeOverlay\">Fermer</div>" +
            "</div>" +
            "<div id=\"progressBarBloc\" class=\"progressBarBloc\">" +
            "<div id=\"progressBar\" class=\"progressBar\"></div>" +
            "</div>" +
            "</div>" +
            "</div>");
       ...