update

Valexr · Apr 25, 2024 · b277331 · b277331
1 parent 9e29052
commit b277331
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 205 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,35 +1,31 @@
 <script lang="ts" context="module">
-    import { date, time, counters, quote, dates, quotes } from "$lib/data";
+    import { date, time, dates } from "$lib/dates";
     import { images } from "$lib/images";
-    import { t } from "$lib/utils";
+    // import { t } from "$lib/utils";
 
-    import DateForm from "$lib/components/Date.svelte";
+    import DateForm from "$lib/components/DateForm.svelte";
     import County from "$lib/components/County.svelte";
     import Quote from "$lib/components/Quote.svelte";
     import Icon from "$lib/components/Icon.svelte";
+    import { quotes } from "$lib/quotes";
+    import { counters } from "$lib/counters";
 </script>
 
 <script lang="ts">
     export let name: Name;
     export let repository: Repository;
 
-    let input: HTMLInputElement;
+    // let input: HTMLInputElement;
+    let active: string | undefined = "0";
 
-    function openDatepicker() {
-        input.focus();
-        input.showPicker();
-    }
-
-    function setDate(e: SubmitEvent) {
-        const data = new FormData(e.target as HTMLFormElement);
-        const date = Object.fromEntries(data) as StartDate;
-        dates.add(date);
-    }
+    // function openDatepicker() {
+    //     input.focus();
+    //     input.showPicker();
+    // }
 
