Skip to content

Commit c6b2389

Browse files
gparantgparant
authored
feat: Update v1 tuto (#236)
1 parent 4ec8279 commit c6b2389

File tree

11 files changed

+129
-150
lines changed

11 files changed

+129
-150
lines changed

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

+15
Loading

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

+15
Loading

‎resources/images/tutov1/step2/woka-meet.png

8.64 KB
Loading

‎resources/images/tutov1/step3/woka-action.png

9.86 KB
Loading

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

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script lang="ts">
2-
import { currentStepStore, steps } from "../Store/StepStore";
3-
import Step from "./Step.svelte";
2+
import { currentStepStore } from "../Store/StepStore";
43
import Steps from "./Steps.svelte";
4+
import Step1 from "./Steps/Step1.svelte";
5+
import Step2 from "./Steps/Step2.svelte";
6+
import Step3 from "./Steps/Step3.svelte";
57
68
function close(){
79
WA.player.state.tutorialDone = true;
@@ -17,17 +19,15 @@
1719
on:close={close}
1820
on:skip={close}
1921
>
20-
{#each steps as step, index}
21-
{#if $currentStepStore === (index+1)}
22-
<Step
23-
title={step.title}
24-
videoUrl={step.videoUrl}
25-
videoPoster={step.videoPoster}
26-
description={step.description}
27-
shortTitle={step.shortTitle}
28-
/>
29-
{/if}
30-
{/each}
22+
{#if $currentStepStore === 1}
23+
<Step1 />
24+
{/if}
25+
{#if $currentStepStore === 2}
26+
<Step2 />
27+
{/if}
28+
{#if $currentStepStore === 3}
29+
<Step3 />
30+
{/if}
3131
</Steps>
3232
</div>
3333
<style>

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

-28
This file was deleted.

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script lang="ts">
22
import { createEventDispatcher } from "svelte";
3-
import { currentStepStore, steps } from "../Store/StepStore";
3+
import { currentStepStore } from "../Store/StepStore";
44
55
const dispatch = createEventDispatcher();
66
77
function next(){
8-
if($currentStepStore === steps.length)return;
8+
if($currentStepStore === 3)return;
99
currentStepStore.set($currentStepStore + 1);
1010
}
1111
function previous(){
@@ -27,14 +27,14 @@
2727
</div>
2828
<div class="footer tw-p-3 tw-bg-medium-purple tw-flex tw-justify-around tw-fixed tw-bottom-0 tw-w-full tw-overflow-y-hidden tw-overflow-x-auto tw-flex-wrap tw-overflow-visible">
2929
<div class="elispes tw-bg-medium-purple/60 tw-absolute tw-w-full -tw-top-10 tw-flex tw-flex-row tw-justify-center tw-align-middle">
30-
{#each steps as _, i}
31-
<span class="elispe {(i+1) === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
32-
{/each}
30+
<span class="elispe {1 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
31+
<span class="elispe {2 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
32+
<span class="elispe {3 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
3333
</div>
3434
<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}>
3535
<span class="tw-px-4 tw-absolute tw-left-4">&lt;</span> Previous
3636
</button>
37-
{#if $currentStepStore === steps.length}
37+
{#if $currentStepStore === 3}
3838
<button class="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
3939
Finish
4040
</button>

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
2+
<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+
</div>
7+
<div class="video">
8+
<video class="tw-w-full tw-rounded-lg"
9+
poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step1-onboarding.png"
10+
controls
11+
autoplay
12+
muted
13+
>
14+
<track kind="captions">
15+
<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
17+
</video>
18+
</div>
19+
<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">
21+
<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>
23+
</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>
28+
</div>
29+
</div>

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
2+
<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+
</div>
7+
<div class="video">
8+
<video class="tw-w-full tw-rounded-lg"
9+
poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step2-onboarding.png"
10+
controls
11+
autoplay
12+
muted
13+
>
14+
<track kind="captions">
15+
<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
17+
</video>
18+
</div>
19+
<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">
21+
<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>
23+
</div>
24+
</div>
25+
</div>

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
2+
<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>
5+
</div>
6+
<div class="video">
7+
<video class="tw-w-full tw-rounded-lg"
8+
poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step3-onboarding.png"
9+
controls
10+
autoplay
11+
muted
12+
>
13+
<track kind="captions">
14+
<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
16+
</video>
17+
</div>
18+
<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">
19+
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
20+
<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>
22+
</div>
23+
</div>
24+
</div>

‎src/Iframes/TutorialV1/Tuto/Store/StepStore.ts

+2-103
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const step4Onboarding = "/dist/resources/images/tutov1/step4-onboarding.png";
77
const step5Onboarding = "/dist/resources/images/tutov1/step5-onboarding.png";
88
const step6Onboarding = "/dist/resources/images/tutov1/step6-onboarding.png";*/
99

10-
const step1Onboarding =
10+
/*const step1Onboarding =
1111
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step1-onboarding.png";
1212
const step2Onboarding =
1313
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step2-onboarding.png";
@@ -18,107 +18,6 @@ const step4Onboarding =
1818
const step5Onboarding =
1919
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step5-onboarding.png";
2020
const step6Onboarding =
21-
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step6-onboarding.png";
21+
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step6-onboarding.png";*/
2222

23-
export const steps = [
24-
{
25-
title: "Welcome 👋",
26-
videoUrl:
27-
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-1-onboarding.mp4",
28-
videoPoster: step1Onboarding,
29-
description: `
30-
<p>Move your avatar (Woka) with your arrow keys, or by right clicking somewhere in the map. If your WOKA does not move, focus on the map by clicking anywhere with your mouse.</p>
31-
<p>Walk up to another WOKA to create a bubble zone. Your cam & mic will automatically be switched on if you did allow it on your parameters (4 WOKAs max in a bubble zone).</p>
32-
<p>
33-
<ul>
34-
<li>Change the screens positioning,</li>
35-
<li>Ask someone in your bubble zone to follow you,</li>
36-
<li>Lock your bubble so that nobody can enter your conversation,</li>
37-
<li>Share your screen. Click on the sharing screen to make it bigger or smaller,</li>
38-
<li>Deactivate or activate your cam & mic.</li>
39-
</ul>
40-
</p>
41-
`,
42-
shortTitle:
43-
"Welcome to WorkAdventure adventurer! I'm Viv Legging and i will be showing you how things work down here!",
44-
},
45-
{
46-
title: "Chat with someone 💬",
47-
videoUrl:
48-
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-2-onboarding.mp4",
49-
videoPoster: step2Onboarding,
50-
description: `
51-
<p>Reduce the distance with your teams with a complete messaging service:</p>
52-
<p>
53-
<ul>
54-
<li>Get access to the list of users connected in your map, or in another map interconnected</li>
55-
<li>Enter a bubble zone to chat with someone, or click on the teleport button to get to them easily</li>
56-
<li>Create forum or team groups to better collaborate</li>
57-
<li>Use the live zone chat to communicate with everyone in a conference room</li>
58-
<li>Exchange documents, folders, pictures, ...</li>
59-
</ul>
60-
</p>
61-
<p>You can see your timeline chat at anytime!</p>
62-
`,
63-
shortTitle: "",
64-
},
65-
{
66-
title: "Attend a conference 📹",
67-
videoUrl:
68-
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-3-onboarding.mp4",
69-
videoPoster: step3Onboarding,
70-
description: `
71-
<p>Enter a conference room to connect with unlimited number of WOKAs.</p>
72-
<p>Touch the red button to close the conference.</p>
73-
<p>Touch the blue burger button to extend or reduce the conference screen.</p>
74-
<p>
75-
<ul>
76-
<li>Deactivate or activate your cam & mic,</li>
77-
<li>Share your screen,</li>
78-
<li>Open the chat or the survey system,</li>
79-
<li>Raise your hand (speakers will be notified) or send emojis,</li>
80-
<li>Get a mosaic view of all participants,</li>
81-
<li>Change your settings,</li>
82-
<li>Leave the conference.</li>
83-
</ul>
84-
</p>
85-
`,
86-
shortTitle: "",
87-
},
88-
{
89-
title: "Interact with dynamic zones 🤸‍♀️",
90-
videoUrl:
91-
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-4-onboarding.mp4",
92-
videoPoster: step4Onboarding,
93-
description: `
94-
<p>Interact with dynamic zones by walking into them. A window will open at the right of your screen with an integration: a work tool for team collaboration, a website page, a survey doc, a Youtube video...</p>
95-
</p>Touch the red button to close the interactive window.</p>
96-
</p>Touch the blue button to extend or reduce the interactive window.</p>
97-
`,
98-
shortTitle: "",
99-
},
100-
{
101-
title: "Go private 🔒",
102-
videoUrl:
103-
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-5-onboarding.mp4",
104-
videoPoster: step5Onboarding,
105-
description: `
106-
<p>Enter silent zones when you need not to be disturbed. Nobody will be able to connect with you and your cam & mic will automatically be switched off.</p>
107-
<p>For more privacy, custom your away mode settings at any time to decide whether your cam and/or mic are automatically switched off when you're not on the WorkAdventure's tab.</p>
108-
`,
109-
shortTitle: "",
110-
},
111-
{
112-
title: "Enjoy 🚀",
113-
videoUrl:
114-
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-6-onboarding.mp4",
115-
videoPoster: step6Onboarding,
116-
description: `
117-
<p>That's it for today Adventurer. You are now ready to start your journey with us!</p>
118-
<p>If you need any kind of support, please email us: [email protected]</p>
119-
</p>Or talk to our team directly here in the village, they'll be more than happy to help you out!</p>
120-
`,
121-
shortTitle: "",
122-
},
123-
];
12423
export const currentStepStore = writable<number>(1);

0 commit comments

Comments
 (0)