Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #1000 Responsive design changes and element overhaul to Player Loadout in tarkov.dev/players/* pages #1002

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

Issue #1000 Responsive design changes and element overhaul to Player Loadout in tarkov.dev/players/* pages #1002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4c17f7b
Commented out CF Tunrstile and added profile json for testing
Applefrittr Oct 25, 2024
5af5705
added 'inspectImageLink' field to fetched item data
Applefrittr Oct 26, 2024
ba3ce20
useResponsiveScaling created to scale imgs passed from Player page
Applefrittr Oct 26, 2024
90d4a9e
refactor of Loudout element in Player page
Applefrittr Oct 26, 2024
e72dad3
fixed scaling issue in item-image component when rending louout imgs
Applefrittr Oct 27, 2024
2538dd0
slot labels added in Player page, styling adjustments
Applefrittr Oct 27, 2024
4b2a994
render bug fixed for Favorite Items element in Player page
Applefrittr Oct 27, 2024
3266fd7
test profile with favorite items loaded into issue#1000 folder
Applefrittr Oct 27, 2024
4692efd
comment cleanup from issue #1000 first round
Applefrittr Oct 27, 2024
9e20e10
Merge pull request #1001 from Applefrittr/main
Razzmatazzz Oct 28, 2024
f698b36
revert testing comments
Razzmatazzz Oct 28, 2024
07406b5
tweaks
Razzmatazzz Nov 8, 2024
a765ee7
show total playtime hours instead of days
Razzmatazzz Nov 8, 2024
5e1590d
scale loadout images
Razzmatazzz Nov 11, 2024
5dc0c4d
keep image text size
Razzmatazzz Nov 11, 2024
b723ec9
Merge branch 'main' into responsive-loadouts
Razzmatazzz Dec 12, 2024
3f764e3
Merge branch 'main' into responsive-loadouts
Razzmatazzz Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
345 changes: 236 additions & 109 deletions src/components/item-image/index.js
View file
Open in desktop

Large diffs are not rendered by default.

681 changes: 681 additions & 0 deletions src/data/test-profiles/empty.json
View file
Open in desktop

Large diffs are not rendered by default.

1,295 changes: 1,295 additions & 0 deletions src/data/test-profiles/full.json
View file
Open in desktop

Large diffs are not rendered by default.

1,034 changes: 1,034 additions & 0 deletions src/data/test-profiles/standard-armor-with-rig.json
View file
Open in desktop

Large diffs are not rendered by default.

931 changes: 931 additions & 0 deletions src/data/test-profiles/standard-armoredRig.json
View file
Open in desktop

Large diffs are not rendered by default.

1,068 changes: 1,068 additions & 0 deletions src/data/test-profiles/standard-with-favorites.json
View file
Open in desktop

Large diffs are not rendered by default.

94 changes: 54 additions & 40 deletions src/features/items/do-fetch-items.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import fetch from 'cross-fetch';
import fetch from 'cross-fetch';

import APIQuery from '../../modules/api-query.mjs';
import fleaMarketFee from '../../modules/flea-market-fee.mjs';
Expand All @@ -9,9 +9,9 @@ class ItemsQuery extends APIQuery {
}

