Merge pull request #555 from the-hideout/interactive-maps

Interactive maps

package.json

@@ -23,14 +23,14 @@
   },
   "dependencies": {
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-free": "^6.4.2",
     "@mdi/js": "^6.9.96",
     "@mdi/react": "^1.6.1",
     "@mui/lab": "^5.0.0-alpha.138",
     "@mui/material": "^5.14.3",
-    "@mui/styles": "^5.14.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.0.0",
     "@tippyjs/react": "^4.2.6",
     "classnames": "^2.3.2",
     "critical": "^4.0.1",
@@ -43,12 +43,15 @@
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-http-backend": "^2.2.1",
     "intersection-observer": "^0.12.2",
+    "leaflet": "^1.9.4",
+    "leaflet.awesome-markers": "2.0.5",
+    "leaflet-fullscreen": "^1.0.2",
     "lodash.debounce": "^4.0.8",
     "rc-slider": "^10.1.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-cookie-consent": "^8.0.1",
     "react-countdown": "^2.3.5",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.10",
     "react-helmet": "^6.1.0",
     "react-hotkeys-hook": "^4.4.1",
@@ -61,7 +64,7 @@
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "^5.0.1",
     "react-select": "^5.7.4",
-    "react-simple-image-viewer": "1.2.1",
+    "react-simple-image-viewer": "1.2.2",
     "react-switch": "^7.0.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.8.0",

scripts/generate-thumbnails.js

@@ -1,3 +1,4 @@
+const { default: fetch } = require('cross-fetch');
 const fs = require('fs/promises');
 
 const sharp = require('sharp');
@@ -10,12 +11,38 @@ const sharp = require('sharp');
     const mapsPath = './public/maps/';
     const files = await fs.readdir(mapsPath);
     for (const fileName of files) {
-        if (!fileName.endsWith('.jpg')) continue;
-        if (fileName.endsWith('_thumb.jpg')) continue;
+        if (!fileName.endsWith('.jpg'))
+            continue;
+        if (fileName.endsWith('_thumb.jpg'))
+            continue;
         const thumbName = fileName.replace('.jpg', '_thumb.jpg');
         console.log(`Generating ${thumbName}`);
         const image = sharp(mapsPath+fileName).resize(null, maxHeight).jpeg({mozjpeg: true, quality: 90});
         await image.toFile(mapsPath+thumbName);
     }
+    const mapGroups = JSON.parse(await fs.readFile('./src/data/maps.json'));
+    for (const group of mapGroups) {
+        for (const map of group.maps) {
+            if (map.projection !== 'interactive')
+                continue;
+            let path = map.mapPath || map.svgPath || `https://assets.tarkov.dev/maps/${group.normalizedName}/{z}/{x}/{y}.png`;
+            path = path.replace(/{[xyz]}/g, '0');
+            const thumbName = `${group.normalizedName}_thumb.jpg`;
+            try {
+                const imageRequest = await fetch(path);
+                console.log(`Generating ${thumbName}`);
+                const image = sharp(await imageRequest.arrayBuffer()).trim('#00000000').resize(null, maxHeight).jpeg({mozjpeg: true, quality: 90});
+                await image.toFile(mapsPath+thumbName);
+                if (map.altMaps) {
+                    for (const altKey of map.altMaps) {
+                        await image.toFile(mapsPath+`${altKey}_thumb.jpg`);
+                    }
+                }
+            } catch (error) {
+                console.error(error)
+                console.log(`Asset for ${thumbName} unavailable`)
+            }
+        }
+    }
     console.timeEnd('Generating thumbnails');
 })();

src/App.css

@@ -127,7 +127,7 @@ cite {
     position: absolute;
     right: -10px;
     top: 0;
-    z-index: 5;
+    z-index: 1005;
     text-align: right;
 }
 
@@ -159,6 +159,10 @@ cite {
     margin-left: 8px;
 }
 
+.icon-with-text-hidden {
+    visibility: hidden;
+}
+
 .center-title {
     text-align: center;
 }

src/App.js

@@ -11,7 +11,7 @@ import i18n from './i18n';
 import loadPolyfills from './modules/polyfills';
 
 import RemoteControlId from './components/remote-control-id';
-import { fetchTarkovTrackerProgress } from './features/settings/settingsSlice';
+import { fetchTarkovTrackerProgress, setPlayerPosition } from './features/settings/settingsSlice';
 
 import {
     setConnectionStatus,
@@ -164,6 +164,11 @@ function App() {
                 return false;
             }
 
+            if (message.data.type === 'playerPosition') {
+                dispatch(setPlayerPosition(message.data));
+                return false;
+            }
+
             navigate(`/${message.data.type}/${message.data.value}`);
         };