130 lines
4.7 KiB
Markdown
130 lines
4.7 KiB
Markdown
# The 'Echoes Behind Closed Doors' Website (and Game Backend Documentation)
|
||
|
||
for the Developing Dyamic Applications module as part of the Year 2.2
|
||
Integrated Project for Ngee Ann Polytechnic's Diploma in Immersive Media
|
||
|
||
## Game, Stack, and Data Model
|
||
|
||
### Gameplay
|
||
|
||
the game is a vr experience not too dissimilar to storytelling-heavy
|
||
experiences like visual novels but with a few gameplay mechanics, making it
|
||
similar to games like Firewatch
|
||
|
||
current storyline/gameplay description:
|
||
|
||
> A teen is experiencing a spiral of mental health challenges exacerbated by
|
||
> domestic violence. Players navigate their world through simple, interactive
|
||
> daily tasks, which slowly reveal the layers of the teen’s struggles. The
|
||
> narrative emphasizes realism, empathy, and awareness.
|
||
|
||
### Stack and Usage
|
||
|
||
##### Stack
|
||
|
||
- **Firebase Auth:** for authentication
|
||
- **Firebase Realtime Database:** for player data
|
||
- **Firebase Hosting:** for hosting the website
|
||
- **Supabase Storage:** for storing the recorded messages
|
||
|
||
##### Usage Flow
|
||
|
||
because we also are presenting this via a booth-based viva voce demonstration,
|
||
we are pretending as if we are the partner Ngee Ann companies that will
|
||
presumably be at the booth, and as such this website is more for the booth
|
||
runners than the players themselves
|
||
|
||
TODO
|
||
|
||
1. **Booth Laptop:** show a registration qr code (firebase hosting)
|
||
2. **Players Personal Device:** make an account (firebase auth)
|
||
3. **Players Personal Device:** post-sign up, they are innocently asked to
|
||
"record a message for someone with mental health struggles"
|
||
(stored via supabase storage)
|
||
4. **Booth Laptop:** booth runner via a dashboard sets the user as the
|
||
"currently playing user" (firebase realtime database)
|
||
5. **Meta Quest:** player plays the game, the game using the UID of the
|
||
"currently playing user" to record the players choices
|
||
(firebase realtime database)
|
||
6. **Meta Quest:** at the crux of the game, the call from the player's 'friend' is
|
||
actually the recorded message from the booth laptop
|
||
1. fetch url from firebase realtime database
|
||
2. download from supabase storage
|
||
3. play in-game via unity
|
||
7. **Meta Quest:** finish game, ending is recorded in firebase realtime database
|
||
8. **Booth Laptop/Players Personal Device:** can see the player's choices and ending via their profile page
|
||
- players can send their profile page to their friends to show if they want to,
|
||
i'll probably this via url parameters (e.g. `profile.html?uid=...`) like the
|
||
last group project i was in because we're not using any fancy frontend
|
||
frameworks (firebase hosting)
|
||
9. **Booth Laptop:** via the same dashboard is able to see:
|
||
- the current players' real-time progress
|
||
- all past players
|
||
- their emails
|
||
- and profile pages
|
||
- maybe some global statistics if there's time
|
||
|
||
### Data Model
|
||
|
||
(for firebase realtime database)
|
||
|
||
```text
|
||
currentUser: <uid>
|
||
plays
|
||
└── <playId>
|
||
├── uid: <uid>
|
||
├── day1
|
||
│ ├── brushTeeth: true
|
||
│ └── ...
|
||
├── day2
|
||
│ └── ...
|
||
└── finalday
|
||
├── acceptCall: true
|
||
└── ...
|
||
user
|
||
└── <userid>/
|
||
└── callUrl: <supabase storage link>
|
||
```
|
||
|
||
## Development Setup
|
||
|
||
### Local Development Setup
|
||
|
||
[bun](https://bun.sh/) is used as the package manager and bundler for this project,
|
||
but npm can be used as well for tailwindcss
|
||
|
||
**note:** firebase-tools does not work well with bun,
|
||
so you will need to use npm for that
|
||
|
||
everything you need to do is available as a script in the `package.json` file
|
||
|
||
use `bun run ...` or `npm run ...` to run the scripts
|
||
|
||
| script | description | bun | npm |
|
||
|--------|-------------|-----|-----|
|
||
| `css` | build css from tailwind | ✅ | ✅ |
|
||
| `build` | buiild css and bundle the website | ✅ | ❌ |
|
||
| `dev-css` | build css and watch | ✅ | ✅ |
|
||
| `dev-build` | bundle and watch (this does not watch build css on filesystem change, please run `dev-css` separately) | ✅ | ❌ |
|
||
| `deploy-live` | deploy to firebase hosting | ✅ | ✅ |
|
||
| `deploy-staging` | deploy to firebase hosting on a staging channel | ✅ | ✅ |
|
||
| `deploy` | `build` + `deploy-live` | ✅ | ❌ |
|
||
|
||
### Cloud Development Setup
|
||
|
||
- Firebase Project
|
||
- Authentication
|
||
- Email/Password Provider
|
||
- Email/Password: enabled
|
||
- Email link (passwordless sign-in): enabled
|
||
- Realtime Database
|
||
- Security Rules: (TODO; if i have time to define them before submission)
|
||
- Hosting \
|
||
(not strictly necessary)
|
||
|
||
- Supabase Project
|
||
- Storage
|
||
- Bucket
|
||
- named it `telephonies` but like i don't think it matters
|
||
- Enable connection via S3 protocol: enabled (TODO; might not even use this way of uploading)
|
||
- Policies: (TODO; if i have time to define them before submission)
|