fix: calc, county font & structure

src/App.svelte

@@ -4,7 +4,7 @@
 
     import DateForm from "$lib/components/DateForm.svelte";
     import Control from "$lib/components/Control.svelte";
-    import County from "$lib/components/County.svelte";
+    import Counter from "$lib/components/Counter.svelte";
     import Quote from "$lib/components/Quote.svelte";
 
     import { quotes } from "$lib/quotes";
@@ -18,7 +18,7 @@
     let active: string | undefined;
 
     function intersection(section: HTMLElement) {
-        const observer = new IntersectionObserver(observe, { threshold: 1.0 });
+        const observer = new IntersectionObserver(observe, { threshold: 0.5 });
         observer.observe(section);
         function observe(entries: IntersectionObserverEntry[]) {
             const intersecting = entries.find((e) => e.isIntersecting);
@@ -39,7 +39,7 @@
                     <header>
                         <DateForm {id} {counter} />
                     </header>
-                    <County {counter} />
+                    <Counter {counter} />
                     {#key counter.quote}
                         <Quote quote={counter.quote} href={repository} />
                     {/key}

src/global.d.ts

@@ -3,6 +3,10 @@ declare module '*.svg' {
     export default content;
 }
 
+interface Date {
+    getElapsedTime(): string;
+}
+
 type Name = string
 type Repository = string
 
@@ -29,17 +33,26 @@ type Slide = {
 }
 
 type Counter = {
-    [x: string]: any;
+    // [x: string]: any;
     id: number,
     title: string,
     quote: Quote,
     start: string,
     years: number,
     months: number,
     days: number,
+    weeks: number,
     full: Record<string, number>
 }
 
+type Translate = {
+    years: string;
+    months: string;
+    days: string;
+    weeks: string;
+    hours: string;
+}
+
 type StartDate = { start: string, title: string, quote: Quote }
 type Quote = [text: string, author: string]
 

src/lib/components/Counter.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" context="module">
+    import County from "./County.svelte";
+</script>
+
+<script lang="ts">
+    export let counter: Counter;
+
+    let type: keyof Translate;
+
+    function length(counter: Counter) {
+        const { id, title, quote, start, full, ...rest } = counter;
+        return Object.values(rest).filter((r) => r).length;
+    }
+</script>
+
+<ul style="--county-length: {length(counter)}">
+    {#if type === "months"}
+        <County name="months" value={counter.full.months} bind:type />
+    {:else if type === "weeks"}
+        <County name="weeks" value={counter.full.weeks} bind:type />
+    {:else if type === "days"}
+        <County name="days" value={counter.full.days} bind:type />
+    {:else if type === "hours"}
+        <County name="hours" value={counter.full.hours} bind:type />
+    {:else}
+        {#if counter.years}
+            <County name="years" id="hours" value={counter.years} bind:type />
+        {/if}
+        {#if counter.months}
+            <County
+                name="months"
+                id="months"
+                value={counter.months}
+                bind:type
+            />
+        {/if}
+        {#if counter.weeks}
+            <County name="weeks" id="weeks" value={counter.weeks} bind:type />
+        {/if}
+        {#if counter.days}
+            <County name="days" id="days" value={counter.days} bind:type />
+        {/if}
+    {/if}
+</ul>
+
+<style>
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: min(calc(100vw / var(--county-length)), 27vh);
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+        gap: 0.25em;
+        margin-bottom: 0.5em;
+    }
+</style>

src/lib/components/County.svelte

@@ -4,70 +4,23 @@
 </script>
 
 <script lang="ts">
-    export let counter: {
-        years: number;
-        months: number;
-        days: number;
-        full: Record<string, number>;
-    };
-
-    let type = "";
+    export let name: keyof Translate;
+    export let value: number;
+    export let type: keyof Translate;
+    export let id = "";
 </script>
 
-<ul>
-    {#if type === "months"}
-        <li id={convert("months", counter.full.months)}>
-            <Button id="" bind:type>
-                {counter.full.months}
-            </Button>
-        </li>
-    {:else if type === "days"}
-        <li id={convert("days", counter.full.days)}>
-            <Button id="" bind:type>
-                {counter.full.days}
-            </Button>
-        </li>
-    {:else if type === "hours"}
-        <li id={convert("hours", counter.full.hours)}>
-            <Button id="" bind:type>
-                {counter.full.hours}
-            </Button>
-        </li>
-    {:else}
-        <li id={convert("years", counter.years)}>
-            <Button id="hours" bind:type>
-                {counter.years}
-            </Button>
-        </li>
-        <li id={convert("months", counter.months)}>
-            <Button id="months" bind:type>
-                {counter.months}
-            </Button>
-        </li>
-        <li id={convert("days", counter.days)}>
-            <Button id="days" bind:type>
-                {counter.days}
-            </Button>
-        </li>
-    {/if}
-</ul>
+<li id={convert(name, value)}>
+    <Button {id} bind:type>
+        {value}
+    </Button>
+</li>
 
 <style>
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        font-size: min(25vw, 27vh);
-        font-weight: bold;
-        display: flex;
-        justify-content: center;
-        gap: 0.25em;
-        margin-bottom: 0.5em;
-    }
-    ul li {
+    li {
         position: relative;
     }
-    ul li::after {
+    li::after {
         content: attr(id);
         font-size: 20%;
         font-weight: normal;

src/lib/components/DateForm.svelte

@@ -29,10 +29,11 @@
                 id={String(id)}
                 type="date"
                 name="start"
+                max={$date}
                 class:clear={counter}
                 value={counter?.start || $date}
                 required
-                on:change={changeDate}
+                on:input={changeDate}
             />
         </label>
         <label>

src/lib/counters.ts

@@ -7,30 +7,54 @@ export const counters = derived<[Writable<StartDate[]>, Writable<Quote[]>], Coun
 
         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();
+        function count(id: number, start: string, title: string, quote: Quote) {
+            // const now = new Date();
+            // const start = new Date(date);
+            const elapsedMS = new Date().getTime() - new Date(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
+            const months = new Date(elapsedMS).getMonth()
+            const days = new Date(elapsedMS).getDate() - 1
+            // const months = (years * 12 + elapsedMonth) % 12
+            // const days = (months * daysInMonth + elapsedDays) % daysInMonth
+            const weeks = Math.floor(days / 7)
 
             return {
                 id,
                 title,
                 quote: quote || quotes.random(id),
-                start: date,
-                years: Math.abs(years),
-                months: Math.abs(months),
-                days: Math.abs(days),
+                start: start,
+                years: years,
+                months: months,
+                days: days % 7,
+                weeks: weeks,
                 full: {
-                    months: years * 12 + Math.abs(months),
+                    months: years * 12 + months,
+                    weeks: Math.trunc(elapsedMS / (3600000 * 24 * 7)),
                     days: Math.trunc(elapsedMS / (3600000 * 24)),
                     hours: Math.trunc(elapsedMS / 3600000)
                 }
             }
         }
-    }, [])
+    }, [])
+
+
+Date.prototype.getElapsedTime = function () {
+    const diffDate = new Date(Date.now() - Number(this));
+    return (
+        "Elapsed Time: Years: " +
+        (diffDate.getFullYear() - 1970) +
+        ", Months: " +
+        diffDate.getMonth() +
+        ", Days: " +
+        (diffDate.getDate() - 1) +
+        ", Hours: " +
+        diffDate.getHours() +
+        ", Minutes: " +
+        diffDate.getMinutes() +
+        ", Seconds: " +
+        diffDate.getSeconds()
+    );
+};

src/lib/utils.ts

@@ -10,14 +10,7 @@ export function locale() {
     return navigator.language.includes('ru') ? 'ru' : 'en'
 }
 
-type Trans = {
-    years: string;
-    months: string;
-    days: string;
-    hours: string;
-}
-
-export function convert(en: keyof Trans, count = 0) {
+export function convert(en: keyof Translate, count = 0) {
     const RU = locale() === 'ru'
     const FIRSTABLE = count === 1 || count > 20 && String(count).endsWith('1')
     const SECONDABLE = [2, 3, 4].includes(count)
@@ -26,6 +19,7 @@ export function convert(en: keyof Trans, count = 0) {
         years: FIRSTABLE ? 'год' : SECONDABLE ? 'года' : 'лет',
         months: !count || count > 4 ? 'месяцев' : SECONDABLE ? 'месяца' : 'месяц',
         days: FIRSTABLE ? 'день' : SECONDABLE ? 'дня' : 'дней',
+        weeks: FIRSTABLE ? 'неделя' : SECONDABLE ? 'недели' : 'недель',
         hours: FIRSTABLE ? 'час' : SECONDABLE ? 'часа' : 'часов'
     }