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

[Applefrittr]

Responsive Design and UI overhaul to Player loadouts in tarkov.dev/players/* Issue #1000

Targeted changes to provide a better user experience, especially on phone.

Description 🗒️

Refer to Issue #1000. The original loadout element caused page layout concerns, especially on smaller screens. Overflow issues fixed and overall look of the element was changed dramatically to give the look and feel of the in game character screen.

KEY CHANGES

1. A new data field was added to fetched items from the API - 'inspectImageLink' (file: src/features/items/do-fetch-items.mjs)
2. A new React hook was added to the hooks dir - 'useResponsiveScaling.jsx'. This hook works in conjunction with components/item-image/index.js to scale up/down images passed from pages/player/index.js based on screen size - RESPONSIVE 😃
3. CSS media queries added to pages/player/index.css to match screen breakpoints set up in useResponsiveScaling.jsx. Grid layout overhaul.
4. IMPORTANT!!!!!!!!!! I commented out the CloudFlare turnstile component, import statement, and the call to fetchProfile() is useEffect() in src/pages/player/index.js for ease of development. The CF turnstile prevents anything from happening on the page unless the capcha is passed. Unfortunately a request from localhost doesn't cut it 🫤 These changes NEED to be reversed before merge!!!!!! I left comments tagged with issue#1000 in the file itself to locate the changes easily.
5. In order to get a profile loaded into my local environment for testing, I saved a few dummy profiles from the live site and used the LoadProfile feature on the tarkov.dev/players/* page. Those json files are located in src/pages/player/saved-profiles-issue#1000. Since there is no way (not that I found) to navigate to a unique tarkov.dev/players/* page, just type it in directly to the address bar, example: tarkov.dev/palyers/regular/1. This will bring up the unique player page with nothing loaded yet. Simply click the Load Profile button and pick a file from the added directory. Delete saved profiles directory before merge!
6. My linter/Prettier kind of went crazy on the files I worked on, bloating the changes; I'm unsure if that is standard or not. Still learning 😄

Examples 📸

Related Issues 🔗

I explored the site after my changes in my local environment and did not notice any changes to other image elements across the site 🤞

First PR, be gentle 😃

---

Expand for Help

• Have questions about the review or deployment process? View our contributing docs
• Need additional help and want to chat in real time? Join our community Discord

By submitting this pull request, you agree to our code of conduct