JSFiddle - React, Tailwind, and code Playground

by Daniel Grijuela

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id='svg'></svg>

CSS

#svg {
  width: 640px;
  height: 640px;
  cursor: pointer;
}

JavaScript

var snap = Snap("#svg");

var width = 640;
var height = 640;
var squareWidth = width / 8;

for(var i = 0; i < 8; i++) {
    for(var j = 0; j < 8; j++) {
        var color;
        if((j + i) % 2 === 0) {
            color = "#fff";
        } else {
            color = "#000";
        }
        snap
        .rect(j * squareWidth, i * squareWidth, squareWidth, squareWidth)
        .attr({
          fill: color 
        })
        .data("x", j)
        .data("y", i)
    }
}

var sprite = Snap.load('https://upload.wikimedia.org/wikipedia/commons/b/b2/Chess_Pieces_Sprite.svg', onSpriteLoaded);

var whiteKing, whiteQueen, whiteLeftBishop, whiteLeftKnight, whiteLeftRock, whiteRightBishop, whiteRightKnight, whiteRightRock, whitePawn;
var blackKing, blackQueen, blackLeftBishop, blackRightBishop, blackLeftKnight, blackRightKnight, blackLeftRock, blackRightRock, blackLeftPawn;

function onSpriteLoaded(data) {
    // Black pieces
    whiteKing = data.select("g:nth-child(1)");
    whiteQueen = data.select("g:nth-child(2)");
    whiteLeftBishop = data.select("g:nth-child(3)");
    whiteLeftKnight = data.select("g:nth-child(4)");
    whiteLeftRock = data.select("g:nth-child(5)");
    whitePawn = data.select("g:nth-child(6)");
    
    // White pieces
    blackKing = data.select("g:nth-child(7)");
    blackQueen = data.select("g:nth-child(8)");
    blackLeftBishop = data.select("g:nth-child(9)");
    blackLeftKnight = data.select("g:nth-child(10)");
    blackLeftRock = data.select("g:nth-child(11)");
    blackPawn = data.select("g:nth-child(12)");
    
    // Clones
    blackRightBishop = blackLeftBishop.clone();
    blackRightKnight = blackLeftKnight.clone();
        blackRightRock = blackLeftRock.clone();
    
    whiteRightBishop = whiteLeftBishop.clone();
    whiteRightKnight = whiteLeftKnight.clone();
    whiteRightRock = whiteLeftRock.clone();
    
    placePieces();
}

function placePieces() {
    placeBlackPieces();
    placeWhitePieces();
}
function placeBlackPieces()...