<template>
  <div class="flex flex-col justify-center items-center h-dvh relative col">
    <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" alt="Loading" />
  </div>
</template>

<script setup lang="ts" async>
import { downloadCache } from '@/application/utilities'
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { ref } from 'vue'

const gameStore = useGameStore()

const totalItems = ref(0)
const currentItem = ref(0)

Promise.all([
  downloadCache('tiles', new TileStorage()),
  downloadCache('maps', new MapStorage()),
  downloadCache('map_objects', new MapObjectStorage()),
  downloadCache('sprites', new SpriteStorage()),
  downloadCache('character_types', new CharacterTypeStorage()),
  downloadCache('character_hair', new CharacterHairStorage())
]).then(() => {
  gameStore.game.isLoaded = true
})
</script>
