v2.4 (Tutorial added & translations)

PiterWeb · PiterWeb · commit b1dbcabe16bf · 2024-09-20T18:58:18.000+02:00
diff --git a/Taskfile.yml b/Taskfile.yml
@@ -14,17 +14,13 @@ tasks:
       - wails build -platform=linux/amd64,linux/arm64
     desc: Build the application for Linux
   build-wasm-front-linux:
+    dir: frontend/static/wasm
     cmds:
-      - cd frontend
-      - cd static
-      - cd wasm
       - GOOS=js GOARCH=wasm go build -o signal.wasm
     desc: Build the frontend wasm for Linux
   build-wasm-front-win:
+    dir: frontend/static/wasm
     cmds:
-      - cd frontend
-      - cd static
-      - cd wasm
       - powershell.exe -Command { $env:GOOS="js";$env:GOARCH="wasm"; go build -o signal.wasm }
     desc: Build the frontend wasm for Windows
   dev-all:
@@ -33,12 +29,12 @@ tasks:
     desc: Run the application in development mode
 
   dev-front:
+    dir: frontend
     cmds:
-      - cd frontend
       - pnpm run dev
     desc: Run the frontend in development mode
   test:
+    dir: frontend
     cmds:
-      - cd frontend
       - pnpm run test
     desc: Run the frontend tests
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
@@ -11,7 +11,7 @@
   "stun-servers-title": "STUN Servers",
   "server-list-link": "Server List",
   "add": "Add",
-  "get-your-host-code": "Get your host code",
+  "get-your-host-code": "Get your client code",
   "connect-to-client": "Connect to Client",
   "paste-here-code": "Paste here code",
   "start-streaming": "Start Streaming",
@@ -62,5 +62,21 @@
   "connection-established-successfully": "Connection established successfully",
   "tutorial_btn": "Tutorial",
   "tutorial_language_title": "Choose a language",
-  "tutorial_language_description": "There are different languages available"
+  "tutorial_language_description": "There are different languages available",
+  "tutorial_config_title": "Go to config",
+  "tutorial_config_description": "You can normally do it by clicking on the button",
+  "tutorial_stun_title": "See the STUN servers",
+  "tutorial_stun_description": "STUN servers are important to stablish connections",
+  "tutorial_group_server_title": "Edit your STUN config",
+  "tutorial_group_server_description": "You can add more or edit/remove the existing servers",
+  "tutorial_go_back_title": "Go back",
+  "tutorial_go_back_description": "Let's go back to the previous menu",
+  "tutorial_turn_title": "Here are the TURN servers",
+  "tutorial_turn_description": "The TURN servers are important if you want to stablish connections behind stricts firewalls or using mobile internet",
+  "tutorial_done_text": "Done",
+  "tutorial_next_text": "Next",
+  "tutorial_prev_text": "Previous",
+  "tutorial_play_title": "You are ready to play",
+  "tutorial_play_description": "Now select your prefered mode to play (in web there is only one) and follow the instructions inside",
+  "share-the-code-with-your-client": "Share the code with your client"
 }
diff --git a/frontend/src/lib/i18n/es.json b/frontend/src/lib/i18n/es.json
@@ -11,7 +11,7 @@
   "stun-servers-title": "Servidores STUN",
   "server-list-link": "Lista de servidores",
   "add": "Añadir",
-  "get-your-host-code": "Obtén tu código de anfitrión",
+  "get-your-host-code": "Obtén el código de tu cliente",
   "connect-to-client": "Conectar con el cliente",
   "paste-here-code": "Pegue el código aquí",
   "start-streaming": "Empezar retransmisión",
@@ -62,5 +62,21 @@
   "connection-established-successfully": "Conexión satisfactoria",
   "tutorial_btn": "Tutorial",
   "tutorial_language_title": "Escoge un idioma",
