From baab8ec42376ef4467695611b74e5f2c2ff46d73 Mon Sep 17 00:00:00 2001
From: Valexr <valexr@gmail.com>
Date: Sun, 14 Apr 2024 22:31:34 +0200
Subject: [PATCH] add: alternative county  views

---
 src/App.svelte                                | 14 +++---
 src/lib/components/Button.svelte              | 21 ++++++++
 src/lib/components/County.svelte              | 48 +++++++++++++++++--
 .../{DateInput.svelte => Date.svelte}         |  0
 src/lib/components/Quote.svelte               |  6 ++-
 src/lib/images.ts                             |  7 ++-
 6 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/Button.svelte
 rename src/lib/components/{DateInput.svelte => Date.svelte} (100%)

diff --git a/src/App.svelte b/src/App.svelte
index 5cc0084..e322aa4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,7 +2,7 @@
     import { date, time, start, quote, county } from "$lib/data";
     import { images } from "$lib/images";
 
-    import DateInput from "$lib/components/DateInput.svelte";
+    import Date from "$lib/components/Date.svelte";
     import County from "$lib/components/County.svelte";
     import Quote from "$lib/components/Quote.svelte";
 </script>
@@ -25,7 +25,7 @@
 
 {#await images.back() then}
     <header>
-        <DateInput date={$date} bind:input bind:value={$start} />
+        <Date date={$date} bind:input bind:value={$start} />
     </header>
 
     <main>
@@ -37,9 +37,7 @@
             </h2>
         {/if}
         {#await quote.load() then}
-            {#if $quote}
-                <Quote quote={$quote} href={repository} />
-            {/if}
+            <Quote quote={$quote} href={repository} />
         {/await}
     </main>
 
@@ -56,12 +54,12 @@
     header {
         justify-content: center;
     }
-    footer h2 {
-        margin: 0;
-    }
     main {
         padding: 1em;
         display: grid;
         place-content: center;
     }
+    footer h2 {
+        margin: 0;
+    }
 </style>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
new file mode 100644
index 0000000..26270b1
--- /dev/null
+++ b/src/lib/components/Button.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    export let id = "";
+    export let type: string;
+
+    function set(e: MouseEvent) {
+        const { id } = e.currentTarget as HTMLButtonElement;
+        type = id;
+    }
+</script>
+
+<button {id} class="clear outline" on:click={set}>
+    <slot />
+</button>
+
+<style>
+    button.clear {
+        background: transparent;
+        font-family: inherit;
+        font-weight: inherit;
+    }
+</style>
diff --git a/src/lib/components/County.svelte b/src/lib/components/County.svelte
index 6145b30..116eb6e 100644
--- a/src/lib/components/County.svelte
+++ b/src/lib/components/County.svelte
@@ -1,11 +1,49 @@
+<script lang="ts" context="module">
+    import Button from "./Button.svelte";
+</script>
+
 <script lang="ts">
     export let county: { years: number; months: number; days: number };
+
+    let type = "";
 </script>
 
 <ul>
-    <li id="years">{county.years}</li>
-    <li id="months">{county.months}</li>
-    <li id="days">{county.days}</li>
+    {#if type === "months"}
+        <li id="months">
+            <Button id="" bind:type>
+                {county.years * 12}
+            </Button>
+        </li>
+    {:else if type === "days"}
+        <li id="days">
+            <Button id="" bind:type>
+                {county.years * 12 * 4 * 7}
+            </Button>
+        </li>
+    {:else if type === "hours"}
+        <li id="hours">
+            <Button id="" bind:type>
+                {county.years * 12 * 4 * 7 * 24}
+            </Button>
+        </li>
+    {:else}
+        <li id="years">
+            <Button id="hours" bind:type>
+                {county.years}
+            </Button>
+        </li>
+        <li id="months">
+            <Button id="months" bind:type>
+                {county.months}
+            </Button>
+        </li>
+        <li id="days">
+            <Button id="days" bind:type>
+                {county.days}
+            </Button>
+        </li>
+    {/if}
 </ul>
 
 <style>
@@ -13,11 +51,11 @@
         list-style: none;
         padding: 0;
         margin: 0;
-        font-size: min(27.5vw, 25vh);
+        font-size: min(25vw, 25vh);
         font-weight: bold;
         display: flex;
         justify-content: center;
-        gap: 0.25em;
+        gap: 0em;
         margin-bottom: 0.25em;
     }
     ul li {
diff --git a/src/lib/components/DateInput.svelte b/src/lib/components/Date.svelte
similarity index 100%
rename from src/lib/components/DateInput.svelte
rename to src/lib/components/Date.svelte
diff --git a/src/lib/components/Quote.svelte b/src/lib/components/Quote.svelte
index 724789f..de148e2 100644
--- a/src/lib/components/Quote.svelte
+++ b/src/lib/components/Quote.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+    import { fade } from "svelte/transition";
+</script>
+
 <script lang="ts">
     export let quote = {
         content: "",
@@ -6,7 +10,7 @@
     export let href = "";
 </script>
 
-<blockquote>
+<blockquote in:fade>
     <p>{quote.content}</p>
     <a {href}>~ {quote.author}</a>
 </blockquote>
diff --git a/src/lib/images.ts b/src/lib/images.ts
index 0d8ce5e..712192c 100644
--- a/src/lib/images.ts
+++ b/src/lib/images.ts
@@ -75,10 +75,15 @@ function createImages() {
         async back() {
             await load();
             const [{ src }] = prepare();
+            // await addImageProcess(src)
+            // const img = new Image();
+            // img.src = src
+            // await img.decode();
             document.body.style.cssText = `
                 background: url(${src}) center no-repeat;
                 background-size: cover;
             `;
         }
     }
-}
\ No newline at end of file
+}
+