JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<body>
Welcome to Horde! 

Instructions:
The Horde has four pawns and goes first. The Horde must get 2 pawns to the other side of the board. Each pawn can move one square forward at a time. Pawns cannot attack.

The Fortress has one powerful piece that can move vertically or hirozontally as many squares as they want, and goes second. The purpose of the Fortress is to prevent the Horde pawns from getting to the other side. The Fortress can attack, and must capture all the Pawns to win the game.

<div style = "padding:1px">
The Horde has <b id = "p1card"></b> pieces left.
</div>
<div id = "board">
<div class =  'w'> &#9817;</div>
<div class =  'b'> &#9817;</div>
<div class =  'w'> &#9817;</div>
<div class =  'b'> &#9817;</div>
<div class =  'b'> </div>
<div class = 'w'> </div>
<div class =  'b'> </div>
<div class = 'w'> </div>
<div class =  'w'> </div>
<div class = 'b'> </div>
<div class =  'w'> </div>
<div class = 'b'> </div>
<div class =  'b'> </div>
<div class = 'w'>&#9820; </div>
<div class =  'b'> </div>
<div class = 'w'> </div>
</div>
</body>

CSS

.board{
  width: 480px;
  height: 480px;
  margin: 1px;
        border: 2px solid black;
}
.b, .w{
  float: left;
        width: 120px;
        height: 120px;
        font-size:100px;
        text-align:center;
        display: table-cell;
        vertical-align:middle;
        box-sizing: border-box;
        border: 2px solid black;
        
}
.w{background-color:tan;}
.b{background-color:brown;}

JavaScript

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

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

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


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) {
     ...