scolling fixed on 4 and 5

Author: VolksRat71

src/lib/utils/autoScroll.ts

@@ -10,7 +10,12 @@ export function isMobileViewport(): boolean {
 }
 
 // Scroll target types for animation phases
-export type ScrollTarget = 'browser' | 'network' | 'server' | 'explanation' | 'controls';
+export type ScrollTarget =
+	| 'browser' | 'network' | 'server' | 'explanation' | 'controls'
+	// Fix step specific targets
+	| 'vulnerable-code' | 'fixed-code' | 'remediation-nextjs' | 'remediation-react' | 'remediation-verify'
+	// Lessons step specific targets
+	| 'lesson-1' | 'lesson-2' | 'lesson-3' | 'lesson-4' | 'quote' | 'resources';
 
 // Smoothly scroll an element into the center of the viewport
 export function scrollElementIntoView(
@@ -39,11 +44,24 @@ export function getScrollTargetElement(
 	if (!container) return null;
 
 	const selectors: Record<ScrollTarget, string> = {
-		browser: '.client-side, .render-side:first-child, .attacker-entity, .code-diff-container, .lessons-grid',
+		browser: '.client-side, .render-side:first-child, .attacker-entity, .code-diff-container, .code-diff, .lessons-grid',
 		network: '.data-flow-column, .flight-channel, .exploit-flow',
 		server: '.server-side, .render-side:last-child, .server-entity',
-		explanation: '.explanation-panel, .impact-section, .comparison-summary, .vulnerable-code, .remediation-section, .resources-section',
-		controls: '.video-controls, .timeline-container'
+		explanation: '.explanation-panel, .impact-section, .comparison-summary, .vulnerable-code, .remediation-section, .resources-section, .final-section, .resources-grid',
+		controls: '.video-controls, .timeline-container',
+		// Fix step specific selectors
+		'vulnerable-code': '.diff-panel.before-panel',
+		'fixed-code': '.diff-panel.after-panel',
+		'remediation-nextjs': '.remediation-card:nth-child(1)',
+		'remediation-react': '.remediation-card:nth-child(2)',
+		'remediation-verify': '.remediation-card:nth-child(3)',
+		// Lessons step specific selectors
+		'lesson-1': '.lesson-card:nth-child(1)',
+		'lesson-2': '.lesson-card:nth-child(2)',
+		'lesson-3': '.lesson-card:nth-child(3)',
+		'lesson-4': '.lesson-card:nth-child(4)',
+		'quote': '.final-section',
+		'resources': '.resources-section'
 	};
 
 	return container.querySelector(selectors[target]) as HTMLElement | null;
@@ -250,23 +268,36 @@ const DEFAULT_FIX_TRIGGERS: FixTriggerTimes = {
 };
 
 // Determine scroll target for Fix step based on current time and trigger points
-// Flow: Code diff (vulnerable → fixed) → Remediation cards
+// Flow: Vulnerable code → Fixed code → Next.js card → React card → Verify card
 export function getFixScrollTarget(params: {
 	currentTime: number;
 	triggers?: FixTriggerTimes | null;
 }): ScrollTarget {
 	const { currentTime, triggers } = params;
 	const t = triggers ?? DEFAULT_FIX_TRIGGERS;
 
-	// Phase 1: Code diff section - showing vulnerable and fixed code (0 to patchApplication)
-	// User should see the before/after code diff
+	// Phase 1: Vulnerable code (0 to fixAdds)
+	if (currentTime < t.fixAdds) {
+		return 'vulnerable-code';
+	}
+
+	// Phase 2: Fixed code (fixAdds to patchApplication)
 	if (currentTime < t.patchApplication) {
-		return 'browser'; // Code diff container
+		return 'fixed-code';
 	}
 
-	// Phase 2: Remediation section (patchApplication onwards)
-	// Show the patching instructions and version cards
-	return 'explanation';
+	// Phase 3: Next.js remediation card (patchApplication to reactDirect)
+	if (currentTime < t.reactDirect) {
+		return 'remediation-nextjs';
+	}
+
+	// Phase 4: React Direct card (reactDirect to verify)
+	if (currentTime < t.verify) {
+		return 'remediation-react';
+	}
+
+	// Phase 5: Verify card (verify onwards)
+	return 'remediation-verify';
 }
 
 // Lessons step trigger times interface (matches LessonsKeyframeTriggers)
@@ -290,23 +321,41 @@ const DEFAULT_LESSONS_TRIGGERS: LessonsTriggerTimes = {
 };
 
 // Determine scroll target for Lessons step based on current time and trigger points
-// Flow: Lesson cards (1-4) → Final quote/summary → Resources
+// Flow: Lesson 1 → Lesson 2 → Lesson 3 → Lesson 4 → Quote → Resources
 export function getLessonsScrollTarget(params: {
 	currentTime: number;
 	triggers?: LessonsTriggerTimes | null;
 }): ScrollTarget {
 	const { currentTime, triggers } = params;
 	const t = triggers ?? DEFAULT_LESSONS_TRIGGERS;
 
-	// Phase 1: Lessons cards (0 to remember)
-	// User should see the lesson cards being highlighted
+	// Phase 1: Lesson 1 (0 to secondLesson)
+	if (currentTime < t.secondLesson) {
+		return 'lesson-1';
+	}
+
+	// Phase 2: Lesson 2 (secondLesson to thirdLesson)
+	if (currentTime < t.thirdLesson) {
+		return 'lesson-2';
+	}
+
+	// Phase 3: Lesson 3 (thirdLesson to fourthLesson)
+	if (currentTime < t.fourthLesson) {
+		return 'lesson-3';
+	}
+
+	// Phase 4: Lesson 4 (fourthLesson to remember)
 	if (currentTime < t.remember) {
-		return 'browser'; // Lessons grid
+		return 'lesson-4';
 	}
 
-	// Phase 2: Quote and resources (remember onwards)
-	// Show the final summary and further reading
-	return 'explanation';
+	// Phase 5: Quote (remember to bakedIn)
+	if (currentTime < t.bakedIn) {
+		return 'quote';
+	}
+
+	// Phase 6: Resources (bakedIn onwards)
+	return 'resources';
 }
 
 // Module-level state for scroll tracking
@@ -330,7 +379,7 @@ export function scrollToTarget(
 		return;
 	}
 
-	// Throttle scrolls to prevent jank
+	// Throttle scrolls to prevent jarring scroll behavior
 	if (!force && now - lastScrollTime < minIntervalMs) {
 		return;
 	}