JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<div class="home">
            
                <div class="board">
                    <div class="row">
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                    </div>
                    <div class="row">
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                 ...

CSS

.home > .board
{
    display: table;
    border: 1px solid black;
}

.home > .board > .row
{
    display: table;
}

.home > .board > .row > .cell
{
    width: 80px;
    height: 80px;
    border: 1px solid black;
    display: inline-block;
}

.piece
{
    background-size: 75px 75px;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
}

.red
{
    background-image: URL('../Images/red.png');
}

.black
{
    background-image: URL('../Images/black.png');
}

/* Additional style to show selected cell */

.home > .board > .row > .cell.selected
{
    background-color: #555;
}

/* The following styles were added for testing and can be removed */

.cell {
    position: relative;
}

.home > .board > .row > .cell.selected {
    background-color: transparent;
}

.red:after, .black:after {
    -webkit-transition: all 0.1s ease-in-out;
    content: '';
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -37.5px;
    margin-left: -37.5px;
}

.selected.red:after, .selected.black:after {
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

.red:after { background-color: maroon; }
.black:after { background-color: black; }

JavaScript

$(document).on( 'click', '.cell', function(){
    var $cell = $(this);
    var $board = $cell.parents('.board');
    var cellHasPiece = $cell.hasClass('piece');
    var cellIsSelected = $cell.hasClass('selected');
    var boardHasSelectedPiece = $board.find('.selected').length > 0;
    var $selectedCell = $board.find('.selected');
    
    if (!boardHasSelectedPiece) {
        if (cellHasPiece) {
            $cell.addClass('selected');
        }
    } else {
        if (!cellIsSelected) {
            $cell.attr( 'class', $selectedCell.attr('class') );
            $selectedCell.attr( 'class', 'cell' );
        }
        $cell.removeClass('selected');
    }
});