diff --git a/packages/spelunker-web/package-lock.json b/packages/spelunker-web/package-lock.json index dbbc775..bc6adf9 100644 --- a/packages/spelunker-web/package-lock.json +++ b/packages/spelunker-web/package-lock.json @@ -10,8 +10,8 @@ "license": "MIT", "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", @@ -2672,9 +2672,9 @@ } }, "node_modules/@wowserhq/format": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/@wowserhq/format/-/format-0.13.1.tgz", - "integrity": "sha512-FGEDHZK5tZENcpud1P4JvunxpvLfhLY69k5S0ijmRaTmcwaFR06xCS5TA0ORscCFsLmtezpFWOpwUxrNUDmiCg==", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/@wowserhq/format/-/format-0.15.0.tgz", + "integrity": "sha512-n6Dyz3VQAiJPl0yyz//U8FT6MoVlV8HFwwGCy8nrDNtDDFpMcQf0vJOIGxY3LXMoNmCv4yvTpQvzUl9CUmwt+w==", "dependencies": { "@wowserhq/io": "^2.0.2", "gl-matrix": "^3.4.3" @@ -2686,11 +2686,11 @@ "integrity": "sha512-YGjfUbo+wNuJiy6pOhsGeWAjq7bTvMDoGn5y+2LW2LJujOvRWNUx95MaRaJgtp8O+ig/+loJRVg5mTQoY9eoIg==" }, "node_modules/@wowserhq/scene": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/@wowserhq/scene/-/scene-0.19.0.tgz", - "integrity": "sha512-iz2NO0OXcFWRKpLgqf8KRcVNe7ud/CXh1CdRsnCfbVG8BkizCq+Bm6m3i64vm+viafBRDyMzsD98WK65slmSQg==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@wowserhq/scene/-/scene-0.20.0.tgz", + "integrity": "sha512-WtNL5fEIAqY2hEbgu8e0LPCUTZdyNadTqxjy16tqd3AVSbwCk0a78t8mecOwMxFxlqR6f0CvTGKqGbBvynjj7Q==", "dependencies": { - "@wowserhq/format": "^0.13.1" + "@wowserhq/format": "^0.15.0" }, "peerDependencies": { "three": "^0.160.0" @@ -12644,9 +12644,9 @@ "requires": {} }, "@wowserhq/format": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/@wowserhq/format/-/format-0.13.1.tgz", - "integrity": "sha512-FGEDHZK5tZENcpud1P4JvunxpvLfhLY69k5S0ijmRaTmcwaFR06xCS5TA0ORscCFsLmtezpFWOpwUxrNUDmiCg==", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/@wowserhq/format/-/format-0.15.0.tgz", + "integrity": "sha512-n6Dyz3VQAiJPl0yyz//U8FT6MoVlV8HFwwGCy8nrDNtDDFpMcQf0vJOIGxY3LXMoNmCv4yvTpQvzUl9CUmwt+w==", "requires": { "@wowserhq/io": "^2.0.2", "gl-matrix": "^3.4.3" @@ -12658,11 +12658,11 @@ "integrity": "sha512-YGjfUbo+wNuJiy6pOhsGeWAjq7bTvMDoGn5y+2LW2LJujOvRWNUx95MaRaJgtp8O+ig/+loJRVg5mTQoY9eoIg==" }, "@wowserhq/scene": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/@wowserhq/scene/-/scene-0.19.0.tgz", - "integrity": "sha512-iz2NO0OXcFWRKpLgqf8KRcVNe7ud/CXh1CdRsnCfbVG8BkizCq+Bm6m3i64vm+viafBRDyMzsD98WK65slmSQg==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@wowserhq/scene/-/scene-0.20.0.tgz", + "integrity": "sha512-WtNL5fEIAqY2hEbgu8e0LPCUTZdyNadTqxjy16tqd3AVSbwCk0a78t8mecOwMxFxlqR6f0CvTGKqGbBvynjj7Q==", "requires": { - "@wowserhq/format": "^0.13.1" + "@wowserhq/format": "^0.15.0" } }, "@wry/caches": { diff --git a/packages/spelunker-web/package.json b/packages/spelunker-web/package.json index 517cab4..9f1a5da 100644 --- 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 index 34069f5..6d7436b 100644 --- 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 } }) => { -
- - X: - {currentPosition.x.toFixed(1)} - - - Y: - {currentPosition.y.toFixed(1)} - - - Z: - {currentPosition.z.toFixed(1)} - +
+
+ + X: + {currentPosition.x.toFixed(1)} + + + Y: + {currentPosition.y.toFixed(1)} + + + Z: + {currentPosition.z.toFixed(1)} + +
+ +
+ + {currentArea && currentArea.areaName} + +
); diff --git a/packages/spelunker-web/src/components/core/MapViewer/index.styl b/packages/spelunker-web/src/components/core/MapViewer/index.styl index ba70b1a..67de1ed 100644 --- 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; + } +}