Skip to content

Commit

Permalink
Merge pull request #1001 from Applefrittr/main
Browse files Browse the repository at this point in the history 
Issue #1000 Responsive design changes and element overhaul to Player Loadout in tarkov.dev/players/* pages
  • Loading branch information
@Razzmatazzz
Razzmatazzz authored Oct 28, 2024
2 parents 7e60084 + 4692efd commit 9e20e10
Show file tree
Hide file tree
Showing 10 changed files with 5,878 additions and 516 deletions.
320 changes: 215 additions & 105 deletions src/components/item-image/index.js
View file

Large diffs are not rendered by default.

94 changes: 54 additions & 40 deletions src/features/items/do-fetch-items.mjs
View file
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
25 changes: 25 additions & 0 deletions src/hooks/useResponsiveScaling.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
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);
};

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
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

0 comments on commit 9e20e10

Please sign in to comment.