The Pen and the Monster

Inspiration

We were inspired by the creativity and imagination of childhood drawings, combined with the timeless appeal of monster-collecting games like Pokémon. We wanted to create a platform where players could bring their hand-drawn creatures to life, giving them real stats, backstories, and collectible value through blockchain technology. The idea was to merge artistic expression with gaming mechanics and NFT ownership.

What it does

Drawing Monster Game is a React/Next.js web application that transforms player drawings into fully-realized battle monsters. Players sketch their creature on a digital canvas, and our system generates comprehensive stats (attack, defense, speed), a unique backstory, and an AI-enhanced version of their artwork. These monsters are then minted as NFTs on the Solana blockchain, giving players true ownership. The game features a turn-based battle system where players can fight with their custom monsters using type advantages (Fairy, Fight, and Fright types) and various moves with different energy costs and attack patterns.

How we built it

We built the frontend using React and Next.js with TypeScript for type safety. The drawing interface captures user sketches and processes them through AI image enhancement. We integrated Gemini's API to generate unique monster stats and compelling backstories based on the drawings. For data persistence, we used Supabase as our backend database to store battle data, monster stats, and move sets. The NFT functionality was implemented using Solana's blockchain API to mint and manage ownership of the generated monsters. The battle system features real-time health tracking, turn-based combat with speed calculations, and type advantage mechanics similar to classic monster-collecting games.

Challenges we ran into

One of our biggest challenges was managing asynchronous state updates in React during the battle system - we initially struggled with checking health values immediately after state updates, which caused the death detection to fail. We also faced complexities in balancing the damage calculation formula to ensure fair and engaging battles. Integrating multiple APIs (AI image generation, story generation, and Solana NFT minting) while maintaining smooth user experience was technically demanding. Additionally, designing an intuitive UI that worked across different screen sizes while displaying complex battle information required multiple iterations.

Accomplishments that we're proud of

We're incredibly proud of creating a complete end-to-end experience from drawing to battling. The seamless integration of AI-enhanced artwork with procedurally generated stats creates truly unique monsters every time. Successfully implementing NFT minting on Solana gives players real ownership of their creations. The battle system with type advantages, energy management, and speed-based turn order creates engaging strategic gameplay. We're also proud of the clean, responsive UI that makes the complex battle mechanics easy to understand and interact with.

What we learned

We learned valuable lessons about React state management, particularly around asynchronous updates and how to properly handle derived state calculations. Working with blockchain APIs taught us about transaction handling and wallet integration. We gained experience in AI integration, learning how to craft effective prompts for consistent monster generation. The project also taught us about game balance and how small changes in damage multipliers can dramatically affect gameplay. Most importantly, we learned how to integrate multiple complex technologies into a cohesive, user-friendly experience.

Built With

• gemini
• nextjs
• solana