Merge pull request #887 from thecodingmachine/develop

Deploy 2021-04-11

.github/workflows/push-to-npm.yml

@@ -0,0 +1,67 @@
+name: Push @workadventure/iframe-api-typings to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Edit tsconfig.json to add declarations
+        run: "sed -i 's/\"declaration\": false/\"declaration\": true/g' tsconfig.json"
+        working-directory: "front"
+
+      - name: Replace version number
+        run: 'sed -i "s#VERSION_PLACEHOLDER#${GITHUB_REF/refs\/tags\//}#g" package.json'
+        working-directory: "front/packages/iframe-api-typings"
+
+      - name: Debug package.json
+        run: cat package.json
+        working-directory: "front/packages/iframe-api-typings"
+
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v1
+        with:
+          version: '3.x'
+
+      - name: "Install dependencies"
+        run: yarn install
+        working-directory: "front"
+
+      - name: "Install messages dependencies"
+        run: yarn install
+        working-directory: "messages"
+
+      - name: "Build proto messages"
+        run: yarn run proto && yarn run copy-to-front
+        working-directory: "messages"
+
+      - name: "Create index.html"
+        run: ./templater.sh
+        working-directory: "front"
+
+      - name: "Build"
+        run: yarn run build
+        env:
+          API_URL: "localhost:8080"
+        working-directory: "front"
+
+      # We build the front to generate the typings of iframe_api, then we copy those typings in a separate package.
+      - name: Copy typings to package dir
+        run: cp front/dist/src/iframe_api.d.ts front/packages/iframe-api-typings/iframe_api.d.ts
+
+      - name: Install dependencies in package
+        run: yarn install
+        working-directory: "front/packages/iframe-api-typings"
+
+      - name: Publish package
+        run: yarn publish
+        working-directory: "front/packages/iframe-api-typings"
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

front/packages/iframe-api-typings/.gitignore

@@ -0,0 +1 @@
+iframe_api.d.ts

front/packages/iframe-api-typings/README.md

