weihnachtsquiz-2020/js/app.js

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

const app = new Vue({
  el: '#app',
  data: {
    STARTSCREEN: 'STARTSCREEN',
    INGAME: 'INGAME',
    ENDSCREEN: 'ENDSCREEN',
    score: 0,
    mode: 'STARTSCREEN',
    currentQuestionID: 0,
    currentQuestionAnswerID: null,
    currentQuestionAnswered: false,
    currentEstimate: 0,
    currentScore: 0,
    questions: null
  },
  computed: {
    currentQuestion: function () {
      return this.questions[this.currentQuestionID]
    },
    isEstimate: function () {
      return this.currentQuestion.type === 'estimate'
    },
    isChoice: function () {
      return this.currentQuestion.type === 'choice'
    }
  },
  beforeMount () {
    this.questions = []
    const questionCandidates = questionCatalog.slice()
    for (let i = 0; i < Math.min(9, questionCatalog.length); i++) {
      const index = Math.floor(Math.random() * questionCandidates.length)
      this.questions.push(questionCandidates[index])
      questionCandidates.splice(index, 1)
    }
  },
  mounted: function () {
    window.addEventListener('keypress', e => {
      switch (e.key) {
        case '1':
          this.isChoice && !this.currentQuestionAnswered && this.evaluateChoice(0)
          return
        case '2':
          this.isChoice && !this.currentQuestionAnswered && this.evaluateChoice(1)
          return
        case '3':
          this.isChoice && !this.currentQuestionAnswered && this.evaluateChoice(2)
          return
        case 'Enter':
          if (this.currentQuestionAnswered) {
            this.showNextQuestion()
          } else if (this.isEstimate && document.querySelector('#input-estimate').value !== '') {
            this.evaluateEstimate()
          }
        default:
          console.log(e.key)
          return
      }
    })
  },
  methods: {
    enterGame: function (event) {
      this.mode = this.INGAME
      this.currentQuestionID = 0
    },
    addToScore: function (value) {
      this.score += value
    },
    evaluateChoice: function (answerID) {
      if (!this.currentQuestionAnswered) {
        this.currentScore = 0
        if (this.isCorrectAnswer(answerID)) {
          this.currentScore = 3
          this.addToScore(3)
        }
        this.currentQuestionAnswered = true
        this.currentQuestionAnswerID = answerID
      }
    },
    evaluateEstimate: function () {
      if (!this.currentQuestionAnswered) {
        const estimateInput = document.querySelector('#input-estimate')

        this.currentEstimate = parseInt(estimateInput.value)
        if (this.currentEstimate > 0) {
          this.currentQuestionAnswered = true

          const correctResultDisplay = document.querySelector('.question-result .correct-result')
          const estimateDisplay = document.querySelector('.question-result .estimate')

          correctResultDisplay.innerHTML = `<strong>${this.currentQuestion.correctAnswer}</strong><br/>(Korrekt)`
          estimateDisplay.innerHTML = `<strong>${this.currentEstimate}</strong><br/>(Geschätzt)`

          if (this.currentEstimate < this.currentQuestion.correctAnswer) {
            correctResultDisplay.style.left = 100 + '%'
            estimateDisplay.style.left = (100 * this.currentEstimate / this.currentQuestion.correctAnswer) + '%'
          } else {
            estimateDisplay.style.left = 100 + '%'
            correctResultDisplay.style.left = (100 * this.currentQuestion.correctAnswer / this.currentEstimate) + '%'
          }

          const x90  = this.currentQuestion.correctAnswer * 0.9
          const x110 = this.currentQuestion.correctAnswer * 1.1

          const x75  = this.currentQuestion.correctAnswer * 0.75
          const x125 = this.currentQuestion.correctAnswer * 1.25

          const x50  = this.currentQuestion.correctAnswer * 0.5
          const x150 = this.currentQuestion.correctAnswer * 1.5

          this.currentScore = 0
          if (this.currentEstimate >= x90 && this.currentEstimate <= x110) {
            this.currentScore = 3
          } else if (this.currentEstimate >= x75 && this.currentEstimate <= x125) {
            this.currentScore = 2
          } else if (this.currentEstimate >= x50 && this.currentEstimate <= x150) {
            this.currentScore = 1
          }
          this.addToScore(this.currentScore)
        }
      }
    },
    showNextQuestion: function () {
      if (this.currentQuestionAnswered) {
        if (this.currentQuestion.type === 'estimate') {
          document.querySelector('#input-estimate').value = ''
        }

        this.currentQuestionAnswered = false
        this.currentQuestionAnswerID = null

        if (this.currentQuestionID + 1 < this.questions.length) {
          this.currentQuestionID++
          this.$forceUpdate
        } else {
          this.mode = this.ENDSCREEN
        }
      }
    },
    isCorrectAnswer: function (answerID) {
      return this.currentQuestion.correctAnswerID === answerID
    },
    isUserChoice: function (answerID) {
      return this.currentQuestionAnswered && (this.currentQuestionAnswerID === answerID)
    }
  }
})