From 6985f60ee3ba038c8357384aad860d3deca0d210 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Wed, 14 Feb 2024 02:05:25 +0100
Subject: [PATCH 01/14] WIP

---
 app/Http/Controllers/NameGameController.php   | 37 ++++++++
 lang/de/t.php                                 | 12 +++
 package-lock.json                             | 48 +++++++++++
 package.json                                  |  1 +
 resources/js/components/form/ButtonSubmit.vue |  3 +-
 .../js/components/nameGame/AnswerInput.vue    | 52 ++++++++++++
 .../js/components/nameGame/GuessPrompt.vue    | 28 +++++++
 resources/js/components/nameGame/NameGame.vue | 75 +++++++++++++++++
 .../js/components/nameGame/NameGameGuess.vue  | 68 +++++++++++++++
 .../js/components/nameGame/NameGameRound.vue  | 84 +++++++++++++++++++
 resources/sass/app.scss                       |  4 +
 resources/views/nameGame/index.blade.php      | 17 ++++
 routes/web.php                                |  3 +
 13 files changed, 431 insertions(+), 1 deletion(-)
 create mode 100644 app/Http/Controllers/NameGameController.php
 create mode 100644 resources/js/components/nameGame/AnswerInput.vue
 create mode 100644 resources/js/components/nameGame/GuessPrompt.vue
 create mode 100644 resources/js/components/nameGame/NameGame.vue
 create mode 100644 resources/js/components/nameGame/NameGameGuess.vue
 create mode 100644 resources/js/components/nameGame/NameGameRound.vue
 create mode 100644 resources/views/nameGame/index.blade.php

diff --git a/app/Http/Controllers/NameGameController.php b/app/Http/Controllers/NameGameController.php
new file mode 100644
index 00000000..db010b6b
--- /dev/null
+++ b/app/Http/Controllers/NameGameController.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Exceptions\Handler;
+use App\Exceptions\MiDataParticipantsListsParsingException;
+use App\Exceptions\UnsupportedFormatException;
+use App\Http\Requests\ParticipantImportRequest;
+use App\Http\Requests\ParticipantRequest;
+use App\Models\Course;
+use App\Models\Participant;
+use App\Util\HtmlString;
+use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Routing\RouteCollectionInterface;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Redirect;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\URL;
+use Illuminate\Validation\ValidationException;
+use Illuminate\View\View;
+
+class NameGameController extends Controller
+{
+    /**
+     * Play the name game.
+     *
+     * @return Response
+     */
+    public function index()
+    {
+        return view('nameGame.index');
+    }
+}
diff --git a/lang/de/t.php b/lang/de/t.php
index 2c1dfa24..f2ad0db1 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -551,6 +551,18 @@
 			),
 			"via_midata" => "Via PBS MiData einloggen",
 		),
+		"name_game" => array(
+			"correct" => "Richtig!",
+			"name_game" => "Name Game",
+			"next" => "Weiter",
+			"page_title" => "Name Game",
+			"participants" => "TN",
+			"select_all" => "Alle auswählen",
+			"start" => "Los geht's",
+			"this_is" => "Das ist:",
+			"who_is_this" => "Wer ist das?",
+			"you_guessed" => "Deine Antwort:",
+		),
 		"observations" => array(
 			"add_success" => "Beobachtung erfasst. Mässi!",
 			"go_to_participant" => "Zu :name",
diff --git a/package-lock.json b/package-lock.json
index bf11a534..12878156 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1650,6 +1650,54 @@
             "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
             "dev": true
         },
+        "@formatjs/ecma402-abstract": {
+            "version": "1.18.2",
+            "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz",
+            "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==",
+            "requires": {
+                "@formatjs/intl-localematcher": "0.5.4",
+                "tslib": "^2.4.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.6.2",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+                    "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+                }
+            }
+        },
+        "@formatjs/intl-durationformat": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@formatjs/intl-durationformat/-/intl-durationformat-0.2.2.tgz",
+            "integrity": "sha512-8cBgB9ejg9a2pmGVmcVoF0OlK4XifRtm7Se5F9kMj+Ex+5x8QVBLEuqnTHEyV584VMNR2ngUP1dNR36MeTWG3A==",
+            "requires": {
+                "@formatjs/ecma402-abstract": "1.18.2",
+                "@formatjs/intl-localematcher": "0.5.4",
+                "tslib": "^2.4.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.6.2",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+                    "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+                }
+            }
+        },
+        "@formatjs/intl-localematcher": {
+            "version": "0.5.4",
+            "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+            "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+            "requires": {
+                "tslib": "^2.4.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "2.6.2",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+                    "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+                }
+            }
+        },
         "@fortawesome/fontawesome-free": {
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.2.tgz",
diff --git a/package.json b/package.json
index 5cf4215f..27c79669 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
         "yjs": "^13.5.12"
     },
     "dependencies": {
+        "@formatjs/intl-durationformat": "^0.2.2",
         "jszip": "^3.10.1"
     }
 }
diff --git a/resources/js/components/form/ButtonSubmit.vue b/resources/js/components/form/ButtonSubmit.vue
index 52a0b0af..64ed0296 100644
--- a/resources/js/components/form/ButtonSubmit.vue
+++ b/resources/js/components/form/ButtonSubmit.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="form-group row mb-0">
     <div :class="inputColumnClass">
-      <button type="submit" class="btn btn-primary mr-3 mb-1" :disabled="disabled" v-on="$listeners">
+      <button type="submit" class="btn btn-primary mr-3 mb-1" :disabled="disabled" :value="value" v-on="$listeners">
         {{ label }}
       </button>
 
