fix(tutorial): create "new tutorial v1"

 - HTML Tutorial is all information and videos for onboarding and feature presentations,
 - The launcher is html iframe to launch the integration user experience within WorkAdventure. This application will be set in our back office administration and available to WorkAdventure customers.

Author: gparant

.eslintignore

@@ -1,2 +1,5 @@
 dist/
-jest.config.js
+jest.config.js
+tailwind.config.js
+tailwind.config.cjs
+postcss.config.js

.eslintrc

@@ -1,3 +1,10 @@
 {
-  "extends": "@rpidanny/eslint-config-typescript"
+  "extends": "@rpidanny/eslint-config-typescript",
+  "rules": {
+    "no-unused-vars": "off",
+    "simple-import-sort/imports": "off",
+    "arrow-parens": "off",
+    "camelcase": "off",
+    "no-throw-literal": "error"
+  }
 }

CHANGELOG.md

@@ -1,3 +1,7 @@
+### Features
+
+* **tutorialv1:** create "new tutorial v1" ([6cf1e80](https://github.com/workadventure/scripting-api-extra/commit/6cf1e8053da44f2b8229fa6938c8c2da48ac74c8))
+
 ## [1.3.3](https://github.com/workadventure/scripting-api-extra/compare/v1.3.2...v1.3.3) (2022-07-06)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@workadventure/scripting-api-extra",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "A set of utility functions / features to improve WorkAdventure maps",
   "main": "dist/index.js",
   "types": "dist/index.d.js",
@@ -47,20 +47,23 @@
     ]
   },
   "devDependencies": {
+    "@16bits/nes.css": "^2.3.2",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@rpidanny/eslint-config-typescript": "^1.0.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/npm": "^7.1.0",
+    "@tailwindcss/forms": "^0.5.3",
     "@tsconfig/svelte": "^2.0.1",
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/jest": "^27.0.1",
     "@types/mini-css-extract-plugin": "^2.2.0",
     "@types/mustache": "^4.1.2",
     "@types/webpack-dev-server": "^4.1.0",
     "@workadventure/iframe-api-typings": "^1.7.2",
+    "autoprefixer": "^10.4.8",
     "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.4",
@@ -73,6 +76,7 @@
     "mini-css-extract-plugin": "^2.2.2",
     "node-polyfill-webpack-plugin": "^1.1.2",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.16",
     "prettier": "^2.0.5",
     "sass": "^1.32.12",
     "sass-loader": "^12.1.0",
@@ -81,6 +85,7 @@
     "svelte-check": "^2.1.0",
     "svelte-loader": "^3.1.1",
     "svelte-preprocess": "^4.7.3",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^26.1.4",
     "ts-loader": "^9.2.5",
     "ts-node": "^10.1.0",
@@ -99,10 +104,12 @@
   },
   "unpkg": "dist/bundle.js",
   "dependencies": {
-    "@fontsource/press-start-2p": "^4.5.0",
+    "@fontsource/press-start-2p": "^4.5.10",
+    "@workadventure-style/sweetsky": "^1.0.2",
     "@workadventure/tiled-map-type-guard": "^2.0.4",
     "mustache": "^4.2.0",
     "nes.css": "^2.3.0",
-    "play-dtmf": "^0.1.1"
+    "play-dtmf": "^0.1.1",
+    "postcss-loader": "^7.0.1"
   }
 }

package.json

@@ -0,0 +1,2 @@
+const postcssConfig = require("@workadventure-style/sweetsky/postcss.config");
+module.exports = postcssConfig;

postcss.config.js

@@ -1,9 +1,8 @@
 import { Properties } from "../Properties";
-import type { ITiledMap } from "@workadventure/tiled-map-type-guard/dist";
+import type { ITiledMap, ITiledMapLayer } from "@workadventure/tiled-map-type-guard/dist";
 import { defaultAssetsUrl } from "./default_assets_url";
 import { getLayersMap } from "../LayersFlattener";
 import { openConfig } from "../VariablesExtra";
-import type { ITiledMapLayer } from "@workadventure/tiled-map-type-guard/dist";
 import type { ActionMessage } from "@workadventure/iframe-api-typings/Api/iframe/Ui/ActionMessage";
 
 let layersMap!: Map<string, ITiledMapLayer>;
