play-journal

• 

• 

• 

Inspiration

Today, we know that the benefits of journaling are huge, helping us to reduce stress and anxiety by processing our emotions. Despite this, most people don't find the time to sit down and write a journal entry each day. Blank pages can feel intimidating, and the routine of writing can quickly start to feel like a chore rather than a rewarding habit.

We wanted to fix this and make it easier for everyone to start and maintain their own journal.

By gamifying the reflection process, we transform the daily journaling habit from a passive text entry into a creative, rewarding event.

Whether you had a highly productive day (penned as defeating enemies and clearing levels), a stressful day (represented by challenging obstacle layouts), or a relaxed day (collecting rare loot to a soothing soundtrack), the application translates your emotions and logs directly into gameplay elements. This instant feedback loop gives users a powerful, interactive incentive to write, reflect, and play every single day.

What it does

When you write in a journal entry, you begin by freely detailing your day's experiences, accomplishments, and emotions. Rather than leaving these thoughts static, our pipeline processes your text to decode the mood and themes of your log. It translates your day into custom gameplay configurations, configuring visual tints, character speeds, and level objectives that mirror your emotional state.

This system aims to preload themed pixel-art assets, weapons, and collectible items from a cloud database to match the subject of your entry. It then generates a unique, playable 2D level inside the Phaser game engine, making journaling much more memorable.

Your journal functions as an interactive chronicle. To reflect on your progress over a week or a month, you can flip back through the virtual pages of your book. Every page remains permanently preserved, allowing you to read your past entries and reexperience the exact game level generated for that day, giving you a tangible way to play through and relive your history.

How we built it

Frontend: React using Next.js

Chosen because of its intuitive design and because of our familiarity with it.

Game Engine: Phaser

We wanted a game engine specifically for making web-based games. Phaser turns our game code written in TypeScript into an element we can place in a webpage. As we wanted to be able to represent a huge number of enemies, we have used an ambitious data-driven design, implementing a number of systems which ensure we can make a range of enemies using only JSON.

Backend: FastAPI

The backend uses Google Gemini's API to perform semantic analysis on the user's entry and returns a set of features for the game engine to use in a standardised JSON format.

Database: Supabase

Supabase handles lots of the setup for us, so we can focus on other aspects of the project. Our database holds a number of assets, which are downloaded to the client only upon use. It also stores persistent data for users, and handles account authentication.

Challenges we ran into

Deciding on a JSON schema that was a good balance between allowing us to diversify the game and being easy for the game engine to handle and make a good game out of was difficult. We cut out a lot of unnecessary fields in the end and focused on making a smaller number of polished fletched-out features.

As we had so many assets, we couldn't download them to the users' computer or load them all into the game at the start, so we changed our design to decide on the assets before the level was generated and fetch only the sprites required for the task from the supabase object storage.

Accomplishments that we're proud of

We are particularly proud of engineering a seamless transition between unstructured natural language and interactive game mechanics.

We are also proud of the frontend user experience, specifically the virtual book interface. Creating the transitions using Framer Motion transforms was really fun.

What we learned

We learned Phaser for this project and learned to work to an agreed schema for passing data between parts we were working on. We also learned how long it takes to develop some parts of the project, especially a robust and efficient pipeline that sanitises assets from the internet to match the strict criteria of Phaser's animation engine.

What's next for play-journal

Adding more persistent features, such as remembering reoccurring characters (giving them the same attributes if they appear again), and expanding our configuration system to include different game structures/architectures, not just features and assets.

Built With

• fastapi
• nextjs
• phaser.js
• react
• supabase
• typescript
• vite