Hero
Character Creation
Lobby Page
Character Info
Store Page
Lobby Page
Pary Creation Form
Battle Session

Introduction

Blessings come from curses. Bear this in mind. Be with your creed.

One day, a grand mansion appeared out of nowhere—the residence of the enigmatic Lady Lobelia. In this place, you must fight off enemies, survive, and unravel its mysteries. With the blessings of four guardian flowers by your side, endure the intoxicating scent of roses and the lingering smell of blood as you strive to survive in this eerie mansion.

Background

Do you enjoy Dungeons & Dragons? Personally, I've never had the chance to play it myself, but I've spent plenty of time enjoying Table-Top Role Playing Games (TTRPGs) using systems like Call of Cthulhu. For people like me, who love creating original characters, it's not uncommon to dream of designing a custom set of rules to run their own unique games, beyond established systems like Dungeons & Dragons or Call of Cthulhu. I've always been one of those dreamers.

Everyone has different schedules and skill levels when it comes to playing games. However, simply creating and role-playing original characters together doesn't have to be complicated. Instead of arranging a full-on game session, players can role-play casually through a Mastodon server by creating accounts for their characters. Then, when time permits, the actual gameplay—like battling monsters—can take place through a dedicated website. This concept merges a social media platform with a web-based game, creating an online game community that blends both worlds seamlessly.

The Mansion of Lobellia is an idea that I've been mulling over for quite some time, thinking about both its story and system. This is the first time I've had the chance to build a prototype, and it feels surreal. If I had discovered this hackathon in November instead of December 20th, I could've delivered a project of even higher quality. It's a bit of a bittersweet feeling.

Game Concept and Mechanics

Story

The head of the house, Lobellia, abandoned her humanity and became a monster for the revival of her family. She is waiting for the characters on the 5th floor. Your goal is to clear the monsters starting from the 1st floor, defeat the "Guardians" who protect each floor, and eventually reach the 5th floor to defeat Lobellia. The reason the characters share this common goal of defeating Lobellia is that rumors say if she is defeated, the mysterious mansion will grant one wish. What that wish will be is up to you.

Character Creation

The game genre is a turn-based RPG. Players can create one character and choose one of the four flower blessings to shape their character. The blessing chosen will affect the number of available skills and slightly alter the character's stat modifications.

Seven Stats

Attack: Represents the character's attack power. A higher stat means greater damage dealt to opponents.
Defense: Represents the character's defense (%). A higher stat reduces the damage received.
HP: Represents the character's health points. A higher stat increases the maximum HP.
Cost: Represents the character's resource for using skills.
Crit: Represents the critical hit chance. A higher stat increases the probability of landing a critical hit.
Dodge: Represents the dodge chance. A higher stat increases the likelihood of evading enemy attacks.
Speed: Represents the character's speed. A higher stat ensures the character takes their action first.

Blessings

Blessing of Gladiolus

Strength and Pride

Those blessed by Gladiolus possess great physical strength and a distinct sense of self-esteem. They tend to pursue enjoyment above all else. Characters with this blessing receive additional bonuses to HP and Defense but incur penalties to Attack and Dodge.

Blessing of Saintpaulia

Knowledge and Loyalty

Those blessed by Saintpaulia love to acquire knowledge and are highly curious. They tend to pursue order in the end. Characters with this blessing receive additional bonuses to HP and Cost but incur penalties to Attack and Crit.

Blessing of Cypress

Death and Sorrow

Those blessed by Cypress are deeply empathetic and composed. They tend to pursue destruction in the end. Characters with this blessing receive additional bonuses to Crit and Attack but incur penalties to HP and Cost.

Blessing of Blackthorn

Freedom and Adventure

Those blessed by Blackthorn are capricious yet highly adaptable to their environment. They tend to pursue freedom above all else. Characters with this blessing receive additional bonuses to Dodge and Cost but incur penalties to Defense and Crit.

Features

Once you create a character, you can choose a dungeon to create a room, purchase items from the shop, or modify your character's information.

Battle Mechanism

Once a dungeon party is created, an invitation code can be shared to allow others to join the battle. Upon entering the lobby, enemies are randomly generated. The turn order is determined based on the speed attributes of the characters and enemies. The game ends only when all enemies or all characters are defeated.

Technical Implementation

Tech Stack

Web Framework: Next.js (React) for server-side rendered applications with fast development
State Management: Zustand for simple state management
Authentication: AWS Cognito to verify the user with email
Data Fetching: Combination of React Query and Next.js API Routes for efficient data fetching
Database: Supabase (PostgreSQL) with Prisma ORM for real-time data subscription
Styling: Tailwind CSS and shadcn/ui components for reusable components to empower the user experience
AI Integration: OpenAI and AWS Lambda function with AWS API Gateway to get the AI response appropriately
Image Store: AWS S3 Bucket to store the image on the cloud with no limitation
Coding AI Assistant Tool: AWS Q Developer

Development Journey

First Try

The project began as a successor to Litania, a similar web-based game developed over six months using Firebase and Next.js. For The Mansion of Lobellia, we chose to challenge ourselves by using entirely new technologies and implementing improvements to the gameplay mechanics.

The initial plan to use AWS Amplify Studio with DynamoDB had to be abandoned due to limitations with custom data structure arrays, leading to a complete restart after two days of development.

Database Implementation

We opted for Supabase over Firebase, which was a first-time experience. This project revealed that for real-time web games with complex mechanisms, NoSQL databases might be more efficient than SQL-based solutions. AWS Q Developer proved invaluable in resolving SQL-related issues, particularly with RLS Policy problems.

Authentication/Authorization

AWS Cognito implementation presented challenges, particularly with the getCurrentUser function for protected routes in Next.js. The solution was found in an edge case documented in the Amplify Docs. The email verification process was a particularly proud achievement.

Image Upload API

The project utilizes S3 Bucket for image storage, a more efficient solution compared to server-side storage. AWS Q Developer's assistance made this implementation straightforward.

AI Monster Behavior

A key feature is the AI-controlled monster behavior, implemented using AWS Lambda functions and API Gateway. The system combines enemy entities and character data into a BattleState type, which OpenAI uses to determine enemy actions. A major challenge was ensuring single execution of the Lambda function, resolved by implementing a hostId field in the BattleRoom schema.

Development Timeline and AWS Q Developer Impact

The project was completed in approximately three weeks, despite team members' limited availability and the use of unfamiliar technologies. This represents an 85% reduction in development time compared to the similar Litania project. While AWS Q Developer occasionally provided incorrect information, it significantly accelerated the implementation of standard AWS features.

Resources and Credits

Vector Images: nounproject
Pixel art images: DALL-E AI
Other images: Imgyeong Lee

Contributors

Imgyeong Lee
Hla Htun

Conclusion

This hackathon provided valuable insights into efficient tech stacks for complex web game mechanisms and effective data design. The experience with AWS Cognito and Lambda functions was particularly valuable. The project continues to be developed, with plans for refinement and new features, targeting a launch around June-July.

Due to the use of OpenAI, public deployment isn't planned, but the project remains available for local environment testing through the GitHub repository.