Track 2 Guide

Antigravity IDE & Full-Stack Dev đŸ–Ĩī¸đŸ•šī¸

Standard Package ($149 AUD) — Designed for kids (ages 10–13) and parents to build, test, and preview full-stack changes directly in the integrated workspace.

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:

  1. Rolling Window Memory:
    The referee remembers your last 10 answers. It calculates your **Accuracy Rate**:
    Accuracy Rate = (Correct Answers in Last 10) / 10
  2. 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`).
  3. 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
  4. Gameplay Impact:
    The calculated difficulty level scales `speedMultiplier` (falling speed), `decoyCount` (number of wrong answers), and `academicTier` (complexity of questions).

Antigravity IDE Workflow

  1. Launch IDE: Open your game project folder in the Antigravity workspace.
  2. Open Chat & Use Mic: Open the Antigravity agent panel and select the microphone button.
  3. 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."
  4. Approve the Plan: Read the agent's plan, click **Approve**, and let it write the code.
  5. 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.