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

Description and use

MAYHEM is a browser game that lets players upload images, turn them into monsters, and battle in turn‑based combat, leveraging Cloudinary for image handling and AdaL for AI‑assisted development.

Problem

Players want to create custom monsters from personal images and battle them in a turn‑based arena without installing software or creating accounts.

Outcome

MAYHEM demonstrates how AI‑assisted workflows and cloud image services can accelerate the creation of a complete browser game, enabling users to generate custom monsters from images and battle them in a polished, responsive interface.

Workflow

• 1. Design game mechanics and UI with AdaL assistance.
• 2. Implement image upload using Cloudinary unsigned uploads.
• 3. Apply Cloudinary transformations (f_auto,q_auto,c_fill,g_auto) for card and thumbnail rendering.
• 4. Store game state in localStorage and manage progression, battles, and shop logic.
• 5. Deploy as a static web app with Vite.
• 6. Provide fallback for local image processing if Cloudinary is unavailable.

Evidence

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.

Source

Upload monster artwork directly from the browser using an upload preset

Use f_auto,q_auto for optimized image delivery

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