"use client"; import { useEffect, useState, useRef } from "react"; import Link from "next/link"; import { useTranslations } from "next-intl"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; import { worlds, type Level, getAllLevels } from "@/lib/kids/levels"; import { getProgress, isLevelUnlocked, type KidsProgress } from "@/lib/kids/progress"; import { analyticsKids } from "@/lib/analytics"; import { Button } from "@/components/ui/button"; import { PixelTree, PixelBush, PixelCastle, PixelMountain, PixelFlower, PixelStar, PixelRobot, PixelLevelNode, PixelPlaneWithBanner, PixelLake, PixelPond, PixelCar, PixelOldCar, PixelVan } from "./pixel-art"; export function ProgressMap() { const t = useTranslations("kids"); const [progress, setProgress] = useState(null); const scrollRef = useRef(null); const allLevels = getAllLevels(); useEffect(() => { setProgress(getProgress()); analyticsKids.viewMap(); }, []); // Calculate positions for all levels in a continuous horizontal path const levelPositions = allLevels.map((_, index) => { const spacing = 200; // pixels between levels const x = 120 + index * spacing; // Create a gentle wave pattern - centered around 55% const y = 55 + Math.sin(index * 0.8) * 15; return { x, y }; }); // Calculate map width - ensure it fits content but also works on large screens const calculatedWidth = (allLevels.length * 200) + 240; const mapWidth = Math.max(calculatedWidth, 800); const scrollLeft = () => { scrollRef.current?.scrollBy({ left: -300, behavior: "smooth" }); }; const scrollRight = () => { scrollRef.current?.scrollBy({ left: 300, behavior: "smooth" }); }; return (

{/* Scroll controls for desktop */}

{/* Horizontal scrolling map container */}

{/* Sky is handled by kids layout - no additional background needed */} {/* Pixel art ground layers - use full width (max of mapWidth or 100%) */}

{/* Road with dashed center line */}

{/* Road edges */}

{/* Dashed center line */}

{/* Pixel art path connecting all levels */} {/* Decorative elements - rendered after path so clouds appear on top */} {/* World labels - pixel art style */} {worlds.map((world) => { const firstLevelIndex = allLevels.findIndex(l => l.world === world.number); if (firstLevelIndex === -1) return null; const pos = levelPositions[firstLevelIndex]; return (

{t(`worlds.${world.number}.title`)}

); })} {/* Level nodes */} {allLevels.map((level, index) => ( ))}

{/* Progress bar at bottom - pixel art style */}

{t("map.title")}

{getCompletedCount(progress, allLevels)} / {allLevels.length}

{/* Pixel art progress bar */}

{/* Pixel segments overlay */}

{Array.from({ length: allLevels.length }).map((_, i) => (

))}

); } function generatePathD(positions: { x: number; y: number }[]): string { if (positions.length === 0) return ""; let d = `M ${positions[0].x} ${positions[0].y}`; for (let i = 1; i < positions.length; i++) { const prev = positions[i - 1]; const curr = positions[i]; const midX = (prev.x + curr.x) / 2; // Create smooth curves d += ` Q ${midX} ${prev.y}, ${midX} ${(prev.y + curr.y) / 2}`; d += ` Q ${midX} ${curr.y}, ${curr.x} ${curr.y}`; } return d; } // Generate pixelated path using straight line segments (stair-step pattern) function generatePixelPathD(positions: { x: number; y: number }[]): string { if (positions.length === 0) return ""; let d = `M ${positions[0].x} ${positions[0].y}`; for (let i = 1; i < positions.length; i++) { const prev = positions[i - 1]; const curr = positions[i]; const midX = (prev.x + curr.x) / 2; // Create stair-step pattern for pixelated look d += ` H ${midX}`; // Horizontal to midpoint d += ` V ${curr.y}`; // Vertical to new Y d += ` H ${curr.x}`; // Horizontal to destination } return d; } function MapDecorations({ mapWidth }: { mapWidth: number }) { const [planeY, setPlaneY] = useState(15); // percentage from top const [isDragging, setIsDragging] = useState(false); const planeRef = useRef(null); // Handle plane dragging useEffect(() => { if (!isDragging) return; const handleMove = (clientY: number) => { const container = planeRef.current?.parentElement; if (!container) return; const rect = container.getBoundingClientRect(); const y = ((clientY - rect.top) / rect.height) * 100; // Constrain between 8% and 35% from top setPlaneY(Math.max(8, Math.min(35, y))); }; const onMouseMove = (e: MouseEvent) => handleMove(e.clientY); const onTouchMove = (e: TouchEvent) => handleMove(e.touches[0].clientY); const onEnd = () => setIsDragging(false); document.addEventListener('mousemove', onMouseMove); document.addEventListener('touchmove', onTouchMove); document.addEventListener('mouseup', onEnd); document.addEventListener('touchend', onEnd); return () => { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('touchmove', onTouchMove); document.removeEventListener('mouseup', onEnd); document.removeEventListener('touchend', onEnd); }; }, [isDragging]); // Generate decorations along the map - using seeded positions for consistency const decorations = []; const spacing = 100; for (let i = 0; i < Math.floor(mapWidth / spacing); i++) { const x = 50 + i * spacing; const type = i % 5; const yOffset = Math.sin(i * 0.8) * 10; decorations.push(

{type === 0 && } {type === 1 && } {type === 2 && } {type === 3 && } {type === 4 && }

); } // Add lakes and ponds scattered on the ground const lakePositions = [ { x: 210, type: 'lake' }, { x: 1000, type: 'pond' }, { x: 2180, type: 'lake' }, { x: 2920, type: 'pond' }, { x: 3680, type: 'lake' }, ]; lakePositions.forEach((lake, i) => { if (lake.x < mapWidth - 100) { decorations.push(

