style: apply new style rules

src/components/DamageCalculator.vue

@@ -7,20 +7,14 @@
     >
       <section class="title">
         <h2>{{ t(`side.${[sideName]}`) }}</h2>
-        <PickCreatureButton
-          :color="sideName"
-          @select="onSelectCreature(side, $event)"
-        >
+        <PickCreatureButton :color="sideName" @select="onSelectCreature(side, $event)">
           {{ side.activeCreature ? side.activeCreature.name : t('damageCalculator.pickCreature') }}
         </PickCreatureButton>
       </section>
 
       <section class="main">
         <div class="creature">
-          <button
-            v-if="side.activeCreature"
-            class="creature-button"
-          >
+          <button v-if="side.activeCreature" class="creature-button">
             <CreaturePortrait
               :creature="side.activeCreature"
               class="creature-img"
@@ -43,16 +37,9 @@
         </div>
 
         <div class="hero">
-          <SelectHero
-            :side-name="sideName"
-            :value="side.hero"
-            @select-hero="onSelectHero(side, $event)"
-          />
+          <SelectHero :value="side.hero" @select-hero="onSelectHero(side, $event)" />
 
-          <div
-            v-if="side.hero"
-            class="hero-parameters"
-          >
+          <div v-if="side.hero" class="hero-parameters">
             <div>
               <label class="stat-name">
                 {{ t(`heroes.stats.level`) }}
@@ -77,10 +64,7 @@
         </div>
       </section>
 
-      <section
-        v-if="side.hero"
-        class="skills"
-      >
+      <section v-if="side.hero" class="skills">
         <SelectSkillButtons
           v-for="skill in data.skills"
           :key="`attacker-skill-${skill.name}-buttons`"
@@ -91,18 +75,12 @@
         />
       </section>
 
-      <section
-        v-if="side.activeCreature"
-        class="effects"
-      >
+      <section v-if="side.activeCreature" class="effects">
         <div
-          v-for="(effectGroup, index) in [attackPositiveEffects, defensePositiveEffects, attackNegativeEffects]"
-          :key="`attacker-effects-group-${index}`"
+          v-for="(effectGroup, i) in [attackPositiveEffects, defensePositiveEffects, attackNegativeEffects]"
+          :key="`attacker-effects-group-${i}`"
         >
-          <template
-            v-for="(effect) in effectGroup"
-            :key="`attacker-effect-${effect}`"
-          >
+          <template v-for="effect in effectGroup" :key="`attacker-effect-${effect}`">
             <BaseCheckbox
               color="attacker"
               :value="isEffectEnabled(side, effect)"
@@ -113,41 +91,35 @@
         </div>
       </section>
 
-      <section
-        v-if="side.activeCreature"
-        class="damage"
-      >
+      <section v-if="side.activeCreature" class="damage">
         <strong>Damage: {{ totalDamage(side) }}</strong>
         <strong>Kills: {{ totalKills(side) }}</strong>
       </section>
     </section>
 
     <div class="calculator-footer">
-      <SelectTerrain
-        :terrains="data.terrains"
-        @select-terrain="onSelectTerrain($event)"
-      />
+      <SelectTerrain :terrains="data.terrains" @select-terrain="onSelectTerrain($event)" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, watch } from "@vue/runtime-core";
-import { computed, reactive, ref } from "@vue/reactivity";
-import type { Battle, BattleSide, DamageCalculatorBattleSide } from "@/models/Battle";
-import { CreatureInstance } from "@/models/Creature";
-import type { Creature } from "@/models/Creature";
-import { useI18n } from "vue-i18n";
+import { defineAsyncComponent, defineComponent, watch } from '@vue/runtime-core'
+import { computed, reactive, ref } from '@vue/reactivity'
+import type { Battle, BattleSide, DamageCalculatorBattleSide } from '@/models/Battle'
+import { CreatureInstance } from '@/models/Creature'
+import type { Creature } from '@/models/Creature'
+import { useI18n } from 'vue-i18n'
 import PickCreatureButton from '@/components/damageCalculator/PickCreatureButton.vue'
 import SelectHero from '@/components/SelectHero.vue'
