fallback if avatar could not be loaded

This commit is contained in:
Hanusiak Piotr 2021-12-01 11:14:54 +01:00
parent 9de13faff2
commit 3f7511e682
3 changed files with 8 additions and 6 deletions

View File

@ -1,10 +1,12 @@
<script lang="typescript"> <script lang="typescript">
import logoTalk from "../images/logo-message-pixel.png" import logoTalk from "../images/logo-message-pixel.png"
import logoWA from "../images/logo-WA-pixel.png";
import {menuVisiblilityStore} from "../../Stores/MenuStore"; import {menuVisiblilityStore} from "../../Stores/MenuStore";
import {chatVisibilityStore} from "../../Stores/ChatStore"; import {chatVisibilityStore} from "../../Stores/ChatStore";
import {get} from "svelte/store"; import {get} from "svelte/store";
import Woka from '../Woka/Woka.svelte'; import Woka from '../Woka/Woka.svelte';
function showMenu(){ function showMenu(){
menuVisiblilityStore.set(!get(menuVisiblilityStore)) menuVisiblilityStore.set(!get(menuVisiblilityStore))
} }
@ -17,7 +19,7 @@
<main class="menuIcon"> <main class="menuIcon">
<div class="nes-pointer woka" on:click|preventDefault={showMenu}> <div class="nes-pointer woka" on:click|preventDefault={showMenu}>
<Woka userId={-1}/> <Woka userId={-1} placeholderSrc={logoWA}/>
</div> </div>
<img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat}> <img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat}>
</main> </main>

View File

@ -30,7 +30,7 @@
{/if} {/if}
{#if !$constraintStore || $constraintStore.video === false} {#if !$constraintStore || $constraintStore.video === false}
<i style="background-color: {getColorByString(name)};"> <i style="background-color: {getColorByString(name)};">
<Woka userId={peer.userId}/> <Woka userId={peer.userId} placeholderSrc={""}/>
</i> </i>
{/if} {/if}
{#if $constraintStore && $constraintStore.audio === false} {#if $constraintStore && $constraintStore.audio === false}

View File

@ -2,22 +2,22 @@
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { gameManager } from '../../Phaser/Game/GameManager'; import { gameManager } from '../../Phaser/Game/GameManager';
import logoWA from "../images/logo-WA-pixel.png"; // placeholder
export let userId: number; export let userId: number;
export let placeholderSrc: string;
const gameScene = gameManager.getCurrentGameScene(); const gameScene = gameManager.getCurrentGameScene();
const playerWokaPictureStore = gameScene.getUserWokaPictureStore(userId); const playerWokaPictureStore = gameScene.getUserWokaPictureStore(userId);
let src = logoWA; let src = placeholderSrc;
const unsubscribe = playerWokaPictureStore.picture.subscribe((htmlElement) => { const unsubscribe = playerWokaPictureStore.picture.subscribe((htmlElement) => {
src = htmlElement?.src ?? logoWA; src = htmlElement?.src ?? placeholderSrc;
}); });
onDestroy(unsubscribe); onDestroy(unsubscribe);
</script> </script>
<img src={src} alt="woka" class="nes-pointer"> <img src={src} alt="" class="nes-pointer">
<style> <style>
img { img {