@@ -12,7 +11,7 @@ let layersMap!: Map<string, ITiledMapLayer>;
  * Initialize the configuration button in the menu
  */
 export async function initConfiguration(assetsUrl?: string | undefined): Promise<void> {
-    const map: ITiledMap = await WA.room.getTiledMap();
+    const map: ITiledMap = (await WA.room.getTiledMap()) as ITiledMap;
     assetsUrl = assetsUrl ?? defaultAssetsUrl;
     layersMap = await getLayersMap();
     const configurationLayer = map.layers.find((layer) => layer.name === "configuration");

resources/images/tutov1/step1-onboarding.png

@@ -1,6 +1,5 @@
 import type { WasCameraUpdatedEvent } from "@workadventure/iframe-api-typings/Api/Events/WasCameraUpdatedEvent";
 import { desktopConfig, mobileConfig } from "../Iframes/Tutorial/config/config";
-import type { ITiledMapProperty } from "@workadventure/tiled-map-type-guard/dist";
 import type { Position } from "@workadventure/iframe-api-typings/Api/iframe/player";
 import type { CreateEmbeddedWebsiteEvent } from "@workadventure/iframe-api-typings/Api/Events/EmbeddedWebsiteEvent";
 import { defaultAssetsUrl } from "./default_assets_url";
@@ -9,9 +8,7 @@ export async function initTutorial(): Promise<void> {
     const tutorialDone = WA.player.state.tutorialDone;
     const isForMobile = /Mobi|Android/i.test(navigator.userAgent);
     const map = await WA.room.getTiledMap();
-    const tutorialProperty = await map.properties?.find(
-        (property: ITiledMapProperty) => property.name === "tutorial",
-    );
+    const tutorialProperty = await map.properties?.find((property) => property.name === "tutorial");
     const isTutorialEnabled = tutorialProperty && tutorialProperty.value;
 
     if (!tutorialDone && isTutorialEnabled) {

resources/images/tutov1/step2-onboarding.png

@@ -13,7 +13,7 @@
 
 {#if $currentPage !== 'configuration' }
     <div class="left mb-20">
-        <button class="nes-btn" on:click={() => { $currentPage = $currentPage.substr(0, $currentPage.indexOf('/')) }}>&lt; Back</button>
+        <button class="nes-btn" on:click={() => { $currentPage = $currentPage.substring(0, $currentPage.indexOf('/')) }}>&lt; Back</button>
     </div>
 {/if}
 

resources/images/tutov1/step3-onboarding.png

@@ -17,7 +17,7 @@
 </div>
 
 {#if $currentPage !== 'configuration' }
-    <button class="nes-btn" on:click={() => { $currentPage = $currentPage.substr(0, $currentPage.indexOf('/')) }}>Back</button>
+    <button class="nes-btn" on:click={() => { $currentPage = $currentPage.substring(0, $currentPage.indexOf('/')) }}>Back</button>
 {/if}
 
 <style lang="scss">

resources/images/tutov1/step4-onboarding.png

@@ -1,5 +1,5 @@
 import { derived, Readable } from "svelte/store";
-import type { ITiledMap, ITiledMapLayer } from "@workadventure/tiled-map-type-guard/dist";
+import type { ITiledMapLayer } from "@workadventure/tiled-map-type-guard/dist";
 import { currentPage } from "./NavigationStore";
 
 // TODO: add a store for all layers flattened
@@ -10,9 +10,9 @@ export const configurationLayerStore = derived<Readable<string>, ITiledMapLayer
     ($currentPage, set) => {
         WA.room
             .getTiledMap()
-            .then((tiledMap: ITiledMap) => {
+            .then((tiledMap) => {
                 const configurationLayer = tiledMap.layers.find(
-                    (layer: ITiledMapLayer) => layer.name === "configuration",
+                    (layer) => layer.name === "configuration",
                 );
 
                 if (configurationLayer === undefined) {
@@ -21,7 +21,7 @@ export const configurationLayerStore = derived<Readable<string>, ITiledMapLayer
                     );
                 }
 
-                set(findLayer($currentPage, configurationLayer));
+                set(findLayer($currentPage, configurationLayer as ITiledMapLayer));
             })
             .catch((e) => console.error(e));
     },

resources/images/tutov1/step5-onboarding.png

@@ -0,0 +1,22 @@
+import { defaultAssetsUrl } from "../../../Features/default_assets_url";
+
+console.info("Onboarding script initialized!");
+document.addEventListener("DOMContentLoaded", () => {
+    const tutoUrl = `${
+        defaultAssetsUrl !== "" ? defaultAssetsUrl : "http://extra.workadventure.localhost"
+    }/tutorialv1.html`;
+    console.info("Start onboarding application!", tutoUrl);
+
+    if (WA.player.state.tutorialDone) return;
+
+    //TODO delete @ts-ignore when new scripting release is up
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    WA.ui.modal.openModal({
+        src: tutoUrl,
+        allow: "fullscreen; clipboard-read; clipboard-write",
+        allowApi: true,
+    });
+});
+
+export {};

resources/images/tutov1/step6-onboarding.png

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Tutotrial</title>
+        <script src="<%= workadventure_url %>/iframe_api.js" ></script>
+    </head>
+    <body class="tw-bg-dark-purple/95">
+        Tutu v1 script launcher
+    </body>
+</html>

src/Features/configuration.ts

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { currentStepStore, steps } from "../Store/StepStore";
+    import Step from "./Step.svelte";
+    import Steps from "./Steps.svelte";
+
+    function close(){
+        WA.player.state.tutorialDone = true;
+        //TODO delete @ts-ignore when new scripting release is up
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        WA.ui.modal.closeModal();
+    }
+</script>
+
+<div class="tuto tw-h-full tw-text-center tw-bg-dark-purple/95">
+    <Steps 
+        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}
+                    shortTiltle={step.shortTiltle}
+                />
+            {/if}
+        {/each}
+    </Steps>
+</div>
+<style>
+    .tuto{
+        min-width: 500px;
+    }
+</style>

src/Features/tutorial.ts

@@ -0,0 +1,28 @@
+<script lang="ts">
+    export let title: string;
+    export let shortTiltle: string;
+    export let videoUrl: string;
+    export let videoPoster: string;
+    export let description: string;
+</script>
+<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll">
+    <div class="title tw-text-white">
+        <h1 class="tw-p-3">{title}</h1>
+        <p class="tw-p-3">{shortTiltle}</p>
+    </div>
+    <div class="video">
+        <video class="tw-w-full tw-rounded-lg" 
+            poster={videoPoster} 
+            controls 
+            autoplay 
+            muted
+        >
+            <track kind="captions">
+            <source src={videoUrl} 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">
+        {@html description}
+    </div>
+</div>

src/Iframes/Configuration/Components/Section.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import { currentStepStore, steps } from "../Store/StepStore";
+
+    const dispatch = createEventDispatcher();
+
+    function next(){
+        if($currentStepStore === steps.length)return;
+        currentStepStore.set($currentStepStore + 1);
+    }
+    function previous(){
+        if($currentStepStore === 1)return;
+        currentStepStore.set($currentStepStore - 1);
+    }
+    function close(){
+        dispatch('close');
+    }
+    function skip(){
+        dispatch('skip');
+    }
+</script>
+<div class="body">
+    <slot></slot>
+
+    <div class="progress-bar">
+    </div>
+</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}
+    </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}
+        <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>
+    {:else}
+        <button class="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
+            Next
+            <span class="tw-px-4 tw-absolute tw-right-4">></span>
+        </button>
+    {/if}
+    <button class="btn blue-title tw-underline tw-decoration-light-blue tw-cursor-pointer" on:click|stopPropagation={skip}>
+        Skip all
+    </button>
+</div>
+<style lang="scss">
+    .footer{
+        overflow: visible;
+        button{
+            max-height: 40px;
+            &:nth-child(1){
+                min-width: 160px;
+                max-width: 180px;
+            }
+            &:nth-child(2){
+                min-width: 150px;
+                max-width: 170px;
+            }
+        }
+    }
+    .elispes{
+        height: 40px;
+        .elispe{
+            width: 15px;
+            height: 15px;
+            border-radius: 99%;
+            margin: 6px;
+        }
+    }
+</style>