Skip to content

Commit

Permalink
feat: Update v1 tuto (#236)
Browse files Browse the repository at this point in the history
  • Loading branch information
gparant authored Apr 15, 2024
1 parent 4ec8279 commit c6b2389
Show file tree
Hide file tree
Showing 11 changed files with 129 additions and 150 deletions.
15 changes: 15 additions & 0 deletions resources/images/tutov1/step1/keyboard.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions resources/images/tutov1/step1/mouse.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/tutov1/step2/woka-meet.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/tutov1/step3/woka-action.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 13 additions & 13 deletions src/Iframes/TutorialV1/Tuto/Components/App.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<script lang="ts">
import { currentStepStore, steps } from "../Store/StepStore";
import Step from "./Step.svelte";
import { currentStepStore } from "../Store/StepStore";
import Steps from "./Steps.svelte";
import Step1 from "./Steps/Step1.svelte";
import Step2 from "./Steps/Step2.svelte";
import Step3 from "./Steps/Step3.svelte";
function close(){
WA.player.state.tutorialDone = true;
Expand All @@ -17,17 +19,15 @@
on:close={close}
on:skip={close}
>
{#each steps as step, index}
{#if $currentStepStore === (index+1)}
<Step
title={step.title}
videoUrl={step.videoUrl}
videoPoster={step.videoPoster}
description={step.description}
shortTitle={step.shortTitle}
/>
{/if}
{/each}
{#if $currentStepStore === 1}
<Step1 />
{/if}
{#if $currentStepStore === 2}
<Step2 />
{/if}
{#if $currentStepStore === 3}
<Step3 />
{/if}
</Steps>
</div>
<style>
Expand Down
28 changes: 0 additions & 28 deletions src/Iframes/TutorialV1/Tuto/Components/Step.svelte

This file was deleted.

12 changes: 6 additions & 6 deletions src/Iframes/TutorialV1/Tuto/Components/Steps.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { currentStepStore, steps } from "../Store/StepStore";
import { currentStepStore } from "../Store/StepStore";
const dispatch = createEventDispatcher();
function next(){
if($currentStepStore === steps.length)return;
if($currentStepStore === 3)return;
currentStepStore.set($currentStepStore + 1);
}
function previous(){
Expand All @@ -27,14 +27,14 @@
</div>
<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">
<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">
{#each steps as _, i}
<span class="elispe {(i+1) === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
{/each}
<span class="elispe {1 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
<span class="elispe {2 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
<span class="elispe {3 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
</div>
<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}>
<span class="tw-px-4 tw-absolute tw-left-4">&lt;</span> Previous
</button>
{#if $currentStepStore === steps.length}
{#if $currentStepStore === 3}
<button class="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
Finish
</button>
Expand Down
29 changes: 29 additions & 0 deletions src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
<div class="title tw-text-white">
<h1 class="tw-p-3">Welcome to Workadventure</h1>
<h2 class="tw-p-3 tw-text-2xl">Step 1: how to move your woka*</h2>
<p class="tw-text-xs tw-p-0">* woka = avatar</p>
</div>
<div class="video">
<video class="tw-w-full tw-rounded-lg"
poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step1-onboarding.png"
controls
autoplay
muted
>
<track kind="captions">
<source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-1-onboarding.mp4" type="video/mp4">
Video not available in your navigator
</video>
</div>
<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">
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
<img src="/resources/images/tutov1/step1/keyboard.svg" alt="keyboard" class="tw-w-40 tw-h-auto">
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">Control your Woka by using the arrow keys</p>
</div>
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
<img src="/resources/images/tutov1/step1/mouse.svg" alt="mouse" class="tw-w-40 tw-h-auto">
<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>
</div>
</div>
</div>
25 changes: 25 additions & 0 deletions src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
<div class="title tw-text-white">
<h1 class="tw-p-3">Welcome to Workadventure</h1>
<h2 class="tw-p-3 tw-text-2xl">Step 2: interact with people in a bubble*</h2>
<p class="tw-text-xs tw-p-0">* maximum of 4 people in a bubble</p>
</div>
<div class="video">
<video class="tw-w-full tw-rounded-lg"
poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step2-onboarding.png"
controls
autoplay
muted
>
<track kind="captions">
<source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-2-onboarding.mp4" type="video/mp4">
Video not available in your navigator
</video>
</div>
<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">
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
<img src="/resources/images/tutov1/step2/woka-meet.png" alt="Meet in" class="tw-w-56 tw-h-auto">
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">Approach another Woka and start interacting</p>
</div>
</div>
</div>
24 changes: 24 additions & 0 deletions src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
<div class="title tw-text-white">
<h1 class="tw-p-3">Welcome to Workadventure</h1>
<h2 class="tw-p-3 tw-text-2xl">Step 3: interact with content</h2>
</div>
<div class="video">
<video class="tw-w-full tw-rounded-lg"
poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step3-onboarding.png"
controls
autoplay
muted
>
<track kind="captions">
<source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-3-onboarding.mp4" type="video/mp4">
Video not available in your navigator
</video>
</div>
<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">
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
<img src="/resources/images/tutov1/step3/woka-action.png" alt="Meet in" class="tw-w-64 tw-h-auto">
<p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">Approach another Woka and start interacting</p>
</div>
</div>
</div>
105 changes: 2 additions & 103 deletions src/Iframes/TutorialV1/Tuto/Store/StepStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const step4Onboarding = "/dist/resources/images/tutov1/step4-onboarding.png";
const step5Onboarding = "/dist/resources/images/tutov1/step5-onboarding.png";
const step6Onboarding = "/dist/resources/images/tutov1/step6-onboarding.png";*/

const step1Onboarding =
/*const step1Onboarding =
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step1-onboarding.png";
const step2Onboarding =
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step2-onboarding.png";
Expand All @@ -18,107 +18,6 @@ const step4Onboarding =
const step5Onboarding =
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step5-onboarding.png";
const step6Onboarding =
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step6-onboarding.png";
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step6-onboarding.png";*/

export const steps = [
{
title: "Welcome 👋",
videoUrl:
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-1-onboarding.mp4",
videoPoster: step1Onboarding,
description: `
<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>
<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>
<p>
<ul>
<li>Change the screens positioning,</li>
<li>Ask someone in your bubble zone to follow you,</li>
<li>Lock your bubble so that nobody can enter your conversation,</li>
<li>Share your screen. Click on the sharing screen to make it bigger or smaller,</li>
<li>Deactivate or activate your cam & mic.</li>
</ul>
</p>
`,
shortTitle:
"Welcome to WorkAdventure adventurer! I'm Viv Legging and i will be showing you how things work down here!",
},
{
title: "Chat with someone 💬",
videoUrl:
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-2-onboarding.mp4",
videoPoster: step2Onboarding,
description: `
<p>Reduce the distance with your teams with a complete messaging service:</p>
<p>
<ul>
<li>Get access to the list of users connected in your map, or in another map interconnected</li>
<li>Enter a bubble zone to chat with someone, or click on the teleport button to get to them easily</li>
<li>Create forum or team groups to better collaborate</li>
<li>Use the live zone chat to communicate with everyone in a conference room</li>
<li>Exchange documents, folders, pictures, ...</li>
</ul>
</p>
<p>You can see your timeline chat at anytime!</p>
`,
shortTitle: "",
},
{
title: "Attend a conference 📹",
videoUrl:
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-3-onboarding.mp4",
videoPoster: step3Onboarding,
description: `
<p>Enter a conference room to connect with unlimited number of WOKAs.</p>
<p>Touch the red button to close the conference.</p>
<p>Touch the blue burger button to extend or reduce the conference screen.</p>
<p>
<ul>
<li>Deactivate or activate your cam & mic,</li>
<li>Share your screen,</li>
<li>Open the chat or the survey system,</li>
<li>Raise your hand (speakers will be notified) or send emojis,</li>
<li>Get a mosaic view of all participants,</li>
<li>Change your settings,</li>
<li>Leave the conference.</li>
</ul>
</p>
`,
shortTitle: "",
},
{
title: "Interact with dynamic zones 🤸‍♀️",
videoUrl:
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-4-onboarding.mp4",
videoPoster: step4Onboarding,
description: `
<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>
</p>Touch the red button to close the interactive window.</p>
</p>Touch the blue button to extend or reduce the interactive window.</p>
`,
shortTitle: "",
},
{
title: "Go private 🔒",
videoUrl:
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-5-onboarding.mp4",
videoPoster: step5Onboarding,
description: `
<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>
<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>
`,
shortTitle: "",
},
{
title: "Enjoy 🚀",
videoUrl:
"https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-6-onboarding.mp4",
videoPoster: step6Onboarding,
description: `
<p>That's it for today Adventurer. You are now ready to start your journey with us!</p>
<p>If you need any kind of support, please email us: [email protected]</p>
</p>Or talk to our team directly here in the village, they'll be more than happy to help you out!</p>
`,
shortTitle: "",
},
];
export const currentStepStore = writable<number>(1);

0 comments on commit c6b2389

Please sign in to comment.