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:#666;
}

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.piece.king {
    background-image:url('http://i.imgur.com/HYQkl.png');
    background-repeat:no-repeat;
    background-position:center;
}
    

div#meta...

JavaScript

//Exercise 2
//This function should create 64 divs with the class 'square'
//and insert them into the div with id 'board'
function buildBoard() {
    for (var i=0; i <= 64; i++)  {
        $('#board').append('<div class="square"/>');
    }
}


//Exercise 3
//this function shoudl create 24 divs with the class piece and
//insert them into the div with id 'pieces'
function addPieces() {
    for (var i=0; i <= 24; i++)  {
        $('#pieces').append('<div class="piece"/>');
    }
}

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


    //calls YOUR CODE
    //add the squares to the board
    buildBoard();
    
    //calls YOUR CODE LAST WEEK
    //set up the board with the correct classes
    //for the light and dark squares
    setUpBoard();    
    
    
    //calls YOUR CODE
    //add the pieces to the board
    addPieces();
    
    //calls YOUR CODE LAST WEEK
    //sets up the classes for the different types of piece
    setUpPieces();
    
    //this loop moves all the light pieces to their initial positions
    $('div.piece.light').each(function(index,piece) {
        
        //turning the index (from 0 - 11)
        //into a x,y square coordinate using math
        var y = Math.floor(index / 4);
        var x = (index % 4) * 2 + (1 - y%2);
        
        //turning the x,y coordingate into a pixel position
        var pixelPosition = getPixels(x,y);
        
        //YOUR CODE LAST WEEK
        //actually moving the piece to its initial position
        movePieceTo($(piece),pixelPosition.top,pixelPosition.left);
    });
    
    //this loop moves all the dark pieces to their initial positions
    $('div.piece.dark').each(function(index,piece) {
        
        //turning the index (from 0 - 11)
        //into a x,y square coordinate using math
        var y = Math.floor(index/4) + 5;
        var x = (index % 4) * 2 + (1-y%2);
        
        //turning the x,y coordinate into a pixel position
        var pixelPosition = getPixels(x,y);
        
        //YOUR CODE LAST...