From 8016cf3c1a31613226d18d798f4531d8089dd248 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Sat, 4 Dec 2021 16:29:28 +0100
Subject: [PATCH] fallback in case of CanvasRenderer

---
 front/src/Components/Woka/Woka.svelte    |  4 ++--
 front/src/Phaser/Entity/Character.ts     | 17 +++++++++++++----
 front/src/Phaser/Game/GameScene.ts       |  4 ++--
 front/src/Stores/UserWokaPictureStore.ts |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

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<HTMLImageElement> {
+    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("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<HTMLImageElement>((resolve, reject) => {
+        return new Promise<string>((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<void> {
-        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<HTMLImageElement | undefined> = writable(undefined)) {}
+    constructor(public picture: Writable<string | undefined> = writable(undefined)) {}
 }