<template>
  <div class="flex flex-col justify-center items-center h-dvh relative col">
    <svg width="40" height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="4" cy="12" r="3" fill="white">
        <animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
      </circle>
      <circle cx="12" cy="12" r="3" fill="white">
        <animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
      </circle>
      <circle cx="20" cy="12" r="3" fill="white">
        <animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
      </circle>
    </svg>
  </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>
