Skip to content

Commit 7aae9bb

Browse files
vanaigrvanaigr
committed
feat: bake region names into html
1 parent 6d702a2 commit 7aae9bb

File tree

3 files changed

+105
-27
lines changed

3 files changed

+105
-27
lines changed

‎src/index.css‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,27 +36,48 @@ body {
3636
display: flex;
3737
flex-direction: column;
3838
}
39+
40+
.regions {
41+
padding: 0.5rem;
42+
flex-grow: 1;
43+
display: flex;
44+
flex-direction: column;
45+
}
3946
#regions {
47+
padding: 0.5rem;
4048
flex-grow: 1;
49+
gap: 1rem;
4150
overflow-y: scroll;
4251
display: flex;
4352
flex-direction: column;
53+
& input[name='region'] {
54+
display: none;
55+
}
56+
}
57+
58+
.title {
59+
font-size: 1.1rem;
4460
}
61+
4562
.region {
46-
padding: 0.5rem;
4763
transition: color 0.2s;
4864
}
65+
.layers {
66+
padding: 0.5rem;
67+
display: flex;
68+
flex-direction: column;
69+
}
4970
#layers {
50-
min-height: 5rem;
5171
padding: 0.5rem;
72+
min-height: 5rem;
5273
display: flex;
5374
flex-direction: column;
54-
padding-bottom: 1rem;
5575
& > form {
5676
display: flex;
5777
flex-direction: column;
5878
}
5979
}
80+
6081
.region-selected {
6182
color: #2060ae;
6283
}
@@ -100,11 +121,17 @@ body {
100121
background: #e0e020;
101122
}
102123

124+
.element {
125+
padding: 0.5rem;
126+
display: flex;
127+
flex-direction: column;
128+
}
103129
#element {
104130
padding: 0.5rem;
105131
display: flex;
106132
flex-direction: column;
107133
}
134+
108135
.marker-selected {
109136
border: 2px solid red;
110137
}

‎src/index.html‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>Rain World: The Watcher Map</title>
5-
<meta name="description" content="Interactive map of Rain World: The Watcher DLC. All regions, warps, and echoes">
5+
<meta name="description" content="Interactive map of Rain World: The Watcher DLC. Regions, warps, echoes, and karma flowers">
66
<meta name="keywords" content="rain world watcher map, rain world watcher echo, rain world watcher regions">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
88
<link rel="stylesheet" href="./index.css">
@@ -25,12 +25,53 @@
2525
</div>
2626
</div>
2727
<div id="menu">
28-
<div id="element">
28+
<div class='element'>
29+
<span class='title'>Seleted:</span>
30+
<div id="element">
31+
</div>
2932
</div>
3033

31-
<div id="layers">
34+
<div class='layers'>
35+
<span class='title'>Layers:</span>
36+
<div id="layers">
37+
</div>
3238
</div>
33-
<div id="regions">
39+
<div class="regions">
40+
<span class='title'>Regions:</span>
41+
<form id="regions">
42+
<label class="region"><input type="radio" name="region" value="CC"><span>Chimney Canopy (CC)</span></label>
43+
<label class="region region-selected"><input type="radio" name="region" value="HI" checked><span>Industrial Complex (HI)</span></label>
44+
<label class="region"><input type="radio" name="region" value="LF"><span>Farm Arrays (LF)</span></label>
45+
<label class="region"><input type="radio" name="region" value="SH"><span>Shaded Citadel (SH)</span></label>
46+
<label class="region"><input type="radio" name="region" value="SU"><span>Outskirts (SU)</span></label>
47+
<label class="region"><input type="radio" name="region" value="WARA"><span>Shattered Terrace (WARA)</span></label>
48+
<label class="region"><input type="radio" name="region" value="WARB"><span>Salination (WARB)</span></label>
49+
<label class="region"><input type="radio" name="region" value="WARC"><span>Fetid Glen (WARC)</span></label>
50+
<label class="region"><input type="radio" name="region" value="WARD"><span>Cold Storage (WARD)</span></label>
51+
<label class="region"><input type="radio" name="region" value="WARE"><span>Heat Ducts (WARE)</span></label>
52+
<label class="region"><input type="radio" name="region" value="WARF"><span>Aether Ridge (WARF)</span></label>
53+
<label class="region"><input type="radio" name="region" value="WARG"><span>The Surface (WARG)</span></label>
54+
<label class="region"><input type="radio" name="region" value="WAUA"><span>Ancient Urban (WAUA)</span></label>
55+
<label class="region"><input type="radio" name="region" value="WBLA"><span>Badlands (WBLA)</span></label>
56+
<label class="region"><input type="radio" name="region" value="WDSR"><span>Decaying Tunnels (WDSR)</span></label>
57+
<label class="region"><input type="radio" name="region" value="WGWR"><span>Infested Wastes (WGWR)</span></label>
58+
<label class="region"><input type="radio" name="region" value="WHIR"><span>Corrupted Factories (WHIR)</span></label>
59+
<label class="region"><input type="radio" name="region" value="WORA"><span>Outer Rim (WORA)</span></label>
60+
<label class="region"><input type="radio" name="region" value="WPTA"><span>Signal Spires (WPTA)</span></label>
61+
<label class="region"><input type="radio" name="region" value="WRFA"><span>Coral Caves (WRFA)</span></label>
62+
<label class="region"><input type="radio" name="region" value="WRFB"><span>Turbulent Pump (WRFB)</span></label>
63+
<label class="region"><input type="radio" name="region" value="WRRA"><span>Rusted Wrecks (WRRA)</span></label>
64+
<label class="region"><input type="radio" name="region" value="WRSA"><span>Daemon (WRSA)</span></label>
65+
<label class="region"><input type="radio" name="region" value="WSKA"><span>Torrential Railways (WSKA)</span></label>
66+
<label class="region"><input type="radio" name="region" value="WSKB"><span>Sunlit Port (WSKB)</span></label>
67+
<label class="region"><input type="radio" name="region" value="WSKC"><span>Stormy Coast (WSKC)</span></label>
68+
<label class="region"><input type="radio" name="region" value="WSKD"><span>Shrouded Coast (WSKD)</span></label>
69+
<label class="region"><input type="radio" name="region" value="WSSR"><span>Unfortunate Evolution (WSSR)</span></label>
70+
<label class="region"><input type="radio" name="region" value="WSUR"><span>Crumbling Fringes (WSUR)</span></label>
71+
<label class="region"><input type="radio" name="region" value="WTDA"><span>Torrid Desert (WTDA)</span></label>
72+
<label class="region"><input type="radio" name="region" value="WTDB"><span>Desolate Tract (WTDB)</span></label>
73+
<label class="region"><input type="radio" name="region" value="WVWA"><span>Verdant Waterways (WVWA)</span></label>
74+
</form>
3475
</div>
3576
</div>
3677
</div>

