Skip to content

Commit

Permalink
Merge branch 'main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@Razzmatazzz
Razzmatazzz authored Mar 12, 2024
2 parents 42be5c2 + 77fbf54 commit 5ee4f48
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 83 deletions.
7 changes: 7 additions & 0 deletions src/components/footer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,13 @@ function Footer() {
<span>SPT-AKI</span>
</a>
</p>
<h3>{t('Map Icons')}</h3>
<p>
{t('Map marker icons by')}{' '}
<a href="https://escapefromtarkov.fandom.com/wiki/Escape_from_Tarkov_Wiki" target="_blank" rel="noopener noreferrer">
<span>The Official Escape From Tarkov Wiki</span>
</a>
</p>
</div>
<div className="footer-section-wrapper">
<h3>{t('Resources')}</h3>
Expand Down
42 changes: 41 additions & 1 deletion src/pages/player/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,44 @@
.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;
}

ul.favorite-item-list {
list-style: none;
padding: 0px;
}

ul.favorite-item-list li {
display: inline-block;
padding-left: 2px;
}
244 changes: 162 additions & 82 deletions src/pages/player/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -69,7 +79,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();
Expand Down Expand Up @@ -355,13 +365,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]);

Expand Down Expand Up @@ -424,79 +432,124 @@ 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 = (
<span>
<Link to={`/player/${tag.AccountId}`}>{tag.Nickname}</Link>
<span>{` ${t(tag.Status)} `}</span>
<Link to={`/player/${tag.KillerAccountId || tag.KillerName}`}>{tag.KillerName}</Link>
{weapon !== undefined && [
<span key={'weapon-using-label'}>{` ${t('using')} `}</span>,
<Link key={`weapon-using ${weapon.id}`} to={`/item/${weapon.normalizedName}`}>{weapon.name}</Link>
]}
<span>{` ${new Date(tag.Time).toLocaleString()}`}</span>
</span>
);
}
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 = (
<ItemImage
item={item}
imageField={imageOptions?.imageField || 'baseImageLink'}
linkToItem={imageOptions?.linkToItem}
count={countLabel}
/>
);
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 = (
<span>
<Link to={`/player/${tag.AccountId}`}>{tag.Nickname}</Link>
<span>{` ${t(tag.Status)} `}</span>
<Link to={`/player/${tag.KillerAccountId || tag.KillerName}`}>{tag.KillerName}</Link>
{weapon !== undefined && [
<span key={'weapon-using-label'}>{` ${t('using')} `}</span>,
<Link key={`weapon-using ${weapon.id}`} to={`/item/${weapon.normalizedName}`}>{weapon.name}</Link>
]}
<span>{` ${new Date(tag.Time).toLocaleString()}`}</span>
</span>
);
}
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 = (
<ItemImage
item={item}
imageField="baseImageLink"
linkToItem={false}
count={countLabel}
/>
);
contents.push((
<TreeItem key={`loadout-item-${loadoutItem._id}`} nodeId={loadoutItem._id} icon={itemImage} label={label}>
<TreeItem key={`loadout-item-${loadoutItem._id}`} nodeId={loadoutItem._id} icon={itemDisplay.image} label={itemDisplay.label}>
{getLoadoutContents(loadoutItem)}
</TreeItem>
));
return contents;
}, []);
}, [items, playerData, t]);
}, [playerData, getItemDisplay]);

const getLoadoutInSlot = useCallback((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 itemDisplay = getItemDisplay(loadoutItem);
if (itemDisplay) {
itemImage = itemDisplay.image;
}
else {
itemLabel = slot;
}
contents.push((
<TreeItem key={`loadout-item-${loadoutItem._id}`} nodeId={loadoutItem._id} icon={itemImage} label={itemLabel}>
{getLoadoutContents(loadoutItem)}
</TreeItem>
));

return <TreeView
defaultExpandIcon={<Icon path={mdiChevronDown} size={1.5} className="icon-with-text"/>}
defaultCollapseIcon={<Icon path={mdiChevronUp} size={1.5} className="icon-with-text"/>}
defaultParentIcon={<span>***</span>}
>
{contents}
</TreeView>
}, [playerData, getItemDisplay, getLoadoutContents]);

