Merge pull request #199 from ConorMurphy21/minor-fixes

 Minor Fixes

client/.eslintrc.cjs

@@ -36,7 +36,7 @@ module.exports = {
     'vue/no-unused-properties': 2,
     'vue/no-unused-refs': 2,
     '@intlify/vue-i18n/valid-message-syntax': 2,
-    '@intlify/vue-i18n/key-format-style': [2, 'camelCase', {allowArray: true}],
+    '@intlify/vue-i18n/key-format-style': [2, 'camelCase', { allowArray: true }],
     '@intlify/vue-i18n/no-duplicate-keys-in-locale': 2,
     '@intlify/vue-i18n/no-missing-keys-in-other-locales': 2,
     'prettier/prettier': 2

client/src/App.vue

@@ -1,13 +1,36 @@
 <script setup lang="ts">
 import { PortalTarget } from 'portal-vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { computed } from 'vue';
 const { t } = useI18n();
+import ClickMp3 from '@/assets/audio/click2.mp3';
+import { AudioWrap } from '@/mixins/audiowrap';
+
+const click = new AudioWrap(ClickMp3);
+const route = useRoute();
+const router = useRouter();
+
+const canNavigateHome = computed<boolean>(() => {
+  return route.name !== 'game' && route.name !== 'home';
+});
+function onLogoClick() {
+  if (canNavigateHome.value) {
+    click.play();
+    void router.push('home');
+  }
+}
 </script>
 
 <template>
   <div class="container min-vh-100">
     <div class="d-flex min-vh-100 flex-column justify-content-evenly align-items-center">
-      <img class="w-lg-50 w-100 my-2" src="@/assets/images/logo.png" :alt="t('strikeOrSike')" />
+      <img
+        class="w-lg-50 w-100 my-2"
+        src="@/assets/images/logo.png"
+        :alt="t('strikeOrSike')"
+        :role="canNavigateHome ? 'button' : ''"
+        @click="onLogoClick" />
       <router-view class="mt-2 mb-5" />
       <portal-target name="banner" class="mb-2" />
     </div>

client/src/components/responseMatching/ActiveMatching.vue

@@ -59,9 +59,9 @@ const { t } = useI18n();
       v-tooltip.left.ds900="t('tooltip.noMatch', { response: gameStore.selectedResponse })"
       class="btn btn-primary w-50 fs-4 d-flex justify-content-center align-items-center"
       @click="noMatch">
-      <div class="d-flex justify-content-center align-items-center w-75">
+      <span class="w-75">
         <img class="my-auto w-75 w-sm-50 w-lg-25" src="@/assets/images/sike.png" :alt="t('sike')" />
-      </div>
+      </span>
     </button>
     <span v-t="'or'" />
     <response-list v-model="matchedResponse" :selectable="true" :height="40" />

client/src/locales/index.ts

@@ -7,9 +7,19 @@ const messages = {
   }
 };
 
