Renaming changeTile to setTiles

CHANGELOG.md

@@ -15,7 +15,7 @@
   - Use `WA.room.getCurrentUser(): Promise<User>` to get the ID, name and tags of the current player
   - Use `WA.room.getCurrentRoom(): Promise<Room>` to get the ID, JSON map file, url of the map of the current room and the layer where the current player started
   - Use `WA.ui.registerMenuCommand(): void` to add a custom menu
-  - Use `WA.room.changeTile(): void` to change an array of tiles
+  - Use `WA.room.setTiles(): void` to change an array of tiles
 
 ## Version 1.4.1
 

docs/maps/api-room.md

@@ -115,7 +115,7 @@ WA.room.getCurrentUser().then((user) => {
 
 ### Changing tiles 
 ```
-WA.room.changeTile(tiles: TileDescriptor[]): void
+WA.room.setTiles(tiles: TileDescriptor[]): void
 ```
 Replace the tile at the `x` and `y` coordinates in the layer named `layer` by the tile with the id `tile`.
 
@@ -137,10 +137,10 @@ If `tile` is a string, it's not the id of the tile but the value of the property
 
 Example : 
 ```javascript
-WA.room.changeTile([
+WA.room.setTiles([
-                {x: 6, y: 4, tile: 'blue', layer: 'changeTile'},
+                {x: 6, y: 4, tile: 'blue', layer: 'setTiles'},
-                {x: 7, y: 4, tile: 109, layer: 'changeTile'},
+                {x: 7, y: 4, tile: 109, layer: 'setTiles'},
-                {x: 8, y: 4, tile: 109, layer: 'changeTile'},
+                {x: 8, y: 4, tile: 109, layer: 'setTiles'},
-                {x: 9, y: 4, tile: 'blue', layer: 'changeTile'}
+                {x: 9, y: 4, tile: 'blue', layer: 'setTiles'}
                 ]);
 ```

front/src/Api/Events/IframeEvent.ts

@@ -18,7 +18,7 @@ import type { PlaySoundEvent } from "./PlaySoundEvent";
 import type { MenuItemClickedEvent } from "./ui/MenuItemClickedEvent";
 import type { MenuItemRegisterEvent } from './ui/MenuItemRegisterEvent';
 import type { HasPlayerMovedEvent } from "./HasPlayerMovedEvent";
-import type { ChangeTileEvent } from "./ChangeTileEvent";
+import type { SetTilesEvent } from "./SetTilesEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T
@@ -46,7 +46,7 @@ export type IframeEventMap = {
     loadSound: LoadSoundEvent
     playSound: PlaySoundEvent
     stopSound: null
-    changeTile: ChangeTileEvent
+    setTiles: SetTilesEvent
     getState: undefined,
     registerMenuCommand: MenuItemRegisterEvent
 }

front/src/Api/Events/SetTilesEvent.ts

@@ -1,6 +1,6 @@
 import * as tg from "generic-type-guard";
 
-export const isChangeTileEvent =
+export const isSetTilesEvent =
     tg.isArray(
         new tg.IsInterface().withProperties({
             x: tg.isNumber,
@@ -10,6 +10,6 @@ export const isChangeTileEvent =
         }).get()
     );
 /**
- * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
+ * A message sent from the iFrame to the game to set one or many tiles.
  */
-export type ChangeTileEvent = tg.GuardedType<typeof isChangeTileEvent>;
+export type SetTilesEvent = tg.GuardedType<typeof isSetTilesEvent>;

front/src/Api/IframeListener.ts

@@ -29,7 +29,7 @@ import type {GameStateEvent} from "./Events/GameStateEvent";
 import type {HasPlayerMovedEvent} from "./Events/HasPlayerMovedEvent";
 import {isLoadPageEvent} from "./Events/LoadPageEvent";
 import {handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent} from "./Events/ui/MenuItemRegisterEvent";
-import {ChangeTileEvent, isChangeTileEvent} from "./Events/ChangeTileEvent";
+import {SetTilesEvent, isSetTilesEvent} from "./Events/SetTilesEvent";
 
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
@@ -103,8 +103,8 @@ class IframeListener {
     private readonly _loadSoundStream: Subject<LoadSoundEvent> = new Subject();
     public readonly loadSoundStream = this._loadSoundStream.asObservable();
 
-    private readonly _changeTileStream: Subject<ChangeTileEvent> = new Subject();
+    private readonly _setTilesStream: Subject<SetTilesEvent> = new Subject();
-    public readonly changeTileStream = this._changeTileStream.asObservable();
+    public readonly setTilesStream = this._setTilesStream.asObservable();
 
     private readonly iframes = new Set<HTMLIFrameElement>();
     private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
@@ -193,8 +193,8 @@ class IframeListener {
                         this._unregisterMenuCommandStream.next(data);
                     })
                     handleMenuItemRegistrationEvent(payload.data)
-                } else if (payload.type == "changeTile" && isChangeTileEvent(payload.data)) {
+                } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
-                    this._changeTileStream.next(payload.data);
+                    this._setTilesStream.next(payload.data);
                 }
             }
         }, false);

