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‎

Lines changed: 15 additions & 0 deletions
Loading

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

Lines changed: 15 additions & 0 deletions
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‎

Lines changed: 13 additions & 13 deletions
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‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

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

Lines changed: 6 additions & 6 deletions
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‎

Lines changed: 29 additions & 0 deletions
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‎

Lines changed: 25 additions & 0 deletions
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‎

Lines changed: 24 additions & 0 deletions
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>

0 commit comments

Comments
 (0)