JSFiddle - React, Tailwind, and code Playground

by dvjc

HTML

<table>
    <tr>
        <td id="11">S</td>
        <td id="21" class="white">W</td>
        <td id="31" class="white">W</td>
        <td id="41" class="white">W</td>
        <td id="51" class="white">W</td>
        <td id="61" class="white">W</td>
        <td id="71" class="white">W</td>
    </tr>
    <tr>
        <td id="12" class="white">W</td>
        <td id="22" class="whiteall">W</td>
        <td id="32" class="whiteall">W</td>
        <td id="42" class="whiteall">W</td>
        <td id="52" class="white">W</td>
        <td id="62" class="whiteall">W</td>
        <td id="72" class="white">W</td>
    </tr>
    <tr>
        <td id="13" class="white">W</td>
        <td id="23" class="whiteall">W</td>
        <td id="33">*</td>
        <td id="43" class="whiteall">W</td>
        <td id="53" class="white">W</td>
        <td id="63" class="white">W</td>
        <td id="73" class="white">W</td>
    </tr>
    <tr>
        <td id="14" class="white">W</td>
        <td id="24" class="whiteall">W</td>
        <td id="34" class="white">W</td>
        <td id="44" class="whiteall">W</td>
        <td id="54" class="whiteall">W</td>
        <td id="64" class="white">W</td>
    </tr>
    <tr>
        <td id="15" class="white">W</td>
        <td id="25" class="white">W</td>
        <td id="35" class="white">W</td>
        <td id="45" class="white">W</td>
        <td id="55" class="white">W</td>
        <td id="65" class="white">W</td>
    </tr>
</table>

<input id="btnftw" type="button" value="Left Wall" />
<input id="btnrtw" type="button" value="Right Wall" /><br />
<input id="btnlrtw" type="button" value="Left-Right Wall" />

CSS

table tr td {
    border-style: solid;
    border-width: 1px;
}
td.white {
    color: white;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
td.r {
    background-color: red;
    color: red;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
td.b {
    background-color: blue;
    color: blue;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
td.p {
    background-color: purple;
    color: purple;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
td.g {
    background-color: green;
    color: green;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
td.red {
    color: red;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
td.whiteall {
    color: white;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}

JavaScript

var dur = 1000;
var FLW = function(){
    setTimeout(function(){ fromTo("11","21"); }, 1 *dur);
    setTimeout(function(){ fromTo("21","31"); }, 2 *dur);
    setTimeout(function(){ fromTo("31","41"); }, 3 *dur);
    setTimeout(function(){ fromTo("41","51"); }, 4 *dur);
    setTimeout(function(){ fromTo("51","61"); }, 5 *dur);
    setTimeout(function(){ fromTo("61","71"); }, 6 *dur);
    setTimeout(function(){ fromTo("71","72"); }, 7 *dur);
    setTimeout(function(){ fromTo("72","73"); }, 8 *dur);
    setTimeout(function(){ fromTo("73","63"); }, 9 *dur);
    setTimeout(function(){ fromTo("63","64"); }, 10*dur);
    setTimeout(function(){ fromTo("64","65"); }, 11*dur);
    setTimeout(function(){ fromTo("65","55"); }, 12*dur);
    setTimeout(function(){ fromTo("55","45"); }, 13*dur);
    setTimeout(function(){ fromTo("45","35"); }, 14*dur);
    setTimeout(function(){ fromTo("35","25"); }, 15*dur);
    setTimeout(function(){ fromTo("25","15"); }, 16*dur);
    setTimeout(function(){ fromTo("15","14"); }, 17*dur);
    setTimeout(function(){ fromTo("14","13"); }, 18*dur);
    setTimeout(function(){ fromTo("13","12"); }, 19*dur);
    setTimeout(function(){ fromTo("12","11"); }, 20*dur);
}

var RTW = function(){
    setTimeout(function(){ fromTo("11","12"); }, 1 *dur);
    setTimeout(function(){ fromTo("12","13"); }, 2 *dur);
    setTimeout(function(){ fromTo("13","14"); }, 3 *dur);
    setTimeout(function(){ fromTo("14","15"); }, 4 *dur);
    setTimeout(function(){ fromTo("15","25"); }, 5 *dur);
    setTimeout(function(){ fromTo("25","35"); }, 6 *dur);
    setTimeout(function(){ fromTo("35","45"); }, 7 *dur);
    setTimeout(function(){ fromTo("45","55"); }, 8 *dur);
    setTimeout(function(){ fromTo("55","65"); }, 9 *dur);
    setTimeout(function(){ fromTo("65","64"); }, 10*dur);
    setTimeout(function(){ fromTo("64","63"); }, 11*dur);
    setTimeout(function(){ fromTo("63","73"); }, 12*dur);
    setTimeout(function(){ fromTo("73","72"); }, 13*dur);
   ...