JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Playable Checkers Game very simple simple no features yet </title>
  <style>
    body { font-family: sans-serif; }
    canvas { border: 1px solid #000; display: block; margin: 10px auto; }
    #controls, #errorLog { text-align: center; margin: 5px; }
    table { margin: 10px auto; border-collapse: collapse; }
    th, td { border: 1px solid #333; padding: 5px 10px; }
  </style>
</head>
<body>
  <h1 style="text-align:center;">Checkers Game</h1>
  <div id="controls">
    <span id="currentTurn">Current Turn: </span> |
    <span id="timer">Elapsed Time: 0s</span> |
    <span id="score">Score - Player1: 0, Player2: 0</span> |
    <span id="piecesCount">Pieces - P1: 12, P2: 12</span> |
    <button id="undoBtn">Undo Move</button>
  </div>
  <canvas id="gameCanvas" width="480" height="480"></canvas>
  <div id="errorLog" style="color:red; height:1.2em;"></div>

  <h2 style="text-align:center;">Possible Colors and Abilities</h2>
  <table>
    <tr><th>Color</th><th>Ability</th></tr>
    <tr><td>Red</td><td>Double Jump: perform two captures in one turn</td></tr>
    <tr><td>Blue</td><td>Teleport: move a piece to any empty square</td></tr>
    <tr><td>Green</td><td>Freeze: skip opponent's next turn</td></tr>
    <tr><td>Yellow</td><td>Shield: block one capture on this piece (stub)</td></tr>
    <tr><td>Purple</td><td>Backstep: move backward even if not crowned (stub)</td></tr>
    <tr><td>Orange</td><td>Invisibility: opponent can't see moves of one piece (stub)</td></tr>
    <tr><td>Pink</td><td>Swap: swap two friendly pieces (stub)</td></tr>
    <tr><td>Teal</td><td>Extra Move: take two moves in one turn (stub)</td></tr>
    <tr><td>Brown</td><td>Invert Controls: reverse direction for opponent (stub)</td></tr>
    <tr><td>Gray</td><td>Regeneration: piece returns after capture (stub)</td></tr>
  </table>

  <script>
  'use strict';
  // Global state variables
  var boardState, currentTurn, moveStack,...