-  "tutorial_language_description": "Tienes disponibles idiomas a tu elección"
+  "tutorial_language_description": "Tienes disponibles idiomas a tu elección",
+  "tutorial_config_title": "Ve a la configuración",
+  "tutorial_config_description": "Normalmente puedes hacerlo haciendo clic en el botón",
+  "tutorial_stun_title": "Mira los servidores STUN",
+  "tutorial_stun_description": "Los servidores STUN son importantes para establecer conexiones.",
+  "tutorial_group_server_title": "Edita tu configuración STUN",
+  "tutorial_group_server_description": "Puede agregar más o editar/eliminar los servidores existentes",
+  "tutorial_go_back_title": "Vuelve atrás",
+  "tutorial_go_back_description": "Volvamos al menú anterior.",
+  "tutorial_turn_title": "Aquí están los servidores TURN",
+  "tutorial_turn_description": "Los servidores TURN son importantes si desea establecer conexiones detrás de estrictos cortafuegos o utilizando Internet móvil.",
+  "tutorial_done_text": "Terminar",
+  "tutorial_next_text": "Siguiente",
+  "tutorial_prev_text": "Anterior",
+  "tutorial_play_title": "Estas listo para jugar",
+  "tutorial_play_description": "Ahora selecciona tu modo preferido para jugar (en la web solo hay uno) y sigue las instrucciones que aparecen dentro",
+  "share-the-code-with-your-client": "Comparte el código con tu cliente."
 }
diff --git a/frontend/src/lib/i18n/gl.json b/frontend/src/lib/i18n/gl.json
@@ -11,7 +11,7 @@
   "stun-servers-title": "Servidores STUN",
   "server-list-link": "Listaxe de servidores",
   "add": "Engadir",
-  "get-your-host-code": "Obtén o teu código de anfitrión",
+  "get-your-host-code": "Obtén o código do teu cliente",
   "connect-to-client": "Conectar co cliente",
   "paste-here-code": "Pegue o código aquí",
   "start-streaming": "Comezar retransmisión",
@@ -62,5 +62,21 @@
   "connection-established-successfully": "Conexión satisfactoria",
   "tutorial_btn": "Titorial",
   "tutorial_language_description": "Tes disponíbeis idiomas a tua elección",
-  "tutorial_language_title": "Escolle un idioma"
+  "tutorial_language_title": "Escolle un idioma",
+  "tutorial_config_title": "Vai á configuración",
+  "tutorial_config_description": "Normalmente pode facelo facendo clic no botón",
+  "tutorial_stun_title": "Consulta os servidores STUN",
+  "tutorial_stun_description": "Os servidores STUN son importantes para establecer conexións",
+  "tutorial_group_server_title": "Edita a túa configuración de STUN",
+  "tutorial_group_server_description": "Podes engadir máis ou editar/eliminar os servidores existentes",
+  "tutorial_go_back_title": "Volve atrás",
+  "tutorial_go_back_description": "Volvamos ao menú anterior",
+  "tutorial_turn_title": "Aquí están os servidores TURN",
+  "tutorial_turn_description": "Os servidores TURN son importantes se queres establecer conexións detrás de cortalumes estritos ou usar internet móbil",
+  "tutorial_done_text": "Rematar",
+  "tutorial_next_text": "Seguinte",
+  "tutorial_prev_text": "Anterior",
+  "tutorial_play_title": "Estás listo para xogar",
+  "tutorial_play_description": "Agora selecciona o teu modo preferido para xogar (na web só hai un) e sigue as instrucións que hai dentro",
+  "share-the-code-with-your-client": "Comparte o código co teu cliente"
 }
diff --git a/frontend/src/lib/i18n/ru.json b/frontend/src/lib/i18n/ru.json
@@ -31,7 +31,7 @@
   "error-stopping-streaming": "Ошибка остановки потоковой передачи",
   "first-step": "Первый шаг",
   "get-the-code-from-your-host": "Получите код от вашего хостера",
