From 3506063e65a2b8f62c3c4faec897bf1dffa2e62b Mon Sep 17 00:00:00 2001 From: GRL Date: Thu, 20 May 2021 17:09:10 +0200 Subject: [PATCH] first step on loading a tileset from a script --- front/src/Api/Events/IframeEvent.ts | 2 + front/src/Api/Events/TilesetEvent.ts | 15 ++ front/src/Api/IframeListener.ts | 8 +- front/src/Phaser/Game/GameMap.ts | 8 +- front/src/Phaser/Game/GameScene.ts | 9 +- front/src/iframe_api.ts | 16 ++ maps/tests/Metadata/ScriptMap.json | 219 +++++++++++++++++++++++++++ maps/tests/Metadata/script.js | 1 + maps/tests/iframe.html | 1 + 9 files changed, 276 insertions(+), 3 deletions(-) create mode 100644 front/src/Api/Events/TilesetEvent.ts create mode 100644 maps/tests/Metadata/ScriptMap.json create mode 100644 maps/tests/Metadata/script.js diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 114cbb90..1ee7d1fb 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -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 extends MessageEvent { data: T @@ -42,6 +43,7 @@ export type IframeEventMap = { setProperty: SetPropertyEvent getDataLayer: undefined getTag: undefined + tilsetEvent: TilesetEvent } export interface IframeEvent { type: T; diff --git a/front/src/Api/Events/TilesetEvent.ts b/front/src/Api/Events/TilesetEvent.ts new file mode 100644 index 00000000..eab33bf7 --- /dev/null +++ b/front/src/Api/Events/TilesetEvent.ts @@ -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; \ No newline at end of file diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index 35ef6341..8af0949f 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -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 = new Subject(); public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable(); - private readonly _tagListStream: Subject = new Subject(); + private readonly _tagListStream: Subject = new Subject(); public readonly tagListStream = this._tagListStream.asObservable(); + private readonly _tilesetLoaderStream: Subject = new Subject(); + public readonly tilesetLoaderStream = this._tilesetLoaderStream.asObservable(); + private readonly iframes = new Set(); private readonly scripts = new Map(); 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); diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts index 24ca60c7..d63a67e0 100644 --- a/front/src/Phaser/Game/GameMap.ts +++ b/front/src/Phaser/Game/GameMap.ts @@ -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) => 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); + } + } + } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index dee5eb53..120bb303 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -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 { diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts index 517248ed..5a3336a4 100644 --- a/front/src/iframe_api.ts +++ b/front/src/iframe_api.ts @@ -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; getTagUser(): Promise; getMap(): Promise + 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 { return getTag().then((res) => { return res.list; diff --git a/maps/tests/Metadata/ScriptMap.json b/maps/tests/Metadata/ScriptMap.json new file mode 100644 index 00000000..93972a73 --- /dev/null +++ b/maps/tests/Metadata/ScriptMap.json @@ -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 +} \ No newline at end of file diff --git a/maps/tests/Metadata/script.js b/maps/tests/Metadata/script.js new file mode 100644 index 00000000..d04d7952 --- /dev/null +++ b/maps/tests/Metadata/script.js @@ -0,0 +1 @@ +console.log('script chargé !!!!!'); \ No newline at end of file diff --git a/maps/tests/iframe.html b/maps/tests/iframe.html index aa8e55ec..e0ba05d6 100644 --- a/maps/tests/iframe.html +++ b/maps/tests/iframe.html @@ -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);