Refactor props

src/components/Game/MyMap.vue

@@ -23,15 +23,15 @@
 import { onMounted, ref, watch, PropType } from "vue";
 import { DEVICE_TYPES } from "@/constants";
 import IconButton from "@/components/shared/IconButton.vue";
-import { DeviceTypes } from "@/types";
+import { DeviceTypes, ModeTypes } from "@/types";
 
 const props = defineProps({
  device: {
  type: Object as PropType<DeviceTypes>,
  required: true,
  },
  selectedMode: {
- type: String,
+ type: Object as PropType<ModeTypes>,
  required: true,
  },
  randomLatLng: {

src/components/Game/ResultModal.vue

@@ -97,14 +97,14 @@
 </template>
 
 <script setup lang="ts">
-import { GameHistory, Summary, DistanceByPlayer } from "@/types";
+import { GameHistory, Summary, DistanceByPlayer, ModeTypes } from "@/types";
 import { watch, onMounted, ref, PropType, computed, reactive } from "vue";
 import FlatButton from "@/components/shared/FlatButton.vue";
 import IconButton from "@/components/shared/IconButton.vue";
 
 const props = defineProps({
  selectedMode: {
- type: String,
+ type: Object as PropType<ModeTypes>,
  required: true,
  },
  isOwner: {

src/components/Game/ScoreBoard.vue

@@ -5,7 +5,7 @@
  Map
  </div>
  <div :class="$style['score-board__text']">
- {{ selectedMap }}
+ {{ MAP_OPTIONS.get(selectedMap) }}
  </div>
  </div>
  <div :class="$style['score-board__wrapper']">
@@ -39,13 +39,17 @@
 </template>
 
 <script setup lang="ts">
+import { PropType } from "vue";
+import { MapTypes, ModeTypes } from "@/types";
+import { MAP_OPTIONS } from "@/constants";
+
 defineProps({
  selectedMap: {
- type: String,
+ type: Object as PropType<MapTypes>,
  required: true,
  },
  selectedMode: {
- type: String,
+ type: Object as PropType<ModeTypes>,
  required: true,
  },
  round: {

src/components/Game/StreetView.vue

@@ -6,15 +6,16 @@
 </template>
 
 <script setup lang="ts">
+import { MapTypes, ModeTypes } from "@/types";
 import { onMounted, watch, ref, PropType } from "vue";
 
 const props = defineProps({
  selectedMap: {
- type: String,
+ type: Object as PropType<MapTypes>,
  required: true,
  },
  selectedMode: {
- type: String,
+ type: Object as PropType<ModeTypes>,
  required: true,
  },
  isOwner: {

src/constants/index.ts

@@ -1,3 +1,5 @@
+import { MapTypes, ModeTypes } from "@/types";
+
 export enum DEVICE_TYPES {
  MOBLE_PORTRAIT = 0,
  MOBILE_LANDSCAPE = 1,
@@ -6,9 +8,9 @@ export enum DEVICE_TYPES {
  LAPTOP = 4,
 }
 
-export const MAP_OPTIONS = new Map([["world", "World"]]);
+export const MAP_OPTIONS: Map<MapTypes, string> = new Map([["world", "World"]]);
 
-export const MODE_OPTIONS = new Map([
+export const MODE_OPTIONS: Map<ModeTypes, string> = new Map([
  ["single", "Single Player"],
  ["multiplayer", "With Friends"],
 ]);

src/views/GameView.vue

@@ -42,7 +42,7 @@
  @saveStreetView="saveStreetView"
  />
  <ScoreBoard
- :selected-map="MAP_OPTIONS.get(gameSettingsState.selectedMap) || ''"
+ :selected-map="gameSettingsState.selectedMap"
  :selected-mode="gameSettingsState.selectedMode"
  :round="inGameState.round"
  :score="inGameState.score"
@@ -146,7 +146,7 @@ import FlatButton from "@/components/shared/FlatButton.vue";
 import IconButton from "@/components/shared/IconButton.vue";
 import { database } from "@/firebase";
 import { GameHistory, Summary } from "@/types";
-import { DEVICE_TYPES, MAP_OPTIONS } from "@/constants";
+import { DEVICE_TYPES } from "@/constants";
 import { storeToRefs } from "pinia";
 import { useGameSettingsStore } from "@/stores/gameSettings";
 import { useInGameStore } from "@/stores/inGame";
@@ -445,7 +445,11 @@ onMounted(() => {
  .child(childSnapshot.key as string)
  .val();
  const distance = snapshot
- .child(`round${inGameState.value.round}/${childSnapshot.key as string}`)
+ .child(
+ `round${inGameState.value.round}/${
+ childSnapshot.key as string
+ }`
+ )
  .val();
  updateSelectedLatLngArr(latlng);
  updateDistanceByPlayerArr({