quick-battlemap-builder/templates/quick-battlemap-builder.html

<form class="qbm-app">
  <section class="qbm-section">
    <h2>New Scene</h2>
    <div class="qbm-grid qbm-grid-2">
      <label>
        <span>Scene Name</span>
        <input type="text" name="sceneName" value="{{defaults.sceneName}}" />
      </label>
      <label>
        <span>Scene Folder</span>
        <input type="text" name="sceneFolder" value="{{defaults.sceneFolder}}" />
      </label>
      <label>
        <span>Grid Layout</span>
        <select name="gridPreset">
          {{#each gridOptions as |option|}}
          <option value="{{option.value}}" {{#if option.selected}}selected{{/if}}>{{option.label}}</option>
          {{/each}}
        </select>
      </label>
      <label>
        <span>Terrain</span>
        <select name="terrain">
          {{#each terrainOptions as |option|}}
          <option value="{{option.value}}" {{#if option.selected}}selected{{/if}}>{{option.label}}</option>
          {{/each}}
        </select>
      </label>
      <label>
        <span>Generator</span>
        <select name="generatorType">
          {{#each generatorOptions as |option|}}
          <option value="{{option.value}}" {{#if option.selected}}selected{{/if}}>{{option.label}}</option>
          {{/each}}
        </select>
      </label>
      <label>
        <span>Columns</span>
        <input type="number" name="columns" min="4" max="80" value="{{defaults.columns}}" />
      </label>
      <label>
        <span>Rows</span>
        <input type="number" name="rows" min="4" max="80" value="{{defaults.rows}}" />
      </label>
      <label>
        <span>Grid Size (px)</span>
        <input type="number" name="gridSize" min="40" max="256" step="10" value="{{defaults.gridSize}}" />
      </label>
      <label>
        <span>Distance per Cell</span>
        <input type="number" name="distance" min="1" max="100" step="1" value="{{defaults.distance}}" />
      </label>
      <label>
        <span>Units</span>
        <input type="text" name="units" value="{{defaults.units}}" />
      </label>
      <label>
        <span>Coordinate Labels</span>
        <select name="coordinates">
          {{#each coordinateOptions as |option|}}
          <option value="{{option.value}}" {{#if option.selected}}selected{{/if}}>{{option.label}}</option>
          {{/each}}
        </select>
      </label>
      <label>
        <span>Room Count</span>
        <input type="number" name="generatorRooms" min="3" max="20" value="{{defaults.generatorRooms}}" />
      </label>
    </div>
    <div class="qbm-checks">
      <label><input type="checkbox" name="activateScene" {{#if defaults.activateScene}}checked{{/if}} /> Activate and view scene</label>
      <label><input type="checkbox" name="applyOutlineOnCreate" {{#if defaults.applyOutlineOnCreate}}checked{{/if}} /> Generate a layout when creating the scene</label>
      <label><input type="checkbox" name="addBorderWalls" {{#if defaults.addBorderWalls}}checked{{/if}} /> Add border walls</label>
      <label><input type="checkbox" name="enableTokenVision" {{#if defaults.enableTokenVision}}checked{{/if}} /> Enable token vision</label>
    </div>
    <div class="qbm-actions">
      <button type="button" class="qbm-create-scene"><i class="fas fa-map"></i> Create Generated Scene</button>
    </div>
  </section>

  <section class="qbm-section">
    <h2>Layout Generator</h2>
    <div class="qbm-grid qbm-grid-2">
      <label>
        <span>Target Scene</span>
        <select name="sceneId">
          {{#each sceneOptions as |option|}}
          <option value="{{option.value}}" {{#if option.selected}}selected{{/if}}>{{option.label}}</option>
          {{/each}}
        </select>
      </label>
      <label>
        <span>Start X (cells)</span>
        <input type="number" name="startX" min="0" max="200" value="{{defaults.startX}}" />
      </label>
      <label>
        <span>Start Y (cells)</span>
        <input type="number" name="startY" min="0" max="200" value="{{defaults.startY}}" />
      </label>
      <label>
        <span>Width (cells)</span>
        <input type="number" name="stampWidth" min="1" max="200" value="{{defaults.stampWidth}}" />
      </label>
      <label>
        <span>Height (cells)</span>
        <input type="number" name="stampHeight" min="1" max="200" value="{{defaults.stampHeight}}" />
      </label>
      <label>
        <span>Quick Stamp</span>
        <select name="stampType">
          {{#each stampOptions as |option|}}
          <option value="{{option.value}}" {{#if option.selected}}selected{{/if}}>{{option.label}}</option>
          {{/each}}
        </select>
      </label>
    </div>
    <div class="qbm-actions">
      <button type="button" class="qbm-generate-layout"><i class="fas fa-wand-magic-sparkles"></i> Generate On Target Scene</button>
      <button type="button" class="qbm-add-stamp"><i class="fas fa-draw-polygon"></i> Add Wall Stamp</button>
      <button type="button" class="qbm-add-perimeter"><i class="fas fa-border-all"></i> Add Scene Border</button>
      <button type="button" class="qbm-clear-generated"><i class="fas fa-eraser"></i> Remove Generated Geometry</button>
    </div>
    <p class="qbm-note">Use this for random buildings with rooms, doors, and windows, or dungeons with rooms, corridors, and door openings. Quick Stamps remain as simple manual tools.</p>
  </section>

  <section class="qbm-section">
    <h2>Legacy Manual Shapes</h2>
    <div class="qbm-grid qbm-grid-2">
      <label>
        <span>Outline Preset</span>
        <select name="outlineType">
          {{#each outlineOptions as |option|}}
          <option value="{{option.value}}" {{#if option.selected}}selected{{/if}}>{{option.label}}</option>
          {{/each}}
        </select>
      </label>
      <div class="qbm-note-block">
        <strong>Quick Use</strong>
        <span>These add a visible outline drawing and matching walls together, so buildings and dungeon shells are immediately playable.</span>
      </div>
    </div>
    <div class="qbm-actions">
      <button type="button" class="qbm-add-outline"><i class="fas fa-city"></i> Add Outline + Walls</button>
    </div>
    <p class="qbm-note">These older shell presets stay here as a fallback. The new generator above is the recommended path for buildings and dungeons.</p>
  </section>

  <section class="qbm-section">
    <h2>Presets</h2>
    <div class="qbm-preset-list">
      {{#each presetNotes as |note|}}
      <div class="qbm-preset-card">
        <strong>{{note.title}}</strong>
        <span>{{note.copy}}</span>
      </div>
      {{/each}}
    </div>
  </section>
</form>