feat(web): add xyz coordinate display to map viewer

wowserhq · Dec 31, 2023 · d9e0af9 · d9e0af9
1 parent d40321f
commit d9e0af9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/packages/spelunker-web/src/components/core/MapViewer/index.jsx b/packages/spelunker-web/src/components/core/MapViewer/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { AssetManager, FormatManager, TextureManager, MapManager, MapControls } from '@wowserhq/scene';
 import * as THREE from 'three';
 import styles from './index.styl';
@@ -26,6 +26,8 @@ const MapViewer = ({ map: { filename } }) => {
   const mapManagerRef = useRef();
   const rendererRef = useRef();
 
+  const [currentPosition, setCurrentPosition] = useState({ x: 0.0, y: 0.0, z: 0.0 });
+
   useEffect(() => {
     if (filename && containerRef.current) {
       const containerWidth = containerRef.current.clientWidth;
@@ -73,6 +75,7 @@ const MapViewer = ({ map: { filename } }) => {
         const delta = clock.getDelta();
 
         mapManager.setTarget(camera.position.x, camera.position.y);
+        setCurrentPosition({ x: camera.position.x, y: camera.position.y, z: camera.position.z });
 
         controls.update(delta);
         mapManager.update(delta, camera);
@@ -116,8 +119,25 @@ const MapViewer = ({ map: { filename } }) => {
   }, []);
 
   return (
-    <div className={styles.container} ref={containerRef}>
-      <canvas ref={canvasRef} className={styles.viewer} />
+    <div>
+      <div ref={containerRef} className={styles.container}>
+        <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>
     </div>
   );
 };

diff --git a/packages/spelunker-web/src/components/core/MapViewer/index.styl b/packages/spelunker-web/src/components/core/MapViewer/index.styl
@@ -10,3 +10,27 @@
   width: 100%;
   height: 100%;
 }
+
+.position {
+  font-family: "Source Code Pro", Monaco, "Courier New", monospace;
+  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;
+
+  .coordinate {
+    padding: 6px 15px;
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+  }
+
+  .label {
+    display: inline-block;
+  }
+
+  .value {
+    display: inline-block;
+    min-width: 80px;
+    text-align: right;
+  }
+}
diff --git a/packages/spelunker-web/src/index.html b/packages/spelunker-web/src/index.html
@@ -12,6 +12,7 @@
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet" />
   </head>
   <body>
     <noscript>