-  "get-your-host-code": "Получите код хоста",
+  "get-your-host-code": "Получите ваш клиентский код",
   "host-code-copied-to-clipboard": "Код хоста скопирован в буфер обмена.",
   "host_card_cta": "Запустить хост",
   "host_card_description": "Делитесь своей игрой с клиентами и транслируйте ее в потоковом режиме",
@@ -62,5 +62,21 @@
   "unknown-connection-state": "Неизвестное состояние соединения",
   "username": "Имя пользователя",
   "waiting-for-client-to-connect": "Ожидание подключения клиента",
-  "you-are-now-disconnected": "Вы сейчас отключены"
+  "you-are-now-disconnected": "Вы сейчас отключены",
+  "tutorial_config_title": "Перейти к конфигурации",
+  "tutorial_config_description": "Обычно это можно сделать, нажав кнопку",
+  "tutorial_stun_title": "Посмотрите STUN-серверы",
+  "tutorial_stun_description": "Серверы STUN важны для установления соединений.",
+  "tutorial_group_server_title": "Отредактируйте конфигурацию STUN",
+  "tutorial_group_server_description": "Вы можете добавить больше или отредактировать/удалить существующие серверы.",
+  "tutorial_go_back_title": "Возвращаться",
+  "tutorial_go_back_description": "Вернёмся в предыдущее меню",
+  "tutorial_turn_title": "Вот серверы TURN",
+  "tutorial_turn_description": "Серверы TURN важны, если вы хотите установить соединения за строгими брандмауэрами или использовать мобильный Интернет.",
+  "tutorial_done_text": "Сделанный",
+  "tutorial_next_text": "Следующий",
+  "tutorial_prev_text": "Предыдущий",
+  "tutorial_play_title": "Вы готовы играть",
+  "tutorial_play_description": "Теперь выберите предпочитаемый режим игры (в сети он только один) и следуйте инструкциям внутри.",
+  "share-the-code-with-your-client": "Поделитесь кодом с вашим клиентом"
 }
diff --git a/frontend/src/lib/layout/BackwardButton.svelte b/frontend/src/lib/layout/BackwardButton.svelte
@@ -12,7 +12,7 @@
 
 </script>
 
-<button on:click={handleClick} class="fixed top-28 md:right-28 right-20 p-3 rounded-full bg-white shadow-lg">
+<button id="tutorial-back-btn" on:click={handleClick} class="fixed top-28 md:right-28 right-20 p-3 rounded-full bg-white shadow-lg">
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		class="h-6 w-6"
diff --git a/frontend/src/lib/tutorial/driver.ts b/frontend/src/lib/tutorial/driver.ts
@@ -1,6 +1,6 @@
 import { goto } from '$app/navigation';
 import { driver } from 'driver.js';
-import type { Driver } from 'driver.js';
+import type { Driver, DriveStep } from 'driver.js';
 import 'driver.js/dist/driver.css';
 import { _ } from 'svelte-i18n';
 import { get } from 'svelte/store';
@@ -20,10 +20,13 @@ export function StartTutorial(selectedStep: number = 0) {
 		animate: true,
 		smoothScroll: true,
 		stagePadding: 1,
-		stageRadius: 1
+		stageRadius: 1,
+		doneBtnText: get(_)('tutorial_done_text'),
+		nextBtnText: get(_)('tutorial_next_text'),
+		prevBtnText: get(_)('tutorial_prev_text')
 	});
 
