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-26 21:14:37 +09:00
< title > Prefecture Map Generator< / 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-28 19:37:28 +09:00
< p > Terrain, municipalities, transport, viewport panning, patch terrain generation, and hover inspection in one generated map.< / p >
2026-05-20 13:50:56 +09:00
< / div >
< / header >
< div class = "canvas-shell" >
< canvas id = "mapCanvas" class = "map-canvas" > < / canvas >
2026-05-28 19:37:28 +09:00
< div id = "mapSelection" class = "map-selection" aria-hidden = "true" > < / div >
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" / >
2026-05-28 16:45:00 +09:00
< 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 >
2026-05-28 19:37:28 +09:00
< option value = "oceanic_archipelago" > Oceanic archipelago< / option >
2026-05-28 16:45:00 +09:00
< option value = "kanto_alluvial" > Kanto alluvial plain< / option >
< option value = "mixed_archipelago" > Mixed archipelago< / option >
< / select >
2026-05-20 13:50:56 +09:00
< button id = "randomSeed" type = "button" class = "primary-button" > Generate Random Seed< / button >
< / section >
2026-05-28 19:37:28 +09:00
< 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 >
< button id = "generatePatch" type = "button" class = "primary-button" disabled > Generate Selected Area< / button >
< p id = "patchStatus" class = "patch-status" > Right-drag an area to enable patch generation.< / p >
< / section >
2026-05-20 13:50:56 +09:00
< 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 >
2026-05-28 19:37:28 +09:00
< p > Open < code > index.html< / code > with Live Server. Left-drag pans the viewport; right-drag selects a regeneration area; use Patch Generation to write terrain into that area.< / 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 >
