lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

companion pictures store

Browse source
This commit is contained in:
Hanusiak Piotr 2021-12-07 16:37:24 +01:00
parent 5efa17651c
commit 8eaacdf2e5
6 changed files with 110 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
front/src/Components/Companion/Companion.svelte Normal file
View file

@ -0,0 +1,39 @@
<script lang="typescript">
import { onDestroy } from "svelte";
import { gameManager } from "../../Phaser/Game/GameManager";
export let userId: number;
export let placeholderSrc: string;
export let width: string = "62px";
export let height: string = "62px";
const gameScene = gameManager.getCurrentGameScene();
const playerWokaPictureStore = gameScene.getUserCompanionPictureStore(userId);
let src = placeholderSrc;
const unsubscribe = playerWokaPictureStore.picture.subscribe((source) => {
src = source ?? placeholderSrc;
});
onDestroy(unsubscribe);
</script>
<img {src} alt="" class="nes-pointer" style="--theme-width: {width}; --theme-height: {height}" />
<style>
img {
display: inline-block;
pointer-events: auto;
width: var(--theme-width);
height: var(--theme-height);
margin: 0;
padding: 0;
position: static;
left: 0;
bottom: 0;
right: 0;
top: 0;
image-rendering: pixelated;
}
</style>

6
front/src/Components/Menu/ProfileSubMenu.svelte
View file

@ -16,6 +16,7 @@
import btnProfileSubMenuIdentity from "../images/btn-menu-profile-identity.svg";
import btnProfileSubMenuCompanion from "../images/btn-menu-profile-companion.svg";
import Woka from "../Woka/Woka.svelte";
import Companion from "../Companion/Companion.svelte";
function disableMenuStores() {
menuVisiblilityStore.set(false);
@ -65,14 +66,11 @@
<span class="btn-hover">Edit your name</span>
</button>
<button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>
<!-- <div class="woka-icon">
</div> -->
<Woka userId={-1} placeholderSrc="" width="26px" height="26px" />
<!-- <img src={btnProfileSubMenuWoka} alt="Edit your WOKA" /> -->
<span class="btn-hover">Edit your WOKA</span>
</button>
<button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>
<img src={btnProfileSubMenuCompanion} alt="Edit your companion" />
<Companion userId={-1} placeholderSrc={btnProfileSubMenuCompanion} width="26px" height="26px" />
<span class="btn-hover">Edit your companion</span>
</button>
<button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>

32
front/src/Phaser/Companion/Companion.ts
View file

@ -39,6 +39,7 @@ export class Companion extends Container {
texturePromise.then((resource) => {
this.addResource(resource);
this.invisible = false;
this.emit("texture-loaded");
});
this.scene.physics.world.enableBody(this);
@ -123,6 +124,37 @@ export class Companion extends Container {
};
}
public async getSnapshot(): Promise<string> {
const rt = this.scene.make.renderTexture({}, false);
if (rt.renderer instanceof Phaser.Renderer.Canvas.CanvasRenderer) {
rt.destroy();
for (const sprite of this.sprites.values()) {
// we can be sure that either predefined woka or body texture is at this point loaded
if (sprite.texture.key.includes("cat") || sprite.texture.key.includes("dog")) {
return this.scene.textures.getBase64(sprite.texture.key);
}
}
}
for (const sprite of this.sprites.values()) {
sprite.setFrame(1);
rt.draw(sprite, sprite.displayWidth * 0.5, sprite.displayHeight * 0.5);
}
return new Promise<string>((resolve, reject) => {
try {
rt.snapshot(
(url) => {
resolve((url as HTMLImageElement).src);
rt.destroy();
},
"image/png",
1
);
} catch (error) {
reject(error);
}
});
}
private playAnimation(direction: PlayerAnimationDirections, type: PlayerAnimationTypes): void {
if (this.invisible) return;

5
front/src/Phaser/Entity/Character.ts
View file

@ -63,7 +63,7 @@ export abstract class Character extends Container {
this.addTextures(textures, frame);
this.invisible = false;
this.playAnimation(direction, moving);
this.emit("textures-loaded");
this.emit("woka-textures-loaded");
})
.catch(() => {
return lazyLoadPlayerCharacterTextures(scene.load, ["color_22", "eyes_23"]).then((textures) => {
@ -151,6 +151,9 @@ export abstract class Character extends Container {
public addCompanion(name: string, texturePromise?: Promise<string>): void {
if (typeof texturePromise !== "undefined") {
this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);
this.companion.once("texture-loaded", () => {
this.emit("companion-texture-loaded", this.companion?.getSnapshot());
});
}
}

27
front/src/Phaser/Game/GameScene.ts
View file

@ -77,6 +77,7 @@ import { userIsAdminStore } from "../../Stores/GameStore";
import { contactPageStore } from "../../Stores/MenuStore";
import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
import { UserWokaPictureStore } from "../../Stores/UserWokaPictureStore";
import { UserCompanionPictureStore } from "../../Stores/UserCompanionPictureStore";
import EVENT_TYPE = Phaser.Scenes.Events;
import Texture = Phaser.Textures.Texture;
@ -202,6 +203,10 @@ export class GameScene extends DirtyScene {
private embeddedWebsiteManager!: EmbeddedWebsiteManager;
private loader: Loader;
private userWokaPictureStores: Map<number, UserWokaPictureStore> = new Map<number, UserWokaPictureStore>();
private userCompanionPictureStores: Map<number, UserCompanionPictureStore> = new Map<
number,
UserCompanionPictureStore
>();
constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
super({
@ -344,6 +349,15 @@ export class GameScene extends DirtyScene {
return store;
}
public getUserCompanionPictureStore(userId: number) {
let store = this.userCompanionPictureStores.get(userId);
if (!store) {
store = new UserCompanionPictureStore();
this.userCompanionPictureStores.set(userId, store);
}
return store;
}
// FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private async onMapLoad(data: any): Promise<void> {
@ -1506,9 +1520,14 @@ ${escapedMessage}
this.companion,
this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
);
this.CurrentPlayer.once("textures-loaded", () => {
this.CurrentPlayer.once("woka-textures-loaded", () => {
this.savePlayerWokaPicture(this.CurrentPlayer, -1);
});
this.CurrentPlayer.once("companion-texture-loaded", (snapshotPromise: Promise<string>) => {
snapshotPromise.then((snapshot: string) => {
this.savePlayerCompanionPicture(-1, snapshot);
});
});
this.CurrentPlayer.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
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.
@ -1541,6 +1560,10 @@ ${escapedMessage}
this.getUserWokaPictureStore(userId).picture.set(htmlImageElementSrc);
}
private savePlayerCompanionPicture(userId: number, snapshot: string): void {
this.getUserCompanionPictureStore(userId).picture.set(snapshot);
}
pushPlayerPosition(event: HasPlayerMovedEvent) {
if (this.lastMoveEventSent === event) {
return;
@ -1728,7 +1751,7 @@ ${escapedMessage}
addPlayerData.companion,
addPlayerData.companion !== null ? lazyLoadCompanionResource(this.load, addPlayerData.companion) : undefined
);
player.once("textures-loaded", () => {
player.once("woka-textures-loaded", () => {
this.savePlayerWokaPicture(player, addPlayerData.userId);
});
this.MapPlayers.add(player);

8
front/src/Stores/UserCompanionPictureStore.ts Normal file
View file

@ -0,0 +1,8 @@
import { writable, Writable } from "svelte/store";
/**
* A store that contains the player companion picture
*/
export class UserCompanionPictureStore {
constructor(public picture: Writable<string | undefined> = writable(undefined)) {}
}