_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #1554 from thecodingmachine/twemojiImplementation

Browse Source 
Implement Twemoji on emote
This commit is contained in:
David Négrier 2021-11-10 18:11:51 +01:00 committed by GitHub
commit 0f6ecfc311
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/src/Components/EmoteMenu/EmoteMenu.svelte
View File

@ -18,13 +18,18 @@
'--font': 'Press Start 2P'
},
emojisPerRow: isMobile() ? 6 : 8,
autoFocusSearch: false
autoFocusSearch: false,
style: 'twemoji',
});
//the timeout is here to prevent the menu from flashing
setTimeout(() => picker.showPicker(emojiContainer), 100);
picker.on("emoji", (selection) => {
emoteStore.set(selection.emoji);
emoteStore.set({
unicode: selection.emoji,
url: selection.url,
name: selection.name
});
});
picker.on("hidden", () => {

8
front/src/Components/Menu/MenuIcon.svelte
View File

@ -11,15 +11,9 @@
function showChat(){
chatVisibilityStore.set(true);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === "Tab") {
showMenu();
}
}
</script>
<svelte:window on:keydown={onKeyDown}/>
<svelte:window/>
<main class="menuIcon">
<img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>

8
front/src/Phaser/Entity/Character.ts
View File

@ -3,6 +3,7 @@ import { SpeechBubble } from "./SpeechBubble";
import Text = Phaser.GameObjects.Text;
import Container = Phaser.GameObjects.Container;
import Sprite = Phaser.GameObjects.Sprite;
import DOMElement = Phaser.GameObjects.DOMElement;
import { TextureError } from "../../Exception/TextureError";
import { Companion } from "../Companion/Companion";
import type { GameScene } from "../Game/GameScene";
@ -33,7 +34,7 @@ export abstract class Character extends Container {
//private teleportation: Sprite;
private invisible: boolean;
public companion?: Companion;
private emote: Phaser.GameObjects.Text | null = null;
private emote: Phaser.GameObjects.DOMElement | null = null;
private emoteTween: Phaser.Tweens.Tween | null = null;
scene: GameScene;
@ -300,8 +301,9 @@ export abstract class Character extends Container {
playEmote(emote: string) {
this.cancelPreviousEmote();
const emoteY = -45;
this.playerName.setVisible(false);
this.emote = new Text(this.scene, -10, 0, emote, { fontSize: "20px" });
const image = new Image(16, 16);
image.src = emote;
this.emote = new DOMElement(this.scene, -1, 0, image, "z-index:10;");
this.emote.setAlpha(0);
this.add(this.emote);
this.createStartTransition(emoteY);

29
front/src/Phaser/Game/GameScene.ts
View File

@ -15,10 +15,7 @@ import type {
import { DEBUG_MODE, JITSI_PRIVATE_MODE, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
import { Queue } from "queue-typescript";
import {
Box,
ON_ACTION_TRIGGER_BUTTON,
} from "../../WebRtc/LayoutManager";
import { Box, ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
import { CoWebsite, coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
@ -497,7 +494,10 @@ export class GameScene extends DirtyScene {
object.properties,
'in the "' + object.name + '" object of type "website"'
);
const allowApi = PropertyUtils.findBooleanProperty(GameMapProperties.ALLOW_API, object.properties);
const allowApi = PropertyUtils.findBooleanProperty(
GameMapProperties.ALLOW_API,
object.properties
);
// TODO: add a "allow" property to iframe
this.embeddedWebsiteManager.createEmbeddedWebsite(
@ -614,10 +614,10 @@ export class GameScene extends DirtyScene {
oldPeerNumber = newPeerNumber;
});
this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => {
if (emoteKey) {
this.CurrentPlayer?.playEmote(emoteKey);
this.connection?.emitEmoteEvent(emoteKey);
this.emoteUnsubscribe = emoteStore.subscribe((emote) => {
if (emote) {
this.CurrentPlayer?.playEmote(emote.url);
this.connection?.emitEmoteEvent(emote.url);
emoteStore.set(null);
}
});
@ -763,14 +763,14 @@ export class GameScene extends DirtyScene {
this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
// Init layer change listener
this.gameMap.onEnterLayer(layers => {
layers.forEach(layer => {
this.gameMap.onEnterLayer((layers) => {
layers.forEach((layer) => {
iframeListener.sendEnterLayerEvent(layer.name);
});
});
this.gameMap.onLeaveLayer(layers => {
layers.forEach(layer => {
this.gameMap.onLeaveLayer((layers) => {
layers.forEach((layer) => {
iframeListener.sendLeaveLayerEvent(layer.name);
});
});
@ -1868,7 +1868,8 @@ ${escapedMessage}
public startJitsi(roomName: string, jwt?: string): void {
const allProps = this.gameMap.getCurrentProperties();
const jitsiConfig = this.safeParseJSONstring(
allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined, GameMapProperties.JITSI_CONFIG
allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined,
GameMapProperties.JITSI_CONFIG
);
const jitsiInterfaceConfig = this.safeParseJSONstring(
allProps.get(GameMapProperties.JITSI_INTERFACE_CONFIG) as string | undefined,

20
front/src/Phaser/Player/Player.ts
View File

@ -3,8 +3,6 @@ import type { GameScene } from "../Game/GameScene";
import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
import { Character } from "../Entity/Character";
import { userMovingStore } from "../../Stores/GameStore";
import { get } from "svelte/store";
import { emoteMenuStore } from "../../Stores/EmoteStore";
export const hasMovedEventName = "hasMoved";
export const requestEmoteEventName = "requestEmote";
@ -68,10 +66,24 @@ export class Player extends Character {
} else if (this.wasMoving && moving) {
// slow joystick movement
this.move(0, 0);
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
this.emit(hasMovedEventName, {
moving,
direction: this.previousDirection,
x: this.x,
y: this.y,
oldX: x,
oldY: y,
});
} else if (this.wasMoving && !moving) {
this.stop();
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
this.emit(hasMovedEventName, {
moving,
direction: this.previousDirection,
x: this.x,
y: this.y,
oldX: x,
oldY: y,
});
}
if (direction !== null) {

8
front/src/Stores/EmoteStore.ts
View File

@ -1,5 +1,11 @@
import { writable } from "svelte/store";
export interface Emoji {
unicode: string;
url: string;
name: string;
}
function createEmoteMenuStore() {
const { subscribe, set } = writable(false);
@ -14,5 +20,5 @@ function createEmoteMenuStore() {
};
}
export const emoteStore = writable<string | null>(null);
export const emoteStore = writable<Emoji | null>(null);
export const emoteMenuStore = createEmoteMenuStore();