JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<div id="wrapper"></div>

CSS

#wrapper {
    width:400px;
    height:400px;
    position:relative;
}

.cover {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0,0,0,0.8);
    z-index:10;
}

.red {
    
    background-color: rgba(255,0,0,0.5);
}

#table1 {
    border: 1px solid black;
    width: 400px;
    height:400px;
}

#table1 td {
    border: 1px solid black;
}

.path{   
    background-color: lightgrey;
}


.player {
    background-color: lightgreen;   
}

JavaScript

insertTable(6);

colorPath();

movePlayer({row:5,col:3});

setTimeout(hideTable,3000);


function hideTable(){
    $('#wrapper').append('<div class="cover"></div>');
}

function insertTable(size)
{
    var num_rows = size;
    var num_cols = size;
    var theader = "<table id='table1'>";
    var tbody = "";

    for(var i = 0; i < num_rows; i++)
    {
        tbody += "<tr>";
        for(var j = 0; j < num_cols; j++)
        {
            tbody += "<td data-row='"+i+"' data-col='"+j+"'>";
            tbody += "["+i + "," + j+"]" ;
            tbody += "</td>"
        }
        tbody += "</tr>";
    }
    var tfooter = "</table>";
    
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}

function colorPath(){
   pathArr = [{row:5,col:3},{row:4,col:3},{row:3,col:3},{row:3,col:4},{row:3,col:5},
             {row:2,col:5},{row:1,col:5},{row:1,col:4},{row:0,col:4}];
    
    for (var i = 0; i < pathArr.length; i++){
        $('td[data-row="'+pathArr[i].row+'"][data-col="'+pathArr[i].col+'"]').addClass('path');
    }
}

function movePlayer(newPos){
    
   $('td').removeClass('player'); 
   $('td[data-row="'+newPos.row+'"][data-col="'+newPos.col+'"]').addClass('player');

    if(!$('.player').hasClass('path')){
       $('.cover').addClass('red'); 
    }
}

$(document).keydown(function(e) {
    
    var playerCurrentPos = {row: $('.player').data('row'), col:$('.player').data('col')};
    
    var newPlayerPos = {row:-1,col:-1};
    
    switch(e.which) {
        case 37: // left
            newPlayerPos.row = playerCurrentPos.row;
            newPlayerPos.col = playerCurrentPos.col-1;
            movePlayer(newPlayerPos);
        break;

        case 38: // up
          newPlayerPos.row = playerCurrentPos.row - 1;
            newPlayerPos.col = playerCurrentPos.col;
            movePlayer(newPlayerPos);
        break;

        case 39: // right
                      newPlayerPos.row = playerCurrentPos.row;
            newPlayerPos.col =...