UI
This commit is contained in:
parent
6cef9a3abe
commit
440dba2f09
5 changed files with 2626 additions and 347 deletions
370
index.html
370
index.html
|
|
@ -8,115 +8,279 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<main class="layout">
|
||||
<section class="main-panel">
|
||||
<header class="header">
|
||||
<div>
|
||||
<h1>Prefecture Map Generator v17</h1>
|
||||
<p>Terrain, municipalities, transport, viewport panning, patch terrain generation, and hover inspection in one generated map.</p>
|
||||
</div>
|
||||
</header>
|
||||
<main class="page-shell">
|
||||
<section class="top-stage">
|
||||
<section class="map-section" aria-label="Map area">
|
||||
<div class="canvas-shell" id="canvasShell">
|
||||
<div class="canvas-stage">
|
||||
<canvas id="mapCanvas" class="map-canvas"></canvas>
|
||||
</div>
|
||||
<svg id="mapSelectionSvg" class="map-selection-svg" aria-hidden="true"></svg>
|
||||
<div id="mapSelection" class="map-selection" aria-hidden="true"></div>
|
||||
|
||||
<div class="canvas-shell">
|
||||
<canvas id="mapCanvas" class="map-canvas"></canvas>
|
||||
<svg id="mapSelectionSvg" class="map-selection-svg" aria-hidden="true"></svg>
|
||||
<div id="mapSelection" class="map-selection" aria-hidden="true"></div>
|
||||
<div id="generationProgress" class="generation-progress hidden" role="status" aria-live="polite">
|
||||
<div class="progress-title">Generating map...</div>
|
||||
<div id="generationProgressStage" class="progress-stage">Preparing</div>
|
||||
<div id="generationProgressTimings" class="progress-timings"></div>
|
||||
<div id="toolHint" class="map-hint hidden">
|
||||
Patch Area mode: right-drag to select a regeneration area.
|
||||
</div>
|
||||
|
||||
<div class="zoom-control" aria-label="Map zoom controls">
|
||||
<button id="zoomIn" type="button" aria-label="Zoom in">+</button>
|
||||
<button id="zoomOut" type="button" aria-label="Zoom out">−</button>
|
||||
<button id="zoomReset" type="button">100%</button>
|
||||
<button id="centerMap" type="button">Center</button>
|
||||
</div>
|
||||
|
||||
<aside class="map-dock" aria-label="Layer and legend controls">
|
||||
<details class="dock-card" open>
|
||||
<summary>
|
||||
<span>Layer</span>
|
||||
<span class="summary-button" aria-hidden="true">Toggle</span>
|
||||
</summary>
|
||||
<div class="dock-body">
|
||||
<div class="field-label">Display mode</div>
|
||||
<div id="modeGrid" class="mode-grid"></div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<label class="checkbox-row">
|
||||
<input id="showFeatures" type="checkbox" checked />
|
||||
<span>Map features</span>
|
||||
</label>
|
||||
<label class="checkbox-row">
|
||||
<input id="showLabels" type="checkbox" checked />
|
||||
<span>Labels</span>
|
||||
</label>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="dock-card">
|
||||
<summary>
|
||||
<span>Legend</span>
|
||||
<span class="summary-button" aria-hidden="true">Toggle</span>
|
||||
</summary>
|
||||
<div id="mainLegendGrid" class="legend-grid dock-body"></div>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<div id="generationProgress" class="generation-progress hidden" role="status" aria-live="polite">
|
||||
<div class="progress-title">Generating map...</div>
|
||||
<div id="generationProgressStage" class="progress-stage">Preparing</div>
|
||||
<div id="generationProgressTimings" class="progress-timings"></div>
|
||||
</div>
|
||||
<div id="mapTooltip" class="map-tooltip" role="status" aria-live="polite"></div>
|
||||
</div>
|
||||
<div id="mapTooltip" class="map-tooltip" role="status" aria-live="polite"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="generation-section" aria-label="Generation settings">
|
||||
<section class="settings-card settings-header-card">
|
||||
<div class="card-heading tight">
|
||||
<div>
|
||||
<div class="eyebrow">Controls</div>
|
||||
<h2>Generation Settings</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-card">
|
||||
<label class="field">
|
||||
<span class="field-label">Seed</span>
|
||||
<input id="seed" class="input" value="114514" />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">Terrain type</span>
|
||||
<select id="generationType" class="input">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="tohoku_spine">Tohoku spine</option>
|
||||
<option value="chubu_mountain">Chubu mountain</option>
|
||||
<option value="setouchi_inland_sea">Setouchi inland sea</option>
|
||||
<option value="oceanic_archipelago">Oceanic archipelago</option>
|
||||
<option value="kanto_alluvial">Kanto alluvial plain</option>
|
||||
<option value="mixed_archipelago">Mixed archipelago</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="button-stack two-col">
|
||||
<button id="generateMap" type="button" class="primary-button">Generate</button>
|
||||
<button id="randomSeed" type="button" class="secondary-button">Random</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-card">
|
||||
<div class="card-heading">
|
||||
<div>
|
||||
<div class="eyebrow">Interaction</div>
|
||||
<h3>Mode</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="segmented-group" aria-label="Interaction mode">
|
||||
<button id="toolPan" type="button" class="segmented-button active" data-tool="pan">Pan</button>
|
||||
<button id="toolPatch" type="button" class="segmented-button" data-tool="patch">Patch Area</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-card patch-card">
|
||||
<div class="card-heading">
|
||||
<div>
|
||||
<div class="eyebrow">Right-drag selection</div>
|
||||
<h3>Patch Generation</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">Patch terrain</span>
|
||||
<select id="patchTerrainType" class="input">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="tohoku_spine">Tohoku spine</option>
|
||||
<option value="chubu_mountain">Chubu mountain</option>
|
||||
<option value="setouchi_inland_sea">Setouchi inland sea</option>
|
||||
<option value="oceanic_archipelago">Oceanic archipelago</option>
|
||||
<option value="kanto_alluvial">Kanto alluvial plain</option>
|
||||
<option value="mixed_archipelago">Mixed archipelago</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span class="field-label">Variant</span>
|
||||
<input id="patchVariant" class="input" type="number" min="0" step="1" value="0" />
|
||||
</label>
|
||||
|
||||
<div class="button-stack two-col">
|
||||
<button id="generatePatch" type="button" class="primary-button" disabled>Preview Area</button>
|
||||
<button id="alternativePatch" type="button" class="secondary-button" disabled>Alternative</button>
|
||||
</div>
|
||||
<div class="button-stack two-col">
|
||||
<button id="applyPatch" type="button" class="secondary-button" disabled>Apply Preview</button>
|
||||
<button id="discardPatch" type="button" class="ghost-button" disabled>Discard</button>
|
||||
</div>
|
||||
|
||||
<p id="patchStatus" class="patch-status">Switch to Patch Area, then right-drag to draw a freeform area.</p>
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<aside class="sidebar">
|
||||
<section class="card">
|
||||
<label class="label" for="seed">Seed</label>
|
||||
<input id="seed" class="input" value="114514" />
|
||||
<label class="label inline-label" for="generationType">Generation Type</label>
|
||||
<select id="generationType" class="input">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="tohoku_spine">Tohoku spine</option>
|
||||
<option value="chubu_mountain">Chubu mountain</option>
|
||||
<option value="setouchi_inland_sea">Setouchi inland sea</option>
|
||||
<option value="oceanic_archipelago">Ocean</option>
|
||||
<option value="kanto_alluvial">Kanto alluvial plain</option>
|
||||
<option value="mixed_archipelago">Mixed archipelago</option>
|
||||
</select>
|
||||
<button id="randomSeed" type="button" class="primary-button">Generate Random Seed</button>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="card">
|
||||
<div class="card-title">Patch Generation</div>
|
||||
<label class="label" for="patchTerrainType">Patch Terrain Type</label>
|
||||
<select id="patchTerrainType" class="input">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="tohoku_spine">Tohoku spine</option>
|
||||
<option value="chubu_mountain">Chubu mountain</option>
|
||||
<option value="setouchi_inland_sea">Setouchi inland sea</option>
|
||||
<option value="oceanic_archipelago">Ocean</option>
|
||||
<option value="kanto_alluvial">Kanto alluvial plain</option>
|
||||
<option value="mixed_archipelago">Mixed archipelago</option>
|
||||
</select>
|
||||
<div class="patch-variant-row">
|
||||
<label class="label patch-variant-label" for="patchVariant">Patch Variant</label>
|
||||
<input id="patchVariant" class="input patch-variant-input" type="number" min="0" step="1" value="0" />
|
||||
<section class="summary-section" aria-label="Summary">
|
||||
<div class="section-title-row compact">
|
||||
<div>
|
||||
<div class="eyebrow">Current map</div>
|
||||
<h2>Summary</h2>
|
||||
</div>
|
||||
<div class="patch-button-row">
|
||||
<button id="generatePatch" type="button" class="primary-button" disabled>Generate Selected Area</button>
|
||||
<button id="alternativePatch" type="button" class="secondary-button" disabled>Alternative</button>
|
||||
</div>
|
||||
<div id="stats" class="stats summary-stats"></div>
|
||||
</section>
|
||||
|
||||
<section class="advanced-section" aria-label="Advanced and debug data">
|
||||
<details class="advanced-details">
|
||||
<summary>
|
||||
<span>Advanced / Debug Data</span>
|
||||
<span class="advanced-summary-actions">
|
||||
<button id="copyImportantData" type="button" class="copy-debug-button">Copy Important Data</button>
|
||||
<span id="copyDebugStatus" class="copy-debug-status" aria-live="polite"></span>
|
||||
<span class="advanced-toggle" aria-hidden="true">Open</span>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="advanced-body">
|
||||
<section class="debug-panel wide">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Last 10</div>
|
||||
<h3>Full Generation Performance</h3>
|
||||
</div>
|
||||
<p>Average, max, P95, breakdown, terrain type, area, and seconds per 1,000 cells.</p>
|
||||
</header>
|
||||
<div id="advancedGenerationStats" class="metric-grid"></div>
|
||||
<div id="advancedGenerationHistory" class="perf-history"></div>
|
||||
</section>
|
||||
|
||||
<section class="debug-panel wide">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Last 10</div>
|
||||
<h3>Patch / Additional Generation Performance</h3>
|
||||
</div>
|
||||
<p>Preview and alternative patch generation, including selected area and normalized cost.</p>
|
||||
</header>
|
||||
<div id="advancedPatchStats" class="metric-grid"></div>
|
||||
<div id="advancedPatchHistory" class="perf-history"></div>
|
||||
</section>
|
||||
|
||||
<section class="debug-panel wide">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Last 10</div>
|
||||
<h3>Viewport Interaction Latency</h3>
|
||||
</div>
|
||||
<p>Pan and zoom are aggregated separately for fast redraw and full redraw phases.</p>
|
||||
</header>
|
||||
<div class="aggregate-header" aria-hidden="true">
|
||||
<span>Group</span><small>Count</small><strong>Avg</strong><strong>Max</strong><strong>P95</strong>
|
||||
</div>
|
||||
<div id="advancedInteractionStats" class="perf-history compact"></div>
|
||||
<div id="advancedInteractionHistory" class="perf-history compact"></div>
|
||||
</section>
|
||||
|
||||
<section class="debug-panel wide">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Current render</div>
|
||||
<h3>Viewport / Feature Diagnostics</h3>
|
||||
</div>
|
||||
<p>Drawn cell count, viewport size, canvas size, and feature counts used to separate generation cost from rendering cost.</p>
|
||||
</header>
|
||||
<div id="advancedViewportDiagnostics" class="diagnostic-grid"></div>
|
||||
<div id="advancedFeatureCounts" class="diagnostic-table"></div>
|
||||
</section>
|
||||
|
||||
<section class="debug-panel">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Patch area</div>
|
||||
<h3>Selection / Write Ratio</h3>
|
||||
</div>
|
||||
</header>
|
||||
<div id="advancedPatchDiagnostics" class="diagnostic-table"></div>
|
||||
</section>
|
||||
|
||||
<section class="debug-panel">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Runtime</div>
|
||||
<h3>Worker / World Diagnostics</h3>
|
||||
</div>
|
||||
</header>
|
||||
<div id="advancedWorkerDiagnostics" class="diagnostic-table"></div>
|
||||
<div id="advancedWorldDiagnostics" class="diagnostic-table stacked"></div>
|
||||
</section>
|
||||
|
||||
<section class="debug-panel wide">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Last 10</div>
|
||||
<h3>Warnings / Errors</h3>
|
||||
</div>
|
||||
<p>Recent invalid selections, worker fallbacks, failed generations, and other UI-visible diagnostics.</p>
|
||||
</header>
|
||||
<div id="advancedWarningHistory" class="diagnostic-log"></div>
|
||||
</section>
|
||||
|
||||
<section class="debug-panel">
|
||||
<header class="debug-panel-header">
|
||||
<div>
|
||||
<div class="eyebrow">Notes</div>
|
||||
<h3>Debug Policy</h3>
|
||||
</div>
|
||||
</header>
|
||||
<div class="debug-note flat">
|
||||
<strong>Patch workflow</strong>
|
||||
<p>Preview Area inspects a candidate patch. Apply Preview commits it; Discard resets it.</p>
|
||||
</div>
|
||||
<div class="debug-note flat">
|
||||
<strong>Readable default UI</strong>
|
||||
<p>Verbose debug layers and unused legend entries stay outside the default controls.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<p id="patchStatus" class="patch-status">Right-drag to lasso a freeform patch area.</p>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-title">Display Layers</div>
|
||||
<div id="modeGrid" class="mode-grid"></div>
|
||||
|
||||
<label class="checkbox-row">
|
||||
<input id="showFeatures" type="checkbox" checked />
|
||||
Show features
|
||||
</label>
|
||||
|
||||
<label class="checkbox-row">
|
||||
<input id="showLabels" type="checkbox" checked />
|
||||
Show labels
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-title">Generated Features</div>
|
||||
<div id="stats" class="stats"></div>
|
||||
</section>
|
||||
|
||||
<section class="card legend">
|
||||
<div class="card-title">Legend</div>
|
||||
<div class="legend-grid" aria-label="Map legend">
|
||||
<div class="legend-row"><span class="legend-swatch border-swatch"></span><span>Prefecture region / municipal border</span></div>
|
||||
<div class="legend-row"><span class="legend-line river-major"></span><span>Main river / tributary</span></div>
|
||||
<div class="legend-row"><span class="legend-line rail-line"></span><span>Railway / solid ring railway</span></div>
|
||||
<div class="legend-row"><span class="legend-line road-line"></span><span>National road / trunk ring road</span></div>
|
||||
<div class="legend-row"><span class="legend-line express-line"></span><span>Expressway / environmental ring segment</span></div>
|
||||
<div class="legend-row"><span class="legend-line old-road-line"></span><span>Premodern / minor road</span></div>
|
||||
<div class="legend-row"><span class="legend-icon city-icon"></span><span>Prefectural capital / city</span></div>
|
||||
<div class="legend-row"><span class="legend-icon port-icon"></span><span>Major / regional / fishing / lake port</span></div>
|
||||
<div class="legend-row"><span class="legend-icon castle-icon"></span><span>Castle / ruins</span></div>
|
||||
<div class="legend-row"><span class="legend-swatch cbd-swatch"></span><span>CBD / central city cells</span></div>
|
||||
<div class="legend-row"><span class="legend-icon satellite-icon"></span><span>Satellite city</span></div>
|
||||
<div class="legend-row"><span class="legend-icon station-icon"></span><span>Station</span></div>
|
||||
<div class="legend-row"><span class="legend-icon industry-icon"></span><span>Industry / logistics</span></div>
|
||||
<div class="legend-row"><span class="legend-icon newtown-icon"></span><span>New town</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card legend">
|
||||
<div class="card-title">Notes</div>
|
||||
<p>Open <code>index.html</code> with Live Server. Left-drag pans the viewport; right-drag draws a freeform regeneration area; use Patch Generation to write terrain into that area.</p>
|
||||
<p>Add preferred reusable place names in <code>CUSTOM_NAME_LIST</code> inside <code>names.js</code>.</p>
|
||||
</section>
|
||||
</aside>
|
||||
</details>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue