JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<html>

<head>

<title>Checkers</title>

</head>

<body>

<div id="game">
    <div id="board">
    </div>
    
    <div id="pieces">
    </div>
    
</div>

<div id="meta">
<h1>Checkers</h1>
<h4>Moves: <span id="moveCount">0</span></h4>
</div>

</body>

</html>

CSS

div#game {
    position:relative;
}


div#board {
    
    float:left;
    
    
    height:382px;
    width:382px;
    
    border-style:solid;
    border-width:9px;
    border-color:#DEB887;
}

div.square {
    
    float:left;
    
    position:relative;
    
    width:46px;
    height:46px;
    border-width:2px;
    
    
    border-right-style:solid;
    border-bottom-style:solid;
    
    border-color:#444;
}

div.square.movable:hover {

    -webkit-box-shadow: inset 0px 0px 8px #FFD700;
       -moz-box-shadow: inset 0px 0px 8px #FFD700;
            box-shadow: inset 0px 0px 8px #FFD700;
    cursor:pointer;
}

/* the bottom row */
div.square:nth-last-child(-n + 8) {
    border-bottom-style:none;
}

/* the sides */
div.square:nth-child(8n) {
    border-right-style:none;
}

div.square.light {
    background-color:#ccc;
}

div.square.dark {
    background-color:#333;
}

div#pieces {
    position:absolute;
    /* 9 px puts us inside of the board's borders;*/
    left:9px;
    top:9px;
    background-color:green;
}

div.piece {
    position:absolute;
    width:32px;
    height:32px;
    margin:7px;
    
    -webkit-box-shadow: 0px 0px 3px #666;
       -moz-box-shadow: 0px 0px 3px #666;
            box-shadow: 0px 0px 3px #666;
    
    -webkit-border-radius:16px;
       -moz-border-radius:16px;
            border-radius:16px;
            
    background-color:blue;
            
}

div.piece:hover {
    -webkit-box-shadow: 0px 0px 8px #FFD700;
       -moz-box-shadow: 0px 0px 8px #FFD700;
            box-shadow: 0px 0px 8px #FFD700;
    cursor:pointer;
}

div.piece.selected {
    -webkit-box-shadow: 0px 0px 8px #FFD700;
       -moz-box-shadow: 0px 0px 8px #FFD700;
            box-shadow: 0px 0px 8px #FFD700;
}
    
div.piece.light {
    background-color:red;
}

div.piece.dark {
    background-color:black;
}

div#meta {
    float:right;
}

JavaScript

//global variables for one square
var width = 46;
var border = 2;

//utility function for translating an x,y coordinate
//to a pixel position
//the convention is that the square in the upper left
//corner is at position 0,0
//the square in the upper right, at 7,0 and the lower
//right at 7,7
function getPixels(x,y) {
    //ok... so takes an x,y position, returns
    //pixels from the left, right
    
    return {
        'top':  (y * (width+border))+'px',
        'left': (x * (width+border))+'px'
    };    
}

//utility function for turning a pixel position
//into the x,y coordinate of a square on the board
//it follows the same coordinate convention as getPixels
function getCoords(top,left) {
    //returns an x and a y
    //given a top and left pixels
    return {
        'x': left / (width + border),
        'y': top / (width + border)
    };
}

//utility function for returning
//the set of unoccupied dark squares
//(possible places to move a checker piece)
function getMovableSquares() {
    
    //select all of the squares
    var $squares = $('div.square');
    
    //select the occupied ones using the jQuery map() method
    //map creates a new object from an existing one
    //using a translation function
    var $takenSquares =
        $('div.piece').map(function(index,piece) {
            
            //this function translates a piece
            var position = $(piece).position();
            var coords = getCoords(position.top,position.left);
            var squareIndex = coords.y * 8 + coords.x;
            return $squares[squareIndex];
        });
    
    var $out = $('div.square.dark').not($takenSquares);
    return $out;
}

$('document').ready(function() {

    //Creating the 64 squares and adding them to the DOM
    var squareCount = 8*8;
    for (var i = 0;i<squareCount;i++) {
        
        //this line creates a new div with the class 'square'
        //and appends it to the div with id 'board'
       ...