Skip to content

Commit bb89855

Browse files
gparantgparant
authored
feat: tuto translation [en / fr] (#237)
 - Add translation service for the tuto - Improve tuto to change picture
1 parent 39bb4ab commit bb89855

File tree

13 files changed

+256
-27
lines changed

13 files changed

+256
-27
lines changed

‎package-lock.json

+60
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
"@fontsource/press-start-2p": "^4.5.10",
108108
"@workadventure-style/sweetsky": "^1.0.2",
109109
"@workadventure/tiled-map-type-guard": "^2.0.4",
110+
"i18next": "^23.11.2",
110111
"mustache": "^4.2.0",
111112
"play-dtmf": "^0.1.1",
112113
"postcss-loader": "^7.0.1"

‎resources/images/tutov1/step1/right-click.svg

+27
Loading

‎resources/images/tutov1/step1/touch.svg

+12
Loading

‎src/Iframes/TutorialV1/Tuto/Components/Steps.svelte

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { createEventDispatcher } from "svelte";
33
import { currentStepStore } from "../Store/StepStore";
4+
import i18next from "i18next";
45
56
const dispatch = createEventDispatcher();
67
@@ -32,20 +33,20 @@
3233
<span class="elispe {3 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
3334
</div>
3435
<button class="btn {$currentStepStore === 1 ? 'disabled' : 'light outline'} tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={previous}>
35-
<span class="tw-px-4 tw-absolute tw-left-4">&lt;</span> Previous
36+
<span class="tw-px-4 tw-absolute tw-left-4">&lt;</span> {i18next.t('tuto.previous')}
3637
</button>
3738
{#if $currentStepStore === 3}
3839
<button class="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
39-
Finish
40+
{i18next.t('tuto.finish')}
4041
</button>
4142
{:else}
4243
<button class="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
43-
Next
44+
{i18next.t('tuto.next')}
4445
<span class="tw-px-4 tw-absolute tw-right-4">></span>
4546
</button>
4647
{/if}
4748
<button class="btn blue-title tw-underline tw-decoration-light-blue tw-cursor-pointer" on:click|stopPropagation={skip}>
48-
Skip all
49+
{i18next.t('tuto.skipAll')}
4950
</button>
5051
</div>
5152
<style lang="scss">

‎src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte

+25-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
<script>
2+
import i18next from "i18next";
3+
</script>
14
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
25
<div class="title tw-text-white">
3-
<h1 class="tw-p-3">Welcome to Workadventure</h1>
4-
<h2 class="tw-p-3 tw-text-2xl">Step 1: how to move your woka*</h2>
5-
<p class="tw-text-xs tw-p-0">* woka = avatar</p>
6+
<h1 class="tw-p-3">{i18next.t('tuto.step1.title')}</h1>
7+
<h2 class="tw-p-3 tw-text-2xl">{i18next.t('tuto.step1.subtitle')}</h2>
8+
<p class="tw-text-xs tw-p-0">{i18next.t('tuto.step1.describe')}</p>
69
</div>
710
<div class="video">
811
<video class="tw-w-full tw-rounded-lg"
@@ -13,17 +16,29 @@
1316
>
1417
<track kind="captions">
1518
<source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-1-onboarding.mp4" type="video/mp4">
16-
Video not available in your navigator
19+
{i18next.t('tuto.videoNotLoaded')}
1720
</video>
1821
</div>
1922
<div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
20-
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
23+
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10 tw-w-1/2 ">
2124
<img src="resources/images/tutov1/step1/keyboard.svg" alt="keyboard" class="tw-w-40 tw-h-auto">
22-
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">Control your Woka by using the arrow keys</p>
25+
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">{i18next.t('tuto.step1.arrow')}</p>
2326
</div>
24-
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
25-
<img src="resources/images/tutov1/step1/mouse.svg" alt="mouse" class="tw-w-40 tw-h-auto">
26-
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">Control your Woka by right-clicking anywhere on the map.</p>
27+
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10 tw-w-1/2">
28+
<img src="resources/images/tutov1/step1/right-click.svg" alt="mouse" class="tw-w-40 tw-h-auto">
29+
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">{i18next.t('tuto.step1.click')}</p>
2730
</div>
2831
</div>
29-
</div>
32+
</div>
33+
<style lang="scss">
34+
/* Hide scrollbar for Chrome, Safari and Opera */
35+
.ste::-webkit-scrollbar{
36+
display: none;
37+
}
38+
39+
/* Hide scrollbar for IE, Edge and Firefox */
40+
.ste {
41+
-ms-overflow-style: none; /* IE and Edge */
42+
scrollbar-width: none; /* Firefox */
43+
}
44+
</style>

‎src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte

+21-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
<script>
2+
import i18next from "i18next";
3+
</script>
14
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
25
<div class="title tw-text-white">
3-
<h1 class="tw-p-3">Welcome to Workadventure</h1>
4-
<h2 class="tw-p-3 tw-text-2xl">Step 2: interact with people in a bubble*</h2>
5-
<p class="tw-text-xs tw-p-0">* maximum of 4 people in a bubble</p>
6+
<h1 class="tw-p-3">{i18next.t("tuto.step2.title")}</h1>
7+
<h2 class="tw-p-3 tw-text-2xl">{i18next.t("tuto.step2.subtitle")}</h2>
8+
<p class="tw-text-xs tw-p-0">{i18next.t("tuto.step2.describe")}</p>
69
</div>
710
<div class="video">
811
<video class="tw-w-full tw-rounded-lg"
@@ -13,13 +16,25 @@
1316
>
1417
<track kind="captions">
1518
<source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-2-onboarding.mp4" type="video/mp4">
16-
Video not available in your navigator
19+
{i18next.t('tuto.videoNotLoaded')}
1720
</video>
1821
</div>
1922
<div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
2023
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
2124
<img src="resources/images/tutov1/step2/woka-meet.png" alt="Meet in" class="tw-w-56 tw-h-auto">
22-
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">Approach another Woka and start interacting</p>
25+
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">{i18next.t('tuto.step2.bubble')}</p>
2326
</div>
2427
</div>
25-
</div>
28+
</div>
29+
<style lang="scss">
30+
/* Hide scrollbar for Chrome, Safari and Opera */
31+
.ste::-webkit-scrollbar{
32+
display: none;
33+
}
34+
35+
/* Hide scrollbar for IE, Edge and Firefox */
36+
.ste {
37+
-ms-overflow-style: none; /* IE and Edge */
38+
scrollbar-width: none; /* Firefox */
39+
}
40+
</style>

‎src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte

+22-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
<script>
2+
3+
import i18next from "i18next";
4+
5+
</script>
16
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
27
<div class="title tw-text-white">
3-
<h1 class="tw-p-3">Welcome to Workadventure</h1>
4-
<h2 class="tw-p-3 tw-text-2xl">Step 3: interact with content</h2>
8+
<h1 class="tw-p-3">{i18next.t("tuto.step3.title")}</h1>
9+
<h2 class="tw-p-3 tw-text-2xl">{i18next.t("tuto.step3.subtitle")}</h2>
510
</div>
611
<div class="video">
712
<video class="tw-w-full tw-rounded-lg"
@@ -12,13 +17,25 @@
1217
>
1318
<track kind="captions">
1419
<source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-3-onboarding.mp4" type="video/mp4">
15-
Video not available in your navigator
20+
{i18next.t('tuto.videoNotLoaded')}
1621
</video>
1722
</div>
1823
<div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
1924
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
2025
<img src="resources/images/tutov1/step3/woka-action.png" alt="Meet in" class="tw-w-64 tw-h-auto">
21-
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">Approach another Woka and start interacting</p>
26+
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">{i18next.t('tuto.step3.object')}</p>
2227
</div>
2328
</div>
24-
</div>
29+
</div>
30+
<style lang="scss">
31+
/* Hide scrollbar for Chrome, Safari and Opera */
32+
.ste::-webkit-scrollbar{
33+
display: none;
34+
}
35+
36+
/* Hide scrollbar for IE, Edge and Firefox */
37+
.ste {
38+
-ms-overflow-style: none; /* IE and Edge */
39+
scrollbar-width: none; /* Firefox */
40+
}
41+
</style>

‎src/Iframes/TutorialV1/Tuto/index.ts

+31-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,36 @@
11
import "./style/index.scss";
22

33
import App from "./Components/App.svelte";
4+
import i18next from "i18next";
5+
import * as en from "../../../translate/en-US/index";
6+
import * as fr from "../../../translate/fr-FR/index";
47

5-
new App({
6-
target: document.body,
8+
i18next.init({
9+
debug: true,
10+
fallbackLng: "en",
11+
resources: {
12+
en: {
13+
translation: en,
14+
},
15+
fr: {
16+
translation: fr,
17+
},
18+
},
719
});
20+
21+
const startTuto = () => {
22+
new App({
23+
target: document.body,
24+
});
25+
};
26+
27+
try {
28+
WA.onInit().then(() => {
29+
const lang = WA.player.language;
30+
i18next.changeLanguage(lang);
31+
startTuto();
32+
});
33+
} catch (e) {
34+
console.warn("error", e);
35+
startTuto();
36+
}

‎src/translate/en-US/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as tuto } from "./tuto";

0 commit comments

Comments
 (0)