WIP API updates for tutorial and more

This commit is contained in:
Benedicte Quimbert 2021-11-10 19:04:06 +01:00
parent c53f0c6c8c
commit d672a2dead
7 changed files with 115 additions and 15 deletions

View File

@ -22,6 +22,8 @@ export const isEmbeddedWebsiteEvent = new tg.IsInterface()
y: tg.isNumber,
width: tg.isNumber,
height: tg.isNumber,
origin: tg.isSingletonStringUnion("player", "map"),
scale: tg.isNumber,
})
.get();
@ -35,6 +37,8 @@ export const isCreateEmbeddedWebsiteEvent = new tg.IsInterface()
visible: tg.isBoolean,
allowApi: tg.isBoolean,
allow: tg.isString,
origin: tg.isSingletonStringUnion("player", "map"),
scale: tg.isNumber,
})
.get();

View File

@ -215,6 +215,7 @@ export const isIframeQuery = (event: any): event is IframeQuery<keyof IframeQuer
const result = iframeQueryMapTypeGuards[type].query(event.data);
if (!result) {
console.warn('Received a query with type "' + type + '" but the payload is invalid.');
console.log(event);
}
return result;
};

View File

@ -12,6 +12,8 @@ export class EmbeddedWebsite {
private _allow: string;
private _allowApi: boolean;
private _position: Rectangle;
private readonly origin: "map" | "player" | undefined;
private _scale: number | undefined;
constructor(private config: CreateEmbeddedWebsiteEvent) {
this.name = config.name;
@ -20,6 +22,12 @@ export class EmbeddedWebsite {
this._allow = config.allow ?? "";
this._allowApi = config.allowApi ?? false;
this._position = config.position;
this.origin = config.origin;
this._scale = config.scale;
}
public get url() {
return this._url;
}
public set url(url: string) {
@ -33,6 +41,10 @@ export class EmbeddedWebsite {
});
}
public get visible() {
return this._visible;
}
public set visible(visible: boolean) {
this._visible = visible;
sendToWorkadventure({
@ -44,6 +56,10 @@ export class EmbeddedWebsite {
});
}
public get x() {
return this._position.x;
}
public set x(x: number) {
this._position.x = x;
sendToWorkadventure({
@ -55,6 +71,10 @@ export class EmbeddedWebsite {
});
}
public get y() {
return this._position.y;
}
public set y(y: number) {
this._position.y = y;
sendToWorkadventure({
@ -66,6 +86,10 @@ export class EmbeddedWebsite {
});
}
public get width() {
return this._position.width;
}
public set width(width: number) {
this._position.width = width;
sendToWorkadventure({
@ -77,6 +101,10 @@ export class EmbeddedWebsite {
});
}
public get height() {
return this._position.height;
}
public set height(height: number) {
this._position.height = height;
sendToWorkadventure({
@ -87,4 +115,19 @@ export class EmbeddedWebsite {
},
});
}
public get scale() {
return this._scale;
}
public set scale(scale: number) {
this._scale = scale;
sendToWorkadventure({
type: "modifyEmbeddedWebsite",
data: {
name: this.name,
scale: this._scale,
},
});
}
}

View File

@ -1,8 +1,4 @@
import type { LoadSoundEvent } from "../Events/LoadSoundEvent";
import type { PlaySoundEvent } from "../Events/PlaySoundEvent";
import type { StopSoundEvent } from "../Events/StopSoundEvent";
import { IframeApiContribution, queryWorkadventure, sendToWorkadventure } from "./IframeApiContribution";
import { Sound } from "./Sound/Sound";
import { EmbeddedWebsite } from "./Room/EmbeddedWebsite";
import type { CreateEmbeddedWebsiteEvent } from "../Events/EmbeddedWebsiteEvent";

View File

@ -29,6 +29,7 @@ export class EmbeddedWebsiteManager {
width: rect["width"],
height: rect["height"],
},
origin: website.origin,
};
});
@ -59,7 +60,9 @@ export class EmbeddedWebsiteManager {
createEmbeddedWebsiteEvent.position.height,
createEmbeddedWebsiteEvent.visible ?? true,
createEmbeddedWebsiteEvent.allowApi ?? false,
createEmbeddedWebsiteEvent.allow ?? ""
createEmbeddedWebsiteEvent.allow ?? "",
createEmbeddedWebsiteEvent.origin ?? "map",
createEmbeddedWebsiteEvent.scale ?? 1
);
}
);
@ -112,6 +115,10 @@ export class EmbeddedWebsiteManager {
if (embeddedWebsiteEvent?.height !== undefined) {
website.iframe.style.height = embeddedWebsiteEvent.height + "px";
}
if (embeddedWebsiteEvent?.scale !== undefined) {
website.phaserObject.scale = embeddedWebsiteEvent.scale;
}
}
);
}
@ -125,7 +132,9 @@ export class EmbeddedWebsiteManager {
height: number,
visible: boolean,
allowApi: boolean,
allow: string
allow: string,
origin: "map" | "player" | undefined,
scale: number | undefined
): void {
if (this.embeddedWebsites.has(name)) {
throw new Error('An embedded website with the name "' + name + '" already exists in your map');
@ -147,6 +156,8 @@ export class EmbeddedWebsiteManager {
width,
height,
},
origin,
scale,
};
const embeddedWebsite = this.doCreateEmbeddedWebsite(embeddedWebsiteEvent, visible);
@ -169,14 +180,41 @@ export class EmbeddedWebsiteManager {
iframe.style.padding = "0";
iframe.style.border = "none";
const embeddedWebsite = {
...embeddedWebsiteEvent,
phaserObject: this.gameScene.add
.dom(embeddedWebsiteEvent.position.x, embeddedWebsiteEvent.position.y, iframe)
.setVisible(visible)
.setOrigin(0, 0),
iframe: iframe,
};
let embeddedWebsite;
let domElement;
switch (embeddedWebsiteEvent.origin) {
case "player":
domElement = new DOMElement(
this.gameScene,
embeddedWebsiteEvent.position.x,
embeddedWebsiteEvent.position.y,
iframe
);
if (embeddedWebsiteEvent.scale) {
domElement.scale = embeddedWebsiteEvent.scale;
}
this.gameScene.CurrentPlayer.add(domElement);
embeddedWebsite = {
...embeddedWebsiteEvent,
phaserObject: domElement,
iframe: iframe,
};
break;
case "map":
default:
embeddedWebsite = {
...embeddedWebsiteEvent,
phaserObject: this.gameScene.add
.dom(embeddedWebsiteEvent.position.x, embeddedWebsiteEvent.position.y, iframe)
.setVisible(visible)
.setOrigin(0, 0),
iframe: iframe,
};
}
if (embeddedWebsiteEvent.allowApi) {
iframeListener.registerIframe(iframe);
}

View File

@ -523,7 +523,9 @@ export class GameScene extends DirtyScene {
object.height,
object.visible,
allowApi ?? false,
""
"",
"map",
1
);
}
}

