lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

first step on loading a tileset from a script

Browse source
This commit is contained in:
GRL 2021-05-20 17:09:10 +02:00
parent 2f9cc393a7
commit 3506063e65
9 changed files with 276 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
front/src/Api/Events/IframeEvent.ts
View file

@ -16,6 +16,7 @@ import type { DataLayerEvent } from "./DataLayerEvent";
import type { LayerEvent } from './LayerEvent';
import type { SetPropertyEvent } from "./setPropertyEvent";
import type { TagEvent } from "./TagEvent";
import type { TilesetEvent } from "./TilesetEvent";
export interface TypedMessageEvent<T> extends MessageEvent {
data: T
@ -42,6 +43,7 @@ export type IframeEventMap = {
setProperty: SetPropertyEvent
getDataLayer: undefined
getTag: undefined
tilsetEvent: TilesetEvent
}
export interface IframeEvent<T extends keyof IframeEventMap> {
type: T;

15
front/src/Api/Events/TilesetEvent.ts Normal file
View file

@ -0,0 +1,15 @@
import * as tg from "generic-type-guard";
export const isTilesetEvent =
new tg.IsInterface().withProperties({
name : tg.isString,
imgUrl : tg.isString,
tilewidth : tg.isNumber,
tileheight : tg.isNumber,
margin : tg.isNumber,
spacing : tg.isNumber,
}).get();
/**
* A message sent from the iFrame to the game to show/hide a layer.
*/
export type TilesetEvent = tg.GuardedType<typeof isTilesetEvent>;

8
front/src/Api/IframeListener.ts
View file

@ -20,6 +20,7 @@ import type { DataLayerEvent } from "./Events/DataLayerEvent";
import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
import type { TagEvent } from "./Events/TagEvent";
import { isTilesetEvent, TilesetEvent } from "./Events/TilesetEvent";
/**
@ -79,9 +80,12 @@ class IframeListener {
private readonly _registerMenuCommandStream: Subject<string> = new Subject();
public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
private readonly _tagListStream: Subject<string> = new Subject();
private readonly _tagListStream: Subject<void> = new Subject();
public readonly tagListStream = this._tagListStream.asObservable();
private readonly _tilesetLoaderStream: Subject<TilesetEvent> = new Subject();
public readonly tilesetLoaderStream = this._tilesetLoaderStream.asObservable();
private readonly iframes = new Set<HTMLIFrameElement>();
private readonly scripts = new Map<string, HTMLIFrameElement>();
private sendPlayerMove: boolean = false;
@ -152,6 +156,8 @@ class IframeListener {
this._registerMenuCommandStream.next(payload.data.menutItem)
} else if (payload.type == "getTag") {
this._tagListStream.next();
} else if (payload.type == "tilsetEvent" && isTilesetEvent(payload.data)) {
this._tilesetLoaderStream.next(payload.data);
}
}
}, false);

8
front/src/Phaser/Game/GameMap.ts
View file

@ -1,6 +1,5 @@
import type {ITiledMap, ITiledMapLayer, ITiledMapTileLayer} from "../Map/ITiledMap";
import { flattenGroupLayersMap } from "../Map/LayersFlattener";
import {iframeListener} from "../../Api/IframeListener";
import TilemapLayer = Phaser.Tilemaps.TilemapLayer;
export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void;
@ -151,4 +150,11 @@ export class GameMap {
return undefined;
}
public addTerrain(terrain : Phaser.Tilemaps.Tileset): void {
console.log('Add');
for (const phaserLayer of this.phaserLayers) {
phaserLayer.tileset.push(terrain);
}
}
}

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

@ -500,7 +500,7 @@ export class GameScene extends DirtyScene implements CenterListener {
if (!this.room.isDisconnected()) {
this.connect();
}
console.log('display');
document.addEventListener('visibilitychange', this.onVisibilityChangeCallback);
}
@ -910,6 +910,13 @@ ${escapedMessage}
iframeListener.sendUserTagList({list: this.connection.getAllTag()});
}))
this.iframeSubscriptionList.push(iframeListener.tilesetLoaderStream.subscribe((tileset) => {
//this.load.tilemapTiledJSON('logo', tileset.imgUrl);
this.load.image('logo', tileset.imgUrl);
this.Terrains.push(this.Map.addTilesetImage(tileset.name, tileset.imgUrl, tileset.tilewidth, tileset.tileheight, tileset.margin, tileset.spacing));
this.gameMap.addTerrain(this.Terrains[this.Terrains.length - 1]);
}))
}
private setPropertyLayer(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {

16
front/src/iframe_api.ts
View file

@ -18,6 +18,7 @@ import type { ITiledMap } from "./Phaser/Map/ITiledMap";
import type { MenuItemRegisterEvent } from "./Api/Events/MenuItemRegisterEvent";
import { isMenuItemClickedEvent } from "./Api/Events/MenuItemClickedEvent";
import {TagEvent, isTagEvent} from "./Api/Events/TagEvent";
import type { TilesetEvent } from "./Api/Events/TilesetEvent";
interface WorkAdventureApi {
sendChatMessage(message: string, author: string): void;
@ -48,6 +49,7 @@ interface WorkAdventureApi {
getNickName(): Promise<string | null>;
getTagUser(): Promise<string[]>;
getMap(): Promise<ITiledMap>
loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void;
onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void
}
@ -163,6 +165,20 @@ window.WA = {
})
},
loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void {
postToParent({
type: "tilsetEvent",
data: {
name: name,
imgUrl: imgUrl,
tilewidth: tilewidth,
tileheight: tileheight,
margin: margin,
spacing: spacing
} as TilesetEvent
})
},
getTagUser(): Promise<string[]> {
return getTag().then((res) => {
return res.list;

219
maps/tests/Metadata/ScriptMap.json Normal file
View file

@ -0,0 +1,219 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 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, 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,
"id":1,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"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,
"id":2,
"name":"bottom",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":5,
"name":"floorLayer",
"objects":[],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":10,
"nextobjectid":2,
"orientation":"orthogonal",
"properties":[
{
"name":"script",
"type":"string",
"value":"script.js"
}],
"renderorder":"right-down",
"tiledversion":"1.4.3",
"tileheight":32,
"tilesets":[
{
"columns":8,
"firstgid":1,
"image":"tileset_dungeon.png",
"imageheight":256,
"imagewidth":256,
"margin":0,
"name":"TDungeon",
"spacing":0,
"tilecount":64,
"tileheight":32,
"tiles":[
{
"id":0,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":1,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":2,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":3,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":4,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":8,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":9,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":10,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":11,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":12,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":16,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":17,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":18,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":19,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":20,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
}],
"tilewidth":32
},
{
"columns":8,
"firstgid":65,
"image":"floortileset.png",
"imageheight":288,
"imagewidth":256,
"margin":0,
"name":"Floor",
"spacing":0,
"tilecount":72,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.4,
"width":10
}

1
maps/tests/Metadata/script.js Normal file
View file

@ -0,0 +1 @@
console.log('script chargé !!!!!');

1
maps/tests/iframe.html
View file

@ -17,6 +17,7 @@
chatDiv.innerText = message;
document.getElementById('chatSent').append(chatDiv);
}));
WA.loadTileset('TEST', 'https://gparant.github.io/tcm-client/TCM/paris-map/tileset1.png', 32, 32, 0, 0);
</script>
</body>
</html>