From 31c81c4dfdc298c65f7197f9cf16e15c5666a508 Mon Sep 17 00:00:00 2001 From: Shebuka Date: Tue, 12 Mar 2024 19:04:08 +0100 Subject: [PATCH 1/4] Better player loadout visualization --- src/pages/player/index.css | 30 +++++++++++++ src/pages/player/index.js | 88 ++++++++++++++++++++++++++++++++++---- 2 files changed, 109 insertions(+), 9 deletions(-) diff --git a/src/pages/player/index.css b/src/pages/player/index.css index e7dbb54f0..ba024e4f3 100644 --- a/src/pages/player/index.css +++ b/src/pages/player/index.css @@ -1,4 +1,34 @@ .MuiTreeItem-iconContainer { width: auto !important; justify-content: normal !important; + margin-right: 0px !important; +} + +.inventory { + display: flow-root; +} + +.grid-container { + display: grid; + float: left; + gap: 10px; +} + +.grid-container.main { + grid-template-columns: auto auto auto; +} + +.grid-container.side { + margin-left: 10px; + grid-template-columns: auto; +} + +.grid-container > div { + background-color: rgba(0, 0, 0, 0.4); + text-align: center; + font-size: 20px; +} + +.weapon { + grid-column: 1 / span 2; } \ No newline at end of file diff --git a/src/pages/player/index.js b/src/pages/player/index.js index 592b551ff..bca73a975 100644 --- a/src/pages/player/index.js +++ b/src/pages/player/index.js @@ -495,6 +495,65 @@ function Player() { }, []); }, [items, playerData, t]); + const getLoadoutInSlot = (slot) => { + if (playerData?.equipment?.Id === undefined) { + return "None" + } + + let loadoutRoot = playerData.equipment.Items.find(i => i._id === playerData.equipment.Id) + let loadoutItem = playerData.equipment.Items.find(i => i.slotId === slot && i.parentId === loadoutRoot._id) + + if (loadoutItem === undefined) { + return "None" + } + + let itemImage = undefined + let itemLabel = '' + let contents = [] + let item = items.find(i => i.id === loadoutItem._tpl); + if (item) { + if (item.properties?.defaultPreset) { + const preset = items.find(i => i.id === item.properties.defaultPreset.id); + item = { + ...item, + width: preset.width, + height: preset.height, + baseImageLink: preset.baseImageLink, + }; + } + let countLabel; + + if (loadoutItem.upd?.Repairable) { + countLabel = `${loadoutItem.upd.Repairable.Durability}/${loadoutItem.upd.Repairable.MaxDurability}` + } + + itemImage = ( + + ); + } + else { + itemLabel = slot; + } + contents.push(( + + {getLoadoutContents(loadoutItem)} + + )); + + return } + defaultCollapseIcon={} + defaultParentIcon={***} + > + {contents} + + } + return [ :

{t('None')}

}

{t('Loadout')}

- {playerData?.equipment?.Id !== undefined && ( - } - defaultCollapseIcon={} - defaultParentIcon={***} - > - {getLoadoutContents(playerData.equipment.Items.find(i => i._id === playerData.equipment.Id))} - - )} +
+
+
{getLoadoutInSlot('Earpiece')}
+
{getLoadoutInSlot('Headwear')}
+
{getLoadoutInSlot('FaceCover')}
+
{getLoadoutInSlot('ArmBand')}
+
{getLoadoutInSlot('ArmorVest')}
+
{getLoadoutInSlot('Eyewear')}
+
{getLoadoutInSlot('FirstPrimaryWeapon')}
+
{getLoadoutInSlot('SecondaryWeapon')}
+
{getLoadoutInSlot('SecondPrimaryWeapon')}
+
{getLoadoutInSlot('Scabbard')}
+
+
+
{getLoadoutInSlot('TacticalVest')}
+
{getLoadoutInSlot('Pockets')}
+
{getLoadoutInSlot('Backpack')}
+
{getLoadoutInSlot('SecuredContainer')}
+
+

{t('Skills')}

