WIP API updates for tutorial and more
This commit is contained in:
parent
c53f0c6c8c
commit
d672a2dead
@ -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();
|
||||
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -523,7 +523,9 @@ export class GameScene extends DirtyScene {
|
||||
object.height,
|
||||
object.visible,
|
||||
allowApi ?? false,
|
||||
""
|
||||
"",
|
||||
"map",
|
||||
1
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user