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] 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');
     });