Phasmophobia Guide
The functional goal of this weekend project was to make it a little easier for my friends and I to figure out what ghost we are dealing with when we play Phasmophobia together.
But it also served as a good way to put into practice some things I have learned about Javascript and ReactJS!
The core concept of the app is quite simple. It stores an array of ghosts objects (where each ghost contains an array of evidence that identifies it) and an array of observed evidence. Each time the observed evidence changes, the app filters the ghost array to only show ghosts that match the selected evidence.
The filtering is done in two ways:
- Ghosts must include all selected evidence
- Ghosts must not include any rejected evidence
When all this is put together, the app allows users to select the evidence they observe in the game and quickly see which ghosts may be haunting the house.
I later also added an option to keep data in sync between various people 🙌
That works by reading and writing the state data to a PocketBase backend and subscribing for updates. When you make a change, you append the new state to the DB. This then triggers an event that every other player (in the same room) receives and then gets applied to their local state.
It works pretty well for this project!
The source code is hosted on GitLab and deployed to Cloudflare.