Skip to content

Commit c51fb62

Browse files
committed
feat: region pages dev
1 parent ba8a58c commit c51fb62

File tree

6 files changed

+246
-69
lines changed

6 files changed

+246
-69
lines changed

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
"dev": "vite",
55
"build": "vite build",
66
"preview": "vite preview",
7-
"cbg": "node compress_backgrounds.js",
7+
"cbg": "node compress_backgrounds.js",
88
"hi": "node gen_files.mjs"
99
},
1010
"dependencies": {
1111
"json5": "^2.2.3",
1212
"vite": "^6.2.5"
1313
},
1414
"devDependencies": {
15+
"@types/node": "^22.14.0",
1516
"sharp": "^0.33.5"
1617
}
1718
}

pnpm-lock.yaml

Lines changed: 18 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/index.css

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,6 @@ body {
5050
overflow-y: scroll;
5151
display: flex;
5252
flex-direction: column;
53-
& input[name='region'] {
54-
display: none;
55-
}
5653
}
5754

5855
.title {
@@ -61,6 +58,9 @@ body {
6158

6259
.region {
6360
transition: color 0.2s;
61+
display: flex;
62+
color: black;
63+
text-decoration: none;
6464
padding-top: 0.5rem;
6565
padding-bottom: 0.5rem;
6666
}
@@ -154,3 +154,26 @@ body {
154154
overflow-y: unset;
155155
}
156156
}
157+
158+
.regions-hidden {
159+
display: none !important;
160+
}
161+
162+
.unhide {
163+
padding: 0.5rem;
164+
gap: 0.5rem;
165+
flex-grow: 1;
166+
overflow-y: scroll;
167+
display: flex;
168+
flex-direction: column;
169+
& > i {
170+
text-align: center;
171+
}
172+
& > label {
173+
cursor: pointer;
174+
background: #eaeaea;
175+
padding: 0.5rem 0.2rem;
176+
border-radius: 0.5rem;
177+
text-align: center;
178+
}
179+
}

src/index.html

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Rain World: The Watcher Map</title>
5-
<meta name="description" content="Interactive map of Rain World: The Watcher DLC. Regions, warps, echoes, and karma flowers">
6-
<meta name="keywords" content="rain world watcher map, rain world watcher echo, rain world watcher regions">
4+
<meta charset="UTF-8">
5+
<title>$$$TITLE$$$</title>
6+
<meta name="description" content="$$$DESC$$$">
7+
<meta name="keywords" content="rain world watcher map, rain world watcher echo, rain world watcher regions$$$KEYWORDS$$$">
78
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
8-
<link rel="stylesheet" href="./index.css">
9-
<script type="module" src="./index.ts"></script>
9+
<link rel="stylesheet" href="/index.css">
10+
<script type="module" src="/index.ts"></script>
11+
1012
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
1113
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
1214
<link rel="shortcut icon" href="/favicon.ico" />
@@ -38,40 +40,7 @@
3840
</div>
3941
<div class="regions">
4042
<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>
43+
$$$REGIONS$$$
7544
</div>
7645
</div>
7746
</div>

src/index.ts

Lines changed: 62 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -152,10 +152,10 @@ setup(context)
152152
function setSelected(region: string) {
153153
const el = regionEls.get(region)
154154
if(!el) return
155-
(el as HTMLInputElement).checked = true
156-
showSelected(el.parentNode as any)
155+
showSelected(el.parentNode as any, region)
157156
}
158-
function showSelected(el?: HTMLElement) {
157+
function showSelected(el: HTMLElement | undefined, region: string) {
158+
history.pushState({}, '', '/' + region.toLowerCase())
159159
for(const other of document.querySelectorAll('.region-selected')) {
160160
other.classList.remove('region-selected')
161161
}
@@ -164,23 +164,24 @@ function showSelected(el?: HTMLElement) {
164164

165165
let regionEls: Map<string, HTMLElement> = new Map()
166166

167-
const inputEls = [...document.querySelectorAll('#regions > label > input[name="region"]')]
168-
for(const el0 of inputEls) {
169-
const el = el0 as HTMLInputElement
170-
const parent = el.parentNode as HTMLElement
167+
const regionElsArr = [...document.querySelectorAll('#regions > .region')]
168+
console.log(regionElsArr.length)
169+
for(const el0 of regionElsArr) {
170+
const el = el0 as HTMLElement
171+
const regK = el.getAttribute('data-region') as string
171172

172-
const reg = regions[el.value]
173+
const reg = regions[regK]
173174
if(!reg) {
174-
parent.style.display = 'none'
175+
el.style.display = 'none'
175176
continue
176177
}
177178

178-
el.onchange = () => {
179-
if(!el.checked) return
180-
showSelected(parent)
181-
showRegion(el.value, reg)
179+
el.onclick = (ev) => {
180+
ev.preventDefault()
181+
showSelected(el, regK)
182+
showRegion(regK, reg)
182183
}
183-
regionEls.set(el.value, el)
184+
regionEls.set(regK, el)
184185
}
185186

186187
// null if show all
@@ -191,14 +192,15 @@ function fillRegions(filter: string | null) {
191192
regs.push({ key: regK as any, region: regions[regK] })
192193
}
193194

194-
for(const el0 of inputEls) {
195-
const el = el0 as HTMLInputElement
196-
const reg = regions[el.value]
197-
if((filter && !el.value.includes(filter)) || !reg) {
198-
(el.parentNode as HTMLElement).style.display = 'none'
195+
for(const el0 of regionElsArr) {
196+
const el = el0 as HTMLElement
197+
const regK = el.getAttribute('data-region') as string
198+
const reg = regions[regK]
199+
if((filter && !regK.includes(filter)) || !reg) {
200+
el.style.display = 'none'
199201
}
200202
else {
201-
(el.parentNode as HTMLElement).style.display = ''
203+
el.style.display = ''
202204
}
203205
}
204206
}
@@ -527,6 +529,44 @@ function showRegion(regionName: RegionKey, region: Region, pos?: [number, number
527529
}
528530
}
529531

530-
fillRegions(null)
531532

532-
showRegion('HI', regions['HI'], [-0, 150], 1)
533+
{
534+
const defaultReg = (window as any).defaultRegion as string
535+
536+
let pos: Pos
537+
if(new URL(window.location.toString()).pathname === '/') {
538+
pos = [-0, 150]
539+
}
540+
else {
541+
const reg = regions[defaultReg]
542+
543+
let totalX = 0
544+
let totalY = 0
545+
let count = 0
546+
for(const roomK in reg.rooms) {
547+
const room = reg.rooms[roomK]
548+
if(!room.data.mapPos) continue
549+
totalX += room.data.mapPos[0] / 3 - room.data.size[0] * 0.5
550+
totalY += room.data.mapPos[1] / 3 - room.data.size[1] * 0.5
551+
count++
552+
}
553+
554+
const avgX = totalX / count + halfWidth
555+
const avgY = totalY / count + halfHeight
556+
557+
pos = [avgX, avgY]
558+
}
559+
560+
fillRegions(null)
561+
showRegion(defaultReg, regions[defaultReg], pos, 1)
562+
563+
const showRegionsEl = (window as any).show_regions as HTMLInputElement
564+
function showRegions() {
565+
(window as any).regions.classList.remove('regions-hidden')
566+
(document.querySelector('.unhide') as HTMLElement).style.display = 'none'
567+
}
568+
if(showRegionsEl.checked) showRegions()
569+
showRegionsEl.onchange = () => {
570+
if(showRegionsEl.checked) showRegions()
571+
}
572+
}

0 commit comments

Comments
 (0)