From ae7b980cc941651cc1cf637eb507bd62f379d6c4 Mon Sep 17 00:00:00 2001
From: lobbyhoe12345 <lobbyhoe12345@gmail.com>
Date: Sun, 23 Jul 2023 16:06:09 +0200
Subject: [PATCH] improve ui

---
 src/lib/FixedSizeText.svelte | 44 ------------------------------------
 src/lib/MuteButton.svelte    |  1 -
 src/lib/ScoreDisplay.svelte  | 24 +++++++++-----------
 src/lib/gameConfig.ts        |  2 +-
 src/lib/stores.ts            | 15 ------------
 src/routes/index.svelte      |  3 +--
 6 files changed, 13 insertions(+), 76 deletions(-)
 delete mode 100644 src/lib/FixedSizeText.svelte

diff --git a/src/lib/FixedSizeText.svelte b/src/lib/FixedSizeText.svelte
deleted file mode 100644
index 558e1c6..0000000
--- a/src/lib/FixedSizeText.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-    export let width: number;
-    export let height: number;
-    export let text: string;
-    export let style: string = '';
-
-    let measureTextRef: HTMLDivElement;
-    let calculatedFontSize: string;
-
-    function calcWidth(width: number) {
-        let fontSize = width;
-        let currentWidth: number;
-
-        measureTextRef.style.fontSize = `${fontSize}px`;
-
-        while (
-            (currentWidth = measureTextRef.getBoundingClientRect().width) > width &&
-            currentWidth > 0 &&
-            fontSize > 0
-        ) {
-            measureTextRef.style.fontSize = `${fontSize--}px`;
-        }
-
-        calculatedFontSize = measureTextRef.style.fontSize;
-    }
-
-    $: width && calcWidth(width);
-</script>
-
-<div bind:this={measureTextRef} style="visibility: hidden; position: fixed; top: 100vh;">
-    {text}
-</div>
-
-<div style="width: {width}px; height: {height}px; font-size: {calculatedFontSize}; {style}">
-    {text}
-</div>
-
-<style>
-    div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
diff --git a/src/lib/MuteButton.svelte b/src/lib/MuteButton.svelte
index c44a170..e0e8291 100644
--- 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
index 2d3616c..6d602b4 100644
--- 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
index 0f2f268..38fdfc5 100644
--- 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
index ff896ef..1de6b32 100644
--- 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
index 53f832c..b2fc337 100644
--- 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;
             }
         }