escape/editor.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Escape — Level Editor</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #1b1b1f;
        overflow: hidden;
        font-family: system-ui, sans-serif;
        color: #e6e6e6;
      }
      #editor {
        position: absolute;
        inset: 0;
      }
      /* Toolbar overlaid on top of the Phaser editor canvas. */
      #toolbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 8px 12px;
        background: rgba(20, 20, 24, 0.92);
        border-bottom: 1px solid #3a3a42;
        z-index: 10;
        flex-wrap: wrap;
      }
      #toolbar button {
        background: #2d2d36;
        color: #e6e6e6;
        border: 1px solid #45454f;
        border-radius: 4px;
        padding: 6px 10px;
        cursor: pointer;
        font-size: 13px;
      }
      #toolbar button:hover {
        background: #3a3a46;
      }
      #toolbar .spacer {
        flex: 1;
      }
      #status {
        font-size: 12px;
        color: #9aa0a6;
      }
      /* Brush palette: dropdowns populated from the src/config JSON files. */
      #palette {
        position: absolute;
        top: 44px;
        left: 0;
        right: 0;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        padding: 6px 12px;
        background: rgba(20, 20, 24, 0.92);
        border-bottom: 1px solid #3a3a42;
        z-index: 9;
        font-size: 12px;
      }
      #palette label {
        display: flex;
        gap: 4px;
        align-items: center;
        color: #9aa0a6;
      }
      #palette select {
        background: #2d2d36;
        color: #e6e6e6;
        border: 1px solid #45454f;
        border-radius: 4px;
        padding: 4px 6px;
        font-size: 12px;
        cursor: pointer;
      }
      #palette button {
        background: #2d2d36;
        color: #e6e6e6;
        border: 1px solid #45454f;
        border-radius: 4px;
        padding: 4px 8px;
        cursor: pointer;
        font-size: 12px;
      }
      #palette .sep {
        width: 1px;
        align-self: stretch;
        background: #3a3a42;
      }
      #palette .active-tool {
        outline: 2px solid #ffe066;
      }
    </style>
  </head>
  <body>
    <div id="toolbar">
      <strong>Escape Editor</strong>
      <button id="btn-new">New</button>
      <button id="btn-save">Save</button>
      <button id="btn-export">Export JSON</button>
      <button id="btn-import">Import JSON</button>
      <button id="btn-playtest">▶ Play Test</button>
      <span class="spacer"></span>
      <span id="status"></span>
    </div>
    <!-- Brush palette. The dropdowns are filled by EditorScene from the
         registry (src/config/*.json) — add entries there, not here. -->
    <div id="palette">
      <label>Wall <select id="sel-wall"></select></label>
      <label>Overlay <select id="sel-overlay"></select></label>
      <label>Item <select id="sel-item"></select></label>
      <label>Enemy <select id="sel-enemy"></select></label>
      <span class="sep"></span>
      <button id="btn-tool-start">Start</button>
      <span id="pickup-tools" style="display: contents"></span>
      <button id="btn-tool-path">Path</button>
      <button id="btn-tool-erase">Erase</button>
    </div>
    <div id="editor"></div>
    <input id="file-input" type="file" accept="application/json" style="display: none" />
    <!-- Resolve the bare "phaser" import to the vendored ESM build so no
         bundler or npm install is needed — any static file server works. -->
    <script type="importmap">
      {
        "imports": {
          "phaser": "./vendor/phaser.esm.min.js"
        }
      }
    </script>
    <script type="module" src="./src/editor/main.js"></script>
  </body>
</html>