The Three-Friend Puppet Show Metaphor
Before editing any code, let's understand the design architecture of the game. Think of it as a team of three friends working together to put on a puppet show:
+-------------------------------------------------------------+
| 1. THE DIRECTOR |
| (Angular) |
| * Controls the UI: health hearts, scoreboards, and settings. |
| * Displays the animal emoji guess-puzzle boards. |
+------------------------------+------------------------------+
| (Commands / Events)
v
+-------------------------------------------------------------+
| 2. THE PUPPETEER |
| (Phaser) |
| * Handles the action: spaceship movement, lasers, blocks. |
| * Implements keyboard controls and screen shake FX. |
+------------------------------+------------------------------+
| (Calculations)
v
+-------------------------------------------------------------+
| 3. THE REFEREE |
| (Domain Logic) |
| * Rules checker: Decides if caught answer is correct. |
| * Governs physics gravity and reviews DDA settings. |
+-------------------------------------------------------------+
- Angular hosts the dashboard dashboard container.
- Phaser renders 2D canvas graphics and captures user keystrokes.
- TypeScript Domain (Shared Logic) is the rule referee, verifying correct responses and adjusting difficulty without mixing graphics.
Case Study: Dynamic Difficulty Adjustment (DDA)
The game adjusts its pacing dynamically. Let's inspect the active DDA engine inside [packages/shared/src/domain/dda.ts](file:///Users/homacmini/Documents/TimesTableGame/packages/shared/src/domain/dda.ts):
How the Speedometer Analogy Works:
- Rolling Window Memory:
The referee remembers your last 10 answers. It calculates your **Accuracy Rate**:Accuracy Rate = (Correct Answers in Last 10) / 10 - Fatigue Detection:
The referee checks your last 4 answers. If you get them wrong OR if your average response time exceeds **3.5 seconds** (`slowReactionThresholdMs`), fatigue is flagged (`fatigueDetected = true`). - Adjusting the Gravity:
- If you are **fatigued** OR your accuracy falls **under 75%**, the game slows down:
New Level = Current Difficulty Level - 1
- If you play accurately (**above 80%**) and are not tired, the game speeds up:
New Level = Current Difficulty Level + 1
- If you are **fatigued** OR your accuracy falls **under 75%**, the game slows down:
- Gameplay Impact:
The calculated difficulty level scales `speedMultiplier` (falling speed), `decoyCount` (number of wrong answers), and `academicTier` (complexity of questions).
Antigravity IDE Workflow
- Launch IDE: Open your game project folder in the Antigravity workspace.
- Open Chat & Use Mic: Open the Antigravity agent panel and select the microphone button.
- Invoke the Clarification Protocol: Voice-prompt the agent:
"I want to change the player ship in play-scene.ts to look like a green T-Rex. Before you make any edits, **grill me with 3 clarifying questions** to align on our implementation plan."
- Approve the Plan: Read the agent's plan, click **Approve**, and let it write the code.
- Playtest: Run `pnpm dev` in the terminal and test the new graphics.
Cooperative Assignments
Assignment 1: Adjusting Fatigue
Open [dda.ts](file:///Users/homacmini/Documents/TimesTableGame/packages/shared/src/domain/dda.ts). Prompt the agent to decrease `slowReactionThresholdMs` from `3500` (3.5s) to `2000` (2s).
Goal: Test the game. What happens if you hesitate for just 2 seconds? Does the game drop in difficulty faster? Explain to your guide.
Assignment 2: Neon Scoreboard Styling
Prompt the agent to modify the Angular scoreboard layout inside [game-host.css](file:///Users/homacmini/Documents/TimesTableGame/apps/web/src/app/game-host/game-host.css). Make it semi-transparent black with a neon glow (glassmorphism style).
Verification: Run `pnpm build` in the IDE terminal to confirm that the style changes compile without exceeding the file budget limits.