Push new contest for Shaka Biarritz

.github/workflows/build-and-deploy.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: "Install dependencies"

package.json

@@ -1,7 +1,8 @@
 {
   "name": "workadventure-map-starter-kit",
-  "version": "3.3.3",
+  "version": "3.3.11",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "start": "vite",
@@ -10,12 +11,13 @@
   },
   "devDependencies": {
     "@types/node": "^18.15.11",
-    "@workadventure/iframe-api-typings": "^1.15.10",
+    "@workadventure/iframe-api-typings": "^1.20.2",
+    "dotenv": "^16.3.1",
     "typescript": "^4.9.5",
-    "vite": "^4.3.9",
-    "wa-map-optimizer-vite": "^1.1.15"
+    "vite": "^4.5.2",
+    "wa-map-optimizer-vite": "^1.1.28"
   },
   "dependencies": {
-    "@workadventure/scripting-api-extra": "^1.4.6"
+    "@workadventure/scripting-api-extra": "^1.4.8"
   }
 }

src/shaka-contest.ts

@@ -0,0 +1,85 @@
+/// <reference types="@workadventure/iframe-api-typings" />
+
+import { discussion } from "./utils/discussion";
+
+console.info('Shaka contest script loaded...');
+WA.onInit().then(() => {
+    // Disabled controls for the contest
+    WA.controls.disableRoomList();
+    WA.controls.restoreRightClick();
+    WA.controls.disablePlayerProximityMeeting();
+    WA.controls.disableMapEditor();
+    WA.controls.disableMicrophone();
+    WA.controls.disableWebcam();
+
+    new treasureEnigme();
+    new SurfEnigme();
+    new WaveEnigme();
+    new Info1();
+    new Info2();
+
+    console.info('Shaka contest script initialized...');
+});
+
+
+abstract class Enigme{
+    constructor(private key: string){
+        this.init();
+    }
+    init(){
+        WA.room.area.onEnter(this.key).subscribe(() => this.onEnter());
+        WA.room.area.onLeave(this.key).subscribe(() => this.onLeave());
+    }
+
+    resolve(){
+        WA.player.state.saveVariable(this.key, true);
+    }
+    onEnter(){
+        discussion.openDiscussionWebsite(this.key, () => {
+            this.resolve();
+            this.onLeave();
+        });
+    }
+    onLeave(){
+        discussion.closeDiscussionWebsite();
+    }
+}
+
+class Info1 extends Enigme{
+    constructor(){
+        super("info1");
+    }
+}
+
+class Info2 extends Enigme{
+    constructor(){
+        super("info2");
+    }
+}
+
+class treasureEnigme extends Enigme{
+    constructor(){
+        super("treasureEnigma");
+    }
+    resolve(){
+        super.resolve();
+        // Show the map with the treasure
+        discussion.openModal("Biarritz Map", "treasureEnigma");
+    }
+}
+
+class SurfEnigme extends Enigme{
+    constructor(){
+        super("surfEnigma");
+    }
+}
+
+class WaveEnigme extends Enigme{
+    constructor(){
+        super("waveEnigma");
+    }
+    resolve(){
+        super.resolve();
+        // Show a form to fill
+    }
+}

src/utils/discussion.ts

@@ -0,0 +1,60 @@
+import { CreateUIWebsiteEvent, UIWebsite } from "@workadventure/iframe-api-typings";
+
+class Discussion{
+  private rootLink: string;
+  private uiWebSite?: UIWebsite;
+  constructor(){
+    const prodRootLink = "https://workadventure.github.io/nftbiarritz-game/"
+    const devRootLink = 'http://localhost:5173';
+    this.rootLink = process.env.NODE_ENV === 'production' ? prodRootLink : devRootLink;
+  }
+
+  async openDiscussionWebsite(view: string, callbackWhenClosed: Function|null = null){
+    const website: CreateUIWebsiteEvent = {
+      url: `${this.rootLink}/views/${view}/discussion.html`,
+      visible: true,
+      position: {
+        vertical: "bottom",
+        horizontal: "middle"
+      },
+      allowApi: true,
+      size: {
+        height: "120px",
+        width: "100%"
+      },
+      margin: {
+        bottom: "80px",
+        left: "10px",
+        right: "10px"
+      }
+    }
+
+
+    // Open iframe
+    this.uiWebSite = await WA.ui.website.open(website);
+
+    // Event to close the website
+    WA.event.on(`close-${view}`).subscribe(() => {
+      if(this.uiWebSite)this.uiWebSite.close();
+      if(callbackWhenClosed) callbackWhenClosed(this.uiWebSite);
+      this.uiWebSite = undefined;
+    });
+  }
+
+  closeDiscussionWebsite(){
+    if(this.uiWebSite)this.uiWebSite.close();
+    this.uiWebSite = undefined;
+  }
+
+  openModal(title: string, view: string){
+    WA.ui.modal.openModal({
+      title: title,
+      src: `${this.rootLink}/views/${view}/modal.html`,
+      allowApi: true,
+      allow: "fullscreen;camera;microphone",
+      position: "center",
+  });
+  }
+}
+
+export const discussion = new Discussion();

