index.vue

index.vue

<template>
  <fvMain>
    <fvContent>
      <fvHeader>
        <div class="fv-margin-end">
          <FramevuerkLogo />
        </div>
        <div class="fv-grow">
          <h2 class="fv-hidden-xs">
            Cus D'Amato
          </h2>
          <small class="fv-hidden-sm fv-hidden-xs"> Willie bag </small>
        </div>
      </fvHeader>
      <div class="content fv-padding">
        <div class="content__body fv-border fv-radius fv-shadow">
          <div class="fv-padding container">
            <fvForm class="fv-row">
              <fvFormElement class="fv-col-12" label="Sounds" inline>
                <fvButton
                  :disabled="disableStart"
                  @click="start"
                >
                  Start!
                </fvButton>
                <fvButton
                  :disabled="disableStop"
                  @click="stop"
                >
                  Stop!
                </fvButton>
              </fvFormElement>
              <fvFormElement class="fv-col-12" label="Number of punches" inline>
                <fvCheck v-model="punch" content="One">
                  One
                </fvCheck>
                <fvCheck v-model="punch" content="Two">
                  Two
                </fvCheck>
                <fvCheck v-model="punch" content="Series">
                  Series
                </fvCheck>
              </fvFormElement>
              <fvFormElement class="fv-col-12" label="Delay">
                <template slot="label" slot-scope="scope">
                  {{ scope.label }}
                  <span class="fv-margin-start-sm fv-text-primary">
                    <span v-if="delay">{{ delay }} s</span>
                  </span>
                </template>
                <fvRange v-model="delay" :data="delaySteps" />
              </fvFormElement>
              <fvFormElement v-if="punch === 'Two' || punch === 'Series'" class="fv-col-12" label="Delay between punches">
                <template slot="label" slot-scope="scope">
                  {{ scope.label }}
                  <span class="fv-margin-start-sm fv-text-primary">
                    <span v-if="delayBetweenPunches">{{ delayBetweenPunches }} s</span>
                  </span>
                </template>
                <fvRange v-model="delayBetweenPunches" :data="delayBetweenPunchesSteps" />
              </fvFormElement>
            </fvForm>
          </div>
        </div>
      </div>
    </fvContent>
  </fvMain>
</template>

<script>
import debounce from 'lodash.debounce'
import FramevuerkLogo from '~/components/FramevuerkLogo.vue'

export default {
  components: {
    FramevuerkLogo
  },
  data () {
    return {
      audio: null,
      willieBagOnePunch: null,
      willieBagTwoPunches: null,
      willieBagSeriesPunches: null,
      disableStop: true,
      disableStart: false,
      delaySteps: [1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4, 4.25, 4.5, 4.75, 5, 5.25, 5.5, 5.75],
      delayBetweenPunchesSteps: [],
      delay: 1.5,
      delayBetweenPunches: 1,
      punch: 'One'
    }
  },
  watch: {
    punch (_) {
      switch (this.punch) {
        case 'One':
          this.delay = 1.5
          break
        case 'Two':
          this.delay = 3
          this.delayBetweenPunches = 0.75
          break
        case 'Series':
          this.delay = 4.5
          this.delayBetweenPunches = 1.5
          break
      }
      this.stop()
    },
    delayBetweenPunchesSteps (value) {
      this.delayBetweenPunchesSteps = value
    },
    delay (value) {
      const that = this
      that.delayBetweenPunchesSteps = that.delayBetweenSteps(value)
      that.delayBetweenPunches = this.punch === 'Series' ? 1.5 : 1

      if (this.disableStart) {
        debounce(function () {
          that.stop()
          that.start()
        }, 350)()
      }
    }
  },
  created () {
    this.delayBetweenPunchesSteps = this.delayBetweenSteps(this.delay)
  },
  methods: {
    delayBetweenSteps (rangeTo) {
      const result = []
      while (rangeTo) {
        rangeTo = rangeTo - 0.25
        result.unshift(rangeTo)
      }
      return result.slice(2)
    },
    stop () {
      this.disableStart = false
      this.disableStop = true
      clearInterval(this.willieBagSeriesPunches)
      clearInterval(this.willieBagTwoPunches)
      clearInterval(this.willieBagOnePunch)
    },
    stopOnePunch () {
      clearInterval(this.willieBagOnePunch)
    },
    start () {
      this.disableStart = true
      this.disableStop = false
      switch (this.punch) {
        case 'One':
          this.onePunch()
          break
        case 'Two':
          this.willieBagTwoPunches = setInterval(async () => {
            let punchNumber = this.randomPunch()
            this.playSound(punchNumber)
            await this.delayPromise(this.delayBetweenPunches * 1000)
            punchNumber = this.randomPunch()
            this.playSound(punchNumber)
          }, this.delay * 1000)
          break
        case 'Series':
          this.willieBagSeriesPunches = setInterval(async () => {
            let punchNumber = this.randomPunch()
            this.playSound(punchNumber)
            await this.delayPromise(this.delayBetweenPunches * 500)
            punchNumber = this.randomPunch()
            this.playSound(punchNumber)
            await this.delayPromise(this.delayBetweenPunches * 500)
            punchNumber = this.randomPunch()
            this.playSound(punchNumber)
          }, this.delay * 1000)
          break
      }
    },
    onePunch (customDelay, stop) {
      const delay = customDelay || this.delay * 1000
      this.willieBagOnePunch = setInterval(() => {
        const punchNumber = this.randomPunch()
        this.playSound(punchNumber)
        if (stop) {
          this.stopOnePunch()
        }
      }, delay)
    },
    playSound (punchNumber) {
      const file = require(`@/assets/sounds/0${punchNumber}.wav`)
      this.audio = new Audio(file.default)
      this.audio.play()
    },
    randomPunch () {
      const punchNumber = this.random()
      return (punchNumber === 0 || punchNumber === 9 || punchNumber === 10)
        ? 1
        : punchNumber
    },
    random () {
      const uint8Array = new Uint8Array(1)
      window.crypto.getRandomValues(uint8Array)
      const value = uint8Array[0]
      const sum = this.summator(value)
      console.log(sum)
      return sum
    },
    summator (value) {
      let sum = 0
      while (value) {
        sum += value % 10
        value = Math.floor(value / 10)
        if (sum > 10) {
          sum = this.summator(sum)
        }
      }
      return sum
    },
    delayPromise (ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    }
  }
}
</script>

<style scoped>
.content {
  margin: 0 auto;
  max-width: 768px;
}

.sidebar {
  min-width: 300px;
}
</style>