add: multicounters

src/App.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" context="module">
-    import { date, time, start, quote, county } from "$lib/data";
+    import { date, time, counters, quote, dates } from "$lib/data";
     import { images } from "$lib/images";
     import { t } from "$lib/utils";
 
-    import Date from "$lib/components/Date.svelte";
+    import Start from "$lib/components/Start.svelte";
     import County from "$lib/components/County.svelte";
     import Quote from "$lib/components/Quote.svelte";
 </script>
@@ -18,35 +18,110 @@
         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 changeDate(e: ChangeEventHandler<HTMLInputElement>) {
+        const { id, type, value } = e.currentTarget;
+        const changed = type === "text" ? { title: value } : { start: value };
+        dates.change(Number(id), changed);
+    }
+
+    function deleteDate(e: MouseEvent) {
+        const { id } = e.target as HTMLButtonElement;
+        dates.del(Number(id));
+    }
+
+    $: console.log($date);
 </script>
 
 <svelte:head>
     <title>{name}</title>
 </svelte:head>
 
 {#await images.back() then}
-    <header>
-        <Date date={$date} bind:input bind:value={$start} />
-    </header>
-
     <main>
-        {#if $start}
-            <County county={$county} />
-        {:else}
-            <h2>
-                <button on:click={openDatepicker}>
-                    {t("Set start date", "Начальная дата")}
-                </button>
-            </h2>
-        {/if}
-        {#await quote.load() then}
-            <Quote quote={$quote} href={repository} />
-        {/await}
+        {#each $counters as counter, id}
+            <section>
+                <header>
+                    <form action="post" on:submit|preventDefault>
+                        <fieldset>
+                            <label>
+                                <input
+                                    id={String(id)}
+                                    type="date"
+                                    class="clear"
+                                    name="start"
+                                    value={counter.start}
+                                    required
+                                    on:change={changeDate}
+                                />
+                            </label>
+                            <label>
+                                <input
+                                    id={String(id)}
+                                    class="clear"
+                                    type="text"
+                                    name="title"
+                                    value={counter.title}
+                                    placeholder={t(
+                                        "Counter name",
+                                        "Имя счётчика",
+                                    )}
+                                    required
+                                    on:change={changeDate}
+                                />
+                            </label>
+                        </fieldset>
+                    </form>
+                </header>
+                <County {counter} />
+                <footer>
+                    <button id={String(id)} on:click={deleteDate}>
+                        {t("Delete", "Удалить")}
+                    </button>
+                </footer>
+            </section>
+        {/each}
+        <section id="add">
+            <form method="post" on:submit|preventDefault={setDate}>
+                <fieldset>
+                    <label>
+                        <input
+                            type="date"
+                            name="start"
+                            value={$date}
+                            required
+                        />
+                    </label>
+                    <label>
+                        <input
+                            type="text"
+                            name="title"
+                            placeholder={t("Counter name", "Имя счётчика")}
+                            required
+                        />
+                    </label>
+                </fieldset>
+                <h2>
+                    <button>
+                        {t("Add counter", "Добавить счётчик")}
+                    </button>
+                </h2>
+            </form>
+        </section>
     </main>
+    {#await quote.load() then}
+        <Quote quote={$quote} href={repository} />
+    {/await}
 
     <footer>
         <button on:click={images.back}>{t("Image", "Картинка")}</button>
-        <h2>{$time}</h2>
+        <!-- <h2>{$time}</h2> -->
         <button on:click={quote.load}>{t("Quote", "Цитата")}</button>
     </footer>
 {/await}
@@ -58,12 +133,57 @@
         justify-content: center;
     }
     main {
-        padding: 1em;
-        display: grid;
+        display: flex;
         max-width: 100vw;
-        place-content: center;
+        overflow: scroll;
+        scroll-snap-type: x mandatory;
+    }
+    main > * {
+        padding: 0 1em;
+        flex: 1 0 100%;
+        scroll-snap-align: center;
+        align-content: start;
     }
-    footer h2 {
+    section#add {
+        align-content: center;
+    }
+    section footer {
+        justify-content: center;
+    }
+
+    form {
+        max-width: 15em;
+        margin: auto;
+    }
+    fieldset {
         margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1em;
+        border: 0;
+    }
+    input {
+        font-family: inherit;
+        font-size: 1.5em;
+        font-weight: bold;
+        font-family: inherit;
+        line-height: 2em;
+        text-align: center;
+        margin: 0;
+        outline: 0;
+        width: 100%;
+        background: transparent;
+        border: 2px solid currentColor;
+        border-radius: 0.25rem;
+        color: inherit;
+        /* max-width: 20em; */
+        margin: auto;
+    }
+    input.clear {
+        border-color: transparent;
+    }
+    form button {
+        min-width: 100%;
     }
 </style>

src/css/base.css

@@ -6,7 +6,7 @@ html {
 body {
     margin: 0;
     display: grid;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: 1fr auto;
     grid-template-columns: 1fr;
     font-family: system-ui;
     text-align: center;
@@ -29,6 +29,7 @@ body::before {
     top: 97.5%;
     font-size: 0.8em;
     font-weight: 300;
+    opacity: 0.69;
 }
 
 header,

src/global.d.ts

@@ -26,4 +26,18 @@ type Slide = {
     width?: string | number;
     height?: string | number;
     [key: string]: unknown;
-}
+}
+
+type Counter = {
+    id: number,
+    title: string,
+    start: string,
+    years: number,
+    months: number,
+    days: number,
+    full: Record<string, number>
+}
+
+type StartDate = { start: string, title: string }
+
+type ChangeEventHandler<T> = Event & { currentTarget: EventTarget & T; }

src/lib/components/Button.svelte

@@ -13,6 +13,9 @@
 </button>
 
 <style>
+    button {
+        padding: 0;
+    }
     button.clear {
         background: transparent;
         font-family: inherit;

src/lib/components/County.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-    export let county: {
+    export let counter: {
         years: number;
         months: number;
         days: number;
@@ -16,37 +16,37 @@
 
 <ul>
     {#if type === "months"}
-        <li id={convert("months", county.full.months)}>
+        <li id={convert("months", counter.full.months)}>
             <Button id="" bind:type>
-                {county.full.months}
+                {counter.full.months}
             </Button>
         </li>
     {:else if type === "days"}
-        <li id={convert("days", county.full.days)}>
+        <li id={convert("days", counter.full.days)}>
             <Button id="" bind:type>
-                {county.full.days}
+                {counter.full.days}
             </Button>
         </li>
     {:else if type === "hours"}
-        <li id={convert("hours", county.full.hours)}>
+        <li id={convert("hours", counter.full.hours)}>
             <Button id="" bind:type>
-                {county.full.hours}
+                {counter.full.hours}
             </Button>
         </li>
     {:else}
-        <li id={convert("years", county.years)}>
+        <li id={convert("years", counter.years)}>
             <Button id="hours" bind:type>
-                {county.years}
+                {counter.years}
             </Button>
         </li>
-        <li id={convert("months", county.months)}>
+        <li id={convert("months", counter.months)}>
             <Button id="months" bind:type>
-                {county.months}
+                {counter.months}
             </Button>
         </li>
-        <li id={convert("days", county.days)}>
+        <li id={convert("days", counter.days)}>
             <Button id="days" bind:type>
-                {county.days}
+                {counter.days}
             </Button>
         </li>
     {/if}
@@ -57,11 +57,11 @@
         list-style: none;
         padding: 0;
         margin: 0;
-        font-size: min(23vw, 25vh);
+        font-size: min(25vw, 27vh);
         font-weight: bold;
         display: flex;
         justify-content: center;
-        gap: 0em;
+        gap: 0.25em;
         margin-bottom: 0.25em;
     }
     ul li {

src/lib/components/Quote.svelte

@@ -17,7 +17,8 @@
 
 <style>
     blockquote {
-        font-size: larger;
+        font-size: large;
+        margin-top: 0;
     }
     blockquote p {
         font-style: italic;

src/lib/components/Date.svelte → src/lib/components/Start.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
     export let date = "";
-    export let value = "";
+    export let start = new Date().toLocaleString("ru");
     export let input: HTMLInputElement;
+
+    $: console.log("start", start);
 </script>
 
 <form method="post" on:submit|preventDefault>
-    {#if !value}
+    {#if !start}
         <h2>{date}</h2>
     {/if}
     <label>
         <input
             type="date"
             max={new Date().toLocaleString("ru")}
-            class:hidden={!value}
+            class:hidden={!start}
             bind:this={input}
-            bind:value
+            bind:value={start}
         />
     </label>
 </form>