Hanh Trinh Duc Tin for Doan Don Bosco Virtual Camp 2021
A story-guided virtual tour of Vietnam
Your mysterious long-lost uncle shows up and challenges you to find the family treasure. As you follow him and look for clues you are led on a journey to various destinations in Vietnam (Hanoi, Sapa, Ha Long, Hue, Saigon).
Along the way there are various puzzles and team activities. Some activities are done in the app, some involve materials that were went to each person before camp, and some are live with a Huynh Truong (in the camp Discord server).
- Built using Nextjs
- Styling: Chakra UI
- Hosting: Vercel
Clone the repo
git clone https://github.com/leetosc/virtual-htdt.gitInstall dependencies
yarn installRun dev server
yarn devOpen http://localhost:3000 in your browser.
See /src/pages/samples for sample pages
- type
I am a Huynh Truongin the notes to see answers and skip videos - assets (images, sound, etc) are in
/publicdirectory - User notes, locations visited, and inventory are stored in localStorage
- to clear, use Huynh Truong mode or by starting journey over from first page
- see
/htdt/41-kitchenfor an example of drag and drop. Getting drag and drop to work correctly (including working for both mouse and touch) was nontrivial.- to test, go to the page, then fill inventory in HT mode, then refresh the page
- Changing pages uses
next/routertopushroutes instead of links to hide the url of the next when user hovers button - A few of the pages make some calls to a small backend server running on a Raspberry Pi at my house
Future ideas
- More inventory interaction
- Currency, buying items
- Get rewards for completing activities
- Pop/surprise quizzes
- More dependencies based on locations visited
- Side quests
- Save and resume progress
- Make the phone modal into an interactive global component
- can be used like a pokedex, to call for hints, etc
- Multiple storyline options?
- might be better to have separate instance of the site