#11 fix ui elements overlapping game view

Lobby-Hoes · Jul 23, 2023 · a41a109 · a41a109
1 parent ac418da
commit a41a109
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/Level.svelte b/src/lib/Level.svelte
@@ -59,7 +59,7 @@
     onMount(() => {
         if (backgroundAudioRef.paused) {
             window.addEventListener('pointerdown', () => {
-                backgroundAudioRef.play();
+                backgroundAudioRef?.play();
             });
         }
 
@@ -74,7 +74,7 @@
     {/if}
 
     {#key backgroundImage}
-        <img alt="background Image" in:fade bind:this={imgRef} src={$assetUrls[backgroundImage]}/>
+        <img alt="background Image" in:fade bind:this={imgRef} src={$assetUrls[backgroundImage]} />
     {/key}
 
     {#if imgRef}

diff --git a/src/lib/MuteButton.svelte b/src/lib/MuteButton.svelte
@@ -2,7 +2,7 @@
     import { fade } from 'svelte/transition';
     import FaVolumeMute from 'svelte-icons/fa/FaVolumeMute.svelte';
     import FaVolumeUp from 'svelte-icons/fa/FaVolumeUp.svelte';
-    import { initialPlaygroundSize } from './stores';
+    import { screenSize } from './stores';
 
     export let audioRefs: HTMLAudioElement[] = [];
 
@@ -22,24 +22,22 @@
 
         soundOn = !soundOn;
     }
-
-    $: style = `height: ${$initialPlaygroundSize.y * 0.1}px; width: ${
-        $initialPlaygroundSize.x * 0.07
-    }px; padding: ${$initialPlaygroundSize.x * 0.01}px;`;
 </script>
 
 {#key soundOn}
-    <div transition:fade={{ duration: 200 }} on:click={onToggle} {style}>
-        {#if soundOn}
-            <FaVolumeUp />
-        {:else}
-            <FaVolumeMute />
-        {/if}
+    <div class="container" transition:fade={{ duration: 200 }} on:click={onToggle}>
+        <div class="inner">
+            {#if soundOn}
+                <FaVolumeUp />
+            {:else}
+                <FaVolumeMute />
+            {/if}
+        </div>
     </div>
 {/key}
 
 <style>
-    div {
+    div.container {
         user-select: none;
         background-color: rgba(0, 0, 255, 0.185);
         border-width: 0.15vw;
@@ -50,10 +48,22 @@
         border-bottom-left-radius: 0.5vw;
         position: absolute;
 
-        display: flex;
         right: 0;
-        align-items: center;
         z-index: 10;
         color: black;
+
+        height: 7vh;
+        width: 7vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div.inner {
+        height: 5vh;
+        width: 5vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 </style>
diff --git a/src/lib/ScoreDisplay.svelte b/src/lib/ScoreDisplay.svelte
@@ -1,31 +1,32 @@
 <script lang="ts">
     import { fly, fade } from 'svelte/transition';
     import FixedSizeText from './FixedSizeText.svelte';
-    import { initialPlaygroundSize } from './stores';
+    import { screenSize } from './stores';
 
     export let found: number = 0;
     export let of: number = 0;
 </script>
 
-<div in:fade style="padding: {$initialPlaygroundSize.x * 0.01}px">
+<div in:fade>
     <FixedSizeText
-        width={$initialPlaygroundSize.x * 0.1}
-        height={$initialPlaygroundSize.y * 0.1}
+        width={$screenSize.x * 0.1}
+        height={$screenSize.y * 0.065}
         text="{found} / {of}"
     />
     {#key found}
         <img
             alt="favicon"
             in:fly={{ y: -50 }}
             src="favicon.png"
-            style="width: {$initialPlaygroundSize.x *
-                0.05}px; margin-left: {$initialPlaygroundSize.x * 0.01}px;"
+            style="width: {$screenSize.x * 0.05}px; margin-left: {$screenSize.x * 0.01}px;"
         />
     {/key}
 </div>
 
 <style>
     div {
+        height: 7vh;
+
         background-color: rgba(0, 0, 255, 0.185);
         border-width: 0.15vw;
         border-color: rgb(27, 27, 27);

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -21,15 +21,16 @@ export const calcPlaygroundSize = derived(windowSize, ($windowSize) => {
 
 export const firstBackgroundSize = writable<{ x: number; y: number }>();
 
-export const initialPlaygroundSize = derived(
+// usages of screensize depend on the first image beeing loaded.
+// screenSize returns initially empty values, after the first image is loaded the window size is returned.
+export const screenSize = derived(
     [windowSize, firstBackgroundSize],
     ([$windowSize, $firstBackgroundSize]) => {
-        const x = $firstBackgroundSize
-            ? calcInnerRect($windowSize, $firstBackgroundSize)
-            : { x: 0, y: 0 };
-        console.log(x);
+        if ($firstBackgroundSize) {
+            return { x: $windowSize.x, y: $windowSize.y };
+        }
 
-        return x;
+        return { x: 0, y: 0 };
     }
 );