async query(options) {
const { language, gameMode, prebuild} = options;
const { language, gameMode, prebuild } = options;
const itemLimit = 20000;
const QueryBody = offset => {
const QueryBody = (offset) => {
return `query TarkovDevItems {
items(lang: ${language}, gameMode: ${gameMode}, limit: ${itemLimit}, offset: ${offset}) {
id
Expand Down Expand Up @@ -42,6 +42,7 @@ class ItemsQuery extends APIQuery {
baseImageLink
image512pxLink
image8xLink
inspectImageLink
updated
sellFor {
...ItemPriceFragment
Expand Down Expand Up @@ -411,13 +412,19 @@ class ItemsQuery extends APIQuery {
if (itemBatch.data.items.length === 0) {
break;
}
retrievedItems.data.items = retrievedItems.data.items.concat(itemBatch.data.items);
retrievedItems.data.items = retrievedItems.data.items.concat(
itemBatch.data.items,
);
if (itemBatch.data.items.length < itemLimit) {
break;
}
}
if (!itemBatch.errors) {
if (!itemBatch.data || !itemBatch.data.items || !itemBatch.data.items.length) {
if (
!itemBatch.data ||
!itemBatch.data.items ||
!itemBatch.data.items.length
) {
break;
}
}
Expand All @@ -428,23 +435,27 @@ class ItemsQuery extends APIQuery {
}
resolve(retrievedItems);
}),
this.graphqlRequest(`{
this.graphqlRequest(
`{
fleaMarket {
sellOfferFeeRate
sellRequirementFeeRate
}
}`.replace(/\s{2,}/g, ' ')),
new Promise(resolve => {
}`.replace(/\s{2,}/g, ' '),
),
new Promise((resolve) => {
if (prebuild) {
return resolve({});
}
return resolve(fetch(`${process.env.PUBLIC_URL}/data/item-grids.min.json`).then(
(response) => response.json(),
)).catch(error => {
return resolve(
fetch(`${process.env.PUBLIC_URL}/data/item-grids.min.json`).then((response) =>
response.json(),
),
).catch((error) => {
console.log('Error retrieving item grids', error);
return {};
});
})
}),
]);
//console.timeEnd('items query');
if (itemData.errors) {
Expand All @@ -463,15 +474,12 @@ class ItemsQuery extends APIQuery {
}
console.log(`Error in items API query: ${error.message}`, error.path);
if (badItem) {
console.log(badItem)
console.log(badItem);
}
}
}
// only throw error if this is for prebuild or data wasn't returned
if (
prebuild || !itemData.data ||
!itemData.data.items || !itemData.data.items.length
) {
if (prebuild || !itemData.data || !itemData.data.items || !itemData.data.items.length) {
return Promise.reject(new Error(itemData.errors[0].message));
}
}
Expand All @@ -492,15 +500,12 @@ class ItemsQuery extends APIQuery {
}
console.log(`Error in items API query: ${error.message}`, error.path);
if (badItem) {
console.log(badItem)
console.log(badItem);
}
}
}
// only throw error if this is for prebuild or data wasn't returned
if (
prebuild || !miscData.data ||
!miscData.data.fleaMarket
) {
if (prebuild || !miscData.data || !miscData.data.fleaMarket) {
return Promise.reject(new Error(miscData.errors[0].message));
}
}
Expand All @@ -516,14 +521,15 @@ class ItemsQuery extends APIQuery {
let gridPockets = [];
if (itemGrids[rawItem.id]) {
gridPockets = itemGrids[rawItem.id];
}
else if (rawItem.properties.grids.length === 1) {
gridPockets = [{
row: 0,
col: 0,
width: rawItem.properties.grids[0].width,
height: rawItem.properties.grids[0].height,
}];
} else if (rawItem.properties.grids.length === 1) {
gridPockets = [
{
row: 0,
col: 0,
width: rawItem.properties.grids[0].width,
height: rawItem.properties.grids[0].height,
},
];
}

if (gridPockets.length > 1) {
Expand All @@ -533,12 +539,10 @@ class ItemsQuery extends APIQuery {
grid.width = Math.max(
...gridPockets.map((pocket) => pocket.col + pocket.width),
);
}
else if (rawItem.properties.grids.length >= 1) {
} else if (rawItem.properties.grids.length >= 1) {
grid.height = rawItem.properties.grids[0].height;
grid.width = rawItem.properties.grids[0].width;
}
else {
} else {
grid.height = rawItem.height;
grid.width = rawItem.width;
}
Expand All @@ -547,20 +551,30 @@ class ItemsQuery extends APIQuery {
rawItem.grid = grid;

rawItem.properties = {
...rawItem.properties
...rawItem.properties,
};

// calculate flea market fee
const fee = fleaMarketFee(rawItem.basePrice, rawItem.lastLowPrice, 1, flea.sellOfferFeeRate, flea.sellRequirementFeeRate);
const fee = fleaMarketFee(
rawItem.basePrice,
rawItem.lastLowPrice,
1,
flea.sellOfferFeeRate,
flea.sellRequirementFeeRate,
);
rawItem.fee = fee;

const container = rawItem.properties?.slots || rawItem.properties?.grids;
if (container) {
for (const slot of container) {
slot.filters.allowedCategories = slot.filters.allowedCategories.map(cat => cat.id);
slot.filters.allowedItems = slot.filters.allowedItems.map(it => it.id);
slot.filters.excludedCategories = slot.filters.excludedCategories.map(cat => cat.id);
slot.filters.excludedItems = slot.filters.excludedItems.map(it => it.id);
slot.filters.allowedCategories = slot.filters.allowedCategories.map(
(cat) => cat.id,
);
slot.filters.allowedItems = slot.filters.allowedItems.map((it) => it.id);
slot.filters.excludedCategories = slot.filters.excludedCategories.map(
(cat) => cat.id,
);
slot.filters.excludedItems = slot.filters.excludedItems.map((it) => it.id);
}
}

Expand Down
30 changes: 30 additions & 0 deletions src/hooks/useResponsiveScaling.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { useState, useEffect } from 'react';

const useResponsiveScaling = () => {
const [scaler, setScaler] = useState(1);
useEffect(() => {
const adjustScaler = () => {
const width = window.innerWidth;
/*if (width >= 1000) {
setScaler(1);
} else if (width <= 500) {
setScaler(2);
} else setScaler(1.5);*/
if (width >= 1000) {
setScaler(1);
} else {
setScaler(width / 1000);
}
};

adjustScaler();

window.addEventListener('resize', adjustScaler, false);
return () => {
window.removeEventListener('resize', adjustScaler);
};
}, []);
return scaler;
};

export default useResponsiveScaling;
97 changes: 88 additions & 9 deletions src/pages/player/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,82 @@
.css-53rj3a-MuiTreeItem-content {
justify-content: center;
}

.MuiTreeItem-iconContainer {
width: auto !important;
justify-content: normal !important;
margin-right: 0px !important;
align-self: center;
}

.MuiTreeItem-label {
width: auto !important;
font-size: 16px !important;
font-weight: bold !important;
word-wrap: break-word;
}

.inventory {
display: flow-root;
display: flex;
gap: 10px;
overflow-y: hidden;
overflow-x: scroll;
justify-content: center;
padding-bottom: 12px;
}

.grid-container {
display: grid;
float: left;
gap: 10px;
}

.grid-container.main {
grid-template-columns: auto auto auto;
grid-template-columns: repeat(3, minmax(280px, auto));
grid-template-rows: repeat(4, minmax(183px, auto));
}

.grid-container.side {
margin-left: 10px;
grid-template-columns: auto;
grid-template-columns: minmax(280px, auto);
grid-template-rows: minmax(183px, auto) 32px repeat(2, minmax(183px, auto));
align-self: flex-start;
}

.grid-container>div {
background-color: rgba(0, 0, 0, 0.4);
.grid-container > div {
background-color: rgba(0, 0, 0);
text-align: center;
font-size: 20px;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 24px, 96% 0);
font-size: 16px;
font-weight: bold;
}

.gear-slot-label {
background-image: linear-gradient(#474747, #000);
background-size: 101% 101%;
color: #fff;
padding: 0 0 5px 5px;
width: 100%;
text-align: left;
font-size: 16px;
font-weight: bold;
}

.weapon {
grid-column: 1 / span 2;
justify-items: center;
align-items: center;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 24px, 98% 0) !important;
}

.pockets_and_special_slots {
clip-path: none !important;
}

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

ul.favorite-item-list li {
Expand All @@ -51,7 +92,8 @@ ul.favorite-item-list li {
color: #ffe084;
}

.banned, .not-banned {
.banned,
.not-banned {
margin-left: 1em;
}

Expand All @@ -68,7 +110,7 @@ ul.favorite-item-list li {
}

.profile-button {
padding: .2rem;
padding: 0.2rem;
border-radius: 4px;
vertical-align: middle;
margin-left: 20px;
Expand All @@ -77,3 +119,40 @@ ul.favorite-item-list li {
.current-wipe-achievement {
font-weight: bold;
}

@media screen and (max-width: 1000px) {
.grid-container.main {
grid-template-columns: repeat(3, minmax(187.7px, auto));
grid-template-rows: repeat(4, minmax(122px, auto));
}

.grid-container.side {
grid-template-columns: minmax(187.7px, auto);
grid-template-rows: minmax(122px, auto) 32px repeat(2, minmax(122px, auto));
}

.inventory {
justify-content: flex-start;
}

.gear-slot-label {
padding-bottom: 1px;
font-size: 14px;
}
}

@media screen and (max-width: 500px) {
.grid-container.main {
grid-template-columns: repeat(3, minmax(140px, auto));
grid-template-rows: repeat(4, minmax(91.5px, auto));
}

.grid-container.side {
grid-template-columns: minmax(140px, auto);
grid-template-rows: minmax(91.5px, auto) 32px repeat(2, minmax(91.5px, auto));
}

.gear-slot-label {
font-size: 12px;
}
}
Loading
Loading