'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const ROAD_Y = 400; const STOP_LINE_X = 700; const CAR_WIDTH = 120; const CAR_HEIGHT = 50; const BUFFER_DISTANCE = 40; // distance between cars type LightState = 'red' | 'yellow' | 'green'; interface Car { id: number; x: number; speed: number; color: string; type: 'sedan' | 'sport' | 'truck'; lane: number; } export const TrafficLightSimulation = () => { // --- State --- const [lightState, setLightState] = useState('green'); const [countdown, setCountdown] = useState(5); const [cars, setCars] = useState([]); // Refs for animation loop to access latest state without re-triggering effects const carsRef = useRef([]); const lightRef = useRef('green'); const frameRef = useRef(0); const nextCarId = useRef(0); const timeSinceLastSpawn = useRef(0); // --- Configuration --- const maxSpeed = 6; const acceleration = 0.15; const breakingPower = 0.25; // --- Traffic Light Logic --- useEffect(() => { let timer: NodeJS.Timeout; const cycleLight = () => { setCountdown((prev) => { if (prev > 1) return prev - 1; // State transition when countdown hits 0 (or 1 for smooth transition) let nextLight: LightState = 'green'; let nextDuration = 5; if (lightRef.current === 'green') { nextLight = 'yellow'; nextDuration = 3; } else if (lightRef.current === 'yellow') { nextLight = 'red'; nextDuration = 6; } else if (lightRef.current === 'red') { nextLight = 'green'; nextDuration = 6; } lightRef.current = nextLight; setLightState(nextLight); return nextDuration; }); }; timer = setInterval(cycleLight, 1000); return () => clearInterval(timer); }, []); // --- Physics Engine --- useEffect(() => { const updatePhysics = () => { const currentCars = [...carsRef.current]; const light = lightRef.current; // 1. Spawn Logic timeSinceLastSpawn.current++; const lastCar = currentCars[currentCars.length - 1]; const isSafeToSpawn = !lastCar || lastCar.x > CAR_WIDTH + BUFFER_DISTANCE + 50; // Random spawn chance, but don't spawn if red/yellow and backing up too far const shouldSpawn = Math.random() < 0.02 && isSafeToSpawn; const spawnBlocked = light !== 'green' && lastCar && lastCar.x < 200; // Prevent pileup off-screen if (shouldSpawn && !spawnBlocked) { const types: ('sedan' | 'sport' | 'truck')[] = ['sedan', 'sport', 'truck']; const colors = ['#3b82f6', '#ef4444', '#eab308', '#8b5cf6', '#10b981', '#f97316']; currentCars.push({ id: nextCarId.current++, x: -150, speed: maxSpeed, color: colors[Math.floor(Math.random() * colors.length)], type: types[Math.floor(Math.random() * types.length)], lane: 1 }); timeSinceLastSpawn.current = 0; } // 2. Movement & Collision Logic const updatedCars = currentCars.map((car, index) => { let targetSpeed = maxSpeed; let distanceToObstacle = 9999; // Find obstacle ahead if (index > 0) { // Obstacle is the car in front const carAhead = currentCars[index - 1]; distanceToObstacle = carAhead.x - car.x - CAR_WIDTH - BUFFER_DISTANCE; } else { // No car ahead, check traffic light // Only stop if light is red/yellow AND car hasn't passed the stop line yet if (light !== 'green' && car.x < STOP_LINE_X - 20) { distanceToObstacle = STOP_LINE_X - car.x - CAR_WIDTH - 40; // Stop before line } } // Logic for cars behind the first car when approaching light if (index > 0 && light !== 'green') { // If the lead car is stopping, we naturally stop behind it due to "car ahead" logic above. // But if the lead car crossed the line, the second car becomes the "lead" for stopping purposes effectively? // Actually, simpler logic: // If I haven't crossed the line, and the light is red, treat the line as an obstacle // UNLESS there is a car closer than the line. if (car.x < STOP_LINE_X - 20) { const distToLine = STOP_LINE_X - car.x - CAR_WIDTH - 40; if (distToLine < distanceToObstacle) { distanceToObstacle = distToLine; } } } // Adjust Speed based on distance if (distanceToObstacle < 200) { // Decelerate if (distanceToObstacle <= 5) { targetSpeed = 0; } else { targetSpeed = maxSpeed * (distanceToObstacle / 200); } } // Apply physics if (car.speed < targetSpeed) { car.speed = Math.min(car.speed + acceleration, targetSpeed); } else if (car.speed > targetSpeed) { car.speed = Math.max(car.speed - breakingPower, targetSpeed); } // If very slow and target is 0, snap to 0 if (targetSpeed === 0 && car.speed < 0.1) car.speed = 0; car.x += car.speed; return car; }).filter(car => car.x < VIEW_WIDTH + 100); // Despawn carsRef.current = updatedCars; setCars(updatedCars); frameRef.current = requestAnimationFrame(updatePhysics); }; frameRef.current = requestAnimationFrame(updatePhysics); return () => cancelAnimationFrame(frameRef.current); }, []); // Empty dependency array, using refs for mutable state // --- Visual Components --- const getLightColor = (type: LightState) => { switch (type) { case 'red': return '#ef4444'; case 'yellow': return '#eab308'; case 'green': return '#10b981'; default: return '#333'; } }; const statusText = useMemo(() => { if (lightState === 'red') return { text: "红灯停 (STOP)", color: "#ef4444" }; if (lightState === 'yellow') return { text: "黄灯慢行 (WAIT)", color: "#eab308" }; return { text: "绿灯行 (GO)", color: "#10b981" }; }, [lightState]); return ( ); };