2026-05-20 13:50:56 +09:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2026-05-20 15:02:37 +09:00
|
|
|
<title>Prefecture Map Generator v17</title>
|
2026-05-20 13:50:56 +09:00
|
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="app">
|
|
|
|
|
<main class="layout">
|
|
|
|
|
<section class="main-panel">
|
|
|
|
|
<header class="header">
|
|
|
|
|
<div>
|
2026-05-20 15:02:37 +09:00
|
|
|
<h1>Prefecture Map Generator v17</h1>
|
2026-05-20 13:50:56 +09:00
|
|
|
<p>
|
2026-05-24 22:52:22 +09:00
|
|
|
Multi-prefecture terrain generation with terrain-snapped municipalities, human geography layers,
|
|
|
|
|
hidden small streams, trunk roads, and hover tooltips.
|
2026-05-20 13:50:56 +09:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="canvas-shell">
|
|
|
|
|
<canvas id="mapCanvas" class="map-canvas"></canvas>
|
2026-05-24 19:33:09 +09:00
|
|
|
<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>
|
2026-05-20 13:50:56 +09:00
|
|
|
<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" />
|
|
|
|
|
<button id="randomSeed" type="button" class="primary-button">Generate Random Seed</button>
|
|
|
|
|
</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. Open <code>test.html</code> to run browser tests.</p>
|
2026-05-26 00:45:01 +09:00
|
|
|
<p>Add preferred reusable place names in <code>CUSTOM_NAME_LIST</code> inside <code>names.js</code>.</p>
|
2026-05-20 13:50:56 +09:00
|
|
|
</section>
|
|
|
|
|
</aside>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
