feat(web): show current area name in map viewer

wowserhq · Jan 14, 2024 · 47b58e9 · 47b58e9
1 parent c957a65
commit 47b58e9
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 33 deletions.
diff --git a/packages/spelunker-web/package-lock.json b/packages/spelunker-web/package-lock.json
diff --git a/packages/spelunker-web/package.json b/packages/spelunker-web/package.json
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "@apollo/client": "^3.8.8",
-    "@wowserhq/format": "^0.13.1",
-    "@wowserhq/scene": "^0.19.0",
+    "@wowserhq/format": "^0.15.0",
+    "@wowserhq/scene": "^0.20.0",
     "classnames": "^2.3.1",
     "crypto-hash": "^2.0.0",
     "graphql": "^16.8.1",

diff --git a/packages/spelunker-web/src/components/core/MapViewer/index.jsx b/packages/spelunker-web/src/components/core/MapViewer/index.jsx
@@ -41,6 +41,7 @@ const MapViewer = ({ map: { id, filename } }) => {
   const rendererRef = useRef();
 
   const [currentPosition, setCurrentPosition] = useState({ x: 0.0, y: 0.0, z: 0.0 });
+  const [currentArea, setCurrentArea] = useState(null);
 
   useEffect(() => {
     if (filename && containerRef.current) {
@@ -80,6 +81,9 @@ const MapViewer = ({ map: { id, filename } }) => {
 
       const mapManager = new MapManager({ host: assetHost, textureManager });
       mapManager.load(filename, id);
+      mapManager.addEventListener('area:change', (event) => {
+        setCurrentArea(event.detail);
+      });
       mapManagerRef.current = mapManager;
 
       scene.add(mapManager.root);
@@ -144,19 +148,27 @@ const MapViewer = ({ map: { id, filename } }) => {
         <canvas ref={canvasRef} className={styles.viewer} />
       </div>
 
-      <div className={styles.position}>
-        <span className={styles.coordinate}>
-          <span className={styles.label}>X:</span>
-          <span className={styles.value}>{currentPosition.x.toFixed(1)}</span>
-        </span>
-        <span className={styles.coordinate}>
-          <span className={styles.label}>Y:</span>
-          <span className={styles.value}>{currentPosition.y.toFixed(1)}</span>
-        </span>
-        <span className={styles.coordinate}>
-          <span className={styles.label}>Z:</span>
-          <span className={styles.value}>{currentPosition.z.toFixed(1)}</span>
-        </span>
+      <div className={styles.info}>
+        <div className={styles.position}>
+          <span className={styles.coordinate}>
+            <span className={styles.label}>X:</span>
+            <span className={styles.value}>{currentPosition.x.toFixed(1)}</span>
+          </span>
+          <span className={styles.coordinate}>
+            <span className={styles.label}>Y:</span>
+            <span className={styles.value}>{currentPosition.y.toFixed(1)}</span>
+          </span>
+          <span className={styles.coordinate}>
+            <span className={styles.label}>Z:</span>
+            <span className={styles.value}>{currentPosition.z.toFixed(1)}</span>
+          </span>
+        </div>
+
+        <div className={styles.area}>
+          <span className={styles.name}>
+            {currentArea && currentArea.areaName}
+          </span>
+        </div>
       </div>
     </div>
   );

diff --git a/packages/spelunker-web/src/components/core/MapViewer/index.styl b/packages/spelunker-web/src/components/core/MapViewer/index.styl
@@ -11,12 +11,16 @@
   height: 100%;
 }
 
-.position {
-  font-family: "Source Code Pro", Monaco, "Courier New", monospace;
+.info {
   border-radius: 0 0 5px 5px;
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-top: none;
+  display: flex;
+}
+
+.position {
+  font-family: "Source Code Pro", Monaco, "Courier New", monospace;
 
   .coordinate {
     padding: 6px 15px;
@@ -34,3 +38,14 @@
     text-align: right;
   }
 }
+
+.area {
+  flex-grow: 1;
+  align-self: center;
+  text-align: right;
+
+  .name {
+    padding: 6px 15px;
+    display: inline-block;
+  }
+}