JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Maze Editor Red v01</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }
    #controls {
      margin-bottom: 10px;
    }
    svg {
      border: 1px solid #ccc;
      background-color: #fff;
    }
    button, input, select {
      margin-right: 5px;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <h1>Interactive Maze Editor</h1>
  <div id="controls">
    Maze Width: <input type="number" id="mazeWidth" value="10" min="1">
    Maze Height: <input type="number" id="mazeHeight" value="10" min="1">
    Difficulty: 
    <select id="difficulty">
      <option value="easy">Easy</option>
      <option value="medium">Medium</option>
      <option value="hard" selected>Hard</option>
      <option value="extreme">Extreme</option>
    </select>
    <button id="generateMaze">Generate Maze</button>
    <button id="exportSVG">Export SVG</button>
    <button id="exportJSON">Export JSON</button>
    <input type="file" id="importJSON" accept=".json">
  </div>
  <div id="mazeContainer">
    <svg id="mazeSVG" width="500" height="500">
      <!-- The grid layer (faint, dashed lines) -->
      <g id="gridLayer"></g>
      <!-- The walls layer (solid, black lines with rounded corners) -->
      <g id="wallsLayer" stroke="black" stroke-width="2" fill="none" stroke-linejoin="round"></g>
    </svg>
  </div>

  <script>
    const svgNS = "http://www.w3.org/2000/svg";

    // Maze class with a 2D array of cells.
    // Each cell tracks four walls: top, right, bottom, left.
    class Maze {
      constructor(width, height) {
        this.width = width;
        this.height = height;
        this.cells = [];
        for (let y = 0; y < height; y++) {
          let row = [];
          for (let x = 0; x < width; x++) {
            row.push({ top: true, right: true, bottom: true, left: true, visited: false });
          }
          this.cells.push(row);
        }
    ...