Add artillery zones to maps

src/features/maps/do-fetch-maps.mjs

@@ -177,6 +177,22 @@ class MapsQuery extends APIQuery {
                         z
                     }
                 }
+                artillery {
+                    zones {
+                        position {
+                            x
+                            y
+                            z
+                        }
+                        outline {
+                            x
+                            y
+                            z
+                        }
+                        top
+                        bottom
+                    }
+                }
             }
         }`.replace(/\s{2,}/g, ' ');
 

src/features/maps/index.js

@@ -129,6 +129,7 @@ export const useMapImages = () => {
                 lootContainers: apiData?.lootContainers || [],
                 switches: apiData?.switches || [],
                 stationaryWeapons: apiData?.stationaryWeapons || [],
+                artillery: apiData?.artillery,
             };
             if (imageData.projection) {
                 mapImages[imageData.key].displayText += ` - ${i18n.t(imageData.projection, { ns: 'maps' })}`;

src/pages/map/index.js

@@ -995,7 +995,7 @@ function Map() {
                     const rect = L.polygon(outlineToPoly(transit.outline), {color: '#e53500', weight: 1, className: 'not-shown'});
                     const transitIcon = L.divIcon({
                         className: 'extract-icon',
-                        html: `<img src="${process.env.PUBLIC_URL}/maps/interactive/extract_pmc.png"/><span class="extract-name transit">${transit.description}</span>`,
+                        html: `<img src="${process.env.PUBLIC_URL}/maps/interactive/extract_transit.png"/><span class="extract-name transit">${transit.description}</span>`,
                         iconAnchor: [12, 12]
                     });
                     const transitMarker = L.marker(pos(transit.position), {
@@ -1312,8 +1312,9 @@ function Map() {
         }
 
         //add hazards
-        if (mapData.hazards.length > 0) {
+        if (mapData.hazards.length > 0 || mapData.artillery?.zones?.length) {
             const hazardLayers = {};
+            const hazardNames = {};
             for (const hazard of mapData.hazards) {
                 if (!positionIsInBounds(hazard.position)) {
                     continue;
@@ -1344,16 +1345,60 @@ function Map() {
                 hazardMarker.on('mouseout', mouseHoverOutline);
                 hazardMarker.on('click', toggleForceOutline);
                 hazardMarker.on('add', checkMarkerForActiveLayers);
-                if (!hazardLayers[hazard.name]) {
-                    hazardLayers[hazard.name] = L.layerGroup()
+                if (!hazardLayers[hazard.hazardType]) {
+                    hazardLayers[hazard.hazardType] = L.layerGroup();
+                    hazardNames[hazard.hazardType] = hazard.name;
                 }
-                L.layerGroup([rect, hazardMarker]).addTo(hazardLayers[hazard.name]);
+                L.layerGroup([rect, hazardMarker]).addTo(hazardLayers[hazard.hazardType]);
 
                 checkMarkerBounds(hazard.position, markerBounds);
             }
+
+            if (mapData.artillery?.zones?.length > 0) {
+                for (const hazard of mapData.artillery.zones) {
+                    if (!positionIsInBounds(hazard.position)) {
+                        continue;
+                    }
+                    const rect = L.polygon(outlineToPoly(hazard.outline), {color: '#ff0000', weight: 1, className: 'not-shown'});
+                    const hazardIcon = L.icon({
+                        iconUrl: `${process.env.PUBLIC_URL}/maps/interactive/hazard_mortar.png`,
+                        iconSize: [24, 24],
+                        popupAnchor: [0, -12],
+                    });
+
+                    const artyName = t('Mortar');
+
+                    const hazardMarker = L.marker(pos(hazard.position), {
+                        icon: hazardIcon, 
+                        title: artyName, 
+                        //zIndexOffset: -100,
+                        position: hazard.position,
+                        top: hazard.top,
+                        bottom: hazard.bottom,
+                        outline: rect,
+                    });
+                    const popup = L.DomUtil.create('div');
+                    const hazardText = L.DomUtil.create('div', undefined, popup);
+                    hazardText.textContent = t('Mortar');
+                    addElevation(hazard, popup);
+                    hazardMarker.bindPopup(L.popup().setContent(popup));
+
+                    hazardMarker.on('mouseover', mouseHoverOutline);
+                    hazardMarker.on('mouseout', mouseHoverOutline);
+                    hazardMarker.on('click', toggleForceOutline);
+                    hazardMarker.on('add', checkMarkerForActiveLayers);
+                    if (!hazardLayers.mortar) {
+                        hazardLayers.mortar = L.layerGroup();
+                        hazardNames.mortar = artyName;
+                    }
+                    L.layerGroup([rect, hazardMarker]).addTo(hazardLayers.mortar);
+
+                    checkMarkerBounds(hazard.position, markerBounds);
+                }
+            }
             for (const key in hazardLayers) {
                 if (Object.keys(hazardLayers[key]._layers).length > 0) {
-                    addLayer(hazardLayers[key], key, 'Hazards');
+                    addLayer(hazardLayers[key], `hazard_${key}`, 'Hazards', hazardNames[key]);
                 }
             }
         }
@@ -1388,6 +1433,9 @@ function Map() {
             addLayer(stationaryWeapons, 'stationarygun', 'Usable');
         }
 
+        // add artillery zones
+
+
         // Add static items 
         if (showStaticMarkers) {
             for (const category in staticMapData[mapData.normalizedName]) {

src/pages/map/map-images.mjs

@@ -32,8 +32,11 @@ const images = {
     'extract_pmc': 'extract_pmc',
     'extract_scav': 'extract_scav',
     'extract_shared': 'extract_shared',
-    'extract_transit': 'extract_pmc',
+    'extract_transit': 'extract_transit',
     'hazard': 'hazard',
+    'hazard_mortar': 'hazard_mortar',
+    'hazard_minefield': 'hazard',
+    'hazard_sniper': 'hazard',
     'key': 'key',
     'lock': 'lock',
     'quest_item': 'quest_item',

src/pages/player/index.css

@@ -73,3 +73,7 @@ ul.favorite-item-list li {
     vertical-align: middle;
     margin-left: 20px;
 }
+
+.current-wipe-achievement {
+    font-weight: bold;
+}

src/pages/player/index.js

@@ -31,6 +31,7 @@ import useMetaData from '../../features/meta/index.js';
 import useAchievementsData from '../../features/achievements/index.js';
 
 import playerStats from '../../modules/player-stats.mjs';
+import { wipeDetails } from '../../modules/wipe-length.js';
 
 import './index.css';
 
@@ -205,6 +206,8 @@ function Player() {
         reader.readAsText(e.target.files[0]);
     }, [setPlayerData, setProfileError, gameMode]);
 
+    const currentWipe = wipeDetails()[0];
+
     const playerLevel = useMemo(() => {
         if (playerData.info.experience === 0) {
             return 0;
@@ -306,7 +309,7 @@ function Player() {
                 accessor: 'completionDate',
                 Cell: (props) => {
                     return (
-                        <div className="center-content">
+                        <div className={`center-content${new Date(props.value * 1000) > currentWipe.start ? ' current-wipe-achievement' : ''}`}>
                             {new Date(props.value * 1000).toLocaleString()}
                         </div>
                     );
@@ -333,7 +336,7 @@ function Player() {
                 },
             },
         ],
-        [t],
+        [t, currentWipe],
     );
 
     const achievementsData = useMemo(() => {
@@ -731,9 +734,17 @@ function Player() {
             if (tag.KillerAccountId) {
                 killerInfo = <Link to={`/players/${gameMode}/${tag.KillerAccountId}`}>{tag.KillerName}</Link>;
             }
+            let victimInfo = (
+                <span>{tag.Nickname}</span>
+            );
+            if (tag.AccountId !== '0') {
+                victimInfo = (
+                    <Link to={`/players/${gameMode}/${tag.AccountId}`}>{tag.Nickname}</Link>
+                );
+            }
             label = (
                 <span>
-                    <Link to={`/players/${gameMode}/${tag.AccountId}`}>{tag.Nickname}</Link>
+                    {victimInfo}
                     <span>{` ${t(tag.Status)} `}</span>
                     {killerInfo}
                     {weapon !== undefined && [
@@ -845,6 +856,7 @@ function Player() {
                     let itemDisplay = getItemDisplay(itemData);
                     if (itemDisplay) {
                         itemImage = itemDisplay.image;
+                        itemLabel = itemDisplay.label;
                     }
                     return (
                         <li key={itemData._id}>
@@ -876,7 +888,7 @@ function Player() {
     const playerSearchDiv = (
         <div>
             <p>
-                <Link to="/players"><Icon path={mdiAccountSearch} size={1} className="icon-with-text" />{t('Search different player')}</Link>
+                <Link to={`/players?gameMode=${gameMode}`}><Icon path={mdiAccountSearch} size={1} className="icon-with-text" />{t('Search different player')}</Link>
                 <input type='file' id='file' ref={inputFile} style={{display: 'none'}} onChange={loadProfile} accept="application/json,.json"/>
                 <Tippy
                     content={t('Load profile from file')}

src/pages/players/index.js

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { Turnstile } from '@marsidev/react-turnstile'
 import Select from 'react-select';
@@ -18,6 +18,7 @@ import gameModes from '../../data/game-modes.json';
 import './index.css';
 
 function Players() {
+    const [ searchParams, setSearchParams ] = useSearchParams();
     const turnstileRef = useRef();
     const turnstileToken = useRef(false);
 
@@ -26,7 +27,10 @@ function Players() {
     const enterPress = useKeyPress('Enter');
 
     const gameModeSetting = useSelector((state) => state.settings.gameMode);
-    const [ gameMode, setGameMode ] = useState(gameModeSetting);
+    const defaultGameMode = useMemo(() => {
+        return searchParams.get('gameMode') ?? gameModeSetting;
+    }, [searchParams, gameModeSetting]);
+    const [ gameMode, setGameMode ] = useState(defaultGameMode);
 
     const [nameFilter, setNameFilter] = useState('');
     const [nameResults, setNameResults] = useState([]);
@@ -131,8 +135,8 @@ function Players() {
                 <span className={'single-filter-label'}>{t('Game mode')}</span>
                 <Select
                     label={t('Game mode')}
-                    placeholder={t(`game_mode_${gameModeSetting}`)}
-                    defaultValue={gameModeSetting}
+                    placeholder={t(`game_mode_${defaultGameMode}`)}
+                    defaultValue={defaultGameMode}
                     options={gameModes.map(m => {
                         return {
                             label: t(`game_mode_${m}`),
@@ -142,6 +146,7 @@ function Players() {
                     className="basic-multi-select game-mode"
                     classNamePrefix="select"
                     onChange={(event) => {
+                        setSearchParams({gameMode: event.value});
                         if (searchTextValid && gameMode !== event.value) {
                             setButtonDisabled(false);
                         }