<script setup lang="ts">
import PhaserContainer from '@/components/game/PhaserContainer.vue'
import { emitter } from '@/plugins'
import { useUserStore } from '@/store'
import { useRouter } from 'vue-router'

emitter.on('completeGame', () => {
    console.log('complete122')
    const splash = document.getElementById('splash-screen')
    if (splash) {
        splash.removeAttribute('isHold')
        splash.style.opacity = '0'
        splash.style.display = 'none'
    }
})

const router = useRouter()
const userStore = useUserStore()
emitter.on('enterMoments', () => {
    if (!userStore.userInfo.id) {
        router.push({ name: 'login' })
    } else {
        router.push({ name: 'moments' })
    }
})
</script>

<template>
    <Suspense>
        <PhaserContainer />

        <!-- <template #fallback>
      <div class="placeholder">
        Downloading ...
      </div>
    </template> -->
    </Suspense>
</template>

<style scoped>
.placeholder {
    font-size: 2rem;
    font-family: 'Courier New', Courier, monospace;
}
</style>
