JSFiddle - React, Tailwind, and code Playground

by KevinGabbert

HTML

<table>
    <tr>
        <td id="one" class="thing chesseven ui-droppable glowed">
            <img id="blackPawn" class=" thing piece ui-draggable" src="http://www.chessmangler.com/images/chessPieces/Chess.Merida/bp.png" />
        </td>
        <td id="two" class="thing chessodd ui-droppable">
            <img  id="whiteRook" class="piece ui-draggable" src="http://www.chessmangler.com/images/chessPieces/Chess.Merida/wr.png" />            
        </td>
        <td id="three" class="thing chesseven ui-droppable"></td>
        <td id="four" class="thing chessodd ui-droppable"></td>
        <td id="five" class="thing chesseven ui-droppable">
        <img  id="whiteQueen" class="piece ui-draggable" src="http://www.chessmangler.com/images/chessPieces/Chess.Merida/wq.png" /> 
        </td>
    </tr>
</table>

CSS

.chessodd 
{
    background-color: #999999;
    width: 70px;
    height: 70px;
    padding: 0;
    text-align: center;
}
    
.chesseven {
    
    background-color: #CCC;
    width: 70px;
    height: 70px;
    padding: 0;
    text-align: center;
}

  .glowed{
    box-shadow: 0px 0px 30px 2px #cf5
  }

JavaScript

//The goal here is to have a piece glow on hover (plan is to conditionally use this when a piece has a rule

//mouseover event
//

//a second version of this can make pieces conditionally glow.

//a third version of this will make the spot stop glowing on drag

//a fourth version of this is to make a spot glow while a piece is hovered over it

//a fifth version of this is to make a spot conditionally glow

//piece glow will be a soft green glow

var _thisSpot;
var Spot = ({
    AddSpotEvents: function(dropSelector) {

        $(dropSelector).droppable({
            over: function() {     
            }, 
            drop: function(event, ui) {
               
                var $spot = $(this);
                var draggedPiece = ui.draggable.get(0);
                var thisID = "#" + draggedPiece.id;
                var thisSRC = draggedPiece.src;

                ui.draggable.remove(); //Got what we need, now delete previous img.
                _newPiece.CreatePieceIMG(thisID, thisSRC, $spot);

                board.AddDragAndDrop('#' + _draggedPieceID, thisID);
            }
        });
    }
});

var _thisPiece;
var Piece = ({
    CreatePieceIMG: function(pieceID, src, spot) {
        spot.append(this.PieceIMG_HTML(pieceID, src));
    },
    PieceIMG_HTML: function(pieceID, src) {
        return '<img id="' + pieceID.substring(1) + '" class="thing piece ui-widget-content ui-draggable" src="' + src + '" />';
    },
    AddPieceEvents: function(dragSelector) {

        $(dragSelector).draggable({
            drag: function(event, ui) {

                var helper = ui.helper;
                var helperID = helper.attr('id'); //data
                _draggedPieceID = helperID; //cheat.  this data needs to be stored elsewhere
            
            }
        }).droppable({
            over: function() {
                //alert($(this).attr('id'));
                
                //copy image with border - fade it in
                //fade out actual image
    ...