improve ui

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

Hide file tree

Showing 6 changed files with 13 additions and 76 deletions.
diff --git a/src/lib/FixedSizeText.svelte b/src/lib/FixedSizeText.svelte
diff --git a/src/lib/MuteButton.svelte b/src/lib/MuteButton.svelte
@@ -2,7 +2,6 @@
     import { fade } from 'svelte/transition';
     import FaVolumeMute from 'svelte-icons/fa/FaVolumeMute.svelte';
     import FaVolumeUp from 'svelte-icons/fa/FaVolumeUp.svelte';
-    import { screenSize } from './stores';
 
     export let audioRefs: HTMLAudioElement[] = [];
 

diff --git a/src/lib/ScoreDisplay.svelte b/src/lib/ScoreDisplay.svelte
@@ -1,29 +1,27 @@
 <script lang="ts">
     import { fly, fade } from 'svelte/transition';
-    import FixedSizeText from './FixedSizeText.svelte';
-    import { screenSize } from './stores';
 
     export let found: number = 0;
     export let of: number = 0;
 </script>
 
 <div in:fade>
-    <FixedSizeText
-        width={$screenSize.x * 0.1}
-        height={$screenSize.y * 0.065}
-        text="{found} / {of}"
-    />
+    <span>{found} / {of}</span>
     {#key found}
-        <img
-            alt="favicon"
-            in:fly={{ y: -50 }}
-            src="favicon.png"
-            style="width: {$screenSize.x * 0.05}px; margin-left: {$screenSize.x * 0.01}px;"
-        />
+        <img alt="favicon" in:fly={{ y: -50 }} src="favicon.png" />
     {/key}
 </div>
 
 <style>
+    img {
+        width: 7vh;
+        margin-left: 1vh;
+    }
+
+    span {
+        font-size: 6vh;
+    }
+
     div {
         height: 7vh;
 

diff --git a/src/lib/gameConfig.ts b/src/lib/gameConfig.ts
@@ -26,7 +26,7 @@ export const gameConfig = {
             backgroundImage: 'images/background-2.jpg',
             vulvaPositions: shuffle([
                 [13.847780126849896, 13.361611876988336],
-                [32.66384778012685, 6.362672322375397],
+                [58.972198820556024, 44.435075885328835],
                 [70.29598308668076, 22.375397667020145],
                 [37.52642706131078, 24.814422057264053],
                 [5.9196617336152215, 29.16224814422057],

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -19,21 +19,6 @@ export const calcPlaygroundSize = derived(windowSize, ($windowSize) => {
     };
 });
 
-export const firstBackgroundSize = writable<{ x: number; y: number }>();
-
-// 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]) => {
-        if ($firstBackgroundSize) {
-            return { x: $windowSize.x, y: $windowSize.y };
-        }
-
-        return { x: 0, y: 0 };
-    }
-);
-
 const MOBILE_MAX_WIDTH = 800;
 
 export const isMobile = derived(windowSize, ($windowSize) => $windowSize.x <= MOBILE_MAX_WIDTH);

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -2,7 +2,7 @@
     import Level from '$lib/Level.svelte';
     import { onMount } from 'svelte';
     import { preloadAsset, preloadAssets } from '$lib/preloadAssets';
-    import { isMobile, firstBackgroundSize } from '$lib/stores';
+    import { isMobile } from '$lib/stores';
     import BindWindowSize from '$lib/BindWindowSize.svelte';
     import GameEndScreen from '$lib/GameEndScreen.svelte';
     import { gameConfig } from '$lib/gameConfig';
@@ -35,7 +35,6 @@
 
             if (maxLevel === 0) {
                 const img = new Image();
-                img.onload = () => firstBackgroundSize.set({ x: img.width, y: img.height });
                 img.src = objUrl;
             }
         }