refactor: rewrite to script setup

rudnovd · Apr 1, 2024 · 1f498f5 · 1f498f5
1 parent c7f17b4
commit 1f498f5
Show file tree

Hide file tree

Showing 26 changed files with 897 additions and 1,299 deletions.
diff --git a/src/components/CalculatorTabs.vue b/src/components/CalculatorTabs.vue
@@ -7,7 +7,7 @@
         class="tab"
         :class="{ active: index === activeIndex }"
         :title="calculatorTitle(calculator.attacker, calculator.defender)"
-        @click="$emit('selectTab', index)"
+        @click="emit('selectTab', index)"
       >
         <span class="tab-title">
           {{ calculatorTitle(calculator.attacker, calculator.defender) }}
@@ -16,7 +16,7 @@
         <button
           class="tab-close-button"
           :class="{ disabled: calculators.length < 2 }"
-          @click="$emit('deleteTab', index)"
+          @click="emit('deleteTab', index)"
         />
       </li>
     </ul>
@@ -25,48 +25,36 @@
       class="tab-add-button"
       :class="{ disabled: calculators.length >= 7 }"
       title="Add new Calculator tab"
-      @click="$emit('addTab')"
+      @click="emit('addTab')"
     />
   </section>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue'
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'CalculatorTabs',
-  props: {
-    calculators: {
-      type: Array as PropType<Array<{ attacker: string | null; defender: string | null }>>,
-      required: true,
-    },
-    activeIndex: {
-      type: Number,
-      required: true,
-    },
-  },
-  emits: ['addTab', 'selectTab', 'deleteTab'],
-  setup() {
-    const { t } = useI18n()
-    const route = useRoute()
-
-    const calculatorTitle = (attacker: string | null, defender: string | null) => {
-      if (attacker && defender) return `${attacker} — ${defender}`
-      else if (attacker) return attacker
-      else if (defender) return defender
-      else if (route.path === '/damage') return t('pages.damageCalculator')
-      else if (route.path === '/magic') return t('pages.magicCalculator')
-      else return t('pages.damageCalculator')
-    }
-
-    return {
-      calculatorTitle,
-    }
-  },
-})
+defineProps<{
+  calculators: Array<{ attacker: string | null; defender: string | null }>
+  activeIndex: number
+}>()
+const emit = defineEmits<{
+  addTab: []
+  selectTab: [index: number]
+  deleteTab: [index: number]
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+
+const calculatorTitle = (attacker: string | null, defender: string | null) => {
+  if (attacker && defender) return `${attacker} — ${defender}`
+  else if (attacker) return attacker
+  else if (defender) return defender
+  else if (route.path === '/damage') return t('pages.damageCalculator')
+  else if (route.path === '/magic') return t('pages.magicCalculator')
+  else return t('pages.damageCalculator')
+}
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/DamageCalculator.vue b/src/components/DamageCalculator.vue
@@ -130,7 +130,7 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PickCreatureButton from '@/components/PickCreatureButton.vue'
 import SelectHero from '@/components/SelectHero.vue'
 import SelectTerrain from '@/components/SelectTerrain.vue'
@@ -143,28 +143,19 @@ import { HeroInstance } from '@/models/Hero'
 import type { Spell } from '@/models/Spell'
 import type { Terrain } from '@/models/Terrain'
 import { useStore } from '@/store'
-import { computed, defineAsyncComponent, defineComponent, reactive, type PropType } from 'vue'
+import { computed, defineAsyncComponent, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export default defineComponent({
-  name: 'DamageCalculator',
-  components: {
-    PickCreatureButton,
-    SelectHero,
-    SelectTerrain,
-    ObjectPortrait: defineAsyncComponent(() => import('@/components/ObjectPortrait.vue')),
-    BaseInputNumber: defineAsyncComponent(() => import('@/components/base/BaseInputNumber.vue')),
-    InputHeroStat: defineAsyncComponent(() => import('@/components/damageCalculator/InputHeroStat.vue')),
-    SelectSkillButtons: defineAsyncComponent(() => import('@/components/damageCalculator/SelectSkillButtons.vue')),
-    BaseCheckbox: defineAsyncComponent(() => import('@/components/base/BaseCheckbox.vue')),
-  },
-  props: {
-    battleValue: {
-      type: Object as PropType<Battle>,
-      required: true,
-    },
-  },
-  setup(props) {
+const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
+const BaseInputNumber = defineAsyncComponent(() => import('@/components/base/BaseInputNumber.vue'))
+const InputHeroStat = defineAsyncComponent(() => import('@/components/damageCalculator/InputHeroStat.vue'))
+const SelectSkillButtons = defineAsyncComponent(() => import('@/components/damageCalculator/SelectSkillButtons.vue'))
+const BaseCheckbox = defineAsyncComponent(() => import('@/components/base/BaseCheckbox.vue'))
+
+const props = defineProps<{
+  battleValue: Battle
+}>()
+
     const { t } = useI18n()
     const store = useStore()
 
@@ -190,11 +181,7 @@ export default defineComponent({
         .forEach((skill, index) => (skills[damageCalculatorSkills[index]] = skill.name))
       return skills
     })
-    const effects = computed(() => [
-      store.attackPositiveEffects,
-      store.defensePositiveEffects,
-      store.attackNegativeEffects,
-    ])
+const effects = computed(() => [store.attackPositiveEffects, store.defensePositiveEffects, store.attackNegativeEffects])
 
     // Return string of total damage or total kills
     const getTotalResultString = (min: number, max: number, average: number) => {
@@ -220,9 +207,7 @@ export default defineComponent({
       if (!effectEnabled) {
         side.activeCreature.effects.push(spell)
       } else {
-        side.activeCreature.effects = side.activeCreature.effects.filter(
-          (creatureEffect) => creatureEffect.id !== spell.id,
-        )
+    side.activeCreature.effects = side.activeCreature.effects.filter((creatureEffect) => creatureEffect.id !== spell.id)
       }
     }
 
@@ -234,26 +219,6 @@ export default defineComponent({
       battle.attacker.terrain = terrain
       battle.defender.terrain = terrain
     }
-
-    return {
-      t,
-
-      battle,
-      heroes,
-      terrains,
-      levels,
-      skills,
-      effects,
-
-      getTotalResultString,
-      onSelectCreature,
-      onSelectHero,
-      onSelectCreatureEffect,
-      isEffectEnabled,
-      onSelectTerrain,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped>