Add harder game mode

lang/de/t.php

@@ -553,14 +553,19 @@
 		),
 		"name_game" => array(
 			"correct" => "Richtig!",
+			"game_mode" => "Schwierigkeit",
+			"manual_name_input" => "Schwierig (Namen eintippen)",
+			"multiple_choice" => "Einfach (multiple choice)",
 			"name_game" => "Name Game",
 			"next" => "Weiter",
 			"no_image" => "kein Bild",
 			"page_title" => "Name Game",
 			"participants" => "TN",
 			"play_again" => "Nochmals",
+			"scout_name" => "Name",
 			"select_all" => "Alle auswählen",
 			"start" => "Los geht's",
+			"submit" => "Abschicken",
 			"this_is" => "Das ist:",
 			"well_done" => "Super gemacht!",
 			"who_is_this" => "Wer ist das?",

resources/js/components/form/InputText.vue

@@ -30,7 +30,8 @@
         v-model="currentValue"
         :required="required"
         :autofocus="autofocus"
-        :v-focus="autofocus">
+        :v-focus="autofocus"
+        ref="input">
 
       <span v-if="errorMessage" class="invalid-feedback" role="alert">
         <strong>{{ errorMessage }}</strong>
@@ -50,6 +51,11 @@ export default {
     label: { type: String, required: true },
     type: { type: String, default: 'text' },
     autofocus: { type: Boolean, default: false },
+  },
+  methods: {
+    focus() {
+      this.$refs.input.focus()
+    }
   }
 }
 </script>

resources/js/components/nameGame/AnswerInput.vue

@@ -9,13 +9,23 @@
       {{ option.scout_name }}
     </button>
   </div>
-  <div v-else>{{ participant.scout_name }}</div>
+  <div v-else>
+    <input-text :label="$t('t.views.name_game.scout_name')" name="scout_name" ref="scoutName"></input-text>
+    <button
+      type="submit"
+      class="btn btn-primary mr-3 mb-1 w-100 h-25">
+      {{ $t('t.views.name_game.submit') }}
+    </button>
+  </div>
 </template>
 
 <script>
 
+import InputText from '../form/InputText.vue';
+
 export default {
   name: 'AnswerInput',
+  components: { InputText },
   props: {
     participant: { type: Object, required: true },
     participants: { type: Array, required: true },
@@ -42,8 +52,13 @@ export default {
       const options = [this.participant, this.wrongGuess1, this.wrongGuess2]
       options.sort((a, b) => a.scout_name.localeCompare(b.scout_name))
       return options
+    },
+  },
+  mounted() {
+    if (this.gameMode === 'manualNameInput' && this.$refs.scoutName) {
+      this.$refs.scoutName.focus()
     }
-  }
+  },
 }
 </script>
 

resources/js/components/nameGame/NameGame.vue

@@ -15,6 +15,14 @@
           :groups="{[$t('t.views.name_game.select_all')]: participants.map(p => p.id).join()}"
         ></input-multi-select>
 
+        <input-multi-select
+          :label="$t('t.views.name_game.game_mode')"
+          name="gameMode"
+          v-model="gameMode"
+          :options="[ { id: 'multipleChoice', label: $t('t.views.name_game.multiple_choice')}, { id: 'manualNameInput', label: $t('t.views.name_game.manual_name_input') } ]"
+          required
+        ></input-multi-select>
+
         <button-submit :label="$t('t.views.name_game.start')"></button-submit>
 
       </form>

resources/js/components/nameGame/NameGameGuess.vue

@@ -23,12 +23,13 @@
         <div class="d-flex align-items-baseline justify-content-start">
           <i class="text-red fas fa-xmark"></i>
           &nbsp;
-          <span>{{ submittedGuess.scout_name }}</span>
+          <span>{{ submittedScoutName }}</span>
         </div>
       </div>
       <button
         type="submit"
-        class="btn btn-outline-primary mr-3 mb-1 w-100 h-25">
+        class="btn btn-outline-primary mr-3 mb-1 w-100 h-25"
+        ref="nextButton">
         {{ $t('t.views.name_game.next') }}
       </button>
     </form>
@@ -52,24 +53,42 @@ export default {
       guessing: true,
       correct: false,
       submittedGuess: null,
+      submittedScoutName: '',
     }
   },
   methods: {
     guess(event) {
-      const selectedId = event.submitter.getAttribute('value')
-      this.submittedGuess = this.participants.find(p => selectedId === `${p.id}`)
-      if (this.submittedGuess.id === this.participant.id) {
+      this.gameMode === 'multipleChoice' ?
+        this.getSelectedParticipant(event) :
+        this.getGuessedParticipant(event)
+      if (this.submittedGuess?.id === this.participant.id) {
         this.correct = true
         this.$emit('correct')
       } else {
         this.correct = false
         this.$emit('incorrect')
       }
       this.guessing = false
+      this.$nextTick(() => this.$refs.nextButton.focus())
     },
     next() {
       this.$emit('advance')
       this.guessing = true
+    },
+    getSelectedParticipant(event) {
+      const selectedId = event.submitter.getAttribute('value')
+      this.submittedGuess = this.participants.find(p => selectedId === `${p.id}`)
+      this.submittedScoutName = this.submittedGuess?.scout_name
+    },
+    getGuessedParticipant(event) {
+      const input = (new FormData(event.target)).get('scout_name')
+      this.submittedGuess = this.participants.find(participant => {
+        return this.normalize(participant.scout_name) === this.normalize(input)
+      })
+      this.submittedScoutName = this.submittedGuess ? this.submittedGuess.scout_name : input
+    },
+    normalize(name) {
+      return name.toLocaleLowerCase().replaceAll(/[^a-zA-Z]/g, '')
     }
   }
 }