@@ -15,6 +15,7 @@ export default {
   name: 'ButtonSubmit',
   props: {
     label: { type: String, default: function() { return this.$t('t.global.save') } },
+    value: { default: null },
     disabled: { type: Boolean, default: false },
     narrowForm: { type: Boolean, default: false },
   },
diff --git a/resources/js/components/nameGame/AnswerInput.vue b/resources/js/components/nameGame/AnswerInput.vue
new file mode 100644
index 00000000..34647eb4
--- /dev/null
+++ b/resources/js/components/nameGame/AnswerInput.vue
@@ -0,0 +1,52 @@
+<template>
+  <div v-if="gameMode === 'multipleChoice'">
+    <button
+      v-for="option in multipleChoiceOptions"
+      :key="option.id"
+      type="submit"
+      class="btn btn-primary mr-3 mb-1 w-100 h-25"
+      :value="option.id">
+      {{ option.scout_name }}
+    </button>
+  </div>
+  <div v-else>{{ participant.scout_name }}</div>
+</template>
+
+<script>
+
+export default {
+  name: 'AnswerInput',
+  props: {
+    participant: { type: Object, required: true },
+    participants: { type: Array, required: true },
+    gameMode: { type: String, required: true },
+  },
+  computed: {
+    wrongGuess1() {
+      let result = this.participant
+      if (this.participants.length < 2) return result
+      while (result.id === this.participant.id) {
+        result = this.participants[Math.floor(Math.random() * this.participants.length)]
+      }
+      return result
+    },
+    wrongGuess2() {
+      let result = this.participant
+      if (this.participants.length < 3) return result
+      while (result.id === this.participant.id || result.id === this.wrongGuess1.id) {
+        result = this.participants[Math.floor(Math.random() * this.participants.length)]
+      }
+      return result
+    },
+    multipleChoiceOptions() {
+      const options = [this.participant, this.wrongGuess1, this.wrongGuess2]
+      options.sort((a, b) => a.scout_name.localeCompare(b.scout_name))
+      return options
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/GuessPrompt.vue b/resources/js/components/nameGame/GuessPrompt.vue
new file mode 100644
index 00000000..59aea510
--- /dev/null
+++ b/resources/js/components/nameGame/GuessPrompt.vue
@@ -0,0 +1,28 @@
+<template>
+  <row-text v-if="image">
+    <div class="square-container name-game-image">
+      <img class="card-img-top img img-responsive full-width" :src="participant.image_path" :alt="$t('t.views.name_game.who_is_this')">
+    </div>
+  </row-text>
+  <div v-else>{{ participant.scout_name }}</div>
+</template>
+
+<script>
+
+export default {
+  name: 'GuessPrompt',
+  props: {
+    participant: { type: Object, required: true },
+    gameMode: { type: String, required: true },
+  },
+  computed: {
+    image() {
+      return ['multipleChoice', 'manualNameInput'].includes(this.gameMode)
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
new file mode 100644
index 00000000..7544f450
--- /dev/null
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="name-game">
+    <template v-if="!playing">
+
+      <form @submit.prevent="playing = true">
+
+        <input-multi-select
+          :label="$t('t.views.name_game.participants')"
+          name="selectedParticipants"
+          v-model="selectedParticipantIds"
+          multiple
+          :options="participants"
+          :display-field="anyDuplicateMembershipGroups ? 'name_and_group' : 'scout_name'"
+          required
+          :groups="{[$t('t.views.name_game.select_all')]: participants.map(p => p.id).join()}"
+        ></input-multi-select>
+
+        <button-submit :label="$t('t.views.name_game.start')"></button-submit>
+
+      </form>
+
+    </template>
+    <template v-else>
+      <name-game-round
+        :participants="selectedParticipants"
+        :game-mode="gameMode"
+        @finish="playing = false"
+      ></name-game-round>
+    </template>
+  </div>
+</template>
+
+<script>
+import InputMultiSelect from '../form/InputMultiSelect'
+import ButtonSubmit from '../form/ButtonSubmit'
+import { countBy } from 'lodash'
+
+export default {
+  name: 'NameGame',
+  components: { InputMultiSelect, ButtonSubmit },
+  props: {
+    participants: { type: Array, required: true },
+    participantGroups: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      selectedParticipants: this.participants,
+      playing: false,
+      gameMode: 'multipleChoice',
+    }
+  },
+  computed: {
+    selectedParticipantIds: {
+      get () {
+        return this.selectedParticipants.map(participant => participant.id).join(',')
+      },
+      set (newValue) {
+        const ids = newValue.split(',')
+        this.selectedParticipants = this.participants.filter(p => ids.includes(p.id.toString()))
+      }
+    },
+    anyDuplicateMembershipGroups() {
+      return 1 < Math.max(
+        ...Object.values(countBy(
+          this.selectedParticipants.filter(participant => !!participant.group), 'group')
+        )
+      )
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/NameGameGuess.vue b/resources/js/components/nameGame/NameGameGuess.vue
new file mode 100644
index 00000000..43357bdc
--- /dev/null
+++ b/resources/js/components/nameGame/NameGameGuess.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <guess-prompt :participant="participant" :game-mode="gameMode"></guess-prompt>
+    <form v-if="guessing" ref="form" @submit.prevent="guess">
+      <answer-input :participant="participant" :participants="participants" :game-mode="gameMode"></answer-input>
+    </form>
+    <form v-else @submit.prevent="next">
+      <div v-if="correct">
+        {{ $t('t.views.name_game.correct') }}
+      </div>
+      <div v-else>
+        <div>{{ $t('t.views.name_game.this_is') }}</div>
+        <div>{{ participant.scout_name }}</div>
+        <div>{{ $t('t.views.name_game.you_guessed') }}</div>
+        <div class="d-flex align-items-baseline justify-content-between">
+          <i class="text-red fas fa-xmark"></i>
+          &nbsp;
+          <span>{{ submittedGuess.scout_name }}</span>
+        </div>
+      </div>
+      <button-submit :label="$t('t.views.name_game.next')"></button-submit>
+    </form>
+  </div>
+</template>
+
+<script>
+
+import ButtonSubmit from '../form/ButtonSubmit.vue'
+
+export default {
+  name: 'NameGameGuess',
+  components: { ButtonSubmit },
+  props: {
+    participant: { type: Object, required: true },
+    participants: { type: Array, required: true },
+    gameMode: { type: String, required: true },
+  },
+  data() {
+    return {
+      guessing: true,
+      correct: false,
+      submittedGuess: null,
+    }
+  },
+  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.correct = true
+        this.$emit('correct')
+      } else {
+        this.correct = false
+        this.$emit('incorrect')
+      }
+      this.guessing = false
+    },
+    next() {
+      this.$emit('advance')
+      this.guessing = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/nameGame/NameGameRound.vue b/resources/js/components/nameGame/NameGameRound.vue
new file mode 100644
index 00000000..97098cc4
--- /dev/null
+++ b/resources/js/components/nameGame/NameGameRound.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="w-25 w-md-50 w-sm-100 m-auto">
+    <div class="d-flex justify-content-between">
+      <div class="d-flex">
+        <div class="hc fc-30-90-150-255 s e wc">
+          <div class="s t wf hf">Zeit:&nbsp;</div>
+        </div>
+        <div class="hc s e wc">
+          <div class="s t wf hf">{{ elapsedTime }}</div>
+        </div>
+      </div>
+      <div class="d-flex">
+        <div class="hc fc-30-90-150-255 s e wc">
+          <div class="s t wf hf">Punkte:&nbsp;</div>
+        </div>
+        <div class="hc s e wc">
+          <div class="s t wf hf">{{ score }}</div>
+        </div>
+      </div>
+    </div>
+    <b-progress :max="participants.length" class="mb-3 mt-1">
+      <b-progress-bar :value="step" variant="info">{{ step }} / {{ participants.length }}</b-progress-bar>
+    </b-progress>
+    <name-game-guess
+      v-if="step < shuffledParticipants.length"
+      :participant="shuffledParticipants[step]"
+      :participants="participants"
+      :game-mode="gameMode"
+      @correct="correct"
+      @incorrect="incorrect"
+      @advance="step += 1"
+    ></name-game-guess>
+    <score-screen v-else :participants="shuffledParticipants"></score-screen>
+  </div>
+</template>
+
+<script>
+import { shuffle } from 'lodash'
+import '@formatjs/intl-durationformat/polyfill'
+import ButtonSubmit from '../form/ButtonSubmit.vue';
+
+export default {
+  name: 'NameGameRound',
+  components: { ButtonSubmit },
+  props: {
+    participants: { type: Array, required: true },
+    gameMode: { type: String, required: true }
+  },
+  data () {
+    return {
+      shuffledParticipants: shuffle(this.participants),
+      step: 0,
+      startTime: null,
+      elapsedTime: '',
+      score: 0,
+    };
+  },
+  mounted () {
+    this.score = 0
+    this.startTime = new Date()
+    this.updateTimer()
+  },
+  methods: {
+    updateTimer() {
+      const elapsed =
+      this.elapsedTime = new Intl.DurationFormat('de-CH', { style: 'digital' }).format({
+        milliseconds: Math.round(((new Date()) - this.startTime) / 100) * 100
+      })
+      requestAnimationFrame(this.updateTimer)
+    },
+    correct() {
+      this.shuffledParticipants[this.step].correct = true
+      this.score += 10
+    },
+    incorrect() {
+      this.shuffledParticipants[this.step].correct = false
+    },
+  }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 7ad4d852..7f1d0aa2 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -194,3 +194,7 @@
     right: 0.5rem;
     z-index: 1;
 }
+
+.name-game-image {
+    max-width: 15rem;
+}
diff --git a/resources/views/nameGame/index.blade.php b/resources/views/nameGame/index.blade.php
new file mode 100644
index 00000000..44af476e
--- /dev/null
+++ b/resources/views/nameGame/index.blade.php
@@ -0,0 +1,17 @@
+@extends('layouts.default')
+
+@section('pagetitle'){{__('t.views.name_game.page_title') }}@endsection
+
+@section('content')
+
+    <b-card>
+        <template #header>{{__('t.views.name_game.name_game')}}</template>
+
+            <name-game
+                :participants="{{ json_encode($course->participants) }}"
+                :participant-groups="{{ json_encode($course->participantGroups) }}"
+            ></name-game>
+
+    </b-card>
+
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 1ccbe9da..9317e44e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -24,6 +24,7 @@
 use App\Http\Controllers\HomeController;
 use App\Http\Controllers\InvitationController;
 use App\Http\Controllers\LocalizationController;
+use App\Http\Controllers\NameGameController;
 use App\Http\Controllers\ObservationAssignmentController;
 use App\Http\Controllers\ObservationController;
 use App\Http\Controllers\ParticipantController;
@@ -64,6 +65,8 @@
         Route::post('/course/{course}/observation/{observation}', [ObservationController::class, 'update'])->name('observation.update');
         Route::delete('/course/{course}/observation/{observation}', [ObservationController::class, 'destroy'])->name('observation.delete');
 
+        Route::get('/course/{course}/names', [NameGameController::class, 'index'])->name('nameGame');
+
         Route::post('/course/{course}/admin/archive', [CourseController::class, 'archive'])->name('admin.course.archive');
     });
 

From cd8f7a52d3f1a5ebc8c52179596c5392f1ba7b8b Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sat, 17 Feb 2024 19:07:46 +0100
Subject: [PATCH 02/14] Working version of the name game

---
 lang/de/t.php                                 |  2 ++
 .../js/components/nameGame/NameGameGuess.vue  | 20 ++++++++++++----
 .../js/components/nameGame/NameGameRound.vue  | 21 ++++++++++++-----
 .../js/components/nameGame/ScoreScreen.vue    | 23 +++++++++++++++++++
 4 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 resources/js/components/nameGame/ScoreScreen.vue

diff --git a/lang/de/t.php b/lang/de/t.php
index f2ad0db1..933f4b5f 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -557,9 +557,11 @@
 			"next" => "Weiter",
 			"page_title" => "Name Game",
 			"participants" => "TN",
+			"play_again" => "Nochmals",
 			"select_all" => "Alle auswählen",
 			"start" => "Los geht's",
 			"this_is" => "Das ist:",
+			"well_done" => "Super gemacht!",
 			"who_is_this" => "Wer ist das?",
 			"you_guessed" => "Deine Antwort:",
 		),
diff --git a/resources/js/components/nameGame/NameGameGuess.vue b/resources/js/components/nameGame/NameGameGuess.vue
index 43357bdc..228710b2 100644
--- a/resources/js/components/nameGame/NameGameGuess.vue
+++ b/resources/js/components/nameGame/NameGameGuess.vue
@@ -6,19 +6,31 @@
     </form>
     <form v-else @submit.prevent="next">
       <div v-if="correct">
-        {{ $t('t.views.name_game.correct') }}
+        <div>{{ $t('t.views.name_game.correct') }}</div>
+        <div>{{ $t('t.views.name_game.this_is') }}</div>
+        <div class="d-flex align-items-baseline justify-content-start">
+          <i class="text-green fas fa-check"></i>
+          &nbsp;
+          {{ participant.scout_name }}
+        </div>
       </div>
       <div v-else>
         <div>{{ $t('t.views.name_game.this_is') }}</div>
-        <div>{{ participant.scout_name }}</div>
+        <div class="d-flex align-items-baseline justify-content-start">
+          {{ participant.scout_name }}
+        </div>
         <div>{{ $t('t.views.name_game.you_guessed') }}</div>
-        <div class="d-flex align-items-baseline justify-content-between">
+        <div class="d-flex align-items-baseline justify-content-start">
           <i class="text-red fas fa-xmark"></i>
           &nbsp;
           <span>{{ submittedGuess.scout_name }}</span>
         </div>
       </div>
-      <button-submit :label="$t('t.views.name_game.next')"></button-submit>
+      <button
+        type="submit"
+        class="btn btn-outline-primary mr-3 mb-1 w-100 h-25">
+        {{ $t('t.views.name_game.next') }}
+      </button>
     </form>
   </div>
 </template>
diff --git a/resources/js/components/nameGame/NameGameRound.vue b/resources/js/components/nameGame/NameGameRound.vue
index 97098cc4..bd840a9a 100644
--- a/resources/js/components/nameGame/NameGameRound.vue
+++ b/resources/js/components/nameGame/NameGameRound.vue
@@ -30,18 +30,20 @@
       @incorrect="incorrect"
       @advance="step += 1"
     ></name-game-guess>
-    <score-screen v-else :participants="shuffledParticipants"></score-screen>
+    <score-screen v-else :participants="shuffledParticipants" @finish="$emit('finish')"></score-screen>
   </div>
 </template>
 
 <script>
 import { shuffle } from 'lodash'
 import '@formatjs/intl-durationformat/polyfill'
-import ButtonSubmit from '../form/ButtonSubmit.vue';
+import ButtonSubmit from '../form/ButtonSubmit.vue'
+import NameGameGuess from './NameGameGuess.vue'
+import ScoreScreen from './ScoreScreen.vue'
 
 export default {
   name: 'NameGameRound',
-  components: { ButtonSubmit },
+  components: { ButtonSubmit, NameGameGuess, ScoreScreen },
   props: {
     participants: { type: Array, required: true },
     gameMode: { type: String, required: true }
@@ -55,6 +57,11 @@ export default {
       score: 0,
     };
   },
+  computed: {
+    finished() {
+      return this.step >= this.participants.length
+    }
+  },
   mounted () {
     this.score = 0
     this.startTime = new Date()
@@ -62,11 +69,13 @@ export default {
   },
   methods: {
     updateTimer() {
-      const elapsed =
+      const elapsedSeconds = Math.round(((new Date()) - this.startTime) / 100) / 10
       this.elapsedTime = new Intl.DurationFormat('de-CH', { style: 'digital' }).format({
-        milliseconds: Math.round(((new Date()) - this.startTime) / 100) * 100
+        milliseconds: Math.floor((elapsedSeconds * 1000) % 1000),
+        seconds: Math.floor(elapsedSeconds) % 60,
+        minutes: Math.floor(elapsedSeconds / 60)
       })
-      requestAnimationFrame(this.updateTimer)
+      if (!this.finished) requestAnimationFrame(this.updateTimer)
     },
     correct() {
       this.shuffledParticipants[this.step].correct = true
diff --git a/resources/js/components/nameGame/ScoreScreen.vue b/resources/js/components/nameGame/ScoreScreen.vue
new file mode 100644
index 00000000..7455c768
--- /dev/null
+++ b/resources/js/components/nameGame/ScoreScreen.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <strong>{{ $t('t.views.name_game.well_done') }}</strong>
+
+    <button
+      type="submit"
+      class="btn btn-outline-primary mr-3 mb-1 w-100 h-25"
+      @click="$emit('finish')">
+      {{ $t('t.views.name_game.play_again') }}
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ScoreScreen',
+}
+</script>
+
+<style scoped>
+
+</style>

From a31d88490b0e715431f99eb937746c4d8e0a875d Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sat, 17 Feb 2024 19:31:55 +0100
Subject: [PATCH 03/14] Add link to game and changelog entry

---
 CHANGELOG.md                                   |  3 +++
 app/Http/Controllers/ParticipantController.php |  2 --
 lang/de/t.php                                  |  1 +
 resources/js/components/nameGame/NameGame.vue  | 15 +++++++++++++--
 resources/views/participants.blade.php         |  7 ++++++-
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb3cb45b..28799224 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+##### Februar 2024
+- Qualix enthält neu ein Namenslernspiel! Auf der TN-Liste hat es einen Link zum Spiel.
+
 ##### Januar 2024
 - Aus technischen und praktischen Gründen wurde die Anzahl relevante Anforderungen in einer Rückmeldung auf maximal 40 limitiert. Auslöser war, dass die Übersichtstabelle sonst technisch wie auch visuell nicht mehr sinnvoll angezeigt werden konnte. Auch fachlich gesehen ist das Konzept der Rückmeldungen in Qualix nicht darauf ausgelegt, sehr viele eingebettete Anforderungen zu enthalten, da Übersichtlichkeit, Fördergedanke, Überprüfbarkeit, zweite Chancen, Zweitausbildung etc. alle darunter leiden. Dies sehen wir in folgenden Textstellen der RQF-Broschüre bestätigt, welche klar machen dass mit jeder einzelnen Mindestanforderung der Zeitaufwand für das Kursteam wie auch für die TN markant ansteigt:
   > [Es] muss beachtet werden, dass zu jeder Mindestanforderung auch ein Beobachtungsmoment gehört, bei dem die TN zeigen können, was sie gelernt haben und das Kursteam ebendies wahrnehmen kann.[^1]
diff --git a/app/Http/Controllers/ParticipantController.php b/app/Http/Controllers/ParticipantController.php
index 8c41f0b3..b0f121da 100644
--- a/app/Http/Controllers/ParticipantController.php
+++ b/app/Http/Controllers/ParticipantController.php
@@ -64,7 +64,6 @@ public function upload(Request $request, Course $course) {
             $request->session()->now('alert-warning', trans('t.views.admin.participant_import.warning_existing_participants'));
         }
 
-
         $MiDataParticipantListLink = (new HtmlString)
             ->s('<a href="https://db.scout.ch/" target="_blank">')
             ->__('t.views.admin.participant_import.MiData.name')
@@ -81,7 +80,6 @@ public function upload(Request $request, Course $course) {
      * @throws ValidationException if parsing the uploaded file fails
      */
     public function import(ParticipantImportRequest $request, Course $course) {
-
         $request->validated();
         try {
             $imported = $request->getImporter()->import($request->file('file')->getRealPath(), $course);
diff --git a/lang/de/t.php b/lang/de/t.php
index 933f4b5f..266566af 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -555,6 +555,7 @@
 			"correct" => "Richtig!",
 			"name_game" => "Name Game",
 			"next" => "Weiter",
+			"no_image" => "kein Bild",
 			"page_title" => "Name Game",
 			"participants" => "TN",
 			"play_again" => "Nochmals",
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
index 7544f450..4d52e3b9 100644
--- a/resources/js/components/nameGame/NameGame.vue
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -9,7 +9,7 @@
           name="selectedParticipants"
           v-model="selectedParticipantIds"
           multiple
-          :options="participants"
+          :options="participantsWithImage"
           :display-field="anyDuplicateMembershipGroups ? 'name_and_group' : 'scout_name'"
           required
           :groups="{[$t('t.views.name_game.select_all')]: participants.map(p => p.id).join()}"
@@ -44,12 +44,23 @@ export default {
   },
   data() {
     return {
-      selectedParticipants: this.participants,
+      selectedParticipants: this.participants.filter(participant => participant.image_url),
       playing: false,
       gameMode: 'multipleChoice',
     }
   },
   computed: {
+    participantsWithImage() {
+      return this.participants.map(participant => {
+        if (participant.image_url) {
+          return participant
+        }
+        return {
+          ...participant,
+          scout_name: participant.scout_name + ' (' + this.$tc('t.views.name_game.no_image') + ')'
+        }
+      })
+    },
     selectedParticipantIds: {
       get () {
         return this.selectedParticipants.map(participant => participant.id).join(',')
diff --git a/resources/views/participants.blade.php b/resources/views/participants.blade.php
index be4dd981..62d7f132 100644
--- a/resources/views/participants.blade.php
+++ b/resources/views/participants.blade.php
@@ -5,7 +5,12 @@
 @section('content')
 
     <b-card>
-        <template #header>{{__('t.views.participants.title')}}</template>
+        <template #header>
+            <div class="d-flex justify-content-between">
+                {{__('t.views.participants.title')}}
+                <a href="{{ route('nameGame', [ 'course' => $course->id ]) }}">Namen lernen</a>
+            </div>
+        </template>
 
         @if (count($course->participants))
 

From e8c73c949c2741126e57294e345524905f70e712 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sat, 17 Feb 2024 20:14:01 +0100
Subject: [PATCH 04/14] Add harder game mode

---
 lang/de/t.php                                 |  5 ++++
 resources/js/components/form/InputText.vue    |  8 ++++-
 .../js/components/nameGame/AnswerInput.vue    | 19 ++++++++++--
 resources/js/components/nameGame/NameGame.vue |  8 +++++
 .../js/components/nameGame/NameGameGuess.vue  | 29 +++++++++++++++----
 5 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/lang/de/t.php b/lang/de/t.php
index 266566af..47d35317 100644
--- a/lang/de/t.php
+++ b/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?",
diff --git a/resources/js/components/form/InputText.vue b/resources/js/components/form/InputText.vue
index cfc99017..a8b4ca0e 100644
--- a/resources/js/components/form/InputText.vue
+++ b/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>
diff --git a/resources/js/components/nameGame/AnswerInput.vue b/resources/js/components/nameGame/AnswerInput.vue
index 34647eb4..8df45622 100644
--- a/resources/js/components/nameGame/AnswerInput.vue
+++ b/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>
 
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
index 4d52e3b9..a31e20c8 100644
--- a/resources/js/components/nameGame/NameGame.vue
+++ b/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>
diff --git a/resources/js/components/nameGame/NameGameGuess.vue b/resources/js/components/nameGame/NameGameGuess.vue
index 228710b2..1062e236 100644
--- a/resources/js/components/nameGame/NameGameGuess.vue
+++ b/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,13 +53,15 @@ 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 {
@@ -66,10 +69,26 @@ export default {
         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, '')
     }
   }
 }

From f3671b7046245375f5206b5e7b6df2ea0d579793 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sat, 17 Feb 2024 20:24:05 +0100
Subject: [PATCH 05/14] Complete changelog

---
 CHANGELOG.md                                  | 2 +-
 resources/js/components/nameGame/NameGame.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28799224..86152692 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # Changelog
 
 ##### Februar 2024
-- Qualix enthält neu ein Namenslernspiel! Auf der TN-Liste hat es einen Link zum Spiel.
+- Qualix enthält neu ein Namenslernspiel! Auf der TN-Liste hat es einen Link zum Spiel [#332](https://github.com/gloggi/qualix/pull/332)
 
 ##### Januar 2024
 - Aus technischen und praktischen Gründen wurde die Anzahl relevante Anforderungen in einer Rückmeldung auf maximal 40 limitiert. Auslöser war, dass die Übersichtstabelle sonst technisch wie auch visuell nicht mehr sinnvoll angezeigt werden konnte. Auch fachlich gesehen ist das Konzept der Rückmeldungen in Qualix nicht darauf ausgelegt, sehr viele eingebettete Anforderungen zu enthalten, da Übersichtlichkeit, Fördergedanke, Überprüfbarkeit, zweite Chancen, Zweitausbildung etc. alle darunter leiden. Dies sehen wir in folgenden Textstellen der RQF-Broschüre bestätigt, welche klar machen dass mit jeder einzelnen Mindestanforderung der Zeitaufwand für das Kursteam wie auch für die TN markant ansteigt:
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
index a31e20c8..23fffba8 100644
--- a/resources/js/components/nameGame/NameGame.vue
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -21,6 +21,7 @@
           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
+          :allow-empty="false"
         ></input-multi-select>
 
         <button-submit :label="$t('t.views.name_game.start')"></button-submit>

From 62b5eb11457db742460b96c05465312fab17e3bb Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sun, 18 Feb 2024 13:24:27 +0100
Subject: [PATCH 06/14] Visualize correct and wrong in progress bar

---
 .../js/components/nameGame/NameGameRound.vue  | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/nameGame/NameGameRound.vue b/resources/js/components/nameGame/NameGameRound.vue
index bd840a9a..e6781e9e 100644
--- a/resources/js/components/nameGame/NameGameRound.vue
+++ b/resources/js/components/nameGame/NameGameRound.vue
@@ -18,8 +18,10 @@
         </div>
       </div>
     </div>
-    <b-progress :max="participants.length" class="mb-3 mt-1">
-      <b-progress-bar :value="step" variant="info">{{ step }} / {{ participants.length }}</b-progress-bar>
+    <b-progress class="position-relative mb-3 mt-1" :max="participants.length" >
+      <span class="justify-content-center align-self-center d-flex position-absolute w-100"><strong class="ml-1"> {{ step }} / {{ participants.length }}</strong></span>
+      <b-progress-bar :value="this.numCorrect" variant="info"></b-progress-bar>
+      <b-progress-bar :value="this.numIncorrect" variant="danger"></b-progress-bar>
     </b-progress>
     <name-game-guess
       v-if="step < shuffledParticipants.length"
@@ -35,11 +37,12 @@
 </template>
 
 <script>
-import { shuffle } from 'lodash'
+import { cloneDeep, shuffle } from 'lodash';
 import '@formatjs/intl-durationformat/polyfill'
 import ButtonSubmit from '../form/ButtonSubmit.vue'
 import NameGameGuess from './NameGameGuess.vue'
 import ScoreScreen from './ScoreScreen.vue'
+import Vue from 'vue';
 
 export default {
   name: 'NameGameRound',
@@ -60,11 +63,16 @@ export default {
   computed: {
     finished() {
       return this.step >= this.participants.length
-    }
+    },
+    numCorrect() {
+      return this.shuffledParticipants.filter(participant => participant.correct === true).length
+    },
+    numIncorrect() {
+      return this.shuffledParticipants.filter(participant => participant.correct === false).length
+    },
   },
   mounted () {
-    this.score = 0
-    this.startTime = new Date()
+    this.start()
     this.updateTimer()
   },
   methods: {
@@ -78,13 +86,20 @@ export default {
       if (!this.finished) requestAnimationFrame(this.updateTimer)
     },
     correct() {
-      this.shuffledParticipants[this.step].correct = true
+      Vue.set(this.shuffledParticipants[this.step], 'correct', true)
       this.score += 10
     },
     incorrect() {
-      this.shuffledParticipants[this.step].correct = false
+      Vue.set(this.shuffledParticipants[this.step], 'correct', false)
     },
-  }
+    start() {
+      this.shuffledParticipants = shuffle(this.participants.map(cloneDeep))
+      this.step = 0
+      this.startTime = new Date()
+      this.elapsedTime = ''
+      this.score = 0
+    },
+  },
 };
 </script>
 

From 64d9512b28f0d1adddc214c1d25647886d33748e Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Mon, 19 Feb 2024 11:36:24 +0100
Subject: [PATCH 07/14] Add skip button label

---
 lang/de/t.php                                    |  1 +
 resources/js/components/nameGame/AnswerInput.vue | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/lang/de/t.php b/lang/de/t.php
index 47d35317..03c28f1c 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -564,6 +564,7 @@
 			"play_again" => "Nochmals",
 			"scout_name" => "Name",
 			"select_all" => "Alle auswählen",
+			"skip" => "Weiss nicht",
 			"start" => "Los geht's",
 			"submit" => "Abschicken",
 			"this_is" => "Das ist:",
diff --git a/resources/js/components/nameGame/AnswerInput.vue b/resources/js/components/nameGame/AnswerInput.vue
index 8df45622..17592c8e 100644
--- a/resources/js/components/nameGame/AnswerInput.vue
+++ b/resources/js/components/nameGame/AnswerInput.vue
@@ -10,11 +10,11 @@
     </button>
   </div>
   <div v-else>
-    <input-text :label="$t('t.views.name_game.scout_name')" name="scout_name" ref="scoutName"></input-text>
+    <input-text v-model="manualInput" :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') }}
+      {{ buttonLabel }}
     </button>
   </div>
 </template>
@@ -31,6 +31,9 @@ export default {
     participants: { type: Array, required: true },
     gameMode: { type: String, required: true },
   },
+  data: () => ({
+    manualInput: '',
+  }),
   computed: {
     wrongGuess1() {
       let result = this.participant
@@ -53,9 +56,16 @@ export default {
       options.sort((a, b) => a.scout_name.localeCompare(b.scout_name))
       return options
     },
+    buttonLabel() {
+      if (this.manualInput.length) {
+        return this.$t('t.views.name_game.submit')
+      }
+      return this.$t('t.views.name_game.skip')
+    },
   },
   mounted() {
     if (this.gameMode === 'manualNameInput' && this.$refs.scoutName) {
+      this.manualInput = ''
       this.$refs.scoutName.focus()
     }
   },

From 443e5922ff69cf7d7e7d03a8893a3872952dbe43 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Mon, 19 Feb 2024 11:43:25 +0100
Subject: [PATCH 08/14] Require a minimum number of names

---
 lang/de/t.php                                 | 1 +
 resources/js/components/nameGame/NameGame.vue | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/lang/de/t.php b/lang/de/t.php
index 03c28f1c..fae33b91 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -568,6 +568,7 @@
 			"start" => "Los geht's",
 			"submit" => "Abschicken",
 			"this_is" => "Das ist:",
+			"too_few_participants" => "Wähle mindestens 3 TN aus",
 			"well_done" => "Super gemacht!",
 			"who_is_this" => "Wer ist das?",
 			"you_guessed" => "Deine Antwort:",
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
index 23fffba8..34efe446 100644
--- a/resources/js/components/nameGame/NameGame.vue
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -24,7 +24,7 @@
           :allow-empty="false"
         ></input-multi-select>
 
-        <button-submit :label="$t('t.views.name_game.start')"></button-submit>
+        <button-submit :label="tooFewParticipantsSelected ? $t('t.views.name_game.too_few_participants') : $t('t.views.name_game.start')" :disabled="tooFewParticipantsSelected"></button-submit>
 
       </form>
 
@@ -86,6 +86,9 @@ export default {
         )
       )
     },
+    tooFewParticipantsSelected() {
+      return this.selectedParticipants.length < 3
+    }
   }
 }
 </script>

From ddf6007041784124293079437473d80dc1d37307 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sun, 25 Feb 2024 17:45:36 +0100
Subject: [PATCH 09/14] Clarify message on progress bar

---
 lang/de/t.php                                      | 1 +
 resources/js/components/nameGame/NameGameRound.vue | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lang/de/t.php b/lang/de/t.php
index fae33b91..c2c784b5 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -559,6 +559,7 @@
 			"name_game" => "Name Game",
 			"next" => "Weiter",
 			"no_image" => "kein Bild",
+			"num_correct_and_incorrect" => ":correct richtig, :incorrect falsch von :total",
 			"page_title" => "Name Game",
 			"participants" => "TN",
 			"play_again" => "Nochmals",
diff --git a/resources/js/components/nameGame/NameGameRound.vue b/resources/js/components/nameGame/NameGameRound.vue
index e6781e9e..0fb151af 100644
--- a/resources/js/components/nameGame/NameGameRound.vue
+++ b/resources/js/components/nameGame/NameGameRound.vue
@@ -19,9 +19,9 @@
       </div>
     </div>
     <b-progress class="position-relative mb-3 mt-1" :max="participants.length" >
-      <span class="justify-content-center align-self-center d-flex position-absolute w-100"><strong class="ml-1"> {{ step }} / {{ participants.length }}</strong></span>
-      <b-progress-bar :value="this.numCorrect" variant="info"></b-progress-bar>
-      <b-progress-bar :value="this.numIncorrect" variant="danger"></b-progress-bar>
+      <span class="justify-content-center align-self-center d-flex position-absolute w-100"><strong class="ml-1"> {{ $t('t.views.name_game.num_correct_and_incorrect', { correct: numCorrect, incorrect: numIncorrect, total: participants.length }) }}</strong></span>
+      <b-progress-bar :value="numCorrect" variant="info"></b-progress-bar>
+      <b-progress-bar :value="numIncorrect" variant="danger"></b-progress-bar>
     </b-progress>
     <name-game-guess
       v-if="step < shuffledParticipants.length"

From b771217aa42db74b456ad70df8a07bb3bc47e06a Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sun, 25 Feb 2024 19:40:55 +0100
Subject: [PATCH 10/14] Fix mobile view

---
 resources/js/components/nameGame/GuessPrompt.vue   | 2 +-
 resources/js/components/nameGame/NameGameRound.vue | 2 +-
 resources/sass/app.scss                            | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/nameGame/GuessPrompt.vue b/resources/js/components/nameGame/GuessPrompt.vue
index 59aea510..0c77b727 100644
--- a/resources/js/components/nameGame/GuessPrompt.vue
+++ b/resources/js/components/nameGame/GuessPrompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <row-text v-if="image">
+  <row-text v-if="image" :narrow-form="true">
     <div class="square-container name-game-image">
       <img class="card-img-top img img-responsive full-width" :src="participant.image_path" :alt="$t('t.views.name_game.who_is_this')">
     </div>
diff --git a/resources/js/components/nameGame/NameGameRound.vue b/resources/js/components/nameGame/NameGameRound.vue
index 0fb151af..c305296e 100644
--- a/resources/js/components/nameGame/NameGameRound.vue
+++ b/resources/js/components/nameGame/NameGameRound.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-25 w-md-50 w-sm-100 m-auto">
+  <div class="w-100 w-md-50 m-auto">
     <div class="d-flex justify-content-between">
       <div class="d-flex">
         <div class="hc fc-30-90-150-255 s e wc">
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 7f1d0aa2..2e4734ac 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -197,4 +197,5 @@
 
 .name-game-image {
     max-width: 15rem;
+    margin: 0 auto;
 }

From 9f2060642133fc03402cc1848329a028d2b64b10 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sun, 25 Feb 2024 20:02:03 +0100
Subject: [PATCH 11/14] Add more score info and allow focus practice

---
 lang/de/t.php                                 |  2 ++
 resources/js/components/nameGame/NameGame.vue | 10 +++++++-
 .../js/components/nameGame/NameGameRound.vue  |  2 +-
 .../js/components/nameGame/ScoreScreen.vue    | 25 ++++++++++++++++++-
 resources/sass/app.scss                       |  4 +++
 5 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/lang/de/t.php b/lang/de/t.php
index c2c784b5..0b3bc5f6 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -563,6 +563,7 @@
 			"page_title" => "Name Game",
 			"participants" => "TN",
 			"play_again" => "Nochmals",
+			"practice_wrong_names" => "Falsch geratene Namen üben",
 			"scout_name" => "Name",
 			"select_all" => "Alle auswählen",
 			"skip" => "Weiss nicht",
@@ -572,6 +573,7 @@
 			"too_few_participants" => "Wähle mindestens 3 TN aus",
 			"well_done" => "Super gemacht!",
 			"who_is_this" => "Wer ist das?",
+			"wrong_guesses" => "Folgende Namen hast du falsch geraten:",
 			"you_guessed" => "Deine Antwort:",
 		),
 		"observations" => array(
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
index 34efe446..34057242 100644
--- a/resources/js/components/nameGame/NameGame.vue
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -33,7 +33,7 @@
       <name-game-round
         :participants="selectedParticipants"
         :game-mode="gameMode"
-        @finish="playing = false"
+        @finish="finishRound"
       ></name-game-round>
     </template>
   </div>
@@ -89,6 +89,14 @@ export default {
     tooFewParticipantsSelected() {
       return this.selectedParticipants.length < 3
     }
+  },
+  methods: {
+    finishRound(selectParticipants = []) {
+      this.playing = false
+      if (selectParticipants && selectParticipants.length) {
+        this.selectedParticipantIds = selectParticipants.join(',')
+      }
+    }
   }
 }
 </script>
diff --git a/resources/js/components/nameGame/NameGameRound.vue b/resources/js/components/nameGame/NameGameRound.vue
index c305296e..816a0737 100644
--- a/resources/js/components/nameGame/NameGameRound.vue
+++ b/resources/js/components/nameGame/NameGameRound.vue
@@ -32,7 +32,7 @@
       @incorrect="incorrect"
       @advance="step += 1"
     ></name-game-guess>
-    <score-screen v-else :participants="shuffledParticipants" @finish="$emit('finish')"></score-screen>
+    <score-screen v-else :participants="shuffledParticipants" @finish="(...args) => this.$emit('finish', ...args)"></score-screen>
   </div>
 </template>
 
diff --git a/resources/js/components/nameGame/ScoreScreen.vue b/resources/js/components/nameGame/ScoreScreen.vue
index 7455c768..2cf670c4 100644
--- a/resources/js/components/nameGame/ScoreScreen.vue
+++ b/resources/js/components/nameGame/ScoreScreen.vue
@@ -1,7 +1,22 @@
 <template>
   <div>
-    <strong>{{ $t('t.views.name_game.well_done') }}</strong>
+    <strong v-if="wronglyGuessed.length < participants.length">{{ $t('t.views.name_game.well_done') }}</strong>
 
+    <p v-if="wronglyGuessed.length">{{ $t('t.views.name_game.wrong_guesses') }}</p>
+    <div v-for="participant in wronglyGuessed" :key="participant.id" class="d-flex flex-row align-items-center gap-1rem mb-2">
+      <div class="square-container w-25">
+        <img class="card-img-top img img-responsive full-width" :src="participant.image_path" :alt="participant.scout_name">
+      </div>
+      <div>{{ participant.scout_name }}</div>
+    </div>
+
+    <button
+      v-if="wronglyGuessed.length && wronglyGuessed.length < participants.length"
+      type="submit"
+      class="btn btn-outline-primary mr-3 mb-1 w-100 h-25"
+      @click="$emit('finish', wronglyGuessed.map(p => p.id))">
+      {{ $t('t.views.name_game.practice_wrong_names') }}
+    </button>
     <button
       type="submit"
       class="btn btn-outline-primary mr-3 mb-1 w-100 h-25"
@@ -15,6 +30,14 @@
 
 export default {
   name: 'ScoreScreen',
+  props: {
+    participants: { type: Array, default: [] },
+  },
+  computed: {
+    wronglyGuessed() {
+      return this.participants.filter(participant => participant.correct === false)
+    }
+  }
 }
 </script>
 
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 2e4734ac..778166dc 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -184,6 +184,10 @@
     min-height: 1em;
 }
 
+.gap-1rem {
+    gap: 1rem !important;
+}
+
 .clear-both {
     clear: both;
 }

From 937e53149282866382dfc030c2b80a70fbaf306a Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sun, 25 Feb 2024 20:53:26 +0100
Subject: [PATCH 12/14] Allow to learn equipe names as well

---
 lang/de/t.php                                 |  7 +++-
 resources/js/components/nameGame/NameGame.vue | 41 ++++++++++++++-----
 resources/views/nameGame/index.blade.php      |  2 +-
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/lang/de/t.php b/lang/de/t.php
index 0b3bc5f6..a96ce6f2 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -561,16 +561,19 @@
 			"no_image" => "kein Bild",
 			"num_correct_and_incorrect" => ":correct richtig, :incorrect falsch von :total",
 			"page_title" => "Name Game",
-			"participants" => "TN",
+			"participants" => "Namen",
 			"play_again" => "Nochmals",
 			"practice_wrong_names" => "Falsch geratene Namen üben",
 			"scout_name" => "Name",
 			"select_all" => "Alle auswählen",
+			"select_all_equipe_members" => "Equipe auswählen",
+			"select_all_participants" => "Alle TN auswählen",
+			"select_all_participants_with_image" => "Alle TN mit Bild auswählen",
 			"skip" => "Weiss nicht",
 			"start" => "Los geht's",
 			"submit" => "Abschicken",
 			"this_is" => "Das ist:",
-			"too_few_participants" => "Wähle mindestens 3 TN aus",
+			"too_few_participants" => "Wähle mindestens 3 Personen aus",
 			"well_done" => "Super gemacht!",
 			"who_is_this" => "Wer ist das?",
 			"wrong_guesses" => "Folgende Namen hast du falsch geraten:",
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
index 34057242..55f444d7 100644
--- a/resources/js/components/nameGame/NameGame.vue
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -9,10 +9,10 @@
           name="selectedParticipants"
           v-model="selectedParticipantIds"
           multiple
-          :options="participantsWithImage"
+          :options="candidatesWithImage"
           :display-field="anyDuplicateMembershipGroups ? 'name_and_group' : 'scout_name'"
           required
-          :groups="{[$t('t.views.name_game.select_all')]: participants.map(p => p.id).join()}"
+          :groups="groups"
         ></input-multi-select>
 
         <input-multi-select
@@ -49,7 +49,7 @@ export default {
   components: { InputMultiSelect, ButtonSubmit },
   props: {
     participants: { type: Array, required: true },
-    participantGroups: { type: Array, default: () => [] },
+    teamMembers: { type: Array, default: [] },
   },
   data() {
     return {
@@ -59,14 +59,25 @@ export default {
     }
   },
   computed: {
-    participantsWithImage() {
-      return this.participants.map(participant => {
-        if (participant.image_url) {
-          return participant
+    maxParticipantId() {
+      return Math.max(...this.participants.map(p => p.id))
+    },
+    candidates() {
+      return this.participants.concat(this.teamMembers.map(teamMember => ({
+        ...teamMember,
+        id: this.maxParticipantId + teamMember.id,
+        scout_name: teamMember.name,
+      })))
+    },
+    candidatesWithImage() {
+      return this.candidates.map(candidate => {
+        if (candidate.image_url) {
+          return { ...candidate, id: '' + candidate.id }
         }
         return {
-          ...participant,
-          scout_name: participant.scout_name + ' (' + this.$tc('t.views.name_game.no_image') + ')'
+          ...candidate,
+          id: '' + candidate.id,
+          scout_name: candidate.scout_name + ' (' + this.$tc('t.views.name_game.no_image') + ')',
         }
       })
     },
@@ -76,7 +87,7 @@ export default {
       },
       set (newValue) {
         const ids = newValue.split(',')
-        this.selectedParticipants = this.participants.filter(p => ids.includes(p.id.toString()))
+        this.selectedParticipants = this.candidates.filter(p => ids.includes(p.id.toString()))
       }
     },
     anyDuplicateMembershipGroups() {
@@ -88,7 +99,15 @@ export default {
     },
     tooFewParticipantsSelected() {
       return this.selectedParticipants.length < 3
-    }
+    },
+    groups() {
+      return {
+        [this.$t('t.views.name_game.select_all_participants')]: this.participants.map(p => p.id).join(),
+        [this.$t('t.views.name_game.select_all_participants_with_image')]: this.participants.filter(p => p.image_url).map(p => p.id).join(),
+        [this.$t('t.views.name_game.select_all_equipe_members')]: this.teamMembers.map(p => this.maxParticipantId + p.id).join(),
+        [this.$t('t.views.name_game.select_all')]: this.candidates.map(p => p.id).join(),
+      }
+    },
   },
   methods: {
     finishRound(selectParticipants = []) {
diff --git a/resources/views/nameGame/index.blade.php b/resources/views/nameGame/index.blade.php
index 44af476e..37d337d9 100644
--- a/resources/views/nameGame/index.blade.php
+++ b/resources/views/nameGame/index.blade.php
@@ -9,7 +9,7 @@
 
             <name-game
                 :participants="{{ json_encode($course->participants) }}"
-                :participant-groups="{{ json_encode($course->participantGroups) }}"
+                :team-members="{{ json_encode($course->users) }}"
             ></name-game>
 
     </b-card>

From da6ccc33187c57e1286d32d0c4816360b97b672a Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sun, 25 Feb 2024 20:56:44 +0100
Subject: [PATCH 13/14] Add exit link

---
 lang/de/t.php                            | 2 ++
 resources/views/nameGame/index.blade.php | 8 +++++++-
 resources/views/participants.blade.php   | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/lang/de/t.php b/lang/de/t.php
index a96ce6f2..0bbbccac 100644
--- a/lang/de/t.php
+++ b/lang/de/t.php
@@ -552,6 +552,7 @@
 			"via_midata" => "Via PBS MiData einloggen",
 		),
 		"name_game" => array(
+			"abort" => "Zurück zu den TN",
 			"correct" => "Richtig!",
 			"game_mode" => "Schwierigkeit",
 			"manual_name_input" => "Schwierig (Namen eintippen)",
@@ -601,6 +602,7 @@
 		"participants" => array(
 			"here" => "hier",
 			"menu_name" => "TN",
+			"name_game" => "Namen lernen",
 			"no_participants" => "Bisher sind keine Teilnehmende erfasst. Bitte erfasse sie :here.",
 			"page_title" => "TN-Überblick",
 			"title" => "Beobachtung für TN erfassen",
diff --git a/resources/views/nameGame/index.blade.php b/resources/views/nameGame/index.blade.php
index 37d337d9..8e77f81d 100644
--- a/resources/views/nameGame/index.blade.php
+++ b/resources/views/nameGame/index.blade.php
@@ -5,7 +5,13 @@
 @section('content')
 
     <b-card>
-        <template #header>{{__('t.views.name_game.name_game')}}</template>
+        <template #header>
+            <div class="d-flex justify-content-between">
+                {{__('t.views.name_game.name_game')}}
+                <a href="{{ route('participants', [ 'course' => $course->id ]) }}">{{ __('t.views.name_game.abort') }}</a>
+            </div>
+
+        </template>
 
             <name-game
                 :participants="{{ json_encode($course->participants) }}"
diff --git a/resources/views/participants.blade.php b/resources/views/participants.blade.php
index 62d7f132..d87dbfce 100644
--- a/resources/views/participants.blade.php
+++ b/resources/views/participants.blade.php
@@ -8,7 +8,7 @@
         <template #header>
             <div class="d-flex justify-content-between">
                 {{__('t.views.participants.title')}}
-                <a href="{{ route('nameGame', [ 'course' => $course->id ]) }}">Namen lernen</a>
+                <a href="{{ route('nameGame', [ 'course' => $course->id ]) }}">{{__('t.views.participants.name_game')}}</a>
             </div>
         </template>
 

From 9711bd82a6b9cd7df43de864c4c91f9c5cf5f825 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Sun, 25 Feb 2024 21:18:40 +0100
Subject: [PATCH 14/14] Add simple e2e test for name game

---
 cypress/e2e/name-game.cy.js                   | 78 +++++++++++++++++++
 resources/js/components/nameGame/NameGame.vue |  2 +
 2 files changed, 80 insertions(+)
 create mode 100644 cypress/e2e/name-game.cy.js

diff --git a/cypress/e2e/name-game.cy.js b/cypress/e2e/name-game.cy.js
new file mode 100644
index 00000000..14227e70
--- /dev/null
+++ b/cypress/e2e/name-game.cy.js
@@ -0,0 +1,78 @@
+import { useDatabaseResets } from "../support/databaseTransactions"
+
+describe('name game', () => {
+  useDatabaseResets()
+
+  beforeEach(() => {
+    cy.then(() => {
+      cy.login().then(user => {
+        cy.artisan('e2e:scenario', { '--user-id': user.id })
+      })
+    })
+    cy.courseId()
+  })
+
+  it('plays through the easy version of the name game', function () {
+    cy.visit(`/course/${this.courseId}/participants`)
+
+    cy.contains('Namen lernen').click()
+
+    cy.contains('Name Game')
+
+    cy.get('#participants').click()
+    cy.get('#participants .multiselect__option').first().click()
+    cy.get('#participants .multiselect__option').eq(2).click()
+    cy.get('#participants .multiselect__option').eq(3).click()
+
+    // Click outside the multiselect to close the dropdown menu
+    cy.get('.card-body').click('right')
+
+    cy.contains('Los geht\'s').click()
+
+    cy.contains('Zeit:')
+
+    for (let i = 0; i < 3; i++) {
+      // 3 participants with 2 clicks each
+      cy.get('.name-game button[type=submit]').first().click()
+      cy.get('.name-game button[type=submit]').first().click()
+    }
+
+    cy.contains('Nochmals').click()
+
+    cy.contains('Los geht\'s')
+  })
+
+  it('plays through the hard version of the name game', function () {
+    cy.visit(`/course/${this.courseId}/participants`)
+
+    cy.contains('Namen lernen').click()
+
+    cy.contains('Name Game')
+
+    cy.get('#participants').click()
+    cy.get('#participants .multiselect__option').first().click()
+    cy.get('#participants .multiselect__option').eq(2).click()
+    cy.get('#participants .multiselect__option').eq(3).click()
+
+    // Click outside the multiselect to close the dropdown menu
+    cy.get('.card-body').click('right')
+
+    cy.get('#gameMode').click()
+    cy.contains('Schwierig (Namen eintippen)').click()
+
+    cy.contains('Los geht\'s').click()
+
+    cy.contains('Zeit:')
+
+    for (let i = 0; i < 3; i++) {
+      // 3 participants with 2 clicks each
+      cy.get('.name-game button[type=submit]').first().click()
+      cy.get('.name-game button[type=submit]').first().click()
+    }
+
+    cy.contains('Nochmals').click()
+
+    cy.contains('Los geht\'s')
+    cy.contains('Einfach (multiple choice)').should('not.be.visible')
+  })
+})
diff --git a/resources/js/components/nameGame/NameGame.vue b/resources/js/components/nameGame/NameGame.vue
index 55f444d7..5a797cc6 100644
--- a/resources/js/components/nameGame/NameGame.vue
+++ b/resources/js/components/nameGame/NameGame.vue
@@ -7,6 +7,7 @@
         <input-multi-select
           :label="$t('t.views.name_game.participants')"
           name="selectedParticipants"
+          id="participants"
           v-model="selectedParticipantIds"
           multiple
           :options="candidatesWithImage"
@@ -18,6 +19,7 @@
         <input-multi-select
           :label="$t('t.views.name_game.game_mode')"
           name="gameMode"
+          id="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