JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Grid Player with Virtual D-Pad xai fixed by open v02</title>
  <style>
    /* Container for the canvas and d-pad overlay */
    #game-container {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    /* Canvas styling */
    #game-canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: #f0f0f0;
    }
    /* D-Pad container (all versions are hidden by default) */
    .dpad {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 400px;
      height: 100px;
      z-index: 2;
      opacity: 0.7; /* Semi-transparent overlay */
      display: none;
    }
    .analog-base {
      position: absolute;
      border-radius: 50%;
      background: rgba(128, 128, 128, 0.8);
    }
    .analog-stick {
      position: absolute;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.9);
    }
    .dir-button, .action-button {
      position: absolute;
      background: rgba(100, 100, 100, 0.8);
      border: 1px solid #fff;
      color: #fff;
      cursor: pointer;
    }
    .dir-button:active, .action-button:active {
      background: rgba(200, 200, 200, 0.8);
    }
    .switch-buttons {
      text-align: center;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <canvas id="game-canvas" width="400" height="400"></canvas>

    <!-- D-Pad Version 1: Cross D-Pad + Separate Analog Stick -->
    <div id="dpad-version1" class="dpad">
      <div style="position: absolute; left: 0; top: 0; width: 200px; height: 100px;">
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px;">
          <button class="dir-button" data-dir="up" style="left: 30px; top: 0; width: 40px; height: 40px;">↑</button>
          <button class="dir-button"...