Rename single word components

src/components/Game/Overlay.vue → src/components/Game/MyOverlay.vue

@@ -1,12 +1,12 @@
 <template>
  <div :class="$style['overlay']">
  <span :class="$style['overlay__text']">{{ msg }}</span>
- <Spinner />
+ <MySpinner />
  </div>
 </template>
 
 <script setup lang="ts">
-import Spinner from "./Spinner.vue";
+import MySpinner from "./MySpinner.vue";
 
 defineProps({
  msg: {

src/components/Home/CreateRoomDialog.vue

@@ -25,8 +25,8 @@
  2-5 people
  </div>
  </div>
- <Space />
- <Counter
+ <MySpace />
+ <MyCounter
  :min="2"
  :max="5"
  :count="selectedSize"
@@ -56,8 +56,8 @@
  1-10 minutes
  </span>
  </div>
- <Space />
- <Counter
+ <MySpace />
+ <MyCounter
  :min="1"
  :max="10"
  :count="selectedTime"
@@ -70,16 +70,15 @@
  label="Player Name"
  name="player-name"
  placeholder="Your Player Name"
- :input-value="playerName"
  @onChangeValue="onChangePlayerName"
  />
  </div>
  <div :class="$style['create-room-dialog__form']">
  <div>
  <span :class="$style['create-room-dialog__text']">Are you a host?</span>
  </div>
- <Space />
- <Switch
+ <MySpace />
+ <MySwitch
  :ans="isOwner"
  @onChangeValue="onChangeIsOwner"
  />
@@ -89,7 +88,6 @@
  label="Room Number"
  name="room-number"
  placeholder="Room Number"
- :input-value="roomNumber"
  :disabled="isOwner"
  :error-msg="roomCannnotBeFoundError"
  @onChangeValue="onChangeRoomNumber"
@@ -108,11 +106,11 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import Counter from "@/components/home/Counter.vue";
-import Switch from "@/components/home/Switch.vue";
+import MyCounter from "@/components/home/MyCounter.vue";
+import MySwitch from "@/components/home/MySwitch.vue";
 import TextInput from "@/components/home/TextInput.vue";
 import FlatButton from "@/components/shared/FlatButton.vue";
-import Space from "@/components/shared/Space.vue";
+import MySpace from "@/components/shared/MySpace.vue";
 
 const props = defineProps({
  isShowingDialog: {

src/components/Home/TextInput.vue

@@ -10,7 +10,6 @@
  {{ label }}
  </label>
  <input
- v-model="state.inputValue"
  type="text"
  maxlength="20"
  :name="name"
@@ -20,7 +19,7 @@
  ]"
  :placeholder="placeholder"
  :disabled="disabled"
- @input="$emit('onChangeValue', state.inputValue)"
+ @input="e => $emit('onChangeValue', (e.target as HTMLInputElement).value)"
  >
  <span
  v-if="errorMsg"
@@ -33,9 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from "vue";
-
-const props = defineProps({
+defineProps({
  label: {
  type: String,
  required: true,
@@ -49,10 +46,6 @@ const props = defineProps({
  default: "",
  required: false,
  },
- inputValue: {
- type: String,
- required: true,
- },
  disabled: {
  type: Boolean,
  default: false,
@@ -68,12 +61,6 @@ const props = defineProps({
 defineEmits<{
  onChangeValue: [val: string];
 }>();
-
-const state = reactive<{
- inputValue: string;
-}>({
- inputValue: props.inputValue,
-});
 </script>
 
 <style module lang="scss">

src/views/GameView.vue

@@ -1,6 +1,6 @@
 <template>
  <div :class="$style['page']">
- <Overlay
+ <MyOverlay
  v-show="
  gameSettingsState.selectedMode === 'multiplayer' &&
  (!inGameState.isThisRoundReady ||
@@ -56,7 +56,7 @@
  :room-number="gameSettingsState.roomNumber"
  :is-game-ready="state.isGameReady"
  />
- <Map
+ <MyMap
  :device="deviceState"
  :selected-mode="gameSettingsState.selectedMode"
  :is-owner="gameSettingsState.isOwner"
@@ -137,11 +137,11 @@ import {
 } from "firebase/database";
 
 import StreetView from "@/components/game/StreetView.vue";
-import Map from "@/components/game/Map.vue";
+import MyMap from "@/components/game/MyMap.vue";
 import ScoreBoard from "@/components/game/ScoreBoard.vue";
 import ResultModal from "@/components/game/ResultModal.vue";
 import RoomNumberDialog from "@/components/game/RoomNumberDialog.vue";
-import Overlay from "@/components/game/Overlay.vue";
+import MyOverlay from "@/components/game/MyOverlay.vue";
 import FlatButton from "@/components/shared/FlatButton.vue";
 import IconButton from "@/components/shared/IconButton.vue";
 import { database } from "@/firebase";

src/views/HomeView.vue

@@ -6,7 +6,7 @@
  :class="$style['page__logo']"
  alt="Geoguess Master Logo"
  >
- <Space />
+ <MySpace />
  <a href="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/spider-hand/GeoguessMaster">
  <img
  src="@/assets/images/github.svg"
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import Space from "@/components/shared/Space.vue";
+import MySpace from "@/components/shared/MySpace.vue";
 import AuroraBackground from "@/components/home/AuroraBackground.vue";
 import CreateGameForm from "@/components/home/CreateGameForm.vue";
 </script>