-export default createI18n<[typeof en], 'en'>({
+const i18n = createI18n<[typeof en], 'en'>({
   locale: 'en',
   fallbackLocale: 'en',
   legacy: false,
   messages
 });
+
+export default i18n;
+
+if (import.meta.hot) {
+  import.meta.hot.accept('./en.ts', (newEn) => {
+    if (newEn) {
+      i18n.global.setLocaleMessage('en', newEn.default);
+    }
+  });
+}

client/src/stores/game.ts

@@ -2,15 +2,15 @@
 
 import socket from '@/socket/socket.js';
 import { useRoomStore } from '@/stores/room.js';
-import { defineStore } from 'pinia';
+import { acceptHMRUpdate, defineStore } from 'pinia';
 import type {
   Player,
   Match as ServerMatch,
-  PollName,
   VoteCount,
   Score as ServerScore,
   Responses,
-  MidgameConnectData
+  MidgameConnectData,
+  PollVoteCount
 } from ':common/stateTypes';
 import type { Options, VisibleOptions } from ':common/options';
 import { defaultOptions } from ':common/options';
@@ -244,7 +244,7 @@ export const useGameStore = defineStore('game', {
         this.selectionType = selectionType;
       });
 
-      socket.on('setVoteCount', (data: { pollName: PollName } & VoteCount) => {
+      socket.on('setVoteCount', (data: PollVoteCount) => {
         this.voteCounts[data.pollName] = { count: data.count, next: data.next };
       });
       socket.on('beginPrompt', (prompt: string) => {
@@ -363,3 +363,13 @@ export const useGameStore = defineStore('game', {
     }
   }
 });
+
+// allow hot-module reloading of the game store
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    acceptHMRUpdate(useGameStore, import.meta.hot)(newModule);
+    socket.off();
+    useRoomStore().bindEvents();
+    useGameStore().bindEvents();
+  });
+}

client/src/stores/room.ts

@@ -1,8 +1,8 @@
 // noinspection JSUnusedGlobalSymbols
-import router from '@/router/index.js';
+import { type Router, useRouter } from 'vue-router';
 import socket from '@/socket/socket.js';
-import { defineStore } from 'pinia';
-import type { Player } from ':common/stateTypes';
+import { acceptHMRUpdate, defineStore } from 'pinia';
+import type { Player } from ':common/stateTypes.js';
 
 interface State {
   players: Player[];
@@ -11,6 +11,7 @@ interface State {
   error: string;
   receivedError: boolean;
   route: string;
+  router: Router;
 }
 
 export const useRoomStore = defineStore('room', {
@@ -20,7 +21,8 @@ export const useRoomStore = defineStore('room', {
     roomName: '',
     error: '',
     receivedError: false,
-    route: 'home'
+    route: 'home',
+    router: useRouter()
   }),
   getters: {
     self(): Player | undefined {
@@ -31,9 +33,6 @@ export const useRoomStore = defineStore('room', {
     setName(name: string) {
       this.name = name;
     },
-    setRoomName(roomName: string) {
-      this.roomName = roomName;
-    },
     setError(error: string) {
       this.error = error;
     },
@@ -58,13 +57,13 @@ export const useRoomStore = defineStore('room', {
         if (data.success) {
           this.roomName = data.roomName;
           this.error = '';
-          await router.push({
+          await this.router.push({
             name: 'game',
             params: { roomName: data.roomName }
           });
         } else {
           if (this.route !== 'home') {
-            await router.push({
+            await this.router.push({
               name: 'home',
               params: { error: data.error }
             });
@@ -79,8 +78,23 @@ export const useRoomStore = defineStore('room', {
       });
 
       socket.on('kickPlayer', async (data: { error: string }) => {
-        await router.push({ name: 'home', query: { error: data.error } });
+        await this.router.push({ name: 'home', query: { error: data.error } });
       });
     }
   }
 });
+
+// allow hot module reloading of the room store
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    acceptHMRUpdate(useRoomStore, import.meta.hot)(newModule);
+    // unfortunately can't unbind all listeners because game would be effected
+    // and can't rebind game because of circular dependancy
+    // so each socket listener has to be offed manually
+    socket.off('connect');
+    socket.off('updatePlayers');
+    socket.off('joinRoom');
+    socket.off('kickPlayer');
+    useRoomStore().bindEvents();
+  });
+}

client/src/stores/settings.ts

@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia';
+import { acceptHMRUpdate, defineStore } from 'pinia';
 
 interface State {
   volume: number;
@@ -45,3 +45,8 @@ export const useSettingsStore = defineStore('settings', {
     }
   }
 });
+
+// allow hot-module reloading of the settings store
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useSettingsStore, import.meta.hot));
+}

client/src/views/About.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ClickMp3 from '@/assets/audio/click1.mp3';
+import ClickMp3 from '@/assets/audio/click2.mp3';
 import { AudioWrap } from '@/mixins/audiowrap.js';
 const click = new AudioWrap(ClickMp3);
 </script>

client/src/views/HowToPlay.vue

@@ -4,7 +4,7 @@ import Strike from '@/assets/images/howToPlay/strike.png';
 import Sike from '@/assets/images/howToPlay/sike.png';
 import Choice from '@/assets/images/howToPlay/choice.png';
 import Matching from '@/assets/images/howToPlay/matching.png';
-import ClickMp3 from '@/assets/audio/click1.mp3';
+import ClickMp3 from '@/assets/audio/click2.mp3';
 import { AudioWrap } from '@/mixins/audiowrap.js';
 import { useI18n } from 'vue-i18n';
 const click = new AudioWrap(ClickMp3);

common/src/socketioTypes.ts

@@ -1,7 +1,16 @@
 import { Server, Socket } from 'socket.io';
 import { Socket as ClientSocket } from 'socket.io-client';
 import { SettableOptions, VisibleOptions } from './options';
-import { Player, PollName, Match, MidgameConnectData, Responses, SelectionType, VoteCount, Score } from './stateTypes';
+import {
+  Player,
+  PollName,
+  Match,
+  MidgameConnectData,
+  Responses,
+  SelectionType,
+  Score,
+  PollVoteCount
+} from './stateTypes';
 import { Result } from './result';
 
 interface ServerToClientRoomEvents {
@@ -27,7 +36,7 @@ interface ServerToClientGameEvents {
 
   nextSelection(args: { selector: string; selectionType: SelectionType }): void;
 
-  setVoteCount(args: { pollName: PollName } & VoteCount): void;
+  setVoteCount(args: PollVoteCount): void;
 
   selectionTypeChosen(selectionType: SelectionType): void;
 

common/src/stateTypes.ts

@@ -36,6 +36,8 @@ export type VoteCount = {
   next: boolean;
 };
 
+export type PollVoteCount = { pollName: PollName } & VoteCount;
+
 export const zPollName = z.enum(['skipPrompt', 'startNextRound', 'sikeDispute']);
 export type PollName = z.infer<typeof zPollName>;
 

server/src/routes/gameHandlers.ts

@@ -9,7 +9,7 @@ import type { Result } from ':common/result';
 import { isErr, isOk, isSuccess } from ':common/result';
 import type { SettableOptions } from ':common/options';
 import { getSettableOptionsSchema, getVisibleOptionsSchema } from ':common/options';
-import type { PollName } from ':common/stateTypes';
+import type { PollName, PollVoteCount } from ':common/stateTypes';
 import { zPollName } from ':common/stateTypes';
 import type { TypedServer, TypedSocket } from ':common/socketioTypes';
 import type { Responses } from ':common/stateTypes';
@@ -216,18 +216,22 @@ function registerCallbacks(io: TypedServer, room: Room) {
   //continueSelection(io, room);
   //});
 
-  state.registerDisputeCompleteCb((action) => {
+  state.registerDisputeCompleteCb((action: string) => {
     applyDisputeAction(io, room, action);
   });
 
-  state.registerMatchingCompleteCb((selectorActive) => {
+  state.registerMatchingCompleteCb((selectorActive: boolean) => {
     // give a little time to show score before moving on to next selection
     if (!selectorActive) {
       state.promptTimeout = setTimeout(() => {
         continueSelection(io, room);
       }, 5000);
     }
   });
+
+  state.registerPollVoteUpdateCb((pollVoteCount: PollVoteCount) => {
+    io.to(room.name).emit('setVoteCount', pollVoteCount);
+  });
 }
 
 function beginPrompt(io: TypedServer, room: Room) {

server/src/state/gameState.ts

@@ -15,7 +15,8 @@ import type {
   SelectionType,
   Stage,
   Player as RoomPlayer,
-  Score
+  Score,
+  PollVoteCount
 } from ':common/stateTypes';
 
 type Player = {
@@ -123,6 +124,10 @@ export class GameState {
     this._matchingCompleteCb = cb;
   }
 
+  registerPollVoteUpdateCb(cb: (pollVoteCounts: PollVoteCount) => void): void {
+    this.pollService.registerPollVoteUpdateCb(cb);
+  }
+
   /*** PROMPT RESPONSE state changes ***/
   hasNewPrompt(): boolean {
     // return false if no rounds left

server/src/state/pollService.ts

@@ -1,7 +1,7 @@
 import type { GameState } from './gameState';
 import type { Result } from ':common/result';
 import { Err, Ok, Warn } from ':common/result';
-import type { PollName, Stage } from ':common/stateTypes';
+import type { PollName, PollVoteCount, Stage } from ':common/stateTypes';
 import logger from '../logger/logger';
 
 type Poll = {
@@ -15,12 +15,16 @@ type Poll = {
 export class PollService {
   private gameState: GameState;
   private readonly polls: Map<PollName, Poll>;
-
+  private _pollVoteUpdateCb: null | ((pollVoteCounts: PollVoteCount) => void) = null;
   constructor(gameState: GameState) {
     this.gameState = gameState;
     this.polls = new Map<PollName, Poll>();
   }
 
+  registerPollVoteUpdateCb(cb: (pollVoteCounts: PollVoteCount) => void): void {
+    this._pollVoteUpdateCb = cb;
+  }
+
   registerPoll(
     pollName: PollName,
     completeCb: () => void,
@@ -115,10 +119,13 @@ export class PollService {
   }
 
   disconnect(id: string): void {
-    for (const poll of this.polls.values()) {
+    for (const [pollName, poll] of this.polls.entries()) {
       const index = poll.inFavor.indexOf(id);
       if (index >= 0) {
         poll.inFavor.splice(index, 1);
+        if (this._pollVoteUpdateCb) {
+          this._pollVoteUpdateCb({ pollName, count: this._countVotes(poll), next: this._nextComplete(poll) });
+        }
       }
     }
   }