JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkers with Special Abilities</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #abilitiesTable { border-collapse: collapse; margin-bottom: 20px; }
        #abilitiesTable th, #abilitiesTable td { border: 1px solid #ccc; padding: 8px; }
        #controls p { margin: 5px 0; }
        #checkersCanvas { border: 1px solid #000; cursor: pointer; display: block; margin: 0 auto; }
        #errorLog { color: red; margin-top: 10px; }
    </style>
</head>
<body>
    <h1>Checkers with Special Abilities</h1>
    <table id="abilitiesTable">
        <tr><th>Color</th><th>Ability</th></tr>
        <tr><td>Red</td><td>Teleport</td></tr>
        <tr><td>Blue</td><td>Double Jump</td></tr>
        <tr><td>Green</td><td>Shield</td></tr>
        <tr><td>Yellow</td><td>Regeneration (stub)</td></tr>
        <tr><td>Purple</td><td>Mirror Move (stub)</td></tr>
        <tr><td>Orange</td><td>Freeze (stub)</td></tr>
        <tr><td>Cyan</td><td>Bomb (stub)</td></tr>
        <tr><td>Magenta</td><td>Clone (stub)</td></tr>
        <tr><td>Lime</td><td>Speed Boost (stub)</td></tr>
        <tr><td>Teal</td><td>Swap (stub)</td></tr>
    </table>
    <div id="controls">
        <p id="currentTurn">Current Turn: </p>
        <p id="timer">Elapsed Time: 0s</p>
        <p id="piecesCount">Player1: 12 | Player2: 12</p>
        <p id="scores">Player1 Score: 0 | Player2 Score: 0</p>
    </div>
    <canvas id="checkersCanvas" width="400" height="400"></canvas>
    <div id="errorLog"></div>

    <script>
    'use strict';
    // Globals
    var canvas, ctx;
    var board = [];
    var currentTurn;
    var players = {1:{special:null, score:0, count:12}, 2:{special:null, score:0, count:12}};
    var gameStartTime, timerInterval;
    var selected = null;

    var abilityList = [
        {color:'Red', ability:'Teleport'},
        {color:'Blue', ability:'Double Jump'},
        {color:'Green',...