strand/src/lib/Summary.svelte

<script lang="ts">
  import { gym, fast, walks, diet, currentView } from "./store";
  import Arc from "./Arc.svelte";
  let gymProgress = $derived($gym.filter((c) => c.completed).length);
  let walksProgress = $derived($walks.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 | 4 | 5) => {
    currentView.update((_) => v);
  };
</script>

<main>
  <h1>Dags att komma i form!</h1>
  <div class="progress">
    <h2>Powerbuilding Lite</h2>
    <div class="progress-row">
      <progress class="gym" value={gymProgress} max={$gym.length}></progress>
      <i>{gymProgress} / {$gym.length}</i>
      <button class="clickable gym" onclick={() => navigate(1)}>+</button>
    </div>
    <h2>10 000&ndash;15 000 steg/dag</h2>
    <div class="progress-row">
      <progress class="walks" value={walksProgress} max={$walks.length}
      ></progress>
      <i>{walksProgress} / {$walks.length}</i>
      <button class="clickable walks" onclick={() => navigate(2)}>+</button>
    </div>
    <h2>Diet, jan&ndash;maj</h2>
    <div class="progress-row">
      <progress class="diet" value={dietProgress} max={dietTotal}></progress>
      <i>{dietProgress} / {dietTotal}</i>
      <button class="clickable diet" onclick={() => navigate(3)}>+</button>
    </div>
  </div>
  <Arc />
  <div class="top-button">
    <button class="clickable info" onclick={() => navigate(4)}> Va? </button>
  </div>
  <p class="madeby">Skapad av <a href="https://madr.se">Anders</a></p>
</main>

<style>
  .madeby {
    text-align: center;
    font-size: 0.75em;
  }

  main {
    background: #222;
    color: #fff;
  }

  progress {
    &.walks {
      --pcolor: #5dc5f8;
    }

    &.diet {
      --pcolor: #35d450;
    }

    &.gym {
      --pcolor: #f62b5a;
    }

    &.fast {
      --pcolor: #ff00ff;
    }
  }

  progress,
  ::-webkit-progress-bar {
    -webkit-appearance: none;
    appearance: none;
    height: var(--h);
    display: block;
    width: calc(100% - 2rem);
    border: none;
    padding: 0;
    background-color: rgba(128, 128, 128, 0.25);
    margin: 0 1rem;
    border-radius: var(--br);
  }

  ::-webkit-progress-bar {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }

  /*
  Nope, cannot comma separate selector like this:

  ::-moz-progress-bar,
  ::-webkit-progress-value { ... }

  or even like this:

  progress::-webkit-progress-value { ... }

  Bug, closed with wontfix in 2015:
  https://issues.chromium.org/issues/40564916

  Sincerely, FUCK YOU, Chrome dev team.
  */
  ::-moz-progress-bar {
    background-color: var(--pcolor);
    background-image: linear-gradient(
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 4px,
      var(--pcolor) 4px,
      var(--pcolor)
    );
    border: 0.25rem solid var(--pcolor);
    border-width: 0.25rem 0.5rem;
    border-radius: var(--br);
  }

  ::-webkit-progress-value {
    background-color: var(--pcolor);
    background-image: linear-gradient(
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 4px,
      var(--pcolor) 4px,
      var(--pcolor)
    );
    border: 0.25rem solid var(--pcolor);
    border-width: 0.25rem 0.5rem;
    border-radius: var(--br);
  }

  .progress {
    --pcolor: #f00;
    --h: 1.66rem;
    --br: calc(var(--h) / 2);
    --mg: 0.75rem;
    --border: 3px solid #444;
    margin: 2rem 0;
    border: var(--border);
    border-radius: 1rem;
    padding-bottom: var(--mg);

    > h2 {
      padding: 0 1rem;
      margin: var(--mg) 0;
      font-size: 1em;
      line-height: 1.25;

      * + & {
        border-top: var(--border);
        padding-top: var(--mg);
      }
    }
  }

  .progress-row {
    position: relative;

    > i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-style: normal;
      font-size: 0.9em;
      font-weight: bold;
      pointer-events: none;
    }

    > button {
      position: absolute;
      top: 50%;
      right: 0.5rem;
      transform: translateY(-50%);
      color: #fff;
      background-color: var(--btn-bg);
      padding: 0.25em 0.66em;

      &.walks {
        --btn-bg: #5dc5f8;
      }

      &.diet {
        --btn-bg: #35d450;
      }

      &.gym {
        --btn-bg: #f62b5a;
      }

      &.fast {
        --btn-bg: #ff00ff;
      }
    }
  }
</style>