JSFiddle - React, Tailwind, and code Playground

by Joshua_David

HTML

<title>Checkers in 30 lines of JavaScript</title>
<div id="container"></div>

CSS

table {
    border-collapse: collapse;
    border: 3px outset brown;
}
td {
    height: 30px;
    width: 30px;
    border: 1px solid black;
}
tr:nth-child(2n + 1) td:nth-child(2n),
tr:nth-child(2n) td:nth-child(2n + 1)
{
    background: #cccccc;
}

JavaScript

var board = ["b b b b "," b b b b","b b b b ","        ","        "," w w w w","w w w w "," w w w w"],
  container = document.getElementById("container"), selected = null, turn = "w";
function show(board) {
  container.innerHTML = '<table>' + board.map(function(row) {
    return '<tr>' + row.replace(/([^\n])/g, "<td>$1</td>") + '</tr>';
  }).join('') + '</table>';
}
function getXY(td) {
    return { x:[].slice.call(td.parentElement.children).indexOf(td), y:[].slice.call(td.parentElement.parentElement.children).indexOf(td.parentElement)}
}
function isLegalMove(start, end) {
    return true;
}
container.onclick = function(e) {
  if(e.target.innerHTML.toLowerCase() == turn.toLowerCase()) selected = e.target;
  if(selected && e.target.innerHTML.toLowerCase() == " ") {
    var tXY  =   getXY(e.target), sXY  =   getXY(selected), 
      tPos = 8 * tXY.y + tXY.x, sPos = 8 * sXY.y + sXY.x;
    if(isLegalMove(sXY, tXY)) {
      board[sXY.y] = board[sXY.y].slice(0, sXY.x) + " " + board[sXY.y].slice(sXY.x + 1);
      board[tXY.y] = board[tXY.y].slice(0, tXY.x) + selected.innerHTML  + board[tXY.y].slice(tXY.x + 1);
      selected = null;
      show(board);
    }
  }
}
show(board);