JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<table id="container">
    
</table>
<div id="stats">
    remaining time : <span class="time"></span>
    <br/>
    remaining mines : <span class="mineCount"></span>
</div>

CSS

td{
    width : 25px;
    height : 25px;
    font-size : 15px;
    border : 1px solid green;
    color : #f90;
    text-align : center;
    cursor : pointer;
    background-color : #666;
    background-position : 50% 50%;
    background-repeat : no-repeat;
}
td.virgin{
    background-color : #222 !important;
}
td:hover{
    background-color : #404040;
}

td.mine{
    background-color : yellow !important;
}     
td.flagged{
    background-image : url('http://www.mapdango.com/images/library/icons/flag-icon.gif');
}
td.question{
    background-image : url('http://t2.gstatic.com/images?q=tbn:ANd9GcRNG14DRvU0qu6WU6g4_oKAaXTZ6rcgOsbb4gbTNbFSCKodAjvavQ');
}

td.tzapa{
    background-image : url('http://cdn1.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png') !important;
}

JavaScript

window.settings = {
    lines: 10,
    cols: 10,
    mineCount: 9,
    timeLimit: 120,
    containerSelector: '#container'
};
window.container = $(settings.containerSelector);
var interval;

function init() {
    $('#stats .time').text(settings.timeLimit);
    $('#stats .mineCount').text(settings.mineCount);
    interval = setInterval(updateTime, 1000);
    for (var i = 0; i < settings.lines; i++) {
        var tr = $('<tr></tr>');
        for (var j = 0; j < settings.cols; j++)
        tr.append($('<td class="virgin"></td>'));
        container.append(tr);
    }
    for (var i = 0; i < settings.mineCount; i++)
    randomCell(settings);
    setNumbers(container);
    container.find('td').click(function(e) {
        if (!$(this).hasClass('virgin')) return;
        $(this).removeClass('virgin');
        var score = $(this).data('score');
        if (score == 'mine') {
            $(this).addClass('mine');
            return loser();
        }
        if (score != 0) {
            $(this).text(score);
            return;
        }
        if (container.find('td.virgin').length - settings.mineCount < 0) return winner();
        $.each(getNeighbours($(this)), function(i, el) {
            // if (el != null && el.data('score') != 'mine')
            try {
                el.trigger('click');
            } catch (e) {}
        });
    }).bind('contextmenu', function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (!$(this).hasClass('virgin')) return;
        if ($(this).hasClass('question')) $(this).removeClass('question');
        else if ($(this).hasClass('flagged')) $(this).removeClass('flagged').addClass('question');
        else $(this).addClass('flagged');
        updateStats();
    });
}

function updateStats() {
    $('#stats .mineCount').text(settings.mineCount - container.find('.flagged, .question').length);
    if ($('.question').length == 0 && $('.flagged').length == settings.mineCount && $('.virgin').length == settings.mineCount) {
...