{lake.type === 'lake' ? : }

); } }); // Add castle at the end decorations.push(

); // Add cars on the road with hover traffic light // Car 1 - going left (top lane) decorations.push(

e.currentTarget.style.animationPlayState = "paused"} onMouseLeave={(e) => e.currentTarget.style.animationPlayState = "running"} > {/* Traffic light - appears on hover, in front of car */}

{/* Light box */}

{/* Pole */}

); // Van - going left (top lane, different timing) decorations.push(

e.currentTarget.style.animationPlayState = "paused"} onMouseLeave={(e) => e.currentTarget.style.animationPlayState = "running"} > {/* Traffic light - appears on hover, in front of van */}

{/* Light box */}

{/* Pole */}

); // Car 2 - going right (bottom lane) decorations.push(

e.currentTarget.style.animationPlayState = "paused"} onMouseLeave={(e) => e.currentTarget.style.animationPlayState = "running"} > {/* Traffic light - appears on hover, on right side of car (going right) */}

{/* Light box */}

{/* Pole */}

); // Add flying plane with banner - flies across full map width, draggable up/down decorations.push(

setIsDragging(true)} onTouchStart={() => setIsDragging(true)} >

); return <>{decorations}; } function getCompletedCount(progress: KidsProgress | null, levels: Level[]): number { if (!progress) return 0; return levels.filter(l => progress.levels[l.slug]?.completed).length; } interface LevelNodeProps { level: Level; position: { x: number; y: number }; progress: KidsProgress | null; index: number; t: ReturnType; } function LevelNode({ level, position, progress, index, t }: LevelNodeProps) { const [unlocked, setUnlocked] = useState(false); const levelProgress = progress?.levels[level.slug]; const isCompleted = levelProgress?.completed; const stars = levelProgress?.stars || 0; useEffect(() => { setUnlocked(isLevelUnlocked(level.slug)); }, [level.slug, progress]); const state = !unlocked ? "locked" : isCompleted ? "completed" : "available"; const nodeContent = (

{/* Pixel art level node */} {/* Stars for completed levels */} {isCompleted && (

{[1, 2, 3].map((star) => ( ))}

)} {/* Level title label - pixel style */}

{t(`levels.${level.slug.replace(/-/g, "_")}.title`)}

); if (!unlocked) { return

{nodeContent}

; } return ( {nodeContent} ); }