-	const driverSteps = [
+	const driverSteps: DriveStep[] = [
 		{
 			element: '#tutorial-config-btn',
 			popover: {
@@ -69,11 +72,64 @@ export function StartTutorial(selectedStep: number = 0) {
 					goto('/mode/config');
 					goPrevTutorial();
 				},
+				onNextClick: () => {
+					goNextTutorial();
+				}
+			}
+		},
+		{
+			element: '#tutorial-back-btn',
+			popover: {
+				title: get(_)('tutorial_go_back_title'),
+				description: get(_)('tutorial_go_back_description'),
+				onPrevClick: () => {
+					goPrevTutorial();
+				},
 				onNextClick: () => {
 					goto('/mode/config');
 					goNextTutorial();
 				}
 			}
+		},
+		{
+			element: '#tutorial-turn-card',
+			popover: {
+				title: get(_)('tutorial_turn_title'),
+				description: get(_)('tutorial_turn_description'),
+				onPrevClick: () => {
+					goto('/mode/config/advanced/stun');
+					goPrevTutorial();
+				},
+				onNextClick: () => {
+					goNextTutorial();
+				}
+			}
+		},
+		{
+			element: '#tutorial-back-btn',
+			popover: {
+				title: get(_)('tutorial_go_back_title'),
+				description: get(_)('tutorial_go_back_description'),
+				onPrevClick: () => {
+					goPrevTutorial();
+				},
+				onNextClick: () => {
+					goto('/');
+					goNextTutorial();
+				}
+			}
+		},
+		{ 
+			element: '#tutorial-play',
+			popover: {
+				title: get(_)('tutorial_play_title'),
+				description: get(_)('tutorial_play_description'),
+				onPrevClick: () => {
+					goto("/mode/config")
+					goPrevTutorial();
+				},
+			} 
+
 		}
 	];
 
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -8,7 +8,6 @@
 
 	import GamepadSVG from '$lib/assets/gamepad.svg?raw';
 	import Loading from '$lib/loading/Loading.svelte';
-	import onwebsite from '$lib/detection/onwebsite';
 </script>
 
 <svelte:head>
@@ -19,22 +18,11 @@
 <nav class="navbar bg-primary text-primary-content">
 	<div class="flex-1">
 		<h1>
-			{#if onwebsite}
-				<a
-					href="https://remote-controller.vercel.app/"
-					class="btn btn-ghost normal-case text-xl items-start content-center"
-				>
-					{@html GamepadSVG}
-
-					<div class="hidden md:block">Remote Controller</div>
-				</a>
-			{:else}
 				<a href="/" class="btn btn-ghost normal-case text-xl items-start content-center">
 					{@html GamepadSVG}
 
 					<div class="hidden md:block">Remote Controller</div>
 				</a>
-			{/if}
 		</h1>
 	</div>
 	<div class="flex-none">
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -27,7 +27,7 @@
 		>{$_('main_title_role')}</span
 	>
 </h2>
-<div class="flex gap-4 mt-4 md:flex-row flex-col">
+<div id="tutorial-play" class="flex gap-4 mt-4 md:flex-row flex-col">
 	{#if !onwebsite}
 		<div
 			class="card md:w-96 md:h-52 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
diff --git a/frontend/src/routes/mode/config/TurnServers.svelte b/frontend/src/routes/mode/config/TurnServers.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <section
+	id="tutorial-turn-card"
 	class="min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700"
 >
 	<form class="max-w-lg mx-auto space-y-6" method="get" action="/mode/config/advanced/turn">
diff --git a/frontend/src/routes/mode/host/+page.svelte b/frontend/src/routes/mode/host/+page.svelte

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`>{$_('main_title_role')}</span`
`28`	`28`	`>`
`29`	`29`	`</h2>`
`30`		`-<div class="flex gap-4 mt-4 md:flex-row flex-col">`
	`30`	`+<div id="tutorial-play" class="flex gap-4 mt-4 md:flex-row flex-col">`
`31`	`31`	`{#if !onwebsite}`
`32`	`32`	`<div`
`33`	`33`	`class="card md:w-96 md:h-52 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`</script>`
`4`	`4`
`5`	`5`	`<section`
	`6`	`+ id="tutorial-turn-card"`
`6`	`7`	`class="min-w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700"`
`7`	`8`	`>`
`8`	`9`	`<form class="max-w-lg mx-auto space-y-6" method="get" action="/mode/config/advanced/turn">`