JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<div id="puzzle">
</div>

<div id="currentpiece"></div>

CSS

#puzzle {
    /*width: 200px;
    height: 200px;*/
}
#currentpiece {
    width: 20px;
    height: 20px;
    background: red;
}
.highlight {
    background: cyan;
}

.piece {
    /*    border: 1px red solid;*/
    width: 20px;
    height: 20px;
    float: left;
}
.clear {
    clear:both;
}

JavaScript

var pecasArr = new Array(100);
var pecasEncontradas = new Array(100);

var totalDePecas = 100;
var totalDePecasCorretas = 0;

$(function() {

    pecasArr[10] = 1;

    for (i = 0; i < Math.sqrt(totalDePecas); i++) {
        for (j = 0; j < Math.sqrt(totalDePecas); j++) {
            if (pecasArr[(j * 10) + i] != "undefined") {
                $("#puzzle").append(
                $('<div class="piece x' + i + ' y' + j + '">' + i + j + '<div/>').droppable({
                    accept: "#currentpiece",
                    drop: function(event, ui) {
                        $("#currentpiece").draggable({
                            disabled: true
                        });
                        alert("drop");
                    }
                }));
            }
        }
        $("#puzzle").append($('<div class="clear"/>'));
    }

    fh = fopen("teste.txt", 0); // Open the file for reading 
    if (fh != -1) // If the file has been successfully opened 
    {
        length = flength(fh); // Get the length of the file     
        str = fread(fh, length); // Read in the entire file 
        fclose(fh); // Close the file 
        // Display the contents of the file     
        write(str);
    }
});

$("#currentpiece").draggable({
    snap: '.piece.x3.y4',
    snapMode: "inner"
});

$(".piece").hover(function() {
    $(this).css({
        "background-color": "#ccc",
    });
}, function() {
    $(this).css({
        "background-color": "#FFF",
    });
});