timekeeper/components/TimeHeader.vue

<template>
  <header
    class="grid grid-cols-3 w-full font-semibold h-10 m-auto md:relative rounded-bl-full rounded-br-full px-4"
    :class="colorClasses"
  >
    <div class="text-center pt-2 pb-1 border-r border-gray-600 select-none">
      {{ $store.getters.gameMonth }} {{ $store.state.gameDate.year }}
    </div>

    <div
      class="text-center pt-2 pb-1 border-r border-gray-600 relative select-none"
    >
      <progress
        class="absolute top-0 left-0 right-0 h-1 w-full"
        :max="maxAgeValue"
        :value="ageValue"
      />
      {{ ageText }}
    </div>

    <div class="text-center pt-2 pb-1 select-none" v-text="maxAgeText" />
  </header>
</template>

<script>
export default {
  computed: {
    ageText() {
      const { year, month } = this.$store.state.playerAge

      return `${year}y${month}m max`
    },
    ageValue() {
      const { year, month } = this.$store.state.playerAge

      return year * 12 + month
    },
    maxAgeText() {
      const { year, month } = this.$store.state.playerAgeMax

      return `${year}y${month}m max`
    },
    maxAgeValue() {
      const { year, month } = this.$store.state.playerAgeMax

      return year * 12 + month
    },
    colorClasses() {
      const { lightColor, darkColor } = this.$store.getters.activeTab

      return `bg-${darkColor} text-${lightColor}`
    },
  },
}
</script>

<style scoped>
header {
  min-width: 18rem;
  transition: background-color 2000ms, color 2000ms;
}
@media (min-width: 768px) {
  header {
    width: 32rem;
  }
}
/* progress for all browsers */
progress::-webkit-progress-bar {
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
}
progress {
  background-color: rgba(255, 255, 255, 0.1);
  color: currentColor;
}
progress::-webkit-progress-value {
  background-color: currentColor;
}
progress::-moz-progress-bar {
  background-color: currentColor;
}
</style>