@@ -0,0 +1,27 @@
+<h1 align="center">WorkAdventure - IFrame API typings for Typescript</h1>
+
+<p align="center">This package contains Typescript typings for <a href="https://workadventu.re/map-building/scripting">WorkAdventure's map scripting API</a></p>
+
+<hr/>
+
+[WorkAdventure](https://workadventu.re) comes with a scripting API. Using this API, you can add some intelligence to your map.
+You use this API by loading an external script directly from WorkAdventure (at https://play.workadventu.re/iframe_api.js), or this script is loaded
+for you if you are using the "script" property of a map.
+
+This project contains Typescript typings for the `WA` object provided by this script.
+
+## Usage
+
+This package is only useful if you are using Typescript to script your WorkAdventure maps.
+
+## Download & Installation
+
+```shell
+$ npm install @workadventure/iframe-api-typings
+```
+
+or
+
+```shell
+$ yarn add @workadventure/iframe-api-typings
+```

front/packages/iframe-api-typings/iframe_api.js

@@ -0,0 +1 @@
+// This file is voluntarily empty.

front/packages/iframe-api-typings/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@workadventure/iframe-api-typings",
+  "version": "VERSION_PLACEHOLDER",
+  "description": "Typescript typings for WorkAdventure iFrame API",
+  "main": "iframe_api.js",
+  "types": "iframe_api.d.ts",
+  "repository": "https://github.com/thecodingmachine/workadventure/",
+  "author": "David Négrier <d.negrier@thecodingmachine.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

front/src/Phaser/Game/GameScene.ts

@@ -161,6 +161,7 @@ export class GameScene extends ResizableScene implements CenterListener {
     private characterLayers!: string[];
     private messageSubscription: Subscription|null = null;
     private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
+    private originalMapUrl: string|undefined;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
         super({
@@ -195,7 +196,8 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.load.image(openChatIconName, 'resources/objects/talk.png');
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
             // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
-            if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:')) {
+            if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
+                this.originalMapUrl = this.MapUrlFile;
                 this.MapUrlFile = this.MapUrlFile.replace('http://', 'https://');
                 this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
                 this.load.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => {
@@ -203,10 +205,25 @@ export class GameScene extends ResizableScene implements CenterListener {
                 });
                 return;
             }
+            // 127.0.0.1, localhost and *.localhost are considered secure, even on HTTP.
+            // So if we are in https, we can still try to load a HTTP local resource (can be useful for testing purposes)
+            // See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#when_is_a_context_considered_secure
+            const url = new URL(file.src);
+            const host = url.host.split(':')[0];
+            if (window.location.protocol === 'https:' && file.src === this.MapUrlFile && (host === '127.0.0.1' || host === 'localhost' || host.endsWith('.localhost')) && this.originalMapUrl === undefined) {
+                this.originalMapUrl = this.MapUrlFile;
+                this.MapUrlFile = this.MapUrlFile.replace('https://', 'http://');
+                this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
+                this.load.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => {
+                    this.onMapLoad(data);
+                });
+                return;
+            }
+
             this.scene.start(ErrorSceneName, {
                 title: 'Network error',
                 subTitle: 'An error occurred while loading resource:',
-                message: file.src
+                message: this.originalMapUrl ?? file.src
             });
         });
         this.load.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => {
@@ -727,9 +744,9 @@ export class GameScene extends ResizableScene implements CenterListener {
                 return;
             }
             const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
-            let html = `<div id="container"><div class="nes-container with-title is-centered">
+            let html = `<div id="container" hidden><div class="nes-container with-title is-centered">
 ${escapedMessage}
- </div> </div>`;
+ </div> `;
             const buttonContainer = `<div class="buttonContainer"</div>`;
             html += buttonContainer;
             let id = 0;
@@ -737,15 +754,18 @@ ${escapedMessage}
                 html  += `<button type="button" class="nes-btn is-${HtmlUtils.escapeHtml(button.className ?? '')}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(button.label)}</button>`;
                 id++;
             }
-            const domElement = this.add.dom(objectLayerSquare.x  + objectLayerSquare.width/2 ,
+            html += '</div>';
-                objectLayerSquare.y + objectLayerSquare.height/2).createFromHTML(html);
+            const domElement = this.add.dom(objectLayerSquare.x  ,
+                objectLayerSquare.y).createFromHTML(html);
 
             const container : HTMLDivElement =  domElement.getChildByID("container") as HTMLDivElement;
             container.style.width = objectLayerSquare.width + "px";
             domElement.scale = 0;
             domElement.setClassName('popUpElement');
 
-
+            setTimeout(() => {
+                (container).hidden = false;
+            }, 100);
 
             id = 0;
             for (const button of openPopupEvent.buttons) {
@@ -753,6 +773,7 @@ ${escapedMessage}
                 const btnId = id;
                 button.onclick = () => {
                     iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId);
+                    button.disabled = true;
                 }
                 id++;
             }

front/tsconfig.json

@@ -5,6 +5,7 @@
     "moduleResolution": "node",
     "module": "CommonJS",
     "target": "ES2015",
+    "declaration": false,
     "downlevelIteration": true,
     "jsx": "react",
     "allowJs": true,

maps/Tuto/tutoV3.json

@@ -278,8 +278,8 @@
                  "type":"",
                  "visible":true,
                  "width":245.667,
-                 "x":1170,
+                 "x":1171,
-                 "y":442
+                 "y":412
                 }, 
                 {
                  "height":84.6667,
@@ -289,8 +289,8 @@
                  "type":"",
                  "visible":true,
                  "width":210.667,
-                 "x":966,
+                 "x":1030.5,
-                 "y":327.66665
+                 "y":318.66665
                 }, 
                 {
                  "height":99.6667,