Solve Diet view not showing excluded days

data/default-state.js

@@ -381,8 +381,7 @@ const gym = [
   },
 ];
 
-const diet = {
-  days: [
+const diet = [
     { date: "2025-02-10", completed: false },
     { date: "2025-02-11", completed: false },
     { date: "2025-02-12", completed: false },
@@ -405,6 +404,7 @@ const diet = {
     { date: "2025-03-01", completed: false },
     { date: "2025-03-02", completed: false },
     { date: "2025-03-03", completed: false },
+    { date: "2025-03-04", excluded: true, because: "Semmeldagen" },
     { date: "2025-03-05", completed: false },
     { date: "2025-03-06", completed: false },
     { date: "2025-03-07", completed: false },
@@ -429,6 +429,7 @@ const diet = {
     { date: "2025-03-26", completed: false },
     { date: "2025-03-27", completed: false },
     { date: "2025-03-28", completed: false },
+    { date: "2025-03-29", excluded: true, because: "Födelsedag" },
     { date: "2025-03-30", completed: false },
     { date: "2025-03-31", completed: false },
     { date: "2025-04-01", completed: false },
@@ -447,6 +448,7 @@ const diet = {
     { date: "2025-04-14", completed: false },
     { date: "2025-04-15", completed: false },
     { date: "2025-04-16", completed: false },
+    { date: "2025-04-17", excluded: true, because: "Påsk" },
     { date: "2025-04-18", completed: false },
     { date: "2025-04-19", completed: false },
     { date: "2025-04-10", completed: false },
@@ -491,13 +493,8 @@ const diet = {
     { date: "2025-05-29", completed: false },
     { date: "2025-05-30", completed: false },
     { date: "2025-05-31", completed: false },
-  ],
-  reds: {
-    "2025-03-04": "Semmeldagen",
-    "2025-03-29": "Födelsedag",
-    "2025-04-17": "Påsk",
-  },
-};
+  ]
+;
 
 export default {
   cardio,

package-lock.json

@@ -13,6 +13,7 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tsconfig/svelte": "^5.0.4",
+        "prettier": "^3.4.2",
         "svelte": "^5.15.0",
         "svelte-check": "^4.1.1",
         "typescript": "~5.6.2",
@@ -1108,6 +1109,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz",

package.json

@@ -7,11 +7,13 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "format": "prettier ./src --write"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
+    "prettier": "^3.4.2",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
     "typescript": "~5.6.2",

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.svelte

@@ -1,41 +1,31 @@
 <script lang="ts">
-    // import svelteLogo from "./assets/svelte.svg";
-    // import viteLogo from "/vite.svg";
-    import { currentView } from "./lib/store";
-    import Summary from "./lib/Summary.svelte";
-    import GymProgress from "./lib/GymProgress.svelte";
-    import CardioProgress from "./lib/CardioProgress.svelte";
-    import DietProgress from "./lib/DietProgress.svelte";
+  // import svelteLogo from "./assets/svelte.svg";
+  // import viteLogo from "/vite.svg";
+  import { currentView } from "./lib/store";
+  import Summary from "./lib/Summary.svelte";
+  import GymProgress from "./lib/GymProgress.svelte";
+  import CardioProgress from "./lib/CardioProgress.svelte";
+  import DietProgress from "./lib/DietProgress.svelte";
+  import Info from "./lib/Info.svelte"
 </script>
 
 <div class="chrome">
-    <main>
-        {#if $currentView === 0}
-            <Summary />
-        {/if}
-        {#if $currentView === 1}
-            <GymProgress />
-        {/if}
-        {#if $currentView === 2}
-            <CardioProgress />
-        {/if}
-        {#if $currentView === 3}
-            <DietProgress />
-        {/if}
-    </main>
+    {#if $currentView === 0}
+      <Summary />
+    {/if}
+    {#if $currentView === 1}
+      <GymProgress />
+    {/if}
+    {#if $currentView === 2}
+      <CardioProgress />
+    {/if}
+    {#if $currentView === 3}
+      <DietProgress />
+    {/if}
+    {#if $currentView === 4}
+      <Info />
+    {/if}
 </div>
 
 <style>
-    .chrome {
-        height: 100vh;
-        display: flex;
-        flex-direction: column-reverse;
-
-        main {
-            flex: 1;
-            overflow: auto;
-            text-align: center;
-            padding: 0.5em;
-        }
-    }
 </style>

src/app.css

@@ -1,68 +1,120 @@
 :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
+  font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial,
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 
-    color-scheme: light;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
-a:hover {
-    color: #535bf2;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-    margin: 0;
+  margin: 0;
+}
+
+main {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #e0e0e0;
+  box-sizing: border-box;
+  padding: 1em;
 }
 
 h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
-}
-
-.card {
-    padding: 2em;
+  font-size: 3em;
+  line-height: 1.1;
+  margin: 1.25em 0;
+  text-wrap: balance;
 }
 
 button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
-}
-button:hover {
-    border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
+  appearance: none;
+  border-radius: 0;
+  border: 0;
+  padding: 0;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
 }
 
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
+article {
+  opacity: 0.8;
+  label {
+    display: block;
+    padding: 1em 0.66em;
+
+    input {
+      grid-area: input;
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
     }
-    a:hover {
-        color: #747bff;
+    strong {
+      display: block;
+      font-size: 1.25em;
     }
-    button {
-        background-color: #f9f9f9;
+    small {
+      grid-area: date;
     }
+  }
+}
+article:has(:checked) {
+  opacity: 0.25;
+
+  + article:not(:has(:checked)) {
+    opacity: 1;
+  }
+}
+
+.clickable {
+  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.75);
+  border: 2px solid #222;
+  border-radius: 8px;
+  background-color: #f1f1f1;
+  display: block;
+
+  &:hover,
+  &:focus {
+    background-color: #e1e1e1;
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+}
+
+.back {
+  background-color: #e0e0e0;
+  color: #000;
+
+  &:hover,
+  &:focus {
+    background-color: #d0d0d0;
+  }
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 2em 0.5em;
+}
+
+header {
+  display: flex;
+  padding: 1em;
+  gap: 0.5em;
+  align-items: center;
+
+  button {
+    padding: 0.5em 1em;
+  }
+
+  h1 {
+    font-size: 1.25em;
+    flex: 1;
+    margin: 0;
+  }
 }

src/lib/CardioProgress.svelte

@@ -1,23 +1,22 @@
 <script lang="ts">
-    import { cardio, currentView } from "./store";
+    import { cardio } from "./store";
+    import {dm, back } from "./common";
     const remaining = $cardio.length;
     const days = ["ons", "fre", "mån"];
     let done = $derived($cardio.filter((c) => c.completed).length);
-
-    const back = () => {
-        currentView.update((_) => 0);
-    };
 </script>
 
-<div>
-    <button onclick={() => back()}>&lt;-</button>
+    <header>
+    <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
-        Cardio {done}/{remaining}
+        Konditionsträning: {done} av {remaining}
     </h1>
-    <progress max={remaining} value={done}></progress>
+    </header>
+<main>
+    <progress hidden max={remaining} value={done}></progress>
     <div class="calendar">
         {#each $cardio as col, i}
-            <article>
+            <article class="clickable">
                 <label>
                     <input type="checkbox" bind:checked={col.completed} />
                     <strong
@@ -25,47 +24,19 @@
                             .map((m) => `${m} min`)
                             .join(" + ")}, {col.pause_for} vila</strong
                     >
-                    <small>{days[i % 3]} {col.planned_at}</small>
+                    <small>{days[i % 3]} {dm(col.planned_at)}</small>
                 </label>
             </article>
         {/each}
     </div>
-</div>
+</main>
 
 <style>
-    .calendar {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: 0.5em 0.25em;
+    main {
+        background-color: #5dc5f8;
+        border-top: 4px solid rgba(0, 0, 0, 0.2)
     }
-
-    article {
-        border: 2px solid #aaa;
-        border-radius: 7px;
-
-        label {
-            display: grid;
-            grid-template-columns: auto 1fr;
-            grid-template-areas: "input name" "input date";
-            padding: 1.5em;
-
-            input {
-                grid-area: input;
-            }
-            strong {
-                grid-area: name;
-            }
-            small {
-                grid-area: date;
-            }
-        }
-    }
-
-    article:has(:checked) {
-        border-color: #080;
-        background-color: #afa;
-    }
-
+    
     article:nth-child(1) {
         grid-column: 2;
     }

src/lib/DietProgress.svelte

@@ -1,108 +1,71 @@
 <script lang="ts">
-    import { diet, currentView } from "./store";
-    const dayscount = $diet.days.length;
-    let done = $derived($diet.days.filter((c) => c.completed).length);
-
-    const back = () => {
-        currentView.update((_) => 0);
-    };
+    import { diet } from "./store";
+    import { dm, back } from "./common";
+    const dayscount = $derived($diet.filter((c) => !c.excluded).length);
+    let done = $derived($diet.filter((c) => c.completed).length);
 </script>
 
-<div>
-    <button onclick={() => back()}>&lt;-</button>
+    <header>
+    <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
-        Diet {done}/{dayscount}
+        Diet: {done} av {dayscount}
     </h1>
-    <ul>
-        <li title="Nothing except meals.">Stop snacking.</li>
-        <li
-            title="Fat source you will get anyway. Vegetables not included, eat free."
-        >
-            1 protein, 1 carb per meal.
-        </li>
-        <li title="no 'ands'. Do not add anything to the meal.">
-            Avoid addons.
-        </li>
-        <li title="No soda, no chips, no västerbottensticks.">
-            Fast food? just get 1 item
-        </li>
-        <li title="no beer, no soda, no milk - just drink water">
-            No liquid calories.
-        </li>
-    </ul>
-    <p>
-        -- <a href="https://www.youtube.com/watch?v=fB_ESE2XwOU">Alan Thrall</a>
-    </p>
-    <progress max={dayscount} value={done}></progress>
+    </header>
+<main>
+    <progress max={dayscount} hidden value={done}></progress>
 
     <div class="calendar">
-        {#each $diet.days as day, i}
-            <article>
-                {#if day.date in $diet.reds}
+        {#each $diet as day, i}
+            <article class="clickable">
+                {#if day.excluded}
                     <div class="red">
-                        {$diet.reds[day.date]}
+                        {day.because}
                     </div>
                 {:else}
                     <label>
                         <input type="checkbox" bind:checked={day.completed} />
-                        {day.date}
+                        {dm(day.date)}
                     </label>
                 {/if}
             </article>
         {/each}
     </div>
-</div>
+</main>
 
 <style>
+    main {
+        background-color: #35d450;
+        border-top: 4px solid rgba(0, 0, 0, 0.2)
+    }
+
     .calendar {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5em 0.25em;
+        grid-template-columns: repeat(7, 1fr);
     }
 
     .red {
-        background: #ddd;
-        color: #888;
-        padding: 1.5em;
+        padding: 0.75em;
+        overflow: hidden;
+        font-size: 0.66em;
+        word-break: break-all;
     }
 
-    ul {
-        list-style-position: inside;
-        text-align: left;
-    }
-
-    li {
-        cursor: help;
+    article:has(.red) {
+        pointer-events: none;
+        opacity: 0.33;
     }
 
     article {
-        border: 2px solid #aaa;
-        border-radius: 7px;
+        > * {
+            padding: 0.75em 0.5em;
+            font-size: 0.9em;
+            text-align: center;
 
-        label {
-            display: grid;
-            grid-template-columns: auto 1fr;
-            grid-template-areas: "input name" "input date";
-            padding: 1.5em;
+            &:first-word {
+                font-size: 2em;
+                display: block;
+            }
 
-            input {
-                grid-area: input;
-            }
-            strong {
-                grid-area: name;
-            }
-            small {
-                grid-area: date;
-            }
         }
     }
 
-    article:has(:checked) {
-        border-color: #080;
-        background-color: #afa;
-    }
-
-    article:nth-child(1) {
-        grid-column: 3;
-    }
 </style>

src/lib/GymProgress.svelte

@@ -1,64 +1,36 @@
 <script lang="ts">
-    import { gym, currentView } from "./store";
+    import { gym } from "./store";
+    import {dm, back } from "./common";
     const remaining = $gym.length;
+    const days = ["sön", "tis", "tor"];
     let done = $derived($gym.filter((c) => c.completed).length);
-
-    const back = () => {
-        currentView.update((_) => 0);
-    };
 </script>
 
-<div>
-    <button onclick={() => back()}>&lt;-</button>
+<header>
+    <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
-        Gym {done}/{remaining}
+        Styrketräning: {done} av {remaining}
     </h1>
-    <progress max={remaining} value={done}></progress>
+</header>
+<main>
+    <progress hidden max={remaining} value={done}></progress>
     <div class="calendar">
-        {#each $gym as col}
-            <article>
+        {#each $gym as col, i}
+            <article class="clickable">
                 <label>
                     <input type="checkbox" bind:checked={col.completed} />
                     <strong>{col.name}</strong>
-                    <small>{col.planned_at}</small>
+                    <small>{days[i % 3]} {dm(col.planned_at)}</small>
                 </label>
             </article>
         {/each}
     </div>
-</div>
+</main>
 
 <style>
-    .calendar {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: 0.5em 0.25em;
-    }
-
-    article {
-        border: 2px solid #aaa;
-        border-radius: 7px;
-
-        label {
-            display: grid;
-            grid-template-columns: auto 1fr;
-            grid-template-areas: "input name" "input date";
-            padding: 1.5em;
-
-            input {
-                grid-area: input;
-            }
-            strong {
-                grid-area: name;
-            }
-            small {
-                grid-area: date;
-            }
-        }
-    }
-
-    article:has(:checked) {
-        border-color: #080;
-        background-color: #afa;
+    main {
+        background-color: #f62b5a;
+        border-top: 4px solid rgba(0, 0, 0, 0.2)
     }
 
     article:nth-child(1) {

src/lib/Info.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { currentView } from "./store";
+    const back = () => {
+        currentView.update((_) => 0);
+    };
+</script>
+
+<main>
+<div class="infobox">
+  <h1>Hej, Jag har en 40-årskris xD</h1>
+  <p><em>Dessutom hägrar en vecka på Sweden rock festival.</em>
+    Ryggen och benen behöver vara i form.</p>
+  <p>
+    För att göra träningen litet mer belönande skapades denna app för att ge mig
+    möjlighet att bocka i allt jag gör.
+  </p>
+  <h2>Börja löpträna</h2>
+  <p>Jag har tidigare löptränat, men inte gjort det kontinuerligt sedan 2017.</p>
+  <p><b>Metod:</b> löpträning 3 gånger per vecka: 2 pass med 2 intervaller, ett långpass. Linjär
+  progression med 60&ndash;120 sekunders ökning per pass.</p>
+  <strong>Mål: 5km löpning efter 7 veckor.</strong>
+  <h2>Återuppta styrkelyft</h2>
+  <p>Jag föredrar baslyft med frivikter. Mina PB slogs senast januari 2023.</p>
+  <p>
+    <b>Metod</b>: styrketräning 3 gånger per vecka. 4 veckor grundträning (A-blocket),
+     4 veckor specialiserad träning (B-blocket), 3 veckor toppning (C-blocket).
+  </p>
+  <strong>Mål: 11 veckors träning, med avslutande toppning och
+      styrkelyftstotal.</strong>
+  <h2>Inleda diet</h2>
+  <p>
+  Jag har ett uppskattat BMI på 28-32 vid start av denna utmaning.
+  </p>
+  <p>
+  <b>Metod</b>: Följa
+  <a href="https://www.youtube.com/watch?v=fB_ESE2XwOU">Alan Thralls tips</a>, som listas nedan.
+  Mina cheat meals: Semla på semmeldagen, fika på födelsedagen, liten godispåse på lördagar.
+  </p>
+    <blockquote>
+    <ul>
+        <li title="Nothing except meals.">Stop snacking.</li>
+        <li
+            title="Fat source you will get anyway. Vegetables not included, eat free."
+        >
+            1 protein, 1 carb per meal.
+        </li>
+        <li title="no 'ands'. Do not add anything to the meal.">
+            Avoid addons.
+        </li>
+        <li title="No soda, no chips, no västerbottensticks.">
+            Fast food? just get 1 item
+        </li>
+        <li title="no beer, no soda, no milk - just drink water">
+            No liquid calories.
+        </li>
+    </ul>
+    </blockquote>
+    <p><strong>Mål: Följa ovan kostråd 16 veckor, med fördefinierade cheat meals.</strong></p>
+</div>
+  <button class="clickable" on:click={back()}>
+    Tillbaka
+  </button>
+</main>
+
+<style>
+  h1 {
+    padding-left: 0;
+    margin: .5em 0;
+  }
+  h2 {
+    margin-bottom: 0;
+  }
+  
+  main {
+    background-color: #ff0;
+  }
+  
+  .infobox {
+    margin: 0.1em;
+    background-color: #fff;
+    border: 2px solid #aaa;
+    border-radius: 8px;
+    padding: 0.5em 1em;
+  }
+
+  button {
+    padding: 1em;
+    margin: 2em auto;
+  }
+</style>

src/lib/Summary.svelte

@@ -1,62 +1,78 @@
 <script lang="ts">
-    import { gym, cardio, diet, currentView } from "./store";
-    let gymProgress = $derived($gym.filter((c) => c.completed).length);
-    let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
-    let dietProgress = $derived($diet.days.filter((c) => c.completed).length);
+  import { gym, cardio, diet, currentView } from "./store";
+  let gymProgress = $derived($gym.filter((c) => c.completed).length);
+  let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
+  let dietProgress = $derived($diet.filter((c) => c.completed).length);
+  let dietTotal = $derived($diet.filter((c) => !c.excluded).length);
 
-    const navigate = (v: 0 | 1 | 2 | 3) => {
-        currentView.update((_) => v);
-    };
+  const navigate = (v: 0 | 1 | 2 | 3 | 4) => {
+    currentView.update((_) => v);
+  };
 </script>
 
-<div>
-    <h1>Summary</h1>
-    <ul class="cards">
-        <li>
-            <button onclick={() => navigate(1)}>
-                <i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
-            </button>
-        </li>
-        <li>
-            <button onclick={() => navigate(2)}>
-                <i>{cardioProgress}</i> / {$cardio.length}
-                <span>löppass lufsade</span>
-            </button>
-        </li>
-        <li>
-            <button onclick={() => navigate(3)}>
-                <i>{dietProgress}</i> / {$diet.days.length}
-                <span>dagar på diet</span>
-            </button>
-        </li>
-    </ul>
+<main>
+<h1>Dags att komma i form!</h1>
+<div class="cards">
+  <button class="clickable gym" onclick={() => navigate(1)}>
+    <i>{gymProgress}</i> / {$gym.length} <span>Styrketräning</span>
+  </button>
+  <button class="clickable cardio" onclick={() => navigate(2)}>
+    <i>{cardioProgress}</i> / {$cardio.length}
+    <span>Konditionsträning</span>
+  </button>
+  <button class="clickable diet" onclick={() => navigate(3)}>
+    <i>{dietProgress}</i> / {dietTotal}
+    <span>Dietdagar</span>
+  </button>
+  <button class="clickable info" onclick={() => navigate(4)}>
+    <i>?</i>
+    <span>Va?</span>
+  </button>
 </div>
+</main>
 
 <style>
-    .cards {
-        list-style: none;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1em;
+  .cards {
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
 
-        > li {
-            flex: 1;
-            border: 2px solid #aaa;
-            border-radius: 5px;
-            padding: 0;
+    button {
+      padding: 1.5em;
 
-            button {
-                padding: 1em;
-            }
-
-            i {
-                font-size: 2em;
-                font-style: normal;
-            }
-
-            span {
-                display: block;
-            }
-        }
+      &:hover {
+        filter: brightness(95%);
+      }
     }
+
+    .gym {
+      background-color: #f62b5a;
+      color: #fff;
+    }
+
+    .cardio {
+      background-color: #5dc5f8;
+      color: #000;
+    }
+
+    .diet {
+      background-color: #35d450;
+      color: #fff;
+    }
+
+    .info {
+      background-color: #ff0;
+      color: #000;
+    }
+
+    i {
+      font-size: 2em;
+      font-style: normal;
+    }
+
+    span {
+      display: block;
+    }
+  }
 </style>

src/lib/common.ts

@@ -0,0 +1,25 @@
+import { currentView } from "./store";
+
+const M = [
+  "jan",
+  "feb",
+  "mar",
+  "apr",
+  "maj",
+  "jun",
+  "jul",
+  "aug",
+  "sep",
+  "okt",
+  "nov",
+  "dec",
+];
+
+export const back = () => {
+  currentView.update((_) => 0);
+};
+
+export const dm = (date) => {
+  const d = new Date(date);
+  return `${d.getDate()} ${M[d.getMonth()]}`;
+};

src/main.ts

@@ -1,9 +1,9 @@
-import { mount } from 'svelte'
-import './app.css'
-import App from './App.svelte'
+import { mount } from "svelte";
+import "./app.css";
+import App from "./App.svelte";
 
 const app = mount(App, {
-  target: document.getElementById('app')!,
-})
+  target: document.getElementById("app")!,
+});
 
-export default app
+export default app;