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

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

@@ -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';
@@ -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
@@ -42,6 +42,7 @@ class ItemsQuery extends APIQuery {
                     baseImageLink
                     image512pxLink
                     image8xLink
+                    inspectImageLink      
                     updated
                     sellFor {
                         ...ItemPriceFragment
@@ -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;
                         }
                     }
@@ -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) {
@@ -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));
             }
         }
@@ -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));
             }
         }
@@ -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) {
@@ -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;
                 }
@@ -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);
                 }
             }
 

src/hooks/useResponsiveScaling.jsx

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

src/pages/player/index.css

@@ -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 {
@@ -51,7 +92,8 @@ ul.favorite-item-list li {
     color: #ffe084;
 }
 
-.banned, .not-banned {
+.banned,
+.not-banned {
     margin-left: 1em;
 }
 
@@ -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;
@@ -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;
+    }
+}