JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<body>
	<!-- Card info for both players -->
	<div style= "padding: 1px">
		Player one card: <b id="p1card">12</b> || Player two card: <b id="p2card">12</b>
		Turn: <b id="pturn">Any</b>
	</div>
<div class="chessboard">
    <!-- 1st -->
	<div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>

    <!-- 2nd -->
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>

    <!-- 3rd -->
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>

    <!-- 4th -->
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>

    <!-- 5th -->
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>

    <!-- 6th -->
    <div class="red"></div>
    <div class="yellow">&#9818;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>

    <!-- 7th -->
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div...

CSS

.chessboard {
        width: 480px;
        height: 480px;
        margin: 1px;
        border: 2px solid #F44336;
    }

    .red, .yellow {
        float: left;
        width: 60px;
        height: 60px;
        font-size:50px;
        text-align:center;
        display: table-cell;
        vertical-align:middle;
        box-sizing: border-box;
    }

    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }

JavaScript

// getting the game board, assigning it to variable 'board'.
let board = document.getElementsByClassName("chessboard")[0];

// creating variables for player 1 and 2.
let player1 = '\u2660';
let player2 = '\u2658';

let from;
let selected;
let index1 = -1;
let index2 = -1;
let player1total = 12;
let player2total = 12;

console.log (board.children[3].innerHTML);

// function for player 1
Array.from(board.children).forEach(function(cell, index) {
  // Add a click listener to each square
  cell.onclick = function(elem) { 
    // Check if a piece was selected
    if (elem.target.innerHTML == player1) {
      selected = player1;
    } 
    else if (elem.target.innerHTML == player2) {
      selected = player2;
    }
    if (elem.target.innerHTML === player1 || elem.target.innerHTML === player2) {
      //get exact selected code
        from = elem.target;
        index1 = index;
    }
    // Check if a move can be made
    else if (from && isLegalMove(from, elem.target)) {
      index2 = index;

      if(playerRules(selected,index1,index2)) {
        // Put a piece within the selected square
        var total = index1 - index2;
        console.log("player" + selected + " index"+ index1 + " " + index2 + " DIFF: " + total);
        elem.target.innerHTML = selected;
        // Remove it from the old square
        from.innerHTML = '';
        // Clear the `from` variable
        from = null;
        index1 = -1;
        index2 = -1;
      }
    }
  }
});

function printElem (id, content) {
  document.getElementById(id).innerHTML = content;
}

// function to determine if a move is legal
function isLegalMove(from, to) {
  let result = to.innerHTML !== player1 && to.innerHTML !== player2;
  result = result && to.className.indexOf('yellow') > -1;
  return result;
}

let flag = false;
function playerRules(sel, from, to) {
  //rule - one cannot move backward
  var moveDiff = from - to;
  console.log(moveDiff);
  if (sel == player1) {
    flag = (to < from);
    if (flag) {
     ...