<script setup lang="ts">
import { cssAssetUrl } from '@/commons/assets'
import { $getWechat } from '@/commons/utils';
import { useGameSocket } from '@/composables/useGameSocket';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'

const imageUrls = {
    bg: cssAssetUrl('loading-bg.png'),
    loading: cssAssetUrl('loading.png'),
    icon: cssAssetUrl('loading-icon.png')
    // bg2: cssAssetUrl('game1/bg2.png'),
    // logo: cssAssetUrl('logo.png'),
    // title: cssAssetUrl('game1/title.png'),
    // avatar: cssAssetUrl('avatar-yellow.png'),
    // gu: cssAssetUrl('game1/gu.png'),
    // clock: cssAssetUrl('game1/clock.png'),
    // gu01: cssAssetUrl('game1/gu01.png'),
    // gu02: cssAssetUrl('game1/gu02.png'),
    // gu03: cssAssetUrl('game1/gu03.png'),
    // scoreBg: cssAssetUrl('game1/score-bg.png'),
    // back: cssAssetUrl('game1/back.png'),
    // replay: cssAssetUrl('game1/replay.png'),
    // close: cssAssetUrl('game1/close.png'),

    // rule: cssAssetUrl('game1/rule.png')
}
const _offSocketMessage = ref<(() => void) | undefined>()
const wechat = $getWechat()
if (wechat) {
    const gameId = '';
    const { offSocketMessage } = useGameSocket({
        gameId,
        auth: {
            userid: wechat.token,
        },
    })
    _offSocketMessage.value = offSocketMessage
}
onMounted(() => {
    document.title = '互动游戏 - 等待中...'
})

onBeforeUnmount(() => {
    _offSocketMessage.value?.()
})

</script>

<template>
    <div class="bg">
        <div class="loading">
            <div class="icon"></div>
        </div>
    </div>
</template>
<style scoped>
.bg {
    width: 100vw;
    height: 100vh;
    background: v-bind('imageUrls.bg') center no-repeat;
    position: relative;

    .loading {
        width: 473px;
        height: 733px;
        background: v-bind('imageUrls.loading') center / cover no-repeat;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.72);

        .icon {
            width: 190px;
            height: 232px;
            background: v-bind('imageUrls.icon') center / cover no-repeat;
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: center center;
            animation: swing 0.8s ease-in-out infinite alternate;
        }
    }
}

@keyframes swing {
    0% {
        transform: translateX(-50%) scale(0.72) rotate(-30deg);
    }

    100% {
        transform: translateX(-50%) scale(0.72) rotate(15deg);
    }
}
</style>
