_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Renaming changeTile to setTiles

Browse Source
This commit is contained in:
David Négrier 2021-06-28 14:58:49 +02:00
parent 319db95bc8
commit 1e57028e6e
11 changed files with 85 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -15,7 +15,7 @@
- Use `WA.room.getCurrentUser(): Promise<User>` to get the ID, name and tags of the current player - 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.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.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 ## Version 1.4.1

14
docs/maps/api-room.md
View File

@ -115,7 +115,7 @@ WA.room.getCurrentUser().then((user) => {
### Changing tiles ### 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`. 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 : Example :
```javascript ```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'}
]); ]);
``` ```

4
front/src/Api/Events/IframeEvent.ts
View File

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

6
front/src/Api/Events/ChangeTileEvent.ts → front/src/Api/Events/SetTilesEvent.ts
View File

@ -1,6 +1,6 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isChangeTileEvent = export const isSetTilesEvent =
tg.isArray( tg.isArray(
new tg.IsInterface().withProperties({ new tg.IsInterface().withProperties({
x: tg.isNumber, x: tg.isNumber,
@ -10,6 +10,6 @@ export const isChangeTileEvent =
}).get() }).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>;

10
front/src/Api/IframeListener.ts
View File

@ -29,7 +29,7 @@ import type {GameStateEvent} from "./Events/GameStateEvent";
import type {HasPlayerMovedEvent} from "./Events/HasPlayerMovedEvent"; import type {HasPlayerMovedEvent} from "./Events/HasPlayerMovedEvent";
import {isLoadPageEvent} from "./Events/LoadPageEvent"; import {isLoadPageEvent} from "./Events/LoadPageEvent";
import {handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent} from "./Events/ui/MenuItemRegisterEvent"; 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. * 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(); private readonly _loadSoundStream: Subject<LoadSoundEvent> = new Subject();
public readonly loadSoundStream = this._loadSoundStream.asObservable(); 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 iframes = new Set<HTMLIFrameElement>();
private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>(); private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
@ -193,8 +193,8 @@ class IframeListener {
this._unregisterMenuCommandStream.next(data); this._unregisterMenuCommandStream.next(data);
}) })
handleMenuItemRegistrationEvent(payload.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); }, false);

4
front/src/Api/iframe/room.ts
View File

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

2
front/src/Phaser/Game/GameScene.ts
View File

@ -947,7 +947,7 @@ ${escapedMessage}
tags: this.connection ? this.connection.getAllTags() : [] 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) { for (const eventTile of eventTiles) {
this.gameMap.putTile(eventTile.tile, eventTile.x, eventTile.y, eventTile.layer); this.gameMap.putTile(eventTile.tile, eventTile.x, eventTile.y, eventTile.layer);
} }

31
maps/tests/Metadata/changeTile.html
View File

@ -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>

31
maps/tests/Metadata/setTiles.html Normal file
View File

@ -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>

62
maps/tests/Metadata/changeTile.json → maps/tests/Metadata/setTiles.json
View File

