Switch to script setup syntax

damnUUUU · Jun 14, 2023 · d1df6b6 · d1df6b6
1 parent 5194f8b
commit d1df6b6
Show file tree

Hide file tree

Showing 19 changed files with 1,089 additions and 1,369 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,27 +1,22 @@
 <template>
- <div />
  <router-view />
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from "vue";
+<script setup lang="ts">
+import { onMounted } from "vue";
 import { getDeviceType } from "@/utils";
 import { useDeviceStore } from "./stores/device";
 
-export default defineComponent({
- setup() {
- const deviceStore = useDeviceStore();
- const { saveDeviceType } = deviceStore;
+const deviceStore = useDeviceStore();
+const { saveDeviceType } = deviceStore;
 
- const onWindowResize = (): void => {
-  saveDeviceType(getDeviceType());
- };
+const onWindowResize = (): void => {
+ saveDeviceType(getDeviceType());
+};
 
- onMounted(() => {
- saveDeviceType(getDeviceType());
- window.addEventListener("resize", onWindowResize);
- });
- },
+onMounted(() => {
+ saveDeviceType(getDeviceType());
+ window.addEventListener("resize", onWindowResize);
 });
 </script>
 

diff --git a/src/components/Game/Map.vue b/src/components/Game/Map.vue
@@ -14,120 +14,108 @@
  left: '0px',
  }"
  :size="'sm'"
- @click="onClickHideMapButton"
+ @click="$emit('onClickHideMapButton')"
  />
  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref, watch, PropType } from "vue";
+<script setup lang="ts">
+import { onMounted, ref, watch, PropType } from "vue";
 import { DEVICE_TYPES } from "@/constants";
 import IconButton from "@/components/shared/IconButton.vue";
 import { DeviceTypes } from "@/types";
 
-export default defineComponent({
- components: {
- IconButton,
+const props = defineProps({
+ device: {
+ type: Object as PropType<DeviceTypes>,
+ required: true,
  },
- props: {
- device: {
- type: Object as PropType<DeviceTypes>,
- required: true,
- },
- selectedMode: {
- type: String,
- required: true,
- },
- randomLatLng: {
- type: Object as PropType<google.maps.LatLng | null>,
- default: null,
- required: false,
- },
- round: {
- type: Number,
- required: true,
- },
- isMakeGuessButtonClicked: {
- type: Boolean,
- required: true,
- },
+ selectedMode: {
+ type: String,
+ required: true,
  },
+ randomLatLng: {
+ type: Object as PropType<google.maps.LatLng | null>,
+ default: null,
+ required: false,
+ },
+ round: {
+ type: Number,
+ required: true,
+ },
+ isMakeGuessButtonClicked: {
+ type: Boolean,
+ required: true,
+ },
+});
 
- setup(props, context) {
-  let map: google.maps.Map;
-  const mapRef = ref<HTMLElement>();
- const markers: google.maps.Marker[] = [];
+const emit = defineEmits<{
+ updateSelectedLatLng: [latLng: google.maps.LatLng];
+ onClickHideMapButton: [];
+}>();
 
- watch(
- () => props.isMakeGuessButtonClicked,
- (newVal: boolean, oldVal: boolean) => {
- if (newVal && mapRef.value) {
- mapRef.value.style.transform = "translateY(-352px)";
- } else if (!newVal && mapRef.value) {
- mapRef.value.style.transform = "translateY(300px)";
- }
- }
- );
+let map: google.maps.Map;
+const mapRef = ref<HTMLElement>();
+const markers: google.maps.Marker[] = [];
 
- watch(
- () => props.round,
- (newVal: number, oldVal: number) => {
- if (oldVal + 1 === newVal || (oldVal === 5 && newVal === 1)) {
- removeMarkers();
- }
- }
- );
+watch(
+ () => props.isMakeGuessButtonClicked,
+ (newVal: boolean) => {
+ if (newVal && mapRef.value) {
+ mapRef.value.style.transform = "translateY(-352px)";
+ } else if (!newVal && mapRef.value) {
+ mapRef.value.style.transform = "translateY(300px)";
+ }
+ }
+);
 
- const removeMarkers = (): void => {
- markers.forEach((marker, index) => {
- marker.setMap(null);
- markers.splice(index, 1);
- });
- };
+watch(
+ () => props.round,
+ (newVal: number, oldVal: number) => {
+ if (oldVal + 1 === newVal || (oldVal === 5 && newVal === 1)) {
+ removeMarkers();
+ }
+ }
+);
 
- const putMarker = (position: google.maps.LatLng): void => {
- const marker = new google.maps.Marker({
- position: position,
- map: map,
+watch(
+ () => props.randomLatLng,
+ (newVal: google.maps.LatLng | null) => {
+ if (newVal !== null) {
+ map.addListener("click", (e: any) => {
+ removeMarkers();
+ putMarker(e.latLng);
+ emit("updateSelectedLatLng", e.latLng);
  });
- markers.push(marker);
- };
+ }
+ }
+);
 
- const onClickHideMapButton = (): void => {
- context.emit("onClickHideMapButton");
- };
+const removeMarkers = (): void => {
+ markers.forEach((marker, index) => {
+ marker.setMap(null);
+ markers.splice(index, 1);
+ });
+};
 
- watch(
- () => props.randomLatLng,
- (newVal: google.maps.LatLng | null) => {
- if (newVal !== null) {
- map.addListener("click", (e: any) => {
- removeMarkers();
- putMarker(e.latLng);
- context.emit("updateSelectedLatLng", e.latLng);
- });
- }
- }
- );
+const putMarker = (position: google.maps.LatLng): void => {
+ const marker = new google.maps.Marker({
+ position: position,
+ map: map,
+ });
+ markers.push(marker);
+};
 
- onMounted(() => {
- if (mapRef.value) {
- map = new google.maps.Map(mapRef.value as HTMLElement, {
- center: { lat: 37.86926, lng: -122.254811 },
- zoom: 1,
- fullscreenControl: false,
- mapTypeControl: false,
- streetViewControl: false,
- });
- }
+onMounted(() => {
+ if (mapRef.value) {
+ map = new google.maps.Map(mapRef.value as HTMLElement, {
+ center: { lat: 37.86926, lng: -122.254811 },
+ zoom: 1,
+ fullscreenControl: false,
+ mapTypeControl: false,
+ streetViewControl: false,
  });
-
- return {
- mapRef,
- DEVICE_TYPES,
- onClickHideMapButton,
- };
- },
+ }
 });
 </script>
 

diff --git a/src/components/Game/Overlay.vue b/src/components/Game/Overlay.vue
@@ -5,19 +5,13 @@
  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import Spinner from "./Spinner.vue";
 
-export default defineComponent({
- components: {
- Spinner,
- },
- props: {
- msg: {
- type: String,
- required: false,
- },
+defineProps({
+ msg: {
+ type: String,
+ required: false,
  },
 });
 </script>