style: support phones

Author: vanaigr

src/index.css

@@ -27,6 +27,7 @@ body {
     display: grid;
     grid-template-columns: 1fr 20rem;
 }
+
 #menu {
     min-height: 0;
     max-height: 100%;
@@ -95,3 +96,17 @@ body {
 .marker-selected {
     border: 2px solid red;
 }
+
+@media screen and (orientation: portrait) {
+    #root {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 30%;
+    }
+    #menu {
+        border-top: 1px solid gray;
+        overflow-y: scroll;
+    }
+    #regions {
+        overflow-y: unset;
+    }
+}

src/index.ts

@@ -83,7 +83,6 @@ for(const regK in regions) {
         }
     }
 }
-console.log(backlinks)
 
 // half height of camera
 // const size = 384
@@ -227,6 +226,17 @@ function showRegion(regionName: RegionKey, region: Region, pos?: [number, number
         const mx = totalX / count
         const my = totalY / count
 
+        const backlink = backlinks[regionName.toLowerCase()]?.[k.toLowerCase()]
+        for(let i = 0; backlink && i < backlink.length; i++) {
+            const v = lget(markerLayerEls, layer)
+            const m = document.createElement('div')
+            m.classList.add('marker-backlink')
+            m.style.left = mx + 'px'
+            m.style.top = -my + 'px'
+            v.append(m)
+            markers.push({ type: 'backlink', position: [mx, my], data: backlink[i], element: m })
+        }
+
         for(let i = 0; i < room.data.warpPoints.length; i++) {
             const it = room.data.warpPoints[i]
 
@@ -251,17 +261,6 @@ function showRegion(regionName: RegionKey, region: Region, pos?: [number, number
             v.append(m)
             markers.push({ type: 'echo', position: [mx, my], data: it, element: m })
         }
-
-        const backlink = backlinks[regionName.toLowerCase()]?.[k.toLowerCase()]
-        for(let i = 0; backlink && i < backlink.length; i++) {
-            const v = lget(markerLayerEls, layer)
-            const m = document.createElement('div')
-            m.classList.add('marker-backlink')
-            m.style.left = mx + 'px'
-            m.style.top = -my + 'px'
-            v.append(m)
-            markers.push({ type: 'backlink', position: [mx, my], data: backlink[i], element: m })
-        }
     }
 
     const layersArr = [...layers]
@@ -422,5 +421,5 @@ fillRegions(null)
 
 {
     setSelected(regionEls.get('HI'))
-    showRegion('HI', regions['HI'], [-150, 150], 1)
+    showRegion('HI', regions['HI'], [-0, 150], 1)
 }