-    function changeDate(e: ChangeEventHandler<HTMLInputElement>) {
-        const { id, type, value } = e.currentTarget;
-        const changed = type === "text" ? { title: value } : { start: value };
-        dates.change(Number(id), changed);
+    function randomQuote(e: MouseEvent) {
+        const { id } = e.target as HTMLButtonElement;
+        dates.quote(Number(id));
     }
 
     function deleteDate(e: MouseEvent) {
@@ -38,15 +34,11 @@
     }
 
     function intersection(section: HTMLElement) {
-        const observer = new IntersectionObserver(observe, {
-            root: document.body,
-            rootMargin: "0px",
-            threshold: 0,
-        });
+        const observer = new IntersectionObserver(observe, { threshold: 1.0 });
         observer.observe(section);
         function observe(entries: IntersectionObserverEntry[]) {
-            const active = entries.find((e) => e.isIntersecting);
-            console.log(entries, active);
+            const intersecting = entries.find((e) => e.isIntersecting);
+            active = intersecting?.target.id;
         }
     }
 
@@ -58,42 +50,41 @@
 </svelte:head>
 
 {#await images.load() then}
-    <main>
-        {#each $counters as counter, id}
-            <section use:intersection id={String(id)}>
-                <header>
-                    <DateForm {id} {counter} />
-                </header>
-                <County {counter} />
-                <footer>
-                    <button class="box" id={String(id)} on:click={deleteDate}>
-                        <!-- {t("Delete", "Удалить")} -->
-                        <Icon name="Delete" />
-                    </button>
-                </footer>
-            </section>
-        {/each}
-        <section id="add">
-            <DateForm />
-        </section>
-    </main>
     {#await quotes.load() then}
-        {#key $quote}
-            <Quote quote={$quote} href={repository} />
-        {/key}
+        <main>
+            {#each $counters as counter, id}
+                <section use:intersection id={String(id)}>
+                    <header>
+                        <DateForm {id} {counter} />
+                    </header>
+                    <County {counter} />
+                    {#key counter.quote}
+                        <Quote quote={counter.quote} href={repository} />
+                    {/key}
+                </section>
+            {/each}
+            <section id="add">
+                <DateForm />
+            </section>
+        </main>
+        {#if active}
+            <footer>
+                <button class="box" on:click={images.back}>
+                    <!-- {t("Image", "Картинка")} -->
+                    <Icon name="Images" />
+                </button>
+                <!-- <h2>{$time}</h2> -->
+                <button class="box" id={active} on:click={deleteDate}>
+                    <!-- {t("Delete", "Удалить")} -->
+                    <Icon name="Delete" />
+                </button>
+                <button class="box" id={active} on:click={randomQuote}>
+                    <!-- {t("Quote", "Цитата")} -->
+                    <Icon name="Quote" />
+                </button>
+            </footer>
+        {/if}
     {/await}
-
-    <footer>
-        <button class="box" on:click={images.back}>
-            <!-- {t("Image", "Картинка")} -->
-            <Icon name="Images" />
-        </button>
-        <h2>{$time}</h2>
-        <button class="box" on:click={quote.random}>
-            <!-- {t("Quote", "Цитата")} -->
-            <Icon name="Quote" />
-        </button>
-    </footer>
 {/await}
 
 <style>
@@ -119,7 +110,7 @@
         align-content: center;
     }
     section footer {
-        justify-content: center;
+        /* justify-content: center; */
         /* padding: 0; */
     }
 </style>
diff --git a/src/css/base.css b/src/css/base.css
@@ -1,16 +1,28 @@
 body,
 html {
     height: 100%;
+    font-family: system-ui;
+}
+
+html::after {
+    content: attr(title);
+    position: absolute;
+    inset: 0;
+    top: 97.5%;
+    font-size: 0.8em;
+    font-weight: 300;
+    font-family: inherit;
+    opacity: 0.69;
+    text-align: center;
 }
 
 body {
     margin: 0;
     display: grid;
-    grid-template-rows: 1fr auto 4em;
+    grid-template-rows: 1fr 4.5em;
     grid-template-columns: 1fr;
-    font-family: system-ui;
     text-align: center;
-    background-color: var(--light);
+    /* background-color: var(--light); */
     overflow: hidden;
 }
 
@@ -23,15 +35,15 @@ body::after {
     overflow: hidden;
 }
 
-body::before {
+/* body::before {
     content: attr(title);
     position: absolute;
     inset: 0;
     top: 97.5%;
     font-size: 0.8em;
     font-weight: 300;
     opacity: 0.69;
-}
+} */
 
 header,
 footer {

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -29,15 +29,18 @@ type Slide = {
 }
 
 type Counter = {
+    [x: string]: any;
     id: number,
     title: string,
+    quote: Quote,
     start: string,
     years: number,
     months: number,
     days: number,
     full: Record<string, number>
 }
 
-type StartDate = { start: string, title: string }
+type StartDate = { start: string, title: string, quote: Quote }
+type Quote = [text: string, author: string]
 
 type ChangeEventHandler<T> = Event & { currentTarget: EventTarget & T; }
diff --git a/src/lib/components/Counter.svelte b/src/lib/components/Counter.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import { date, time, counters, quote, dates } from "$lib/data";
+    import { date, time, dates } from "$lib/dates";
     import { images } from "$lib/images";
     import { t } from "$lib/utils";
 
@@ -21,8 +21,8 @@
 
     function setDate(e: SubmitEvent) {
         const data = new FormData(e.target as HTMLFormElement);
-        const date = Object.fromEntries(data) as StartDate;
-        dates.add(date);
+        const date = Object.fromEntries(data) as Partial<StartDate>;
+        dates.add(date as StartDate);
     }
 
     function changeDate(e: ChangeEventHandler<HTMLInputElement>) {

diff --git a/src/lib/components/Date.svelte → src/lib/components/DateForm.svelte b/src/lib/components/Date.svelte → src/lib/components/DateForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    import { dates, date } from "$lib/data";
+    import { dates, date } from "$lib/dates";
     import { t } from "$lib/utils";
 </script>
 
@@ -10,8 +10,8 @@
     function setDate(e: SubmitEvent) {
         if (counter) return;
         const data = new FormData(e.target as HTMLFormElement);
-        const date = Object.fromEntries(data) as StartDate;
-        dates.add(date);
+        const date = Object.fromEntries(data) as Partial<StartDate>;
+        dates.add(date as StartDate);
     }
 
     function changeDate(e: ChangeEventHandler<HTMLInputElement>) {

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
diff --git a/src/lib/counters.ts b/src/lib/counters.ts
@@ -0,0 +1,37 @@
+import { Writable, derived } from 'svelte/store';
+import { dates } from './dates';
+import { quotes } from './quotes';
+import { random } from './utils';
+
+export const counters = derived<[Writable<StartDate[]>, Writable<Quote[]>], Counter[]>(([dates, quotes]),
+    ([$dates, $quotes], set) => {
+
+        set($dates.map(({ start, title, quote }, id) => count(id, start, title, quote)))
+
+        function count(id: number, date: string, title: string, quote: Quote) {
+            const now = new Date();
+            const start = new Date(date);
+            const elapsedMS = now.getTime() - start.getTime();
+            const elapsedMonth = now.getMonth() - start.getMonth();
+            const elapsedDays = now.getDate() - start.getDate();
+            const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0,).getDate();
+            const years = new Date(elapsedMS).getFullYear() - 1970
+            const months = (years * 12 + elapsedMonth) % 12
+            const days = (months * daysInMonth + elapsedDays) % daysInMonth
+
+            return {
+                id,
+                title,
+                quote: quote || quotes.random(id),
+                start: date,
+                years: Math.abs(years),
+                months: Math.abs(months),
+                days: Math.abs(days),
+                full: {
+                    months: years * 12 + Math.abs(months),
+                    days: Math.trunc(elapsedMS / (3600000 * 24)),
+                    hours: Math.trunc(elapsedMS / 3600000)
+                }
+            }
+        }
+    }, [])
diff --git a/src/lib/data.ts b/src/lib/data.ts