JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<div id="board">

</div>
<div id="info">

</div>

CSS

square {
  height: 25px;
  width: 25px;
  display: inline-block;
}
piece {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 5px;
  border-radius: 999px;
}
piece:hover {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
piece.grabbing {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.row {
  height:25px;
}
.red {
  background-color: red;
}
.black {
  background-color: black;
}
.white {
  background-color: white;
}
.highlight {
  background-color:rgba(0, 0, 0, 0.5);
}

JavaScript

//utility each method.
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

var checkerz = {
  /* 
   * board is an 2d array, so basically just a placeholder ([[]]) 
   * here until we use 2 loops to initialize it, we'll be able to reference 
   * each square of the board with 2 integers (a column and a row)
   * for example: checkerz.board[0,0] would be the square in the top-left corner 
   * and would have a color property like such: board[0,0].color == 'red' 
   */
  board: [[]],
  /* 
   * so i looked at another javascript checkerz script and found this neat trick: 
   * if you add the column & row, and if that can be evenly divided by 2, then it's red,
   * otherwise black. 
   */
  color: function(col,row){
    return (col + row) % 2 == 0 ? 'red' : 'black';
  },
  setup: function(){  
    for(var c=0; c < 8; c++){
      this.board[c] = new Array(8);
      for(var r=0; r < 8; r++){
        this.board[c][r] = { color: this.color(c,r) };
        
        if(this.color(c,r) == 'black'){
          if(c>=0 && c < 3){
            this.board[c][r].piece = {color: 'red', king: false};
          }
          if(c>4){
            this.board[c][r].piece = {color: 'white', king: false};
          }
        }
      }
    } //end col for 
    // console.log('setup board:',this.board);
    this.drawBoard();
    
    //note, mouseup getz lost if mouse moves away from the element that caused the mousedown event. so a catch all here:
    // #TODO: touch eventz.
    window.addEventListener('mouseup', checkerz.pieceDown);
  },
  /* 
   * instead of using jQuery's $('board') we can use this.boardElement()
   */
  boardElement: function(){
    return document.getElementById('board');
  },
  infoElement: function(){
    return document.getElementById('info');
  },
  /* 
   * click handler for when a <piece> is clicked. mousedown.
   * note: mousedown is desktop browsers only.
   */
  pieceUp:...