stufflog2/svelte-ui/src/components/Progress.svelte

<script lang="ts" context="module">
  const COLORS = [
    "none",
    "bronze",
    "silver",
    "gold",
    "emerald",
    "diamond"
  ]
</script>

<script lang="ts">
  export let target = 1;
  export let count = 0;
  export let green = false;
  export let thin = false;
  export let thinner = false;
  export let gray = false;
  export let titlePercentageOnly = false;
  export let titleTime = false;
  
  let offClass = COLORS[0];
  let onClass = COLORS[1];
  let ons = 0;
  let offs = 1;
  let nonSegmented = false;
  let title = "";

  $: {
    let level = Math.floor(count / target);
    if (level >= COLORS.length - 1 || (level > 1 && green)) {
      offs = 0;
      ons = target;
      offClass = "gold";
      onClass = "diamond";
    } else {
      if (count > 0 && count == (level * target)) {
        level -= 1;
      }

      ons = count - (level * target);
      offs = target - ons;
      offClass = COLORS[level];
      onClass = COLORS[level + 1];
    }

    if (green) {
      onClass = "green"
      offClass = "none"
    }
    if (gray) {
      onClass = "gray"
      offClass = "none"
    }

    // Mark it non-segmented if the target is too high. This prevents a clunky progress bar,
    // or a browser freeze if you set the target very high. 
    nonSegmented = (target >= 50);
  }

  $: {
    const percentage = ((count / target) * 100).toFixed(0);

    if (titlePercentageOnly) {
      title = `${percentage}%`;
    } else if (titleTime) {
      let unit = "days";
      let progressTime = (count / 86400000);
      let totaltTime = (target / 86400000);
      if (totaltTime < 1) {
        unit = "hours";
        totaltTime *= 24;
        progressTime *= 24;
      }

      title = `${progressTime.toFixed(1)} / ${totaltTime.toFixed(1)} ${unit} (${percentage}%)`;
    } else {
      title = `${count} / ${target} (${percentage}%)`
    }
  }
</script>

<div class="bar" title="{title}" class:thin class:thinner>
  {#if nonSegmented}
    <div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
    <div style="flex: {offs}" class={"non-segmented off " + offClass}></div>
  {:else}
    {#each {length: ons} as _}
      <div class={"on " + onClass}></div>
    {/each}
    {#each {length: offs} as _}
      <div class={"off " + offClass}></div>
    {/each}
  {/if}
</div>

<style>
  div.bar {
    display: flex;
    flex-direction: row;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 16px;
    margin: 0.5px 0;
  }

  div.bar > div {
    flex-grow: 1;
    flex-basis: 0;
    display: inline-block;
    box-sizing: border-box;
    margin: 0 0.5px;
    border: 0.25px solid #111;
  }

  div.non-segmented {
    flex-grow: inherit;
    flex-basis: inherit;
  }

  div.on {
    opacity: 0.75;
  }

  div.none { background-color: #555555; }
  div.bronze { background-color: #f4b083; }
  div.silver { background-color: #d8dce4; opacity: 0.8; }
  div.gold { background-color: #ffd966; opacity: 0.8; }
  div.diamond { background-color: #84f5ff; opacity: 0.9; }
  div.emerald, div.green { background-color: #8ef88e; opacity: 0.8; }
  div.gray { background-color: #777777; }

  div.off {
    opacity: 0.50;
  }

  div.bar.thin {
    height: 3px;
  }
  div.bar.thinner {
    height: 1px;
  }
  div.bar.thinner div {
    border-bottom: none;
    border-top: none;
  }
  div.bar.thinner div.none {
    background-color: #111111;
  }

  @media screen and (min-width: 1200) {
    div.bar div {
      margin: 1px 1px;
    }

    div.bar.thin {
      height: 4px;
    }
    div.bar.thinner {
      height: 4px;
    }
  }
</style>