@ -20,7 +20,7 @@
"width":10, "width":10,
"x":0, "x":0,
"y":0 "y":0
}, },
{ {
"data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51], "data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
"height":10, "height":10,
@ -32,7 +32,7 @@
"width":10, "width":10,
"x":0, "x":0,
"y":0 "y":0
}, },
{ {
"data":[0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 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, 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, 0, 0], "data":[0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 0, 0, 0, 0, 0, 0, 128, 128, 128, 128, 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, 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, 0, 0],
"height":10, "height":10,
@ -43,8 +43,8 @@
{ {
"name":"openWebsite", "name":"openWebsite",
"type":"string", "type":"string",
"value":"changeTile.html" "value":"setTiles.html"
}, },
{ {
"name":"openWebsiteAllowApi", "name":"openWebsiteAllowApi",
"type":"bool", "type":"bool",
@ -55,19 +55,19 @@
"width":10, "width":10,
"x":0, "x":0,
"y":0 "y":0
}, },
{ {
"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], "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, "height":10,
"id":8, "id":8,
"name":"changeTile", "name":"setTiles",
"opacity":1, "opacity":1,
"type":"tilelayer", "type":"tilelayer",
"visible":true, "visible":true,
"width":10, "width":10,
"x":0, "x":0,
"y":0 "y":0
}, },
{ {
"draworder":"topdown", "draworder":"topdown",
"id":5, "id":5,
@ -124,7 +124,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":1, "id":1,
"properties":[ "properties":[
@ -133,7 +133,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":2, "id":2,
"properties":[ "properties":[
@ -142,7 +142,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":3, "id":3,
"properties":[ "properties":[
@ -151,7 +151,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":4, "id":4,
"properties":[ "properties":[
@ -160,7 +160,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":8, "id":8,
"properties":[ "properties":[
@ -169,7 +169,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":9, "id":9,
"properties":[ "properties":[
@ -178,7 +178,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":10, "id":10,
"properties":[ "properties":[
@ -187,7 +187,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":11, "id":11,
"properties":[ "properties":[
@ -196,7 +196,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":12, "id":12,
"properties":[ "properties":[
@ -205,7 +205,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":16, "id":16,
"properties":[ "properties":[
@ -214,7 +214,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":17, "id":17,
"properties":[ "properties":[
@ -223,7 +223,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":18, "id":18,
"properties":[ "properties":[
@ -232,7 +232,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":19, "id":19,
"properties":[ "properties":[
@ -241,7 +241,7 @@
"type":"bool", "type":"bool",
"value":true "value":true
}] }]
}, },
{ {
"id":20, "id":20,
"properties":[ "properties":[
@ -252,7 +252,7 @@
}] }]
}], }],
"tilewidth":32 "tilewidth":32
}, },
{ {
"columns":8, "columns":8,
"firstgid":65, "firstgid":65,
@ -273,7 +273,7 @@
"type":"string", "type":"string",
"value":"customMenu.json" "value":"customMenu.json"
}] }]
}, },
{ {
"id":27, "id":27,
"properties":[ "properties":[
@ -281,18 +281,18 @@
"name":"jitsiRoom", "name":"jitsiRoom",
"type":"string", "type":"string",
"value":"TEST" "value":"TEST"
}, },
{ {
"name":"jitsiTrigger", "name":"jitsiTrigger",
"type":"string", "type":"string",
"value":"onaction" "value":"onaction"
}, },
{ {
"name":"jitsiUrl", "name":"jitsiUrl",
"type":"string", "type":"string",
"value":"meet.jit.si" "value":"meet.jit.si"
}] }]
}, },
{ {
"id":34, "id":34,
"properties":[ "properties":[
@ -300,13 +300,13 @@
"name":"name", "name":"name",
"type":"string", "type":"string",
"value":"Red" "value":"Red"
}, },
{ {
"name":"openWebsite", "name":"openWebsite",
"type":"string", "type":"string",
"value":"https:\/\/fr.wikipedia.org\/wiki\/Wikip%C3%A9dia:Accueil_principal" "value":"https:\/\/fr.wikipedia.org\/wiki\/Wikip%C3%A9dia:Accueil_principal"
}] }]
}, },
{ {
"id":40, "id":40,
"properties":[ "properties":[
@ -315,7 +315,7 @@
"type":"string", "type":"string",
"value":"" "value":""
}] }]
}, },
{ {
"id":44, "id":44,
"properties":[ "properties":[
@ -323,13 +323,13 @@
"name":"collides", "name":"collides",
"type":"bool", "type":"bool",
"value":true "value":true
}, },
{ {
"name":"name", "name":"name",
"type":"string", "type":"string",
"value":"blue" "value":"blue"
}] }]
}, },
{ {
"id":52, "id":52,
"properties":[ "properties":[

4
maps/tests/index.html
View File

@ -164,10 +164,10 @@
</tr> </tr>
<tr> <tr>
<td> <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>
<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> </td>
</tr> </tr>
</table> </table>