+ {/* HUD */}
+ setIsTutorOpen(false)}
+ problem={lastMissedProblem}
+ />
+ )}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/apps/bridge-builder-math/README.md b/src/apps/bridge-builder-math/README.md
new file mode 100644
index 0000000..d9766fc
--- /dev/null
+++ b/src/apps/bridge-builder-math/README.md
@@ -0,0 +1,20 @@
+
+
+
+ {/* Main Game Area */}
+
+ 🏗️ Bridge Builder
+
+
+ {gameState.status === GameStatus.PLAYING && (
+
+ {/* Streak Indicator */}
+
+ )}
+ 5 ? 'text-orange-500 scale-110' : ''}`}>
+ Streak
+
+ {gameState.streak} 0 ? "fill-orange-500 text-orange-500" : "text-slate-300"} />
+
+
+
+
+ Score
+ {gameState.score}
+
+
+ Level
+ {gameState.level}
+
+
+
+ {/* Game Viewport
+ On Mobile: flex-grow but with a small min-height to allow controls to take space.
+ On Desktop: Standard behavior.
+ */}
+
+
+ {/* AI Tutor Modal */}
+ {lastMissedProblem && (
+
+
+
+ {/* Controls
+ On Mobile: Takes ~50% of vertical space or 400px, whichever is less/more suitable.
+ On Desktop: Fixed height 16rem (256px).
+ */}
+
+
+
+ )}
+
+ {/* Overlays */}
+ {gameState.status === GameStatus.MENU && (
+ + {celebrationText} +
+
+
+ )}
+
+ {gameState.status === GameStatus.GAME_OVER && (
+ Ready to Build?
++ Solve math problems to build the bridge before the engineer falls! +
+ +
+
+ )}
+
+
+ Oh no!
+Final Score: {gameState.score}
+ +
+
+
+ {lastMissedProblem && (
+
+ )}
+
+
+
+
+
+
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/15AVEVIv79IRq8wF6VE-sUIV8eJgsshe2
+
+## Run Locally
+
+**Prerequisites:** Node.js
+
+
+1. Install dependencies:
+ `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+ `npm run dev`
diff --git a/src/apps/bridge-builder-math/components/Button.tsx b/src/apps/bridge-builder-math/components/Button.tsx
new file mode 100644
index 0000000..a31fe38
--- /dev/null
+++ b/src/apps/bridge-builder-math/components/Button.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes
+ {/* Question Display - Smaller on mobile */}
+
+ );
+};
\ No newline at end of file
diff --git a/src/apps/bridge-builder-math/components/GameScene.tsx b/src/apps/bridge-builder-math/components/GameScene.tsx
new file mode 100644
index 0000000..feb99e6
--- /dev/null
+++ b/src/apps/bridge-builder-math/components/GameScene.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { GameState } from '../types';
+import { GAME_CONFIG, COLORS } from '../constants';
+import { HardHat, Mountain } from 'lucide-react';
+
+interface GameSceneProps {
+ gameState: GameState;
+}
+
+export const GameScene: React.FC
+
+
+ {/* Numpad - Takes more space on mobile */}
+ Build Segment
+
+ {problem.a}
+ {problem.operator}
+ {problem.b}
+ =
+
+ {input || '?'}
+
+
+
+
+
+
+ {/* Background Decor */}
+
+ );
+};
\ No newline at end of file
diff --git a/src/apps/bridge-builder-math/components/TutorModal.tsx b/src/apps/bridge-builder-math/components/TutorModal.tsx
new file mode 100644
index 0000000..d47dac5
--- /dev/null
+++ b/src/apps/bridge-builder-math/components/TutorModal.tsx
@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { Problem, TutorResponse } from '../types';
+import { getTutorExplanation } from '../services/geminiService';
+import { Bot, Loader2, X } from 'lucide-react';
+import { Button } from './Button';
+
+interface TutorModalProps {
+ problem: Problem;
+ onClose: () => void;
+ isOpen: boolean;
+}
+
+export const TutorModal: React.FC
+
+
+
+
+ {/* Game World Container with transform for scrolling */}
+
+ {/* Ground (Starting Platform) */}
+
+
+ {/* The Abyss (Visual only, behind bridge) */}
+
+
+ {/* Bridge Segments */}
+
+
+ {/* Character */}
+
+ bridgeEndX ? '200px' : '0px'}) rotate(${gameState.status === 'GAME_OVER' && characterX > bridgeEndX ? '90deg' : '0deg'})`,
+ transition: 'transform 0.5s ease-in'
+ }}
+ >
+
+
+ {/* Next Platform Marker (Visual Goal) */}
+
+
+
+
+
+ GOAL →
+
+
+ );
+};
diff --git a/src/apps/bridge-builder-math/constants.ts b/src/apps/bridge-builder-math/constants.ts
new file mode 100644
index 0000000..739664e
--- /dev/null
+++ b/src/apps/bridge-builder-math/constants.ts
@@ -0,0 +1,20 @@
+export const GAME_CONFIG = {
+ CANVAS_WIDTH: 800, // internal logical width
+ CANVAS_HEIGHT: 400, // internal logical height
+ BRIDGE_Y: 250,
+ CHARACTER_SIZE: 40,
+ SEGMENT_WIDTH: 100, // Width added per correct answer
+ INITIAL_SPEED: 0.08, // Tuned ~20s per segment to allow 70 Qs in 20 mins
+ SPEED_INCREMENT: 0.05, // 5% speed increase per level
+ MAX_SPEED: 1.0,
+ GAP_START: 200, // Increased start buffer
+};
+
+export const COLORS = {
+ sky: '#bae6fd',
+ grass: '#4ade80',
+ dirt: '#854d0e',
+ bridge: '#d97706',
+ bridgeDark: '#92400e',
+ character: '#facc15',
+};
\ No newline at end of file
diff --git a/src/apps/bridge-builder-math/index.html b/src/apps/bridge-builder-math/index.html
new file mode 100644
index 0000000..f35585b
--- /dev/null
+++ b/src/apps/bridge-builder-math/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {loading ? (
+ The problem was
+
+ {problem.a} {problem.operator} {problem.b} = {problem.answer}
+
+
+
+ ) : data ? (
+ Thinking...
+
+
+ ) : (
+
+
+ {data.explanation}
+"{data.encouragement}"
+Could not load explanation.
+ )} + +
+
+
+
+ {/* Question Display - Smaller on mobile */}
+
+ );
+};
\ No newline at end of file
diff --git a/src/apps/components/GameScene.tsx b/src/apps/components/GameScene.tsx
new file mode 100644
index 0000000..e509a7a
--- /dev/null
+++ b/src/apps/components/GameScene.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { GameState } from '../types';
+import { GAME_CONFIG, COLORS } from '../constants';
+import { HardHat, Mountain } from 'lucide-react';
+
+interface GameSceneProps {
+ gameState: GameState;
+}
+
+export const GameScene: React.FC
+
+
+ {/* Numpad - Takes more space on mobile */}
+ Build Segment
+
+ {problem.a}
+ {problem.operator}
+ {problem.b}
+ =
+
+ {input || '?'}
+
+
+
+
+
+
+ {/* Background Decor */}
+
+ );
+};
\ No newline at end of file
diff --git a/src/apps/components/TutorModal.tsx b/src/apps/components/TutorModal.tsx
new file mode 100644
index 0000000..d47dac5
--- /dev/null
+++ b/src/apps/components/TutorModal.tsx
@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { Problem, TutorResponse } from '../types';
+import { getTutorExplanation } from '../services/geminiService';
+import { Bot, Loader2, X } from 'lucide-react';
+import { Button } from './Button';
+
+interface TutorModalProps {
+ problem: Problem;
+ onClose: () => void;
+ isOpen: boolean;
+}
+
+export const TutorModal: React.FC
+
+
+
+
+ {/* Game World Container with transform for scrolling */}
+
+ {/* Ground (Starting Platform) */}
+
+
+ {/* The Abyss (Visual only, behind bridge) */}
+
+
+ {/* Bridge Segments */}
+
+
+ {/* Character */}
+
+ bridgeEndX ? '200px' : '0px'}) rotate(${gameState.status === 'GAME_OVER' && characterX > bridgeEndX ? '90deg' : '0deg'})`,
+ transition: 'transform 0.5s ease-in'
+ }}
+ >
+
+
+ {/* Next Platform Marker (Visual Goal) */}
+
+
+
+
+
+ GOAL ->
+
+
+
+ );
+};
diff --git a/src/apps/services/geminiService.ts b/src/apps/services/geminiService.ts
new file mode 100644
index 0000000..a7f8d68
--- /dev/null
+++ b/src/apps/services/geminiService.ts
@@ -0,0 +1,55 @@
+import { GoogleGenAI, Type } from "@google/genai";
+import { Problem, TutorResponse } from "../types";
+
+// Helper to check for API key availability
+export const hasApiKey = (): boolean => {
+ return !!process.env.API_KEY;
+};
+
+export const getTutorExplanation = async (problem: Problem): Promise
+
+
+
+
+
+
+
+
+
+
+
+
+ {loading ? (
+ The problem was
+
+ {problem.a} {problem.operator} {problem.b} = {problem.answer}
+
+
+
+ ) : data ? (
+ Thinking...
+
+
+ ) : (
+
+
+ {data.explanation}
+"{data.encouragement}"
+Could not load explanation.
+ )} + +
+
+
+