feat(crash): Cosmic Encounters system

.ralph/PROGRESS.md

@@ -1,35 +1,45 @@
-# Progress Tracker
+# Progress - Cosmic Encounters System
 
 ## Completed
-- [x] Priority 1: GameButton.tsx - Framer Motion whileTap/whileHover
-- [x] Priority 1: Direction buttons in DiceGame.tsx (lines 246-269) - whileHover/whileTap scale animations
-- [x] Priority 1: Other game action buttons
-  - [x] PlinkoGame.tsx - motion.div wrapper on game board with whileHover/whileTap scale
-  - [x] Crash.tsx - motion.div wrapper on game canvas with whileHover/whileTap scale
-  - [x] RouletteGame.tsx - motion.button on SPIN button (mobile + desktop) with whileHover/whileTap scale
-- [x] Priority 2: Page transitions (Layout.tsx) - AnimatePresence with fade + slide animations on route changes
-- [x] Priority 3: Win/loss celebrations
-  - [x] DiceGame.tsx - motion.div/motion.span with spring animation on result display, staggered scale/fade animations
-  - [x] Crash.tsx - motion.div on result stats with spring entrance, staggered child animations
-  - [x] RouletteGame.tsx - motion.div/motion.span on win/lose display (mobile + desktop) with spring + scale bounce
-  - PlinkoResultPopup.tsx already had Framer Motion animations
+- [x] Priority 1: Encounter System Infrastructure (state, types, check function)
+  - Added `EncounterType` type with 15 encounter types across 5 altitude zones
+  - Added `CosmicEncounter` interface with id, type, x, y, startTime, duration, scale
+  - Added `encounters` state and `lastEncounterCheckRef` ref
+  - Added `getEncounterTypeForAltitude()` function to map multiplier to encounter types
+  - Added `checkForEncounter()` callback with probability formula (5% × multiplier/10, capped at 100%)
+  - Build passes with no TypeScript errors
 
 ## Next Up
-- [x] Priority 4: Loading skeletons (LoadingModal, GameCard, BettingRail)
-  - [x] LoadingModal.tsx - AnimatePresence wrapper, motion.div modal with spring entrance/exit, rotating spinner, pulsing glow effect
-  - [x] GameCard.tsx - GameCardSkeleton component with pulse animations on icon, title, description, and stats
-  - [x] BettingRail.tsx - BalanceSkeleton component with pulse animation, motion.span on balance values with scale/fade on change
-- [x] Priority 5: Card hover effects (GameCard.tsx)
-  - [x] motion.div wrapper with whileHover (y: -4, turquoise glow shadow) and whileTap (scale: 0.98)
-  - [x] Disabled for "coming soon" cards to preserve cursor-not-allowed behavior
-- [x] Priority 6: Chip/betting animations (ChipStack, ChipSelector)
-  - [x] ChipSelector.tsx - motion.button with spring entrance, whileHover (scale + lift), whileTap (scale down + chip wiggle), staggered initial appearance
-  - [x] ChipStack.tsx - AnimatePresence on chip piles, motion.img chips with spring drop-in/pop-out, whileHover/whileTap feedback, overflow badge animation
-
-## Bonus Enhancements
-- [x] RouletteWheel.tsx result overlay - AnimatePresence with spring entrance, pulsing glow effect, staggered number/label animations
-- [x] Life EliminationModal.tsx - AnimatePresence wrapper, spring entrance with skull rotation, staggered stat reveals, button whileHover/whileTap
-- [x] SuccessModal.tsx - AnimatePresence wrapper, spring entrance, bouncy checkmark icon, staggered text/button reveal, button whileHover/whileTap
-- [x] ErrorModal.tsx - AnimatePresence wrapper, spring entrance with rotating X icon, staggered text/button reveal, button whileHover/whileTap
-- [x] LifeGameCard.tsx - motion.div wrapper with whileHover (y: -4, purple glow shadow) and whileTap (scale: 0.98) for visual consistency with GameCard.tsx
-- [x] RegionSelectionModal.tsx - AnimatePresence wrapper, staggered card entrance, spring hover effects with faction-colored glow, error message animation
+- [x] Priority 2: Altitude Zone Mapping (getEncounterTypeForAltitude function)
+  - Function already implemented at lines 96-118 in CrashCanvas.tsx
+  - Maps multiplier to 5 altitude zones with appropriate encounter types
+  - Build passes
+- [x] Priority 3: Placeholder Visuals (emoji-based getEncounterVisual function)
+  - Added `getEncounterVisual()` function at lines 120-161 in CrashCanvas.tsx
+  - Returns emoji, color, and size for all 15 encounter types
+  - Emojis are VISIBLE placeholders: 🛰️ 👨‍🚀 🪨 ☄️ 🌙 🪐 🛸 🌀 🌌 ⚫ 👁️ etc.
+  - Build passes
+- [x] Priority 4: Encounter Rendering (JSX with fade in/out logic)
+  - Added Cosmic Encounters Layer div (z-index 15) after deep space effects, before canvas
+  - Renders encounters with fade in (first 15%), full opacity (15-80%), fade out (last 20%)
+  - Each encounter displays emoji with drop-shadow glow based on encounter type color
+  - Uses `getEncounterVisual()` for emoji, color, and size per encounter type
+  - Encounters positioned at random x/y with scale variation for variety
+  - CSS class `cosmic-encounter` applied for animation support
+  - Build passes with no TypeScript errors
+- [x] Priority 5: Cleanup and Reset Logic (useEffect for expired encounters)
+  - Added useEffect with setInterval (1s) to cleanup expired encounters from state
+  - Added useEffect to clear all encounters and reset lastEncounterCheckRef when game resets (rocketStates.length === 0)
+  - Build passes
+- [x] Priority 6: Hook Into Animation Loop (trigger checks during flight)
+  - Added useEffect with setInterval (500ms) to trigger encounter checks during active flight
+  - Checks current max multiplier from all rockets
+  - Only triggers when rockets are flying (not after all crashed)
+  - The checkForEncounter function has its own 2.5s throttle for rate limiting
+  - Build passes
+- [x] Priority 7: CSS Animations (encounterFloat, encounterGlow keyframes)
+  - Added `encounterFloat` keyframes for gentle floating effect (8px up/down movement)
+  - Added `encounterGlow` keyframes for subtle glow pulse (8px to 16px drop-shadow)
+  - Added `.cosmic-encounter` class with 3s float animation
+  - Added `.cosmic-encounter-rare` class combining float + glow for special encounters
+  - Build passes