Tutorial driver "fixed"

Author: PiterWeb

frontend/src/lib/tutorial/driver.ts

@@ -1,32 +1,102 @@
+import { goto } from '$app/navigation';
 import { driver } from 'driver.js';
-import type { DriveStep, Driver } from 'driver.js';
+import type { Driver } from 'driver.js';
 import 'driver.js/dist/driver.css';
+import { _ } from 'svelte-i18n';
+import { get } from 'svelte/store';
 
 // hazer un singletone para el tutorial
 let tutorialDriver: Driver;
+let currentStep = 0;
 
-function StartTutorial(steps: DriveStep[], currentStep: number = 0) {
+const TUTORIAL_DELAY = 750;
+
+export function StartTutorial(selectedStep: number = 0) {
 	if (tutorialDriver) {
 		tutorialDriver.destroy();
-		return tutorialDriver;
 	}
 
 	tutorialDriver = driver({
 		animate: true,
 		smoothScroll: true,
 		stagePadding: 1,
-		stageRadius: 1,
-		onDestroyStarted: () => {
-			if (!tutorialDriver.hasNextStep() || confirm('Are you sure?')) {
-				tutorialDriver.destroy();
+		stageRadius: 1
+	});
+
+	const driverSteps = [
+		{
+			element: '#tutorial-config-btn',
+			popover: {
+				title: get(_)('tutorial_config_title'),
+				description: get(_)('tutorial_config_description'),
+				onNextClick: () => {
+					goto('/mode/config');
+					goNextTutorial();
+				}
+			}
+		},
+		{
+			element: '#tutorial-language',
+			popover: {
+				title: get(_)('tutorial_language_title'),
+				description: get(_)('tutorial_language_description'),
+				onNextClick: () => {
+					goNextTutorial();
+				},
+				onPrevClick: () => {
+					goto('/');
+					goPrevTutorial();
+				}
+			}
+		},
+		{
+			element: '#tutorial-stun-card',
+			popover: {
+				title: get(_)('tutorial_stun_title'),
+				description: get(_)('tutorial_stun_description'),
+				onNextClick: () => {
+					goto('/mode/config/advanced/stun');
+					goNextTutorial();
+				}
+			}
+		},
+		{
+			element: '#tutorial-group-server',
+			popover: {
+				title: get(_)('tutorial_group_server_title'),
+				description: get(_)('tutorial_group_server_description'),
+				onPrevClick: () => {
+					goto('/mode/config');
+					goPrevTutorial();
+				},
+				onNextClick: () => {
+					goto('/mode/config');
+					goNextTutorial();
+				}
 			}
 		}
-	});
+	];
+
+	tutorialDriver.setSteps(driverSteps);
+	tutorialDriver.drive(selectedStep);
+}
 
-	tutorialDriver.setSteps(steps);
-	tutorialDriver.drive(currentStep);
+function goNextTutorial(duration: number = TUTORIAL_DELAY) {
+	setTimeout(() => {
+		currentStep = currentStep + 1;
+		tutorialDriver?.moveNext();
+	}, duration);
+}
 
-	return tutorialDriver;
+function goPrevTutorial(duration: number = TUTORIAL_DELAY) {
+	setTimeout(() => {
+		currentStep = currentStep - 1;
+		tutorialDriver?.movePrevious();
+	}, duration);
 }
 
-export default StartTutorial;
+_.subscribe(() => {
+	if (tutorialDriver) {
+		StartTutorial(currentStep);
+	}
+});

frontend/src/routes/+page.svelte

@@ -1,85 +1,14 @@
 <script lang="ts">
 	import onwebsite from '$lib/detection/onwebsite';
 	import { _ } from 'svelte-i18n';
-	import { goto } from '$app/navigation';
-	import StartTutorial from '$lib/tutorial/driver';
+	import { StartTutorial } from '$lib/tutorial/driver';
 	import type { Driver } from 'driver.js';
 
-	const TUTORIAL_DELAY = 750;
-
-	let tutorialDriver: Driver;
-	let currentStep = 0;
-
-	function goNextTutorial(duration: number = TUTORIAL_DELAY) {
-		setTimeout(() => {
-			tutorialDriver.moveNext();
-			currentStep++;
-		}, duration);
-	}
-
-	function goPrevTutorial(duration: number = TUTORIAL_DELAY) {
-		setTimeout(() => {
-			tutorialDriver.movePrevious();
-			currentStep--;
-		}, duration);
-	}
-
-	let tutorialSteps = [
-		{
-			element: '#tutorial-config-btn',
-			popover: {
-				title: $_('tutorial_config_title'),
-				description: $_('tutorial_config_description'),
-				onNextClick: () => {
-					goto('/mode/config');
-					goNextTutorial();
-				}
-			}
-		},
-		{
-			element: '#tutorial-language',
-			popover: {
-				title: $_('tutorial_language_title'),
-				description: $_('tutorial_language_description'),
-				onNextClick: () => goNextTutorial,
-				onPrevClick: () => {
-					goto('/');
-					goPrevTutorial();
-				}
-			}
-		},
-		{
-			element: '#tutorial-stun-card',
-			popover: {
-				title: $_('tutorial_stun_title'),
-				description: $_('tutorial_stun_description'),
-				onNextClick: () => {
-					goto('/mode/config/advanced/stun');
-					goNextTutorial();
-				}
-			}
-		},
-		{
-			element: '#tutorial-group-server',
-			popover: {
-				title: $_('tutorial_group_server_title'),
-				description: $_('tutorial_group_server_description'),
-				onPrevClick: () => {
-					goto('/mode/config');
-					goPrevTutorial();
-				},
-				onNextClick: () => {
-					goto('/mode/config');
-					goNextTutorial();
-				}
-			}
-		}
-	];
 </script>
 
 <button
 	on:click={() => {
-		tutorialDriver = StartTutorial(tutorialSteps);
+		StartTutorial();
 	}}
 	class="btn btn-primary text-white"
 >