Add keyboard controls

css/style.css

@@ -70,7 +70,12 @@ body {
       margin-bottom: 2px;
       border: 1px solid lightgray;
       border-radius: 0;
-      text-align: left; }
+      text-align: left;
+      counter-increment: answer; }
+      .ingame-screen .question .question-answers .answer::before {
+        content: counter(answer);
+        color: lightgray;
+        padding: 0.5em; }
     .ingame-screen .question .question-estimate {
       display: grid;
       grid-template-columns: 7fr 3fr; }

css/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["style.sass"],
 "names": [],
 "file": "style.css"

css/style.sass

@@ -91,6 +91,12 @@ body
         border: 1px solid lightgray
         border-radius: 0
         text-align: left
+        counter-increment: answer
+
+        &::before 
+          content: counter(answer)
+          color: lightgray
+          padding: .5em
 
     .question-estimate
       display: grid

index.html

@@ -12,7 +12,7 @@
     <section v-if="mode === STARTSCREEN" class="start-screen screen">
       <img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
       <h1 class="headline">Willkommen zum WIAI-Weihnachtsquiz!</h1>
-      <button v-on:click="enterGame" class="btn-start" tabindex="0" v-on:keyup.enter="enterGame">Starten</button>
+      <button v-on:click="enterGame" class="btn-start" v-focus v-on:keyup.enter="enterGame">Starten</button>
     </section>
 
     <section v-if="mode === INGAME" class="ingame-screen screen">
@@ -33,6 +33,7 @@
         <div class="question-answers">
           <button 
             v-for="answer in currentQuestion.answers" 
+            v-bind:disabled="currentQuestionAnswered"
             @click="evaluateChoice(answer.id)"
             v-bind:class="{ correct: isCorrectAnswer(answer.id), answer: true, chosen: isUserChoice(answer.id) }">
             {{answer.text}}
@@ -43,8 +44,8 @@
       <article v-if="isEstimate" class="question estimate" v-bind:class="{revealed: currentQuestionAnswered}">
         <h2 class="question-text">{{currentQuestion.text}}</h2>
         <div class="question-estimate">
-          <input v-bind:value="currentEstimate" id="input-estimate" type="number" 
+          <input value="" id="input-estimate" type="number" 
-                min="0" class="input-estimate" @v-keyup.enter="evaluateEstimate" v-bind:disabled="currentQuestionAnswered"/>
+                min="0" class="input-estimate" @v-on:keyup.enter="evaluateEstimate" v-bind:disabled="currentQuestionAnswered" v-focus/>
           <input type="submit" @click="evaluateEstimate" class="btn-submit-estimate" v-bind:disabled="currentQuestionAnswered" value="Auswerten"/>
         </div>
 

js/app.js

@@ -1,3 +1,9 @@
+Vue.directive('focus', {
+  inserted: function (el) {
+    el.focus()
+  }
+})
+
 const app = new Vue({
   el: '#app',
   data: {
@@ -27,12 +33,36 @@ const app = new Vue({
   beforeMount () {
     this.questions = []
     const questionCandidates = questionCatalog.slice()
-    for (let i = 0; i < Math.min(20, questionCatalog.length); i++) {
+    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
@@ -52,7 +82,7 @@ const app = new Vue({
         this.currentQuestionAnswerID = answerID
       }
     },
-    evaluateEstimate: function (value) {
+    evaluateEstimate: function () {
       if (!this.currentQuestionAnswered) {
         const estimateInput = document.querySelector('#input-estimate')
 
@@ -95,17 +125,22 @@ const app = new Vue({
         }
       }
     },
-    showNextQuestion: function (event) {
+    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
         }
       }
-      event.stopPropagation()
     },
     isCorrectAnswer: function (answerID) {
       return this.currentQuestion.correctAnswerID === answerID