-import { HeroInstance } from "@/models/Hero";
-import type { Spell } from "@/models/Spell";
+import { HeroInstance } from '@/models/Hero'
+import type { Spell } from '@/models/Spell'
 import type { Hero } from '@/models/Hero'
-import type { Skill } from "@/models/Skill";
-import type { Level } from "@/models/Level";
-import { Spells } from "@/models/enums";
-import { getDatabaseStore } from "@/database";
-import type { Terrain } from "@/models/Terrain";
+import type { Skill } from '@/models/Skill'
+import type { Level } from '@/models/Level'
+import { Spells } from '@/models/enums'
+import { getDatabaseStore, initDatabaseStore } from '@/database'
+import type { Terrain } from '@/models/Terrain'
 import SelectTerrain from '@/components/SelectTerrain.vue'
 
 export default defineComponent({
@@ -165,8 +137,8 @@ export default defineComponent({
   props: {
     battleValue: {
       type: Object as () => Battle,
-      required: true
-    }
+      required: true,
+    },
   },
   setup(props) {
     const { t } = useI18n()
@@ -196,10 +168,18 @@ export default defineComponent({
       terrains: [] as Array<Terrain>,
     })
 
-    getDatabaseStore('skills').then(result => data.skills = result)
-    getDatabaseStore('levels').then(result => data.levels = result)
-    getDatabaseStore('spells').then(result => data.spells = result)
-    getDatabaseStore('terrains').then(result => data.terrains = result)
+    getDatabaseStore('creatures').then((creatures) => {
+      if (!creatures.length) {
+        initDatabaseStore('classes')
+        initDatabaseStore('creatures')
+        initDatabaseStore('heroes')
+        initDatabaseStore('levels').then((result) => (data.levels = result))
+        initDatabaseStore('skills').then((result) => (data.skills = result))
+        initDatabaseStore('spells').then((result) => (data.spells = result))
+        initDatabaseStore('terrains').then((result) => (data.terrains = result))
+        initDatabaseStore('towns')
+      }
+    })
 
     const totalDamage = (side: DamageCalculatorBattleSide) => {
       const { minDamage, maxDamage, averageDamage } = side.activeCreature!.calculation
@@ -276,12 +256,12 @@ export default defineComponent({
       if (!effectEnabled) {
         side.activeCreature.effects.push(spell)
       } else {
-        side.activeCreature.effects = side.activeCreature.effects.filter(e => e.id !== spell.id)
+        side.activeCreature.effects = side.activeCreature.effects.filter((e) => e.id !== spell.id)
       }
     }
 
     const isEffectEnabled = (side: DamageCalculatorBattleSide, spell: Spell) => {
-      return side.activeCreature!.effects.findIndex(e => e.id === spell.id) !== -1
+      return side.activeCreature!.effects.findIndex((e) => e.id === spell.id) !== -1
     }
 
     const onSelectTerrain = (terrain: unknown) => {
@@ -292,13 +272,11 @@ export default defineComponent({
         battle.attacker.terrain = terrain as Terrain
         battle.defender.terrain = terrain as Terrain
       }
-
     }
 
     return {
       t,
       battle,
-      battleSides,
       data,
       attackPositiveEffects,
       defensePositiveEffects,
@@ -313,7 +291,7 @@ export default defineComponent({
       isEffectEnabled,
       onSelectTerrain,
     }
-  }
+  },
 })
 </script>
 
@@ -425,7 +403,6 @@ export default defineComponent({
   }
 }
 
-
 .creature-input {
   width: 65px;
   height: 32px;
@@ -474,8 +451,6 @@ export default defineComponent({
   }
 }
 
-
-
 .hero-parameters {
   display: flex;
 

src/components/PageFooter.vue

@@ -117,9 +117,6 @@ export default defineComponent({
       showAboutModal,
       showLicenseModal,
       foundErrorModal,
-      selectedLocale,
-      locales,
-      changeLocale,
     }
   },
 })

src/components/SelectHero.vue

@@ -1,17 +1,17 @@
 <template>
   <Multiselect
-    class="select-hero"
     v-model="selectedHero"
+    class="select-hero"
     :options="heroes"
-    trackBy="name"
+    track-by="name"
     searchable
-    valueProp="id"
+    value-prop="id"
     label="name"
     placeholder="Select hero"
     no-results-text="Hero not found"
     :hide-selected="false"
     :classes="{
-      dropdown: 'multiselect-dropdown'
+      dropdown: 'multiselect-dropdown',
     }"
   >
     <template #option="{ option }">
@@ -35,34 +35,38 @@ import { defineComponent, ref, defineAsyncComponent, watch } from 'vue'
 import Multiselect from '@vueform/multiselect'
 import type { Hero, HeroInstance } from '@/models/Hero'
 import { getDatabaseStore } from '@/database'
-import type { BattleSide } from '@/models/Battle'
 
 export default defineComponent({
+  name: 'SelectHero',
   components: {
     Multiselect,
     CreaturePortrait: defineAsyncComponent(() => import('@/components/damageCalculator/CreaturePortrait.vue')),
   },
   props: {
-    side: String as () => BattleSide,
     value: {
       type: Object as () => Hero | HeroInstance | null,
-      required: true
-    }
+      required: true,
+    },
   },
+  emits: ['selectHero'],
   setup(props, context) {
     const selectedHero = ref(props.value?.id)
     const heroes = ref<Array<Hero>>([])
 
-    getDatabaseStore("heroes").then(heroes_ => heroes.value = heroes_)
+    getDatabaseStore('heroes').then((heroes_) => (heroes.value = heroes_))
 
-    watch(selectedHero, (id) => context.emit('select-hero',  heroes.value.find(h => h.id === id)))
+    watch(selectedHero, (id) =>
+      context.emit(
+        'selectHero',
+        heroes.value.find((h) => h.id === id)
+      )
+    )
 
     return {
       selectedHero,
       heroes,
     }
   },
-  emits: ['select-hero']
 })
 </script>
 

src/components/SelectTerrain.vue

@@ -11,7 +11,7 @@
     no-results-text="Not found"
     :hide-selected="false"
     :classes="{
-      dropdown: 'multiselect-dropdown'
+      dropdown: 'multiselect-dropdown',
     }"
   >
     <template #option="{ option }">
@@ -47,11 +47,16 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['select-terrain'],
+  emits: ['selectTerrain'],
   setup(props, context) {
     const selectedTerrain = ref(0)
 
-    watch(selectedTerrain, (id) => context.emit('select-terrain',  props.terrains.find(t => t.id === id)))
+    watch(selectedTerrain, (id) =>
+      context.emit(
+        'selectTerrain',
+        props.terrains.find((t) => t.id === id)
+      )
+    )
 
     return {
       selectedTerrain,

src/components/base/BaseInputNumber.vue

@@ -1,12 +1,5 @@
 <template>
-  <input
-    :value="value"
-    class="input-number"
-    type="number"
-    :min="min"
-    :max="max"
-    @input="onInput"
-  />
+  <input :value="currentValue" class="input-number" type="number" :min="min" :max="max" @input="onInput" />
 </template>
 
 <script lang="ts">
@@ -32,31 +25,34 @@ export default defineComponent({
     debounce: {
       type: Number,
       default: 0,
-    }
+    },
   },
   emits: ['input'],
   setup(props, context) {
-    const value = ref(props.value)
+    const currentValue = ref(props.value)
     const previousValue = ref(0)
-    const debouncedValue = useDebounce(value, props.debounce)
+    const debouncedValue = useDebounce(currentValue, props.debounce)
 
-    const onInput = (event: any) => {
+    const onInput = (event: Event) => {
       if (!event.target) return
 
-      if (event.target.value < props.min || event.target.value > props.max) {
-        value.value = previousValue.value
-        event.target.value = previousValue.value
+      const target = event.target as HTMLInputElement
+
+      let targetValue = parseInt(target.value)
+      if (targetValue < props.min || targetValue > props.max) {
+        currentValue.value = previousValue.value
+        targetValue = previousValue.value
       } else {
-        value.value = parseInt(event.target.value)
-        previousValue.value = value.value
+        currentValue.value = targetValue
+        previousValue.value = currentValue.value
       }
     }
 
     watch(debouncedValue, () => context.emit('input', debouncedValue.value))
 
     return {
-      value,
-      onInput
+      currentValue,
+      onInput,
     }
   },
 })

src/components/creaturesLibrary/CreatureCard.vue

@@ -52,6 +52,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['click'],
 })
 </script>