Shlagémon
Shlagémon drops the player into a delirious universe filled with utterly absurd creatures to capture, battle and evolve in order to complete the Shlagedex and become the ultimate trainer. Built with Vue 3, Vite and TypeScript, the project relies on Pinia with persistence for state management, attributify UnoCSS for a mobile-first design, and an interactive Leaflet map to explore the world. The app is installable as a PWA, works offline, and bundles several mini-games (Tic Tac Toe, Battleship, Connect Four, Mastermind, Memory, Sliding Puzzle) as extra ways to earn Shlagidolars.
Project Links
Key points
Turn-based battles and type effectiveness
Every creature belongs to one or more improbable types that determine attack effectiveness in battle. Capture odds depend on the enemy's remaining health and level, encouraging players to smartly weaken a Shlagémon before attempting to catch it.
An interactive map to explore
A map built with Leaflet lets players navigate between the different zones and villages of the Shlagémon world. Each area hosts specific creatures, a shop, a dojo and mini-games, encouraging exploration to complete the collection.
The Shlagedex, a collection that evolves
Every captured creature is logged in the Shlagedex with its stats (health, attack, defense, stench) and its absurd description. Some creatures can evolve past a given level, adding a progression layer to the collection.
Challenges
Designing a balanced capture and battle system (type effectiveness, capture odds tied to remaining health) while keeping the interface readable and fun on both mobile and desktop.
Structuring a large-scale Vue 3 project (170+ creatures, several mini-games, interactive map, PWA, i18n) while keeping a clean Pinia architecture and smooth performance.