twitch-rivals/app/main.vue

<script>
export default {
  data() {
    return {
      history: [],
      state: {
        completes: 0,
        skips: 0
      }
    }
  },
  methods: {
    keydown(event) {
      if (event.code === 'Escape') this.skip()
      if (event.code === 'Backspace') this.undo()
      if (event.code === 'Space') this.complete()
    },
    newState(state) {
      this.history.push(this.state)
      this.state = {
        ...this.state,
        ...state
      }
    },
    complete() {
      this.newState({
        completes: this.state.completes + 1
      })
    },
    skip() {
      this.newState({
        skips: this.state.skips + 1
      })
    },
    undo() {
      this.state = this.history.pop() || this.state
    }
  }
}
</script>

<template>
  <div @keydown="keydown" tabindex="0">
    <v-app>
      <v-content>
        <v-toolbar color="primary">
          <v-toolbar-side-icon />
          <v-toolbar-title>Twitch Rivals</v-toolbar-title>
        </v-toolbar>
        <v-container>
          <div class="score">
            <div class="skips-label">Skips <strong>({{state.skips}} / 15)</strong></div>
            <div class="skips">
              <div class="skip" v-for="(_, i) in Array(Math.max(15, state.skips)).fill()" :key="i" :class="{ used: i < state.skips, extra: i >= 15 }" />
            </div>
            <div class="completes-label">Completes <strong>({{state.completes}})</strong>:</div>
            <div class="completes">
              <div class="complete" v-for="(_, i) in Array(state.completes).fill()" :key="i" />
            </div>
          </div>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>

<style lang="less" scoped>
.score {
  display: grid;
  margin: 10px;
  box-sizing: border-box;
  width: calc(100% - 20px);
  grid-template: 'skips-label skips' 'completes-label completes' / 100px auto;

  .skip, .complete {
    display: inline-block;
    width: 15px;
    margin: 2.5px;
    height: 15px;
    border-radius: 7.5px;
  }
  .skip {
    border: solid 1px darkmagenta;
    &.used {
      background-color: purple;
    }
    &.extra {
      background-color: red;
    }
  }
  .complete {
    border: solid 1px green;
    background-color: greenyellow;
  }
  
}
</style>