wirm/Web

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)

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 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)