‎src/index.ts‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -149,8 +149,6 @@ const context = {
149149

150150
setup(context)
151151

152-
const regionsEl = (window as any).regions
153-
154152
function setSelected(el?: HTMLElement) {
155153
for(const other of document.querySelectorAll('.region-selected')) {
156154
other.classList.remove('region-selected')
@@ -160,6 +158,25 @@ function setSelected(el?: HTMLElement) {
160158

161159
let regionEls: Map<string, HTMLElement> = new Map()
162160

161+
const inputEls = [...document.querySelectorAll('#regions > label > input[name="region"]')]
162+
for(const el0 of inputEls) {
163+
const el = el0 as HTMLInputElement
164+
const parent = el.parentNode as HTMLElement
165+
166+
const reg = regions[el.value]
167+
if(!reg) {
168+
parent.style.display = 'none'
169+
continue
170+
}
171+
172+
el.onchange = () => {
173+
if(!el.checked) return
174+
setSelected(parent)
175+
showRegion(el.value, reg)
176+
}
177+
regionEls.set(el.value, el)
178+
}
179+
163180
// null if show all
164181
function fillRegions(filter: string | null) {
165182
regionEls = new Map()
@@ -169,17 +186,16 @@ function fillRegions(filter: string | null) {
169186
if(filter && !regK.includes(filter)) continue
170187
regs.push({ key: regK as any, region: regions[regK] })
171188
}
172-
regionsEl.innerHTML = ''
173-
for(const reg of regs) {
174-
const el = document.createElement('div')
175-
el.append(document.createTextNode(regionNames.get(reg.key)!))
176-
el.classList.add('region')
177-
el.onclick = () => {
178-
setSelected(el)
179-
showRegion(reg.key, reg.region)
189+
190+
for(const el0 of inputEls) {
191+
const el = el0 as HTMLInputElement
192+
const reg = regions[el.value]
193+
if((filter && !el.value.includes(filter)) || !reg) {
194+
(el.parentNode as HTMLElement).style.display = 'none'
195+
}
196+
else {
197+
(el.parentNode as HTMLElement).style.display = ''
180198
}
181-
regionsEl.append(el)
182-
regionEls.set(reg.key, el)
183199
}
184200
}
185201

@@ -399,10 +415,7 @@ function showRegion(regionName: RegionKey, region: Region, pos?: [number, number
399415
form.append(cont)
400416
}
401417

402-
layerEl.append(
403-
document.createTextNode('Layers:'),
404-
form,
405-
)
418+
layerEl.append(form)
406419
}
407420

408421
context.onClick = (cx, cy) => {
@@ -509,7 +522,4 @@ function showRegion(regionName: RegionKey, region: Region, pos?: [number, number
509522

510523
fillRegions(null)
511524

512-
{
513-
setSelected(regionEls.get('HI'))
514-
showRegion('HI', regions['HI'], [-0, 150], 1)
515-
}
525+
showRegion('HI', regions['HI'], [-0, 150], 1)

0 commit comments

Comments
 (0)