🐛 fix undefined gameCode warning

composables/useGameInfo.ts

@@ -14,7 +14,11 @@ export default function useGameInfo() {
     ,
   );
 
-  const gameCode = computed(() => siteInfo.value?.gameCode ?? undefined);
+  const gameCode = computed(() => (
+    route.value.params.gameCode !== undefined
+      ? siteInfo.value?.gameCode ?? undefined
+      : null
+  ));
   const gameTitle = computed(() => siteInfo.value?.gameTitle ?? undefined);
   const themeColor = computed(() => siteInfo.value?.themeColor ?? '#424242');
   const dataSourceUrl = computed(() => siteInfo.value?.dataSourceUrl ?? undefined);

layouts/default.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /* eslint-disable import/first, import/no-duplicates */
-import { ref, computed, watch, useRoute, useMeta as useHead, useContext } from '@nuxtjs/composition-api';
+import { ref, computed, watch, useMeta as useHead, useContext } from '@nuxtjs/composition-api';
 import { useDataStore } from '~/stores/data';
 import useGameInfo from '~/composables/useGameInfo';
 import useDarkMode from '~/composables/useDarkMode';
@@ -13,7 +13,6 @@ import sites from '~/data/sites.json';
 import { PageNotFoundError } from '~/utils';
 
 const context = useContext();
-const route = useRoute();
 const dataStore = useDataStore();
 const { isDarkMode } = useDarkMode();
 const {
@@ -111,18 +110,17 @@ function adaptSiteStyle() {
   context.$vuetify.theme.themes.light.primary = themeColor.value;
   context.$vuetify.theme.themes.dark.primary = '#FFAC1C';
 }
-function validateGameCode() {
-  if (route.value.params.gameCode !== undefined && gameCode.value === undefined) {
+
+watch(gameCode, () => {
+  adaptSiteStyle();
+
+  if (gameCode.value === undefined) {
     context.error(new PageNotFoundError());
+    return;
   }
-}
-async function detectGameCode() {
-  adaptSiteStyle();
-  validateGameCode();
-  dataStore.gameCode = gameCode.value!;
-}
 
-watch(gameCode, () => detectGameCode(), {
+  dataStore.gameCode = gameCode.value;
+}, {
   immediate: true,
 });
 watch(isDarkMode, () => {
@@ -146,7 +144,7 @@ export default defineComponent({
     <LoadingOverlay v-if="dataStore.currentLoadingStatus === LoadingStatus.LOADING" />
 
     <v-navigation-drawer
-      v-if="gameCode !== undefined"
+      v-if="gameCode != null"
       v-model="isDrawerOpened"
       width="300"
       temporary
@@ -192,7 +190,7 @@ export default defineComponent({
         <v-divider />
       </template>
 
-      <v-list v-if="gameCode !== undefined">
+      <v-list v-if="gameCode != null">
         <v-list-item
           v-for="(menuItem, i) in menu"
           :key="i"
@@ -226,7 +224,7 @@ export default defineComponent({
       app
     >
       <v-app-bar-nav-icon
-        :disabled="gameCode === undefined"
+        :disabled="gameCode == null"
         @click="isDrawerOpened = !isDrawerOpened;"
       />
       <NuxtLink

stores/data.ts

@@ -8,11 +8,11 @@ import type { Data } from '~/types';
 
 // eslint-disable-next-line import/prefer-default-export
 export const useDataStore = defineStore('data', () => {
-  const currentGameCode = ref('');
+  const currentGameCode = ref<string | null>(null);
 
-  const loadedData = ref(new Map<string, Data>());
-  const loadingStatuses = ref(new Map<string, LoadingStatus>());
-  const loadingErrorMessages = ref(new Map<string, string>());
+  const loadedData = ref(new Map<string | null, Data>());
+  const loadingStatuses = ref(new Map<string | null, LoadingStatus>());
+  const loadingErrorMessages = ref(new Map<string | null, string>());
 
   const currentData = computed(
     () => loadedData.value.get(currentGameCode.value) ?? buildEmptyData(),
@@ -65,7 +65,7 @@ export const useDataStore = defineStore('data', () => {
   }
 
   watch(currentGameCode, async () => {
-    if (currentGameCode.value === '') return;
+    if (currentGameCode.value === null) return;
 
     if (currentLoadingStatus.value === LoadingStatus.PENDING) {
       await loadData(currentGameCode.value);