Add inventory

workadventure · Aug 21, 2024 · a90e681 · a90e681
1 parent c69ced7
commit a90e681
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 9 deletions.
diff --git a/src/shaka-contest.ts b/src/shaka-contest.ts
@@ -19,6 +19,25 @@ WA.onInit().then(() => {
     new Info1();
     new Info2();
 
+    // Open invetory  
+    WA.ui.website.open({
+        url: `${discussion.rootLink}/views/inventory/inventory.html`,
+        visible: true,
+        position: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        allowApi: true,
+        size: {
+          height: "200px",
+          width: "100px"
+        },
+        margin: {
+          bottom: "180px",
+          right: "10px"
+        }
+      });
+
     console.info('Shaka contest script initialized...');
 });
 

diff --git a/src/utils/discussion.ts b/src/utils/discussion.ts
@@ -1,12 +1,12 @@
 import { CreateUIWebsiteEvent, UIWebsite } from "@workadventure/iframe-api-typings";
 
 class Discussion{
-  private rootLink: string;
+  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;
+    this._rootLink = process.env.NODE_ENV === 'production' ? prodRootLink : devRootLink;
   }
 
   async openDiscussionWebsite(view: string, callbackWhenClosed: Function|null = null){
@@ -48,12 +48,16 @@ class Discussion{
 
   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",
-  });
+        title: title,
+        src: `${this.rootLink}/views/${view}/modal.html`,
+        allowApi: true,
+        allow: "fullscreen;camera;microphone",
+        position: "center",
+    });
+  }
+
+  get rootLink(){
+    return this._rootLink;
   }
 }
 

diff --git a/views/inventory/avatar.webp b/views/inventory/avatar.webp
diff --git a/views/inventory/inventory.html b/views/inventory/inventory.html
@@ -0,0 +1,56 @@
+<!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 inventory">
+
+    <title>My inventory</title>
+    <link rel="stylesheet" href="../styles/main.css">
+    <style>
+        #inventoryContent{
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+        }
+        .inventoryItem{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2px;
+            border: solid 1px white;
+            border-radius: 14px;
+            background-color: #00000046;
+        }
+        .inventoryItem img{
+            width: 40px;
+            height: 40px;
+            border-radius: 14px;
+        }
+    </style>
+
+
+    <script src="https://play.staging.workadventu.re/iframe_api.js"></script>
+    <script src="inventory.ts" type="module"></script>
+</head>
+<body>
+    <main class="p-2">
+        <div id="inventoryContent" class="d-flex align-items-center justify-content-center">
+            <div class="inventoryItem">
+                <img id="treasureEnigma" src="avatar.webp" alt="Treasure Enigma Avatar" />
+            </div>
+            <div class="inventoryItem">
+                <img id="surfEnigma" src="avatar.webp" alt="Surf Enigma Avatar" />
+            </div>
+            <div class="inventoryItem">
+                <img id="waveEnigma" src="avatar.webp" alt="Wave Enigma Avatar" />
+            </div>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/views/inventory/inventory.ts b/views/inventory/inventory.ts
@@ -0,0 +1,20 @@
+/// <reference types="@workadventure/iframe-api-typings" />
+
+document.addEventListener("DOMContentLoaded", () => {
+    const imageTreasure = document.getElementById('treasureEnigma') as HTMLImageElement;
+    const imageSurf = document.getElementById('surfEnigma') as HTMLImageElement;
+    const imageWave = document.getElementById('waveEnigma') as HTMLImageElement;
+
+    let srcTreasureEnigma = "../treasureEnigma/avatar.webp";
+    let srcSurfEnigma = "../surfEnigma/avatar.webp";
+    let srcWaveEnigma = "../waveEnigma/avatar.webp";
+    WA.onInit().then(async () => {
+        if(WA.player.state.treasureEnigma == undefined || WA.player.state.treasureEnigma == false) srcTreasureEnigma = "avatar.webp";
+        if(WA.player.state.surfEnigma == undefined || WA.player.state.surfEnigma == false) srcSurfEnigma = "avatar.webp";
+        if(WA.player.state.waveEnigma == undefined || WA.player.state.waveEnigma == false) srcWaveEnigma = "avatar.webp";
+
+        imageTreasure.src = srcTreasureEnigma;
+        imageSurf.src = srcSurfEnigma;
+        imageWave.src = srcWaveEnigma;
+    });
+});
diff --git a/views/surfEnigma/avatr.webp → views/surfEnigma/avatar.webp b/views/surfEnigma/avatr.webp → views/surfEnigma/avatar.webp
diff --git a/views/surfEnigma/discussion.html b/views/surfEnigma/discussion.html
@@ -39,7 +39,7 @@
             "
             >
             <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="./avatr.webp" />
+                <img id="avatar" height="80px" src="./avatar.webp" />
             </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;">

diff --git a/vite.config.ts b/vite.config.ts
@@ -34,6 +34,7 @@ export default defineConfig({
                 discussion_surfenigma: "./views/surfEnigma/discussion.html",
                 vwaveenigma: "./views/waveEnigma/discussion.html",
                 discussion_start: "./views/start/discussion.html",
+                inventory: "./views/inventory/inventory.html",
                 ...getMapsScripts(maps),
             },
         },