JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<div class="chessboard">
    <!-- 1st -->
	<div class="yellow">&#9814;</div>
    <div class="red">&#9816;</div>
    <div class="yellow">&#9815;</div>
    <div class="red">&#9813;</div>
    <div class="yellow">&#9812;</div>
    <div class="red">&#9815;</div>
    <div class="yellow">&#9816;</div>
    <div class="red">&#9814;</div>

    <!-- 2nd -->
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>

    <!-- 3rd -->
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>

    <!-- 4th -->
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>

    <!-- 5th -->
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>

    <!-- 6th -->
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>

    <!-- 7th -->
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>

    <!-- 8th -->
    <div...

CSS

.chessboard {
        width: 480px;
        height: 480px;
        margin: 1px;
        border: 2px solid #F44336;
    }

    .red, .yellow {
        float: left;
        width: 60px;
        height: 60px;
        font-size:50px;
        text-align:center;
        display: table-cell;
        vertical-align:middle;
        box-sizing: border-box;
    }

    .red {
        background-color: silver;
    }

    .yellow {
        background-color: brown;
    }

JavaScript

var canvas = document.getElementById("chessboard");
var ctx = canvas.getContext("2d");
var turn = "White";
var whiteKing = 1;
var blackKing = 1;
var blackQueen = 1;
var whiteQueen = 1;
var whiteBishops = 2;
var blackBishops = 2;
var blackKnights = 2;
var whiteKnights = 2;
var whiteRooks = 2;
var blackRooks = 2;
var whitePawns = 8;
var blackPawns = 8;
function