View File

@ -15,6 +15,8 @@
const heightField = document.getElementById('height');
const urlField = document.getElementById('url');
const visibleField = document.getElementById('visible');
const originField = document.getElementById('origin');
const scaleField = document.getElementById('scale');
createButton.addEventListener('click', () => {
console.log('CREATING NEW EMBEDDED IFRAME');
@ -28,6 +30,8 @@
height: parseInt(heightField.value),
},
visible: !!visibleField.value,
origin: originField.value,
scale: parseFloat(scaleField.value),
});
});
@ -61,6 +65,16 @@
const website = await WA.room.website.get('test');
website.visible = this.checked;
});
originField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.origin = this.value;
});
scaleField.addEventListener('change', async function() {
const website = await WA.room.website.get('test');
website.scale = parseFloat(this.value);
});
});
})
</script>
@ -72,6 +86,8 @@ width: <input type="text" id="width" value="600" /><br/>
height: <input type="text" id="height" value="400" /><br/>
URL: <input type="text" id="url" value="https://mensuel.framapad.org/p/rt6c904745-9oxm?lang=en" /><br/>
Visible: <input type="checkbox" id="visible" value=1 /><br/>
Origin: <input type="text" id="origin" value="map" /><br/>
Scale: <input type="text" id="scale" value=1 /><br/>
<button id="createEmbeddedWebsite">Create embedded website</button>