lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases 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.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

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

@ -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([
{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'}
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'}
]);
```
```

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 { 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
}

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";
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>;

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 {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();
public readonly changeTileStream = this._changeTileStream.asObservable();
private readonly _setTilesStream: Subject<SetTilesEvent> = new Subject();
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)) {
this._changeTileStream.next(payload.data);
} else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
this._setTilesStream.next(payload.data);
}
}
}, 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 };
});
}
changeTile(tiles: TileDescriptor[]) {
setTiles(tiles: TileDescriptor[]) {
sendToWorkadventure({
type: 'changeTile',
type: 'setTiles',
data: tiles
})
}

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

@ -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);
}

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

4
maps/tests/index.html
View file

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