Working version of the name game

gloggi · Feb 17, 2024 · cd8f7a5 · cd8f7a5
1 parent 6985f60
commit cd8f7a5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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,18 +57,25 @@ export default {
       score: 0,
     };
   },
+  computed: {
+    finished() {
+      return this.step >= this.participants.length
+    }
+  },
   mounted () {
     this.score = 0
     this.startTime = new Date()
     this.updateTimer()
   },
   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
@@ -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>