diff --git a/front/src/Components/Woka/Woka.svelte b/front/src/Components/Woka/Woka.svelte index e829522a..8918c635 100644 --- a/front/src/Components/Woka/Woka.svelte +++ b/front/src/Components/Woka/Woka.svelte @@ -10,8 +10,8 @@ import { onDestroy } from 'svelte'; const playerWokaPictureStore = gameScene.getUserWokaPictureStore(userId); let src = placeholderSrc; - const unsubscribe = playerWokaPictureStore.picture.subscribe((htmlElement) => { - src = htmlElement?.src ?? placeholderSrc; + const unsubscribe = playerWokaPictureStore.picture.subscribe((source) => { + src = source ?? placeholderSrc; }); onDestroy(unsubscribe); diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index bf85ed59..2637b4d2 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -10,7 +10,7 @@ import type { GameScene } from "../Game/GameScene"; import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes"; import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js"; import { isSilentStore } from "../../Stores/MediaStore"; -import { lazyLoadPlayerCharacterTextures } from "./PlayerTexturesLoadingManager"; +import { lazyLoadPlayerCharacterTextures, loadAllDefaultModels } from "./PlayerTexturesLoadingManager"; const playerNameY = -25; @@ -117,17 +117,26 @@ export abstract class Character extends Container { } } - public async getSnapshot(): Promise { + public async getSnapshot(): Promise { 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("color") || sprite.texture.key.includes("male")) { + 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((resolve, reject) => { + return new Promise((resolve, reject) => { try { rt.snapshot( (url) => { - resolve(url as HTMLImageElement); + resolve((url as HTMLImageElement).src); rt.destroy(); }, "image/png", diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 62414767..cdaa561d 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1535,8 +1535,8 @@ ${escapedMessage} } private async savePlayerWokaPicture(character: Character, userId: number): Promise { - const htmlImageElement = await character.getSnapshot(); - this.getUserWokaPictureStore(userId).picture.set(htmlImageElement); + const htmlImageElementSrc = await character.getSnapshot(); + this.getUserWokaPictureStore(userId).picture.set(htmlImageElementSrc); } pushPlayerPosition(event: HasPlayerMovedEvent) { diff --git a/front/src/Stores/UserWokaPictureStore.ts b/front/src/Stores/UserWokaPictureStore.ts index e07bed04..8422ae50 100644 --- a/front/src/Stores/UserWokaPictureStore.ts +++ b/front/src/Stores/UserWokaPictureStore.ts @@ -4,5 +4,5 @@ import { writable, Writable } from "svelte/store"; * A store that contains the player avatar picture */ export class UserWokaPictureStore { - constructor(public picture: Writable = writable(undefined)) {} + constructor(public picture: Writable = writable(undefined)) {} }