Skip to content

Commit d237d8e

Browse files
vanaigrvanaigr
committed
feat: split backgrounds into layers
1 parent acfbeff commit d237d8e

File tree

3 files changed

+121
-53
lines changed

3 files changed

+121
-53
lines changed

‎src/index.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.bg {
2+
position: absolute;
3+
height: 39px;
4+
user-drag: none;
5+
pointer-events: none;
6+
}
7+
:root {
8+
width: 100%;
9+
height: 100%;
10+
display: flex;
11+
}
12+
body {
13+
flex-grow: 1;
14+
display: flex;
15+
}
16+
.map {
17+
display: flex;
18+
overflow: hidden;
19+
}
20+
#map_container {
21+
flex-grow: 1;
22+
position: relative;
23+
}
24+
#root {
25+
flex-grow: 1;
26+
display: grid;
27+
grid-template-columns: 1fr 20rem;
28+
}
29+
#menu {
30+
min-height: 0;
31+
max-height: 100%;
32+
display: flex;
33+
flex-direction: column;
34+
}
35+
#regions {
36+
flex-grow: 1;
37+
overflow-y: scroll;
38+
display: flex;
39+
flex-direction: column;
40+
}
41+
.region {
42+
padding: 0.5rem;
43+
transition: color 0.2s;
44+
}
45+
#layers {
46+
padding: 0.5rem;
47+
display: flex;
48+
flex-direction: column;
49+
padding-bottom: 1rem;
50+
& > form {
51+
display: flex;
52+
flex-direction: column;
53+
}
54+
}
55+
.region-selected {
56+
color: #2060ae;
57+
}

‎src/index.html‎

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,11 @@
11
<!doctype html>
22
<html>
33
<head>
4+
<link rel="stylesheet" href="./index.css">
45
<script type="module" src="./index.ts"></script>
5-
<style>
6-
.bg {
7-
position: absolute;
8-
height: 39px;
9-
user-drag: none;
10-
pointer-events: none;
11-
}
12-
:root {
13-
width: 100%;
14-
height: 100%;
15-
display: flex;
16-
}
17-
body {
18-
flex-grow: 1;
19-
display: flex;
20-
}
21-
.map {
22-
display: flex;
23-
overflow: hidden;
24-
}
25-
#map_container {
26-
flex-grow: 1;
27-
position: relative;
28-
}
29-
.root {
30-
flex-grow: 1;
31-
display: grid;
32-
grid-template-columns: 1fr 20rem;
33-
}
34-
#menu {
35-
min-height: 0;
36-
max-height: 100%;
37-
display: flex;
38-
}
39-
#regions {
40-
flex-grow: 1;
41-
overflow-y: scroll;
42-
display: flex;
43-
flex-direction: column;
44-
}
45-
.region {
46-
padding: 0.5rem;
47-
transition: color 0.2s;
48-
}
49-
.region-selected {
50-
color: #2060ae;
51-
}
52-
</style>
536
</head>
547
<body>
55-
<div class="root">
8+
<div id="root">
569
<div class="map">
5710
<div id="map_container">
5811
<div style="position: absolute; inset: 50%;">
@@ -62,6 +15,8 @@
6215
</div>
6316
</div>
6417
<div id="menu">
18+
<div id="layers">
19+
</div>
6520
<div id="regions">
6621
</div>
6722
</div>

‎src/index.ts‎

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ const regionsEl = window.regions
4444

4545
// null if show all
4646
function fillRegions(filter: string | null) {
47-
console.log(Object.keys(regions))
4847
const regs: Array<{ key: RegionKey, region: Region }> = []
4948
for(const regK in regions) {
5049
if(filter && !regK.includes(filter)) continue
@@ -73,9 +72,17 @@ function showRegion(regionName: RegionKey, region: Region) {
7372
var minY = Infinity
7473
var maxY = -Infinity
7574

75+
const layers: Set<number> = new Set()
76+
const layerEls: Map<number, HTMLElement> = new Map()
77+
78+
const markerLayerEls: Map<number, HTMLElement> = new Map()
79+
7680
for(const k in region.rooms) {
77-
const room = region.rooms[k]
78-
if(room.data.warpPoints?.length > 0) console.log(k, room.data.warpPoints)
81+
const room = region.rooms[k as RegionKey]
82+
if(!room.data.mapPos) continue
83+
const layer = room.data.layer
84+
layers.add(layer)
85+
7986
for(const s of room.screens) {
8087
const ps = s.split('$')
8188
let x = room.data.mapPos[0] / 3 - room.data.size[0] * 0.5
@@ -94,12 +101,61 @@ function showRegion(regionName: RegionKey, region: Region) {
94101
minY = Math.min(minY, y)
95102
maxY = Math.max(maxY, y)
96103

97-
inner.append(image)
104+
let v = layerEls.get(layer)
105+
if(!v) {
106+
v = document.createElement('div')
107+
v.classList.add('room-layer')
108+
v.style.position = 'absolute'
109+
layerEls.set(layer, v)
110+
}
111+
112+
v.append(image)
98113
}
99114
}
115+
116+
const layersArr = [...layers]
117+
layersArr.sort((a, b) => a - b)
118+
119+
for(const l of layersArr) {
120+
inner.append(layerEls.get(l))
121+
}
122+
123+
let curLayer = layersArr[0]
124+
function setLayer(l: number) {
125+
curLayer = l
126+
for(const ol of layersArr) {
127+
const el = layerEls.get(ol)
128+
if(!el) continue
129+
el.style.opacity = l == ol ? '1' : '0.2'
130+
}
131+
}
132+
setLayer(curLayer)
133+
100134
context.camera.posX = (minX + maxX) * 0.5
101135
context.camera.posY = (minY + maxY) * 0.5
102136
context.requestRender()
137+
138+
{
139+
window.layers.innerHTML = ''
140+
141+
const form = document.createElement('form')
142+
for(const l of layersArr) {
143+
const cont = document.createElement('label')
144+
const input = document.createElement('input')
145+
input.setAttribute('type', 'radio')
146+
if(l == curLayer) input.setAttribute('checked', '')
147+
input.setAttribute('name', 'layer')
148+
input.setAttribute('value', '' + l)
149+
input.onchange = () => setLayer(l)
150+
cont.append(input, document.createTextNode('' + (l === undefined ? '<none>' : l)))
151+
form.append(cont)
152+
}
153+
154+
window.layers.append(
155+
document.createTextNode('Layers:'),
156+
form,
157+
)
158+
}
103159
}
104160

105161
fillRegions(null)

0 commit comments

Comments
 (0)