333/map
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
33333-33333 2026-05-20 13:50:56 +09:00
commit 32398c13e8
9 changed files with 4125 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

98
index.html Normal file
View file

@ -0,0 +1,98 @@
<!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 v16</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 v16</h1>
<p>
Terrain-highlighted prefecture generation with terrain-snapped municipalities, a clear prefectural capital,
hidden small streams, city-seeking national roads, and hover tooltips.
</p>
</div>
</header>
<div class="canvas-shell">
<canvas id="mapCanvas" class="map-canvas"></canvas>
<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">Name Override IDs</div>
<p>Add entries to <code>names.js</code> in <code>CUSTOM_NAMES</code>.</p>
<pre class="example">export const CUSTOM_NAMES = {
"city-0": "Aohara",
"port-0": "Shirahama",
"castle-0": "Kurono"
};</pre>
<div id="nameIds" class="id-list"></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-line harbor-line"></span><span>Harbor works</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>
</section>
</aside>
</main>
</div>
<script type="module" src="./app.js"></script>
</body>
</html>