front/src/Api/iframe/room.ts

@@ -137,9 +137,9 @@ class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomC
             return { id: gameState.uuid, nickName: gameState.nickname, tags: gameState.tags };
         });
     }
-    changeTile(tiles: TileDescriptor[]) {
+    setTiles(tiles: TileDescriptor[]) {
         sendToWorkadventure({
-            type: 'changeTile',
+            type: 'setTiles',
             data: tiles
         })
     }

front/src/Phaser/Game/GameScene.ts

@@ -947,7 +947,7 @@ ${escapedMessage}
                 tags: this.connection ? this.connection.getAllTags() : []
             })
         }));
-        this.iframeSubscriptionList.push(iframeListener.changeTileStream.subscribe((eventTiles) => {
+        this.iframeSubscriptionList.push(iframeListener.setTilesStream.subscribe((eventTiles) => {
             for (const eventTile of eventTiles) {
                 this.gameMap.putTile(eventTile.tile, eventTile.x, eventTile.y, eventTile.layer);
             }

maps/tests/Metadata/changeTile.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <script>
-            var script = document.createElement('script');
-            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
-            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
-            script.setAttribute('src', document.referrer + 'iframe_api.js');
-            document.head.appendChild(script);
-
-            window.addEventListener('load', () => {
-                WA.room.changeTile([
-                    {x: 0, y: 0, tile: 92, layer: 'changeTile'},
-                    {x: 0, y: 2, tile: 'Red', layer: 'changeTile'},
-                    {x: 0, y: 3, tile: 99, layer: 'changeTile'},
-                    {x: 0, y: 5, tile: 117, layer: 'changeTile'},
-                    {x: 0, y: 6, tile: 117, layer: 'changeTile'},
-                    {x: 0, y: 9, tile: 74, layer: 'changeTile'}
-                ]);
-                WA.room.changeTile([
-                    {x: 6, y: 4, tile: 'blue', layer: 'changeTile'},
-                    {x: 7, y: 4, tile: 109, layer: 'changeTile'},
-                    {x: 8, y: 4, tile: 109, layer: 'changeTile'},
-                    {x: 9, y: 4, tile: 'blue', layer: 'changeTile'}
-                ]);
-            });
-        </script>
-    </head>
-    <body>
-    </body>
-</html>

maps/tests/Metadata/setTiles.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script>
+            var script = document.createElement('script');
+            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
+            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
+            script.setAttribute('src', document.referrer + 'iframe_api.js');
+            document.head.appendChild(script);
+
+            window.addEventListener('load', () => {
+                WA.room.setTiles([
+                    {x: 0, y: 0, tile: 92, layer: 'setTiles'},
+                    {x: 0, y: 2, tile: 'Red', layer: 'setTiles'},
+                    {x: 0, y: 3, tile: 99, layer: 'setTiles'},
+                    {x: 0, y: 5, tile: 117, layer: 'setTiles'},
+                    {x: 0, y: 6, tile: 117, layer: 'setTiles'},
+                    {x: 0, y: 9, tile: 74, layer: 'setTiles'}
+                ]);
+                WA.room.setTiles([
+                    {x: 6, y: 4, tile: 'blue', layer: 'setTiles'},
+                    {x: 7, y: 4, tile: 109, layer: 'setTiles'},
+                    {x: 8, y: 4, tile: 109, layer: 'setTiles'},
+                    {x: 9, y: 4, tile: 'blue', layer: 'setTiles'}
+                ]);
+            });
+        </script>
+    </head>
+    <body>
+    </body>
+</html>

maps/tests/Metadata/setTiles.json

@@ -43,7 +43,7 @@
                 {
                  "name":"openWebsite",
                  "type":"string",
-                 "value":"changeTile.html"
+                 "value":"setTiles.html"
                 },
                 {
                  "name":"openWebsiteAllowApi",
@@ -60,7 +60,7 @@
          "data":[65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 65, 65, 65, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":10,
          "id":8,
-         "name":"changeTile",
+         "name":"setTiles",
          "opacity":1,
          "type":"tilelayer",
          "visible":true,

maps/tests/index.html

@@ -164,10 +164,10 @@
             </tr>
             <tr>
                 <td>
-                    <input type="radio" name="test-change-tiles"> Success <input type="radio" name="test-change-tiles"> Failure <input type="radio" name="test-change-tiles" checked> Pending
+                    <input type="radio" name="test-set-tiles"> Success <input type="radio" name="test-set-tiles"> Failure <input type="radio" name="test-set-tiles" checked> Pending
                 </td>
                 <td>
-                    <a href="#" class="testLink" data-testmap="Metadata/changeTile.json" target="_blank">Test change tiles</a>
+                    <a href="#" class="testLink" data-testmap="Metadata/setTiles.json" target="_blank">Test set tiles</a>
                 </td>
             </tr>
         </table>