Project Setup We initialized a React application using Vite for fast development and bundling. For the code editing experience, we integrated the Monaco Editor (@monaco-editor/react) to provide a realistic coding interface.

State Management We implemented a custom hook, useGameState, to handle the game’s state. This tracks the boss’s HP, current level, and player progress. All progress is persisted using localStorage so players can refresh the page without losing their game.

User Interface We designed a dark-mode interface with a split layout. The left panel displays the “Loop Goblin” boss, their current HP, and a dynamic health bar. The right panel contains the task description and the Monaco Editor. We added CSS animations for taking damage and completing tasks to make the gameplay feel responsive.

Gameplay Logic The first boss, Loop Goblin, starts with 100 HP. We implemented four introductory coding tasks:

Writing a loop from 1 to 3
Creating a variable with the value 10
Writing a function named ‘attack’
Creating an array and using the ‘.length’ property
For the MVP, code validation is handled through fast string matching rather than executing arbitrary JavaScript. This ensures security and simplicity while verifying the core concepts of the user’s input.

Next Steps
Deploy the initial MVP to Vercel.
Add additional bosses and more complex tasks.
Consider implementing a secure sandbox for executing user code in future versions.