Coding Boss Fight

Player Health and Game OverPlayers now have a persistent health bar starting at 100 HP. Incorrect code submissions are no longer consequence-free. Every failed attempt causes the boss to attack, dealing 15 damage to the player. If the player’s health reaches zero, a Game Over screen is triggered, wiping all progress and forcing a complete restart.Combo System and HealingTo balance the strict punishment for errors, the combo system has been fully integrated into the gameplay loop. The UI now features dynamic combo badges that appear over the boss when players submit consecutive correct answers. Reaching a 3x combo mechanically rewards the player by healing them for 15 HP. This encourages careful code construction over brute-force trial and error.Live Speedrun TimerA live timer has been added to the top navigation bar. It actively tracks the time spent on the current boss combined with the historical time from previously defeated bosses. This adds a subtle layer of pressure and allows players to track their speedrun performance in real time.

New Feature Update
We have added a new boss to the game to increase the challenge and cover more JavaScript concepts.

Syntax Sorcerer
The Syntax Sorcerer is the third boss you will face. This boss has 150 Health Points and tests your knowledge of more advanced JavaScript syntax.

Tasks included for this boss:

Arrow Functions: You must write an arrow function that returns a specific value. This helps practice modern function syntax.
Error Handling: You are required to write a try-catch block. This is essential for managing errors in real applications.
Spread Operator: You need to use the spread operator on an array. This tests your understanding of array manipulation.
DOM Demon
The DOM Demon is the fourth and final boss. This boss has 200 Health Points and tests your ability to interact with the Document Object Model (DOM).

Tasks included for this boss:

Selecting Elements: You must use methods like getElementById.
Creating Elements: You need to create new HTML elements dynamically using createElement.
Modifying Classes: You are required to manipulate an element’s classList.
Event Listeners: You need to attach event listeners to elements to make them interactive.
Combo System
We introduced a Combo System to reward accurate coding.

How it works: If you complete a task correctly on your very first try, your combo increases.
Visuals: Your current combo is displayed at the top of the game interface during a run.
Reset: If you make a mistake and get the answer wrong, your combo resets to zero.
These additions make the game longer, provide a better learning curve, and add a layer of challenge for skilled players who want to maintain a high combo.

Architecture and Routing
The application now supports multiple distinct screens and states, moving beyond a single static view:

Intro Screen: A landing page that introduces the game, lists the available bosses, and explains the rules.
Boss Defeated Screen: A transition state that displays the player’s statistics for the defeated boss and previews the next challenge.
Victory Screen: The final state reached after completing all content, presenting a summary of the player’s total time, attempts, and overall accuracy.
Multi-Boss Support
The hardcoded single-boss logic has been refactored. The game state now imports a structured array of bosses. A second boss, “Array Alchemist”, has been integrated into the loop. When a boss reaches zero HP, the game seamlessly transitions to the next boss in the sequence, resetting health while preserving total accumulated statistics.

Audio Feedback
To improve interaction, a lightweight audio system was introduced using the native Web Audio API. This avoids the need to load external MP3 files. Synthesized tones are now played during specific events:

Correct submission (Hit)
Incorrect submission (Miss)
Boss Defeated
Game Completed (Victory)
Quality of Life Improvements
Keyboard Shortcuts: Added a global event listener to the Monaco Editor. Players can now execute their code using Ctrl + Enter (or Cmd + Enter), greatly speeding up the trial-and-error process.
Auto-dismissing Alerts: Feedback banners (success/error messages) are now automatically cleared after 2.5 seconds to prevent visual clutter on the screen.
Visual Polish: The boss UI was updated to include a brief description of the current boss, and the health/task progress bars were refined to match the strict minimalist aesthetic.

Overview
This session focused entirely on improving the visual interface. No new game mechanics were added. The goal was to make the layout clearer, more informative, and more polished without introducing gradients or heavy visual effects.

Changes
Boss Panel

The boss panel was restructured. The boss name and HP bar are now displayed in a compact stat block below the sprite. The HP bar was thinned down and simplified. A row of task progress dots was added beneath it, one dot per task. Each dot fills white when a task is completed. The active task pulses dimly to show the current position. This gives the player a clear sense of progress at a glance without needing to count tasks.

A damage flash effect was also added. When the boss takes a hit, a red ring briefly expands around the sprite and fades out. This makes successful submissions feel more impactful.

Task Panel

The task panel was redesigned with a header row containing two badges: one showing the current task number out of the total, and one showing the HP damage the task will deal. The description is now treated as the main heading. The example code block was simplified with a minimal left border accent.

The victory screen was also cleaned up. It now shows a small “BOSS DEFEATED” label above the title, consistent with the badge style used throughout the rest of the UI.

Global Styles

Google Fonts were loaded globally for Inter and JetBrains Mono. Custom scrollbar styles were applied to keep the dark theme consistent throughout. Default browser margin and padding resets were added.

Notes
The color palette is strictly black, white, and grays. No gradients, no colored backgrounds, no glow effects. The only color exception is the red damage badge and the low-HP bar state, which are intentional signals to the player.

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.