views/info1/discussion.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="robots" content="noindex">
+    <meta name="title" content="My best surf board">
+
+    <title>My best surf board</title>
+    <link rel="stylesheet" href="../styles/main.css">
+    <script src="https://play.staging.workadventu.re/iframe_api.js"></script>
+    <style>
+        .no-scroll-bar{
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+
+        /* Hide scrollbar for IE, Edge and Firefox */
+        .no-scroll-bar::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+</head>
+    <body style="max-height: 110px; overflow: hidden;">
+        <div style="
+                background: black; 
+                color: white;
+                display: grid;
+                grid-template-columns: 150px 1fr 150px;
+                overflow: hidden;
+                height: 100%;
+                flex-direction: column;
+                align-content: center;
+                align-items: center;
+                justify-content: center;
+                border-radius: 14px;
+                border: solid 2px black;
+            "
+            >
+            <div style="border: solid 1px white; border-radius: 14px; height: fit-content; width: fit-content; display: flex; align-items: center; justify-content: center; padding: 10px;">
+                <img id="avatar" height="80px" src="" />
+            </div>
+            <div class="no-scroll-bar" style="padding: 10px; font-size: 16px; max-height: 80px; overflow: scroll;">
+                <p id="title" style="font-style: italic; font-size: 12px; margin: 0px;">
+                    Me
+                </p>
+                <p id="text" style="margin: 0px;">
+                    I need to find map, stuff and the mythic wave of Biarritz🌊</br>
+                    This is my last chance to surf this wave and to be a legend 🏄
+                </p>
+            </div>
+            <div class="text-align-right" style="display: flex; justify-content: center;">
+                <button class="btn cursor-pointer" 
+                    id="closeButton"
+                    style="
+                        background: none;
+                        border: solid 1px white;
+                        border-radius: 12px;
+                        color: white;
+                        padding: 14px 28px;
+                        height: fit-content;
+                        cursor: pointer;
+                    "
+                >
+                    Continue
+                </button>
+            </div>
+        </div>
+        <script src="discussion.ts" type="module"></script>
+    </body>
+</html>

views/info1/discussion.ts

@@ -0,0 +1,22 @@
+/// <reference types="@workadventure/iframe-api-typings" />
+
+document.addEventListener("DOMContentLoaded", () => {
+    const key = "info1";
+    WA.onInit().then(async () => {
+        // Get the avatar and replace by the avatar of the user
+        WA.player.getWokaPicture().then((wokaPicture) => {
+            const avatarElement = document.getElementById('avatar') as HTMLImageElement;
+            if(avatarElement){
+                avatarElement.src = wokaPicture;
+            }
+        });
+
+        // Get close button 
+        const closeButton = document.getElementById('closeButton');
+        if(closeButton){
+            closeButton.addEventListener('click', () => {
+                WA.event.broadcast(`close-${key}`, {});
+            });
+        }
+    });
+});

views/info2/discussion.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="robots" content="noindex">
+    <meta name="title" content="My best surf board">
+
+    <title>My best surf board</title>
+    <link rel="stylesheet" href="../styles/main.css">
+    <script src="https://play.staging.workadventu.re/iframe_api.js"></script>
+    <style>
+        .no-scroll-bar{
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+
+        /* Hide scrollbar for IE, Edge and Firefox */
+        .no-scroll-bar::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+</head>
+    <body style="max-height: 110px; overflow: hidden;">
+        <div style="
+                background: black; 
+                color: white;
+                display: grid;
+                grid-template-columns: 150px 1fr 150px;
+                overflow: hidden;
+                height: 100%;
+                flex-direction: column;
+                align-content: center;
+                align-items: center;
+                justify-content: center;
+                border-radius: 14px;
+                border: solid 2px black;
+            "
+            >
+            <div style="border: solid 1px white; border-radius: 14px; height: fit-content; width: fit-content; display: flex; align-items: center; justify-content: center; padding: 10px;">
+                <img id="avatar" height="80px" src="" />
+            </div>
+            <div class="no-scroll-bar" style="padding: 10px; font-size: 16px; max-height: 80px; overflow: scroll;">
+                <p id="title" style="font-style: italic; font-size: 12px; margin: 0px;">
+                    Me
+                </p>
+                <p id="text" style="margin: 0px;">
+                    I need to find map, stuff and the mythic wave of Biarritz🌊</br>
+                    This is my last chance to surf this wave and to be a legend 🏄
+                </p>
+            </div>
+            <div class="text-align-right" style="display: flex; justify-content: center;">
+                <button class="btn cursor-pointer" 
+                    id="closeButton"
+                    style="
+                        background: none;
+                        border: solid 1px white;
+                        border-radius: 12px;
+                        color: white;
+                        padding: 14px 28px;
+                        height: fit-content;
+                        cursor: pointer;
+                    "
+                >
+                    Continue
+                </button>
+            </div>
+        </div>
+        <script src="discussion.ts" type="module"></script>
+    </body>
+</html>

views/info2/discussion.ts

@@ -0,0 +1,22 @@
+/// <reference types="@workadventure/iframe-api-typings" />
+
+document.addEventListener("DOMContentLoaded", () => {
+    const key = "info2";
+    WA.onInit().then(async () => {
+        // Get the avatar and replace by the avatar of the user
+        WA.player.getWokaPicture().then((wokaPicture) => {
+            const avatarElement = document.getElementById('avatar') as HTMLImageElement;
+            if(avatarElement){
+                avatarElement.src = wokaPicture;
+            }
+        });
+
+        // Get close button 
+        const closeButton = document.getElementById('closeButton');
+        if(closeButton){
+            closeButton.addEventListener('click', () => {
+                WA.event.broadcast(`close-${key}`, {});
+            });
+        }
+    });
+});