feat: remove indexedDB

use service worker caches instead

src/App.vue

@@ -12,7 +12,8 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
-useRegisterSW({
+import { useStore } from './store'
+const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
   immediate: true,
   onRegistered(r) {
     r &&
@@ -27,8 +28,13 @@ useRegisterSW({
 export default defineComponent({
   name: 'App',
   setup() {
+    const store = useStore()
+    const route = useRoute()
+
+    store.initData()
+
     return {
-      route: useRoute(),
+      route,
     }
   },
 })

src/components/DamageCalculator.vue

@@ -108,20 +108,20 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, watch } from '@vue/runtime-core'
-import { reactive, ref } from '@vue/reactivity'
-import type { Battle, 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 SelectTerrain from '@/components/SelectTerrain.vue'
+import type { Battle, DamageCalculatorBattleSide } from '@/models/Battle'
+import type { Creature } from '@/models/Creature'
+import { CreatureInstance } from '@/models/Creature'
+import type { Hero } from '@/models/Hero'
 import { HeroInstance } from '@/models/Hero'
 import type { Spell } from '@/models/Spell'
-import type { Hero } from '@/models/Hero'
 import type { Terrain } from '@/models/Terrain'
-import SelectTerrain from '@/components/SelectTerrain.vue'
 import { useStore } from '@/store'
+import { reactive, ref } from '@vue/reactivity'
+import { defineAsyncComponent, defineComponent, watch } from '@vue/runtime-core'
+import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
   name: 'DamageCalculator',
@@ -203,9 +203,7 @@ export default defineComponent({
 
       if (hero) {
         const newHero = new HeroInstance(hero as Hero)
-        newHero.initialize().finally(() => {
-          side.hero = newHero
-        })
+        side.hero = newHero
       } else {
         side.hero = null
       }

src/components/PageFooter.vue

@@ -67,11 +67,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
 import BaseModal from '@/components/base/BaseModal.vue'
-import { loadResourcesByLocale } from '@/database'
-import { useI18n } from 'vue-i18n'
 import { loadLocaleMessages, setI18nLanguage } from '@/i18n'
+import { defineComponent, ref } from 'vue'
+// import { loadResourcesByLocale } from '@/database'
+import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
   name: 'PageFooter',
@@ -109,7 +109,7 @@ export default defineComponent({
       await loadLocaleMessages(value)
       getLocaleMessage(value)
       document.title = t(document.title).toString()
-      loadResourcesByLocale('creatures', value as 'ru' | 'en')
+      // loadResourcesByLocale('creatures', value as 'ru' | 'en')
     }
 
     return {

src/models/Hero.ts

@@ -1,4 +1,4 @@
-import { getObjectById } from '@/database'
+import { classes } from '@/assets/database/classes'
 
 export interface Hero {
   id: number
@@ -67,22 +67,15 @@ export class HeroInstance implements Hero {
       earth: 0,
       water: 0,
     }
-  }
-
-  public async initialize(): Promise<void> {
-    try {
-      const heroClass = await getObjectById('classes', this.classId)
 
-      if (heroClass) {
-        this.stats = {
-          attack: heroClass.attack,
-          defense: heroClass.defense,
-          knowledge: heroClass.knowledge,
-          power: heroClass.power,
-        }
+    const heroClass = classes.find((classObject) => classObject.id === this.classId)
+    if (heroClass) {
+      this.stats = {
+        attack: heroClass.attack,
+        defense: heroClass.defense,
+        knowledge: heroClass.knowledge,
+        power: heroClass.power,
       }
-    } catch (error) {
-      console.error(error)
     }
   }
 }

src/store.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { DataStore, getDatabaseStore, initDatabaseStore } from './database'
 import { Class } from './models/Class'
 import { Creature } from './models/Creature'
 import { Spells } from './models/enums'
@@ -10,7 +9,7 @@ import { Spell } from './models/Spell'
 import { Terrain } from './models/Terrain'
 import { Town } from './models/Town'
 
-export interface PiniaStateData {
+export interface StoreState {
   classes: Array<Class>
   creatures: Array<Creature>
   heroes: Array<Hero>
@@ -22,19 +21,18 @@ export interface PiniaStateData {
 }
 
 export const useStore = defineStore('data', {
-  state: () =>
-    ({
-      classes: [],
-      creatures: [],
-      heroes: [],
-      skills: [],
-      levels: [],
-      terrains: [],
-      spells: [],
-      towns: [],
-    } as PiniaStateData),
+  state: (): StoreState => ({
+    classes: [],
+    creatures: [],
+    heroes: [],
+    skills: [],
+    levels: [],
+    terrains: [],
+    spells: [],
+    towns: [],
+  }),
   getters: {
-    attackPositiveEffects(state) {
+    attackPositiveEffects(): Array<Spell> {
       const attackPositiveEffectsIds = [
         Spells.Bless,
         Spells.Bloodlust,
@@ -43,47 +41,22 @@ export const useStore = defineStore('data', {
         Spells.Precision,
         Spells.Slayer,
       ]
-
-      return state.spells.filter((spell) => attackPositiveEffectsIds.indexOf(spell.id) !== -1)
+      return this.spells.filter((spell) => attackPositiveEffectsIds.indexOf(spell.id) !== -1)
     },
-    defensePositiveEffects(state) {
+    defensePositiveEffects(): Array<Spell> {
       const defensePositiveEffectsIds = [Spells.Shield, Spells.StoneSkin, Spells.AirShield]
-      return state.spells.filter((spell) => defensePositiveEffectsIds.indexOf(spell.id) !== -1)
+      return this.spells.filter((spell) => defensePositiveEffectsIds.indexOf(spell.id) !== -1)
     },
-    attackNegativeEffects(state) {
+    attackNegativeEffects(): Array<Spell> {
       const attackNegativeEffectsIds = [Spells.Curse, Spells.Weakness, Spells.DisruptingRay]
-      return state.spells.filter((spell) => attackNegativeEffectsIds.indexOf(spell.id) !== -1)
+      return this.spells.filter((spell) => attackNegativeEffectsIds.indexOf(spell.id) !== -1)
     },
   },
   actions: {
-    async initData() {
-      const dataStores: Array<DataStore> = [
-        'classes',
-        'creatures',
-        'heroes',
-        'skills',
-        'levels',
-        'terrains',
-        'spells',
-        'towns',
-      ]
-
-      dataStores.forEach(async (datastore: DataStore) => {
-        let data = await getDatabaseStore(datastore)
-
-        if (!data || !data.length) {
-          data = await initDatabaseStore(datastore)
-        }
-
-        // TODO: fix
-        if (datastore === 'classes') this.classes = data as Class[]
-        if (datastore === 'creatures') this.creatures = data as Creature[]
-        if (datastore === 'heroes') this.heroes = data as Hero[]
-        if (datastore === 'skills') this.skills = data as Skill[]
-        if (datastore === 'levels') this.levels = data as Level[]
-        if (datastore === 'terrains') this.terrains = data as Terrain[]
-        if (datastore === 'spells') this.spells = data as Spell[]
-        if (datastore === 'towns') this.towns = data as Town[]
+    initData() {
+      const tables = ['classes', 'creatures', 'heroes', 'skills', 'levels', 'terrains', 'spells', 'towns']
+      tables.forEach(async (table: string) => {
+        this[table] = (await import(`./assets/database/${table}.ts`))[table]
       })
     },
   },