MAYHEM: A Monster-Collecting Battle Game built with AdaL and Cloudinary ⚔️

Create your legend. Collect the extraordinary. Fight for glory.

What if you could upload an image, turn it into a collectible monster, build a squad of three, and take it into a turn-based battle?

That idea became MAYHEM — Monster Fighting Arena, an open-source browser game where you collect creatures, create your own fighters from images, and battle rival tamers in a dark-fantasy world.

I built MAYHEM using AdaL, an AI-assisted development workflow, and integrated Cloudinary to handle monster artwork uploads, image transformations, optimized delivery, and shareable collectible cards. Here’s a look at the project, the technology behind it, and what you can explore in the game.

🎮 What is MAYHEM?

MAYHEM is a browser-based monster-collecting and turn-based battle game. It runs on desktop, tablet, and mobile without requiring installation or an account. The core idea is simple:

• Collect: Discover monsters across six elemental types and four rarity tiers.
• Create: Upload an image and transform it into a custom monster.
• Build: Assemble a team of three monsters.
• Battle: Fight opponents using attacks, special abilities, defensive moves, items, and team switching.
• Progress: Earn coins and XP, unlock new species, complete quests, and improve your monsters.

The game combines collectible-card mechanics with RPG-style progression and turn-based combat.

✨ Explore the game

1. Discover: Enter the arena

The home screen introduces the world of MAYHEM through a cinematic fantasy scene, animated effects, featured discoveries, daily rewards, and progression information.

The interface uses a dark purple atmosphere, glowing accents, and fiery orange calls to action to create an arcade-inspired fantasy experience.

2. Collection: Build your bestiary

Every monster has its own identity, elemental type, rarity, stats, and special ability.

The collection includes four rarity tiers:

• Common
• Rare
• Epic
• Legendary

You can search for monsters, filter by element or rarity, sort your collection, and mark favourites. Higher rarity cards can feature foil and holographic-style finishes.

3. Create Your Monster: Turn images into fighters

This is one of my favourite parts of the project.

Instead of choosing only from predefined creatures, players can upload an image, drag and drop a file, paste an image, or use bundled sample artwork. They can then customize the monster's name, element, and rarity, choose a battle style, and preview its collectible card before creating it. The creation studio also includes generated stats, special abilities, and a full-screen reveal when a new monster is born.

4. Battle Arena: Strategy matters

Players select a squad of three monsters and face rival tamers in turn-based battles.

Available actions include:

• Attack: Deal damage to the opponent.
• Special: Use a powerful monster ability.
• Defend: Reduce incoming damage and gain defensive benefits.
• Switch: Change the active monster.
• Items: Use available battle items.

Combat also includes elemental matchups, speed-based turn order, critical hits, status effects, shields, and buffs. The arena has three difficulty tiers, each with its own setting: Verdant Ruins, Stormspire Citadel, and Infernal Throne.

5. Progression and Shop: Keep getting stronger

Battles and quests feed into the game's progression system. Players earn XP and coins, level up their summoner, unlock additional monster species, purchase stat boosts, learn skills, and acquire battle items. Achievements, collection milestones, daily quests, and login streaks provide more goals beyond simply winning fights.

🤖 Building with AdaL

MAYHEM was designed and developed with AdaL, an AI-assisted development workflow. AdaL helped with several parts of the project, including game design, UI and UX, the battle engine, procedural audio, and Cloudinary integration.

A project like this requires more than generating a few screens. The interface, game rules, monster stats, battle actions, progression, image uploads, and saved state all need to work together. That made MAYHEM an opportunity to bring several pieces into one playable experience rather than build a static mockup.

☁️ How Cloudinary powers MAYHEM

Monster creation depends on images, so image handling is a core part of the experience—not just an extra feature.

I integrated Cloudinary to manage monster artwork and make it suitable for different parts of the game.

Here's how it is used:

For example, the transformation settings can request an automatically selected format and quality:

f_auto,q_auto

For a card image that needs to fill a portrait frame while keeping the main subject in focus:

c_fill,g_auto

These transformations help serve artwork in a form suited to the game's collectible cards.

A small but important security detail

The browser uses an unsigned upload preset and browser-safe Cloudinary configuration. The Cloudinary API secret is never exposed through a VITE_ environment variable.

Game data—such as monster stats, inventory, progression, and battle rules—remains separate from image hosting. Cloudinary handles the images, while the game handles the gameplay.

MAYHEM also has a fallback: if Cloudinary isn't configured, the game can process uploaded artwork in the browser and save it on the device. It reports that fallback rather than pretending a cloud upload succeeded.

🛠️ Tech stack

The project uses:

• React 18 — UI and reusable components
• TypeScript 5 — typed game data and application logic
• Vite 5 — development server and production build
• Tailwind CSS 4 — styling and interface design
• Cloudinary — image uploads, transformations, and delivery
• Web Audio API — procedural music and sound effects
• localStorage — local game saves and player progression
• AdaL — AI-assisted development workflow

The game logic is organized into modules for elements, monster data, stats, combat rules, turn order, progression, and persistence. The UI is divided into screens and reusable components.

🌱 What's next?

MAYHEM is open source under the MIT License. The project can be forked, modified, reskinned, and extended.

Some areas where contributors could help include:

• Adding new monsters, elements, and abilities
• Improving battle balance
• Online Multiplayer
• Creating new arena environments
• Improving accessibility and translations
• Exploring a real backend for persistent player accounts and shared progression

The current game saves progress locally through localStorage, with a storage adapter that can support a future backend implementation.

🤝 Try it, fork it, improve it

MAYHEM brings together creature collection, image-driven customization, turn-based combat, progression systems, and cloud-powered image handling in one browser game.

I'm especially interested in the possibilities of letting players create their own creatures instead of being limited to a predefined roster. If you're interested in game development, AI-assisted coding, React, or Cloudinary image workflows, I'd love for you to explore the project.

Project repository: https://github.com/ab2030909/MAYHEM-monsters-card-game
Website Link: https://mayhem-monsters.vercel.app/

Built with: AdaL + React + TypeScript + Cloudinary

If you check it out, let me know: what kind of monster would you create first? 🔥

⚔️ Enter the arena. Unleash MAYHEM.