Sprout Garden Phase 3: Gates & Loops

Conditional Logic and Iteration - The race track 🏎️

Overview

Phase 3 introduces conditional gates and loop constructs. The crown jewel is the race track - a visual metaphor for for-loops that kids can see, understand, and debug.

This phase teaches: Some things only happen IF, and some things happen AGAIN.

The Race Track 🏎️

Build-a-Car → Drive-a-Car Narrative

Phase 2 finale: Kid builds a "car" (specific shape+color combo like ★ yellow)
Celebration: "You built a car! Now let's take it for a drive..."
Phase 3 opens: Race Track level

Race Track Layout

┌─────────────────────────────────────────────────┐
│                                                 │
│   🏁 START                           🏆 FINISH  │
│     │                                   ▲       │
│     ▼                                   │       │
│   ┌───┐    ┌───────────────────┐    ┌───┴───┐   │
│   │ 🌱│───▶│    RACE TRACK     │───▶│ EXIT? │   │
│   └───┘    │                   │    └───────┘   │
│            │  🏎️ ──────────┐   │        │       │
│            │       LAP     │   │        │       │
│            │       COUNTER │   │    ◄───┘       │
│            │  ┌────────────┘   │   (if laps<5)  │
│            │  ▼                │                 │
│            │  [+1] ───────────▶│                 │
│            └───────────────────┘                 │
│                                                 │
└─────────────────────────────────────────────────┘

What Kids See

• Their car goes around the track
• Lap counter increments each pass
• After 5 laps, car exits to finish line
• Visual for-loop!

Plot Types Introduced

Plot	Symbol	Category	Behavior
Gate	🚧	conditional	Only passes if condition met
Lap Counter	🔢	transform	Increments sprout.laps property
Exit Gate	🚪	conditional	Exits loop when condition met
Merge	⊕	flow	Combines multiple input paths
Teleport	🌀	flow	Jumps to non-adjacent position

Gate Types

Property Gates

// Pass only if shape is star
starGate.canPass(sprout) {
  return sprout.shape === 'star';
}

// Pass only if color is red
redGate.canPass(sprout) {
  return sprout.color === 'red';
}

Counter Gates

// Pass only if laps >= 5
exitGate.canPass(sprout) {
  return sprout.laps >= 5;
}

Gate Behavior

When a sprout fails a gate check:

• Block: Sprout stops (withers)
• Bounce: Sprout reverses direction
• Redirect: Sprout goes alternative path

Loop Constructs

The For-Loop Pattern

  →  [MERGE] → [+1 COUNTER] → [CHECK >= N?] →→ EXIT
                    │               │
                    └───────────────┘

Loop Part	Garden Element
Initialize	Sprout starts with laps=0
Condition	Exit gate checks laps >= N
Increment	Lap counter adds 1
Body	The track (could have transforms)
Break	Exit gate lets sprout through

Teaching Without Teaching

Kids don't learn "for-loop syntax". They learn:

• "The car goes around until it's done enough laps"
• "Each lap, the counter goes up"
• "When it hits 5, it can leave"

That's a for-loop. They just don't know it yet.

Source Files (To Be Created)

File	Purpose
src/plots/types/gate.js	Property-based gates
src/plots/types/lap-counter.js	Increment counter
src/plots/types/exit-gate.js	Conditional exit
src/plots/types/merge.js	Path combiner
src/plots/types/teleport.js	Position jumper

API Documentation

files:
  - /Users/graemefawcett/working/ben.fawcett.family/activities/sprout-garden/src/plots/types/gate.js
  - /Users/graemefawcett/working/ben.fawcett.family/activities/sprout-garden/src/plots/types/lap-counter.js
  - /Users/graemefawcett/working/ben.fawcett.family/activities/sprout-garden/src/plots/types/exit-gate.js
  - /Users/graemefawcett/working/ben.fawcett.family/activities/sprout-garden/src/plots/types/merge.js
  - /Users/graemefawcett/working/ben.fawcett.family/activities/sprout-garden/src/plots/types/teleport.js

❌ Fence Execution Error: "'code-api-docs' - Down the rabbit hole we went, but that node doesn't exist! Try 'oculus list' to see what's available."

Level Ideas

Level	Challenge	Teaches
16	Simple gate (star only)	Conditionals
17	Color gate	Property checking
18	Gate + transform combo	Order matters
19	First race track (3 laps)	Loop basics
20	Race track with transform	Loop body
21	Nested conditions	Complex logic
22	Early exit (break)	Break conditions
23	Multiple cars racing	Parallelism

Implementation Notes

Sprout State Extension

// Phase 3 adds counter properties
sprout = {
  id: 'sprout-001',
  shape: 'star',
  color: 'yellow',
  laps: 0,        // NEW: lap counter
  visits: {},     // NEW: track visits per cell
}

Teleport Implementation

// Teleport just changes position to non-adjacent address
teleport.grow(sprout, plotConfig) {
  // Position change happens in simulation, not here
  return sprout;
}

// In simulation.js, teleport's fruit is a specific address
teleport.fruits = ['A5']; // Jump directly to A5

Infinite Loop Detection

// Track visit counts per position
if (sprout.visits[position] > MAX_VISITS) {
  sprout.status = 'looping';
  // Visual feedback: sprout spins in place
}

Related

• [[sprout-garden-race-track]] - Detailed race track design
• [[sprout-garden-phase-2]] - Previous phase (imprinting)

Verification

Live test results from [[sprout-garden-phase-3-test]]:

Test	Status	Details
gate.js exists	fail	not yet implemented
lap-counter.js exists	fail	not yet implemented
exit-gate.js exists	fail	not yet implemented
merge.js exists	fail	not yet implemented
teleport.js exists	fail	not yet implemented

Slots

North

slots:
- sprout-garden
- sprout-garden

South

slots:
- sprout-garden-phase-3-test
- sprout-garden-race-track

East

slots: []

West

slots:
- sprout-garden-phase-2