File tree Expand file tree Collapse file tree 11 files changed +129
-150
lines changed
src/Iframes/TutorialV1/Tuto Expand file tree Collapse file tree 11 files changed +129
-150
lines changed Original file line number Diff line number Diff line change 1
1
<script lang =" ts" >
2
- import { currentStepStore , steps } from " ../Store/StepStore" ;
3
- import Step from " ./Step.svelte" ;
2
+ import { currentStepStore } from " ../Store/StepStore" ;
4
3
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" ;
5
7
6
8
function close(){
7
9
WA .player .state .tutorialDone = true ;
17
19
on:close ={close }
18
20
on:skip ={close }
19
21
>
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 }
31
31
</Steps >
32
32
</div >
33
33
<style >
Load Diff This file was deleted.
Original file line number Diff line number Diff line change 1
1
<script lang =" ts" >
2
2
import { createEventDispatcher } from " svelte" ;
3
- import { currentStepStore , steps } from " ../Store/StepStore" ;
3
+ import { currentStepStore } from " ../Store/StepStore" ;
4
4
5
5
const dispatch = createEventDispatcher ();
6
6
7
7
function next(){
8
- if ($currentStepStore === steps . length )return ;
8
+ if ($currentStepStore === 3 )return ;
9
9
currentStepStore .set ($currentStepStore + 1 );
10
10
}
11
11
function previous(){
27
27
</div >
28
28
<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" >
29
29
<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 >
33
33
</div >
34
34
<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
35
<span class =" tw-px-4 tw-absolute tw-left-4" ><</span > Previous
36
36
</button >
37
- {#if $currentStepStore === steps . length }
37
+ {#if $currentStepStore === 3 }
38
38
<button class ="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click |stopPropagation ={close }>
39
39
Finish
40
40
</button >
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 >
You can’t perform that action at this time.
0 commit comments