[Feature Request] Photo Reward Calculator

[Redforce04]

Since Phasmophobia now allows you to select/deselect evidence, I feel like adding extra features would help bring back use. I had an idea for a feature request that would add a page for photos rewards that would:

• Allow you to specify photos you already have ingame (type and rating).
• Inform you of your maximum possible reward remaining.
• Inform you of the photos that are needed to get the maximum reward.
• Inform you of how many points you currently have.

Here is the wiki page for photo rewards for reference.

Note: I personally haven't worked with react, but I do have experience with asp.net, js, and bootstrap. Thoughts?

[Redforce04]

Here is what is needed to add this:

• [x] Make new branch for testing and integration of this feature
• [x] Research photo rewards, and cost system
• [x] Add route for page
• [x] Make page and create the list system / UI
• [x] Add JS to make the list calculate current reward, maximum reward, and necessary photos for maximum reward

[Redforce04]

Long time, no see, but I am finally starting to put this feature together. I have a personal unmerged branch of this idea that functionally is starting to work.

Keep in mind that:

• I'm not a front end designer
• I'm not good at using react (I'm a dotnet - c# backend developer)
• My design looks bad and the code is probably very unoptimized

Despite that, I think any idea can be a good idea, with enough effort and community participation.

Here is the rough idea: @BotiKis @un0btanium what are your thoughts on this? I want to expand this cheatsheet to have more features and stand out.

I figure that y'all would be better at implementing the css and styling then me, but I gave an effort to make it semi-clean.

To Do:

• [x] Make a new branch and push the wip.
• [x] Make the rating system a 3 star system
• [x] Clean up and formalize styling with everything else.
• [x] Add reset button for all photos
• [x] Add total cost estimate
• [x] Make it persistent across pages (similar to the evidence selector)
• [x] Add custom logic (ghost photo can only happen once)

[Redforce04]

my changes are in my master branch found here: https://github.com/Redforce04/phasmophobia-cheatsheet

[Redforce04]

I just re-pushed it with the latest commits, so it won't give errors about being behind the master branch.

[Redforce04]

Working concept right now:

All I have left is getting cross-site data persistence, similar to the main evidence. Also minor clean up to styling and minor js optimizations.

https://user-images.githubusercontent.com/74625280/192939070-80fe2832-1a57-4a92-89c2-71be55576e7d.mp4

[Redforce04]

I have updated it so it is now persistent. I am gonna double check that my repo works properly after a fresh pull & build, then I will pr.

[Redforce04]

Tested and PR #23 made

[un0btanium]

Hey, very cool. Good job 👍 Btw, I am no (good) frontend developer either. These projects were also just playgrounds for me to get more familiar with it.

Small and quick UX improvement I noticed: Add a pointer cursor when hovering over a dropdown menu.

In terms of general UX improvements/design: I think avoiding dropdown menus would be the way to go. I am thinking about aligning the photos themselves in columns instead of rows (as in rotating the whole thing by 90 degrees), and then showing all options for the photo in a vertical list (each row one photo type). This way the user does not have to painstakingly open each dropdown menu and can instead directly click on the photo types. However, this might be tricky to get right on mobile.

And if you want to be really fancy: Is 10 photos the max amount? Or could it be more? What if we do this more dynamic: Initially it is just one (or three) dropdown menus presented and once those all have something selected another one is added automatically, allowing for infinite photos. Assuming the photo numbers itself is not important ingame/for the calculation. Like a specific (e.g. first) photo gives more money if it is a fingerprint (which imo would be silly but I dont play the game so Idk :D). If each photo is implemented as its own React component, then this should be easy to setup. This could also be combined with the improvement above. Whenever a new photo is filled the entire screen can simply show the next photo. A small back and forth button at the top to make changes, the total is always shown and the clear all button allows to reset everything anytime.