feat: StreamerMode (#167)

* feat: StreamerMode * fix: add test * fix: menu smartphone * feat: add label * fix: km format * snapshot * fix: linter issues * fix: timer * fix: timer
GeoGuess · May 2, 2021 · 8b2a0bd · 8b2a0bd
1 parent 8e8dd92
commit 8b2a0bd
Show file tree

Hide file tree

Showing 22 changed files with 351 additions and 310 deletions.
diff --git a/src/components/HeaderGame.vue b/src/components/HeaderGame.vue
@@ -1,15 +1,21 @@
 <template>
     <div>
         <v-app-bar class="header-game" color="grey darken-4">
-            <div
-                v-if="remainingTime != null && remainingTime > 0"
-                id="countdown-timer"
-            >
+            <div v-if="remainingTime != null && remainingTime > 0">
                 <span id="countdown-text">{{ countdownText }}</span>
             </div>
-            <div v-if="roomName" class="round-score-container room-name">
+
+            <div v-else>
+                <span id="countdown-text">{{ timerText }}</span>
+            </div>
+            <div
+                v-if="roomName && !streamerMode"
+                class="round-score-container room-name"
+            >
                 <span class="sub-text">{{ $t('HeaderGame.room') }} : </span>
-                <span class="main-text">{{ roomName }}</span>
+                <span class="main-text">
+                    {{ roomName }}
+                </span>
             </div>
             <div class="flex-grow-1" />
             <div class="round-score-container">
@@ -25,7 +31,7 @@
             </div>
             <div v-if="isDistanceVisible">
                 <span class="main-text">{{
-                    $t('HeaderGame.kmaway', { value: score / 1000 })
+                    $t('HeaderGame.kmaway', { value: new Intl.NumberFormat($i18n.locale).format(distance / 1000) })
                 }}</span>
             </div>
             <div class="round-points-container">
@@ -41,14 +47,59 @@
 <script>
 import { getCountdownText } from '@/utils';
 import { GAME_MODE } from '../constants';
+import { mapState } from 'vuex';
 export default {
-    props: ['score', 'points', 'round', 'remainingTime', 'roomName', 'nbRound'],
+    props: [
+        'distance',
+        'points',
+        'round',
+        'remainingTime',
+        'roomName',
+        'nbRound',
+    ],
+    data() {
+        return {
+            startedAt: null,
+            timerText: '',
+            intervalFunction: null,
+        };
+    },
+    watch: {
+        round: function () {
+            this.startTimer();
+        },
+    },
     computed: {
+        ...mapState({
+            streamerMode: (state) => state.homeStore.streamerMode,
+        }),
         countdownText() {
             return getCountdownText(this.remainingTime);
         },
         isDistanceVisible() {
-            return this.mode === GAME_MODE.CLASSIC;
+            return this.mode !== GAME_MODE.COUNTRY;
+        },
+    },
+    mounted() {
+        this.startTimer();
+    },
+    methods: {
+        startTimer() {
+            if (this.remainingTime != 0) {
+                return;
+            }
+            this.startedAt = new Date();
+
+            this.intervalFunction = setInterval(() => {
+                this.timerText = getCountdownText(
+                    Math.round((Date.now() - this.startedAt) / 1000)
+                );
+            }, 1000);
+        },
+        stopTimer() {
+            if (this.intervalFunction) {
+                clearInterval(this.intervalFunction);
+            }
         },
     },
 };
@@ -80,7 +131,10 @@ export default {
 .sub-text {
     color: #616161;
 }
-@media (max-width: 450px) {
+@media (max-width: 555px) {
+    .room-name {
+        display: none;
+    }
     .main-text,
     .sub-text,
     #countdown-text {
@@ -101,10 +155,4 @@ export default {
         }
     }
 }
-
-@media (max-width: 555px) {
-    .room-name {
-        display: none;
-    }
-}
 </style>
diff --git a/src/components/dialogroom/card/CardRoomName.vue b/src/components/dialogroom/card/CardRoomName.vue
@@ -8,6 +8,7 @@
                 <v-row>
                     <v-col cols="12">
                         <v-text-field
+                            :type="streamerMode ? 'password' : 'text'"
                             id="inputRoomName"
                             v-model="roomName"
                             maxlength="10"
@@ -21,27 +22,18 @@
         </v-card-text>
         <v-card-actions>
             <div class="flex-grow-1" />
-            <v-btn
-                dark
-                depressed
-                color="#FF5252"
-                @click="cancel"
-            >
+            <v-btn dark depressed color="#FF5252" @click="cancel">
                 {{ $t('cancel') }}
             </v-btn>
-            <v-btn
-                dark
-                depressed
-                color="#43B581"
-                @click="searchRoom"
-            >
+            <v-btn dark depressed color="#43B581" @click="searchRoom">
                 {{ $t('next') }}
             </v-btn>
         </v-card-actions>
     </v-card>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import CardRoomMixin from './mixins/CardRoomMixin';
 export default {
     mixins: [CardRoomMixin],
@@ -51,6 +43,11 @@ export default {
             roomName: '',
         };
     },
+    computed: {
+        ...mapState({
+            streamerMode: (state) => state.homeStore.streamerMode,
+        }),
+    },
     methods: {
         searchRoom() {
             // Pass room name to parent component

diff --git a/src/components/dialogroom/card/CardRoomPlayerName.vue b/src/components/dialogroom/card/CardRoomPlayerName.vue
@@ -1,20 +1,15 @@
 <template>
     <v-card id="card-playername">
         <v-card-title>
-            <span id="card-title">{{$t('CardRoomPlayerName.title')}} {{ roomName }}</span>
+            <span id="card-title">
+                {{ $t('CardRoomPlayerName.title') }}
+                <span :class="{ blur: streamerMode }">{{ roomName }}</span>
+            </span>
         </v-card-title>
 
-        <v-card-subtitle
-            ref="roomUrl"
-            class="pb-0"
-        >
-            {{ roomUrl }}
-            <v-icon
-                small
-                @click="copy"
-            >
-                mdi-content-copy
-            </v-icon>
+        <v-card-subtitle ref="roomUrl" class="pb-0">
+            <span :class="{ blur: streamerMode }">{{ roomUrl }}</span>
+            <v-icon small @click="copy"> mdi-content-copy </v-icon>
         </v-card-subtitle>
         <v-card-text>
             <v-container>
@@ -61,12 +56,7 @@
         </v-card-text>
         <v-card-actions>
             <div class="flex-grow-1" />
-            <v-btn
-                dark
-                depressed
-                color="#FF5252"
-                @click="cancel"
-            >
+            <v-btn dark depressed color="#FF5252" @click="cancel">
                 {{ $t('cancel') }}
             </v-btn>
             <v-btn
@@ -85,19 +75,20 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import CardRoomMixin from './mixins/CardRoomMixin';
 export default {
     mixins: [CardRoomMixin],
     props: {
-        'room': {
+        room: {
             type: Object,
             required: true,
-        }, 
-        'roomName': {
+        },
+        roomName: {
             type: String,
             required: true,
         },
-        'firstPlayer': {
+        firstPlayer: {
             type: Boolean,
             required: true,
         },
@@ -110,16 +101,19 @@ export default {
         };
     },
     computed: {
+        ...mapState({
+            streamerMode: (state) => state.homeStore.streamerMode,
+        }),
         roomUrl() {
             return window.origin + '/room/' + this.roomName;
         },
     },
     watch: {
         playerName(val) {
-            if(!this.players.includes(val)){
+            if (!this.players.includes(val)) {
                 this.invalidName = false;
                 this.$emit('setPlayerName', val);
-            }else{
+            } else {
                 this.invalidName = true;
             }
         },

diff --git a/src/components/dialogroom/card/CardRoomSettings.vue b/src/components/dialogroom/card/CardRoomSettings.vue
@@ -71,14 +71,20 @@
                                 "
                                 hide-details
                             />
-                            <v-select v-model="scoreMode" :items="scoreModes" />
+                            <br />
+                            <v-select  
+                                v-if="this.mode !== gameMode.COUNTRY"
+                                :label="$t('CardRoomSettings.scoreModeLabel')"
+                                v-model="scoreMode" 
+                                :items="scoreModes" 
+                            />
                         </div>
                         <div>
                             <v-text-field
                                 v-if="!singlePlayer"
+                                :label="$t('CardRoomSettings.countDownLabel')"
                                 v-model="countdown"
                                 hide-details
-                                label="CountDown (seconds)"
                                 type="number"
                             />
                             <div
@@ -123,7 +129,6 @@
                             </div>
                         </div>
                     </v-row>
-                    <v-row align="center" />
                 </v-col>
                 <v-col
                     :class="{
@@ -196,7 +201,7 @@ export default {
         scoreModes() {
             return Object.values(SCORE_MODE).map((a) => ({
                 value: a,
-                text: a,
+                text: this.$t('CardRoomSettings.scoreModes.'+a),
             }));
         },
         gameMode() {
@@ -251,8 +256,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.settings .row {
-    margin-bottom: 2.5rem;
+.settings .row{
+    margin-bottom: 1.5rem;
+    .v-select{
+        width: 15.5rem;
+    }
 }
 
 .v-card__actions .v-btn {

diff --git a/src/components/history/gameResult/HistoryMapClassic.vue b/src/components/history/gameResult/HistoryMapClassic.vue
@@ -16,9 +16,11 @@
                 />
                 <GmapInfoWindow :options="infoOptions" :position="r.guess">
                     <p>
-                        <b>{{ $t('Maps.infoWindow.Distance') }} : </b
-                        >{{ r.distance / 1000 }} km <br /><b
-                        >{{ $t('Maps.infoWindow.Points') }}
+                        <b>{{ $t('Maps.infoWindow.Distance') }} : </b>
+                        {{ new Intl.NumberFormat($i18n.locale, { style: "unit", unit:"kilometer" }).format(r.distance / 1000)  }} 
+                        <br />
+                        <b>
+                            {{ $t('Maps.infoWindow.Points') }}
                             :
                         </b>
                         {{ r.points }}
@@ -66,9 +68,10 @@
                         <p>
                             <b>{{ player }}</b
                             ><br />
-                            <b>{{ $t('Maps.infoWindow.Distance') }} : </b
-                            >{{ r.players[player].distance / 1000 }} km <br /><b
-                            >{{ $t('Maps.infoWindow.Points') }}
+                            <b>{{ $t('Maps.infoWindow.Distance') }} : </b >
+                            {{ new Intl.NumberFormat($i18n.locale, { style: "unit", unit:"kilometer" }).format(r.players[player].distance / 100)  }} <br />
+                            <b>
+                                {{ $t('Maps.infoWindow.Points') }}
                                 :
                             </b>
                             {{ r.players[player].points }}