JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<div id="app">
  <div v-for="round in rounds">
    <h4>Steps: {{ getSteps(round).join(" | ") }}</h4>
    <div v-for="hitNum in hits">
      <div v-for="hit in doHits(round, hitNum)">
        {{ hit }}
      </div>
      <hr />
    </div>
    {{resetCurrent()}}
  </div>
</div>

JavaScript

console.clear();
new Vue({
  el: "#app",
  data: {
    rounds: [1, 3, 4],
    current: 20000,
    total: 20000,
    hits: [
    	3,
      3,
      1
    ]
  },
  methods: {
    resetCurrent() {
      this.current = this.total;
    },
    getSteps(round = 1) {
      var i = 1,
        num = ((round * 2) - 1),
        steps = [];
      if (round < 3) {
        num = 4;
      }
      while (i < num) {
        var f = ((i / num) * 100).toFixed(2);
        steps.push(parseFloat(f));
        i++;
      }
      
      return steps;
    },
    doHits(round = 1, hitNum = 1) {
      var hits = [],
        currentHit = 1,
        steps = this.getSteps(round),
        step = steps.length > 1 ? steps[1] - steps[0] : steps[0],
        nextLevel = Math.floor(((this.current / this.total) * 100) / step),
        currentLevel = Math.floor(((this.current / this.total) * 100) / step);
        
      while (currentHit <= hitNum) {
        this.current -= 1000;
        hits.push((this.current / this.total) * 100);
        currentLevel = Math.ceil(((this.current / this.total) * 100) / step);
        if (currentLevel < nextLevel) {
          nextLevel = Math.ceil(((this.current / this.total) * 100) / step);
          hits.push('given');
        }
        currentHit++;
      }
      
      return hits;
    }
  },
})