JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2D Maze Map Editor</title>
  <style>
    body { font-family: sans-serif; margin: 0; display: flex; }
    #controls { width: 250px; padding: 10px; background: #f0f0f0; height: 100vh; box-sizing: border-box; overflow-y: auto; }
    #editor { flex: 1; display: flex; justify-content: center; align-items: center; background: #ddd; }
    canvas { background: #fff; border: 1px solid #333; cursor: pointer; }
    label { display: block; margin-top: 8px; }
    button { margin-top: 10px; padding: 6px 8px; }
  </style>
</head>
<body>
  <div id="controls">
    <h3>Map Settings</h3>
    <label>Rows: <input type="number" id="rows" value="10" min="2"></label>
    <label>Cols: <input type="number" id="cols" value="10" min="2"></label>
    <label>Cell Size: <input type="number" id="cellSize" value="40" min="10"></label>
    <button id="init">Init Grid</button>
    <hr>
    <h3>Load / Save JSON</h3>
    <input type="file" id="fileInput" accept=".json"><br>
    <button id="export">Download JSON</button>
    <pre id="output" style="white-space: pre-wrap;"></pre>
  </div>
  <div id="editor">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    const ctrl = {
      rows: document.getElementById('rows'),
      cols: document.getElementById('cols'),
      cellSize: document.getElementById('cellSize'),
      init: document.getElementById('init'),
      exportBtn: document.getElementById('export'),
      fileInput: document.getElementById('fileInput'),
      output: document.getElementById('output')
    };
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let mapData = null;

    function initGrid() {
      const rows = parseInt(ctrl.rows.value);
      const cols = parseInt(ctrl.cols.value);
      const size = parseInt(ctrl.cellSize.value);
      // initialize map with all walls present
      mapData = { rows, cols, cellSize: size, cells: [] };
      for (let r=0;...