Twemoji Svelte

This commit is contained in:
_Bastler
2021-09-10 17:06:46 +02:00
parent 5497253e38
commit bb3b58d8bf
7 changed files with 156 additions and 174 deletions
+38 -25
View File
@@ -82,6 +82,7 @@ import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStor
import { SharedVariablesManager } from "./SharedVariablesManager";
import { playersStore } from "../../Stores/PlayersStore";
import { chatVisibilityStore } from "../../Stores/ChatStore";
import { emoteStore } from "../../Stores/EmoteStore";
import {
audioManagerFileStore,
audioManagerVisibilityStore,
@@ -94,6 +95,7 @@ import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
import type { RadialMenuItem } from "../Components/RadialMenu";
import { get } from "svelte/store";
export interface GameSceneInitInterface {
initPosition: PointInterface | null;
@@ -171,6 +173,7 @@ export class GameScene extends DirtyScene {
private iframeSubscriptionList!: Array<Subscription>;
private peerStoreUnsubscribe!: () => void;
private chatVisibilityUnsubscribe!: () => void;
private emoteUnsubscribe!: () => void;
private biggestAvailableAreaStoreUnsubscribe!: () => void;
MapUrlFile: string;
roomUrl: string;
@@ -272,7 +275,7 @@ export class GameScene extends DirtyScene {
// So if we are in https, we can still try to load a HTTP local resource (can be useful for testing purposes)
// See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#when_is_a_context_considered_secure
const url = new URL(file.src);
const host = url.host.split(":")[0];
const host = url.host.split(":")[ 0 ];
if (
window.location.protocol === "https:" &&
file.src === this.MapUrlFile &&
@@ -321,8 +324,8 @@ export class GameScene extends DirtyScene {
//eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.load as any).rexWebFont({
custom: {
families: ["Press Start 2P"],
urls: ["/resources/fonts/fonts.css"],
families: [ "Press Start 2P" ],
urls: [ "/resources/fonts/fonts.css" ],
testString: "abcdefg",
},
});
@@ -368,7 +371,7 @@ export class GameScene extends DirtyScene {
}
}
for (const [itemType, objectsOfType] of this.objectsByType) {
for (const [ itemType, objectsOfType ] of this.objectsByType) {
// FIXME: we would ideally need for the loader to WAIT for the import to be performed, which means writing our own loader plugin.
let itemFactory: ItemFactoryInterface;
@@ -399,7 +402,7 @@ export class GameScene extends DirtyScene {
// TODO: we should pass here a factory to create sprites (maybe?)
// Do we have a state for this object?
const state = roomJoinedAnswer.items[object.id];
const state = roomJoinedAnswer.items[ object.id ];
const actionableItem = itemFactory.factory(this, object, state);
this.actionableItems.set(actionableItem.getId(), actionableItem);
@@ -614,7 +617,16 @@ export class GameScene extends DirtyScene {
this.openChatIcon.setVisible(!v);
});
Promise.all([this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises]).then(() => {
this.emoteUnsubscribe = emoteStore.subscribe(() => {
const emoteKey = get(emoteStore);
if (emoteKey) {
this.CurrentPlayer?.playEmote(emoteKey)
this.connection?.emitEmoteEvent(emoteKey);
emoteStore.set(null);
}
});
Promise.all([ this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises ]).then(() => {
this.scene.wake();
});
}
@@ -702,8 +714,8 @@ export class GameScene extends DirtyScene {
if (item === undefined) {
console.warn(
'Received an event about object "' +
message.itemId +
'" but cannot find this item on the map.'
message.itemId +
'" but cannot find this item on the map.'
);
return;
}
@@ -897,15 +909,15 @@ export class GameScene extends DirtyScene {
} else {
console.error(
"Error while opening a popup. Cannot find an object on the map with name '" +
openPopupEvent.targetObject +
"'. The first parameter of WA.openPopup() must be the name of a rectangle object in your map."
openPopupEvent.targetObject +
"'. The first parameter of WA.openPopup() must be the name of a rectangle object in your map."
);
return;
}
const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
let html = `<div id="container" hidden><div class="nes-container with-title is-centered">`;
html += escapedMessage;
if(openPopupEvent.input) {
if (openPopupEvent.input) {
html += `<input id="popupinput-${openPopupEvent.popupId}" class="nes-input" />`
}
html += `</div>`;
@@ -938,7 +950,7 @@ export class GameScene extends DirtyScene {
const btnId = id;
button.onclick = () => {
let inputValue = '';
if(openPopupEvent.input) {
if (openPopupEvent.input) {
inputValue = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(`popupinput-${openPopupEvent.popupId}`).value;
}
iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId, openPopupEvent.input, inputValue);
@@ -1095,17 +1107,17 @@ export class GameScene extends DirtyScene {
this.iframeSubscriptionList.push(iframeListener.unregisterIFrameStream.subscribe(() => {
const allProps = this.gameMap.getCurrentProperties();
if(allProps.get("openWebsite") == null) {
if (allProps.get("openWebsite") == null) {
layoutManagerActionStore.removeAction("openWebsite");
} else {
const openWebsiteFunction = () => {
coWebsiteManager.loadCoWebsite(allProps.get("openWebsite") as string, this.MapUrlFile, allProps.get('openWebsiteAllowApi') as boolean | undefined, allProps.get('openWebsitePolicy') as string | undefined);
layoutManagerActionStore.removeAction("openWebsite");
};
let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
if(message === undefined) {
if (message === undefined) {
message = 'Press SPACE or touch here to open web site';
}
@@ -1118,7 +1130,7 @@ export class GameScene extends DirtyScene {
});
}
}));
this.iframeSubscriptionList.push(iframeListener.setTilesStream.subscribe((eventTiles) => {
for (const eventTile of eventTiles) {
this.gameMap.putTile(eventTile.tile, eventTile.x, eventTile.y, eventTile.layer);
@@ -1130,7 +1142,7 @@ export class GameScene extends DirtyScene {
const jsonTilesetDir = eventTileset.url.substr(0, eventTileset.url.lastIndexOf("/"));
//Initialise the firstgid to 1 because if there is no tileset in the tilemap, the firstgid will be 1
let newFirstgid = 1;
const lastTileset = this.mapFile.tilesets[this.mapFile.tilesets.length - 1];
const lastTileset = this.mapFile.tilesets[ this.mapFile.tilesets.length - 1 ];
if (lastTileset) {
//If there is at least one tileset in the tilemap then calculate the firstgid of the new tileset
newFirstgid = lastTileset.firstgid + lastTileset.tilecount;
@@ -1251,14 +1263,14 @@ export class GameScene extends DirtyScene {
if (phaserLayers === []) {
console.warn(
'Could not find layer with name that contains "' +
layerName +
'" when calling WA.hideLayer / WA.showLayer'
layerName +
'" when calling WA.hideLayer / WA.showLayer'
);
return;
}
for (let i = 0; i < phaserLayers.length; i++) {
phaserLayers[i].setVisible(visible);
phaserLayers[i].setCollisionByProperty({ collides: true }, visible);
phaserLayers[ i ].setVisible(visible);
phaserLayers[ i ].setCollisionByProperty({ collides: true }, visible);
}
}
this.markDirty();
@@ -1338,6 +1350,7 @@ export class GameScene extends DirtyScene {
this.emoteManager.destroy();
this.peerStoreUnsubscribe();
this.chatVisibilityUnsubscribe();
this.emoteUnsubscribe();
this.biggestAvailableAreaStoreUnsubscribe();
iframeListener.unregisterAnswerer("getState");
iframeListener.unregisterAnswerer("loadTileset");
@@ -1468,7 +1481,7 @@ export class GameScene extends DirtyScene {
if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
return; //we don't want the menu to open when pinching on a touch screen.
}
this.CurrentPlayer.openOrCloseEmoteMenu();
})
this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
@@ -1856,13 +1869,13 @@ export class GameScene extends DirtyScene {
const allProps = this.gameMap.getCurrentProperties();
if(allProps.get("jitsiRoom") === undefined) {
if (allProps.get("jitsiRoom") === undefined) {
layoutManagerActionStore.removeAction("jitsi");
} else {
const openJitsiRoomFunction = () => {
const roomName = jitsiFactory.getRoomName(allProps.get("jitsiRoom") as string, this.instance);
const jitsiUrl = allProps.get("jitsiUrl") as string | undefined;
if(JITSI_PRIVATE_MODE && !jitsiUrl) {
if (JITSI_PRIVATE_MODE && !jitsiUrl) {
const adminTag = allProps.get("jitsiRoomAdminTag") as string | undefined;
this.connection && this.connection.emitQueryJitsiJwtMessage(roomName, adminTag);
@@ -1873,7 +1886,7 @@ export class GameScene extends DirtyScene {
}
let message = allProps.get(JITSI_MESSAGE_PROPERTIES);
if(message === undefined) {
if (message === undefined) {
message = 'Press SPACE or touch here to enter Jitsi Meet room';
}
layoutManagerActionStore.addAction({