return [
<SEO
Expand All @@ -515,7 +568,7 @@ function Player() {
{profileError && (
<p>{profileError}</p>
)}
{playerData.info.registrationDate && (
{playerData.info.registrationDate !== 0 && (
<p>{`${t('Started current wipe')}: ${new Date(playerData.info.registrationDate * 1000).toLocaleString()}`}</p>
)}
{playerData.info.bannedState && (
Expand Down Expand Up @@ -550,26 +603,53 @@ function Player() {
/>
: <p>{t('None')}</p>}
<h2><Icon path={mdiBagPersonal} size={1.5} className="icon-with-text"/>{t('Loadout')}</h2>
{playerData?.equipment?.Id !== undefined && (
<TreeView
defaultExpandIcon={<Icon path={mdiChevronDown} size={1.5} className="icon-with-text"/>}
defaultCollapseIcon={<Icon path={mdiChevronUp} size={1.5} className="icon-with-text"/>}
defaultParentIcon={<span>***</span>}
>
{getLoadoutContents(playerData.equipment.Items.find(i => i._id === playerData.equipment.Id))}
</TreeView>
)}
<h2><Icon path={mdiArmFlex} size={1.5} className="icon-with-text"/>{t('Skills')}</h2>
{playerData.skills?.Common?.length > 0 && (
<div className="inventory">
<div className="grid-container main">
<div className="earpiece">{getLoadoutInSlot('Earpiece')}</div>
<div className="headwear">{getLoadoutInSlot('Headwear')}</div>
<div className="face_cover">{getLoadoutInSlot('FaceCover')}</div>
<div className="armband">{getLoadoutInSlot('ArmBand')}</div>
<div className="body_armor">{getLoadoutInSlot('ArmorVest')}</div>
<div className="eyewear">{getLoadoutInSlot('Eyewear')}</div>
<div className="weapon on_sling">{getLoadoutInSlot('FirstPrimaryWeapon')}</div>
<div className="holster">{getLoadoutInSlot('SecondaryWeapon')}</div>
<div className="weapon on_back">{getLoadoutInSlot('SecondPrimaryWeapon')}</div>
<div className="sheath">{getLoadoutInSlot('Scabbard')}</div>
</div>
<div className="grid-container side">
<div className="tactical_rig">{getLoadoutInSlot('TacticalVest')}</div>
<div className="pockets_and_special_slots">{getLoadoutInSlot('Pockets')}</div>
<div className="backpack">{getLoadoutInSlot('Backpack')}</div>
<div className="pouch">{getLoadoutInSlot('SecuredContainer')}</div>
</div>
</div>
{playerData?.favoriteItems?.length > 0 && ([
<h2 key="favorite-items-title"><Icon path={mdiTrophyAward} size={1.5} className="icon-with-text"/>{t('Favorite Items')}</h2>,
<ul key="favorite-items-content" className="favorite-item-list">
{playerData.favoriteItems.map(itemData => {
const imageDisplay = getItemDisplay(itemData, {linkToItem: true});
if (!imageDisplay) {
return false;
}
return (
<li key={itemData._id}>
{imageDisplay.image}
</li>
);
}).filter(Boolean)}
</ul>
])}
{playerData.skills?.Common?.length > 0 && ([
<h2 key="skills-title"><Icon path={mdiArmFlex} size={1.5} className="icon-with-text"/>{t('Skills')}</h2>,
<DataTable
key="skills-table"
columns={skillsColumns}
data={skillsData}
/>
)}
<h2><Icon path={mdiStarBox} size={1.5} className="icon-with-text"/>{t('Mastering')}</h2>
{playerData.skills?.Mastering?.length > 0 && (
<ul>
/>,
])}
{playerData.skills?.Mastering?.length > 0 && ([
<h2 key="mastering-title"><Icon path={mdiStarBox} size={1.5} className="icon-with-text"/>{t('Mastering')}</h2>,
<ul key="mastering-list">
{playerData.skills.Mastering.map(skillData => {
if (skillData.Progress <= 1) {
return false;
Expand All @@ -579,7 +659,7 @@ function Player() {
);
}).filter(Boolean)}
</ul>
)}
])}
</div>
</div>,
];
Expand Down

0 comments on commit 5ee4f48

Please sign in to comment.