125 lines
6.8 KiB
HTML
125 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Prefecture Map Generator</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</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>
|
|
|
|
<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>
|
|
<div id="mapTooltip" class="map-tooltip" role="status" aria-live="polite"></div>
|
|
</div>
|
|
</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">Oceanic archipelago</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">Oceanic archipelago</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" />
|
|
</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>
|
|
<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>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|