{playerData.skills?.Common?.length > 0 && ( Date: Tue, 12 Mar 2024 13:24:48 -0500 Subject: [PATCH 2/4] remove debugging output --- src/pages/player/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/player/index.js b/src/pages/player/index.js index 660928a42..1395aee29 100644 --- a/src/pages/player/index.js +++ b/src/pages/player/index.js @@ -69,7 +69,7 @@ function Player() { scavStats: {}, }); const [profileError, setProfileError] = useState(false); - console.log(playerData); + //console.log(playerData); const { data: items } = useItemsData(); const { data: metaData } = useMetaData(); const { data: achievements } = useAchievementsData(); @@ -355,13 +355,11 @@ function Player() { const currentData = getStats(sideLabel); for (const st of statTypes) { const foundStat = stats.find(s => !st.key.some(keyPart => !s.Key.includes(keyPart))); - //console.log(sideKey, st, foundStat); currentData[st.name] = foundStat?.Value || 0; totalStats[st.name] += currentData[st.name]; } statsData.push(currentData); } - //console.log(statsData); return statsData; }, [playerData]); From 31f8e58cd2387a0a7a2db22c2c39168512b5099c Mon Sep 17 00:00:00 2001 From: Razzmatazz Date: Tue, 12 Mar 2024 13:34:53 -0500 Subject: [PATCH 3/4] add wiki credit footer --- src/components/footer/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/footer/index.js b/src/components/footer/index.js index ce5b0ede7..57e22b2fc 100644 --- a/src/components/footer/index.js +++ b/src/components/footer/index.js @@ -73,6 +73,13 @@ function Footer() { SPT-AKI

+

{t('Map Icons')}

+

+ {t('Map marker icons by')}{' '} + + The Official Escape From Tarkov Wiki + +

{t('Resources')}

From 9b5618bf17387924a08a71c6e0721926ed272291 Mon Sep 17 00:00:00 2001 From: Razzmatazz Date: Tue, 12 Mar 2024 15:07:01 -0500 Subject: [PATCH 4/4] show favorite items --- src/pages/player/index.css | 12 ++- src/pages/player/index.js | 206 ++++++++++++++++++++----------------- 2 files changed, 120 insertions(+), 98 deletions(-) diff --git a/src/pages/player/index.css b/src/pages/player/index.css index ba024e4f3..f847c4a64 100644 --- a/src/pages/player/index.css +++ b/src/pages/player/index.css @@ -31,4 +31,14 @@ .weapon { grid-column: 1 / span 2; -} \ No newline at end of file +} + +ul.favorite-item-list { + list-style: none; + padding: 0px; +} + +ul.favorite-item-list li { + display: inline-block; + padding-left: 2px; +} diff --git a/src/pages/player/index.js b/src/pages/player/index.js index 1395aee29..da1570df3 100644 --- a/src/pages/player/index.js +++ b/src/pages/player/index.js @@ -3,7 +3,17 @@ import { useParams, Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Icon } from '@mdi/react'; -import { mdiAccountDetails, mdiChevronUp, mdiChevronDown, mdiTrophy, mdiChartLine, mdiBagPersonal, mdiArmFlex, mdiStarBox } from '@mdi/js'; +import { + mdiAccountDetails, + mdiChevronUp, + mdiChevronDown, + mdiTrophy, + mdiChartLine, + mdiBagPersonal, + mdiArmFlex, + mdiStarBox, + mdiTrophyAward +} from '@mdi/js'; import { TreeView, TreeItem } from '@mui/x-tree-view'; import SEO from '../../components/SEO.jsx'; @@ -422,81 +432,89 @@ function Player() { return playerData.pmcStats?.eft?.totalInGameTime || 0; }, [playerData]); + const getItemDisplay = useCallback((loadoutItem, imageOptions = {}) => { + let item = items.find(i => i.id === loadoutItem._tpl); + if (!item) { + return undefined; + } + if (item.properties?.defaultPreset) { + const preset = items.find(i => i.id === item.properties.defaultPreset.id); + item = { + ...item, + width: preset.width, + height: preset.height, + baseImageLink: preset.baseImageLink, + }; + } + let countLabel; + + let label = ''; + if (loadoutItem.upd?.StackObjectsCount > 1) { + countLabel = loadoutItem.upd?.StackObjectsCount; + } + if (loadoutItem.upd?.Dogtag) { + const tag = loadoutItem.upd.Dogtag; + const weapon = items.find(i => i.id === tag.WeaponName?.split(' ')[0]); + countLabel = tag.Level; + label = ( + + {tag.Nickname} + {` ${t(tag.Status)} `} + {tag.KillerName} + {weapon !== undefined && [ + {` ${t('using')} `}, + {weapon.name} + ]} + {` ${new Date(tag.Time).toLocaleString()}`} + + ); + } + if (loadoutItem.upd?.Key) { + const key = items.find(i => i.id === loadoutItem._tpl); + if (key && key.properties.uses) { + countLabel = `${key.properties.uses-loadoutItem.upd.Key.NumberOfUsages}/${key.properties.uses}`; + } + } + if (loadoutItem.upd?.Repairable) { + countLabel = `${loadoutItem.upd.Repairable.Durability}/${loadoutItem.upd.Repairable.MaxDurability}` + } + if (loadoutItem.upd?.MedKit) { + const item = items.find(i => i.id === loadoutItem._tpl); + if (item?.properties?.uses || item?.properties?.hitpoints) { + countLabel = `${loadoutItem.upd.MedKit.HpResource}/${item.properties?.uses || item.properties?.hitpoints}`; + } + } + + const itemImage = ( + + ); + return { image: itemImage, label }; + }, [items, t]); + const getLoadoutContents = useCallback((parentItem) => { return playerData?.equipment?.Items.reduce((contents, loadoutItem) => { if (loadoutItem.parentId !== parentItem._id) { return contents; } - let item = items.find(i => i.id === loadoutItem._tpl); - if (!item) { + const itemDisplay = getItemDisplay(loadoutItem); + if (!itemDisplay) { return contents; } - if (item.properties?.defaultPreset) { - const preset = items.find(i => i.id === item.properties.defaultPreset.id); - item = { - ...item, - width: preset.width, - height: preset.height, - baseImageLink: preset.baseImageLink, - }; - } - let countLabel; - - let label = ''; - if (loadoutItem.upd?.StackObjectsCount > 1) { - countLabel = loadoutItem.upd?.StackObjectsCount; - } - if (loadoutItem.upd?.Dogtag) { - const tag = loadoutItem.upd.Dogtag; - const weapon = items.find(i => i.id === tag.WeaponName?.split(' ')[0]); - countLabel = tag.Level; - label = ( - - {tag.Nickname} - {` ${t(tag.Status)} `} - {tag.KillerName} - {weapon !== undefined && [ - {` ${t('using')} `}, - {weapon.name} - ]} - {` ${new Date(tag.Time).toLocaleString()}`} - - ); - } - if (loadoutItem.upd?.Key) { - const key = items.find(i => i.id === loadoutItem._tpl); - if (key) { - countLabel = `${key.properties.uses-loadoutItem.upd.Key.NumberOfUsages}/${key.properties.uses}`; - } - } - if (loadoutItem.upd?.Repairable) { - countLabel = `${loadoutItem.upd.Repairable.Durability}/${loadoutItem.upd.Repairable.MaxDurability}` - } - if (loadoutItem.upd?.MedKit) { - const item = items.find(i => i.id === loadoutItem._tpl); - if (item?.properties?.uses || item?.properties?.hitpoints) { - countLabel = `${loadoutItem.upd.MedKit.HpResource}/${item.properties?.uses || item.properties?.hitpoints}`; - } - } - - const itemImage = ( - - ); contents.push(( - + {getLoadoutContents(loadoutItem)} )); return contents; }, []); - }, [items, playerData, t]); + }, [playerData, getItemDisplay]); - const getLoadoutInSlot = (slot) => { + const getLoadoutInSlot = useCallback((slot) => { if (playerData?.equipment?.Id === undefined) { return "None" } @@ -511,31 +529,9 @@ function Player() { let itemImage = undefined let itemLabel = '' let contents = [] - let item = items.find(i => i.id === loadoutItem._tpl); - if (item) { - if (item.properties?.defaultPreset) { - const preset = items.find(i => i.id === item.properties.defaultPreset.id); - item = { - ...item, - width: preset.width, - height: preset.height, - baseImageLink: preset.baseImageLink, - }; - } - let countLabel; - - if (loadoutItem.upd?.Repairable) { - countLabel = `${loadoutItem.upd.Repairable.Durability}/${loadoutItem.upd.Repairable.MaxDurability}` - } - - itemImage = ( - - ); + let itemDisplay = getItemDisplay(loadoutItem); + if (itemDisplay) { + itemImage = itemDisplay.image; } else { itemLabel = slot; @@ -553,7 +549,7 @@ function Player() { > {contents} - } + }, [playerData, getItemDisplay, getLoadoutContents]); return [ {profileError}

)} - {playerData.info.registrationDate && ( + {playerData.info.registrationDate !== 0 && (

{`${t('Started current wipe')}: ${new Date(playerData.info.registrationDate * 1000).toLocaleString()}`}

)} {playerData.info.bannedState && ( @@ -627,17 +623,33 @@ function Player() {
{getLoadoutInSlot('SecuredContainer')}
-

{t('Skills')}

- {playerData.skills?.Common?.length > 0 && ( + {playerData?.favoriteItems?.length > 0 && ([ +

{t('Favorite Items')}

, +
    + {playerData.favoriteItems.map(itemData => { + const imageDisplay = getItemDisplay(itemData, {linkToItem: true}); + if (!imageDisplay) { + return false; + } + return ( +
  • + {imageDisplay.image} +
    • + ); + }).filter(Boolean)} +
+ ])} + {playerData.skills?.Common?.length > 0 && ([ +

{t('Skills')}

, - )} -

{t('Mastering')}

- {playerData.skills?.Mastering?.length > 0 && ( -
    + />, + ])} + {playerData.skills?.Mastering?.length > 0 && ([ +

    {t('Mastering')}

    , +
      {playerData.skills.Mastering.map(skillData => { if (skillData.Progress <= 1) { return false; @@ -647,7 +659,7 @@ function Player() { ); }).filter(Boolean)}
    - )} + ])} , ];