<script setup lang="ts">
defineProps<{
    imageUrls: Record<string, string>
    countdownInterval: number
    isDivDescVisible: boolean
    tick: number
    rank: number
    currentGuFrame: number
}>()

defineEmits<{
    touch: []
}>()
</script>

<template>
    <div class="h5-page game-stage">
        <Transition name="div-desc-slide" appear>
            <div v-if="isDivDescVisible" class="div-desc">
                <span class="desc-clock" aria-hidden="true"></span>
                <span class="desc-time">{{ countdownInterval }}</span>
            </div>
        </Transition>
        <div class="img-logo"></div>
        <div class="play-content">
            <div>当前击鼓积分</div>
            <div>{{ tick }}</div>
            <div>当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
        </div>
        <div class="bg-bottom"></div>
        <div class="play-gu" :style="{ backgroundPosition: `-${currentGuFrame * 400}px 0` }" @click="$emit('touch')"></div>
    </div>
</template>

<style scoped>
.game-stage {
    position: absolute;
    width: 750px;
    height: 1624px;
    padding: 0;
}

.div-desc {
    position: absolute;
    top: 150px;
    left: var(--stage-viewport-left, 0);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 180px;
    height: 80px;
    border-radius: 0 56px 56px 0;
    background: rgba(40, 12, 8, 0.48);
    color: #fff;


    .desc-clock {
        position: absolute;
        left: 20px;
        width: 38px;
        height: 44px;
        border-radius: 50%;
        background: v-bind('imageUrls.clock') center/cover;
    }

    .desc-time {
        position: absolute;
        right: 40px;
        color: white;
        font-size: 35pt;
        line-height: 1;
    }
}

.div-desc-slide-enter-active {
    transition:
        transform 360ms ease-out 220ms,
        opacity 360ms ease-out 220ms;
}

.div-desc-slide-leave-active {
    transition:
        transform 260ms ease-in,
        opacity 260ms ease-in;
}

.div-desc-slide-enter-from,
.div-desc-slide-leave-to {
    opacity: 0;
    transform: translateX(-110%);
}

.div-desc-slide-enter-to,
.div-desc-slide-leave-from {
    opacity: 1;
    transform: translateX(0);
}

.bg-bottom {
    position: absolute;
    bottom: 0;
    left: var(--stage-viewport-left, 0);
    width: var(--stage-viewport-width, 750px);
    height: 479px;
    background: v-bind('imageUrls.bg2') center/cover;
    opacity: 0.6;
}

.img-logo {
    position: absolute;
    top: 66px;
    left: 50%;
    width: 428px;
    height: 77px;
    background: v-bind('imageUrls.logo') center/cover;
    transform: translateX(-50%);
}

.play-content {
    margin-top: 240px;
    margin-left: 40px;
    margin-right: 40px;
    padding: 30px 0;
    border-radius: 25px;
    background: rgba(40, 12, 8, 0.52);
    color: white;
    font-size: 28pt;
    text-align: center;
}

.play-content>div:nth-child(2) {
    display: inline-block;
    margin: 10px 0;
    background: linear-gradient(180deg, #FFE68D 0%, #FAD500 100%);
    background-clip: text;
    color: transparent;
    font-size: 48pt;
    font-weight: bold;
    transform: scaleY(1.2);
    transform-origin: center;
    -webkit-background-clip: text;
}

.play-content>div:nth-child(3) {
    position: relative;
    top: -10px;
}

.play-content>div:nth-child(3) label {
    color: white;
    font-size: 42pt;
}

.play-gu {
    position: absolute;
    bottom: 350px;
    left: 50%;
    width: 400px;
    height: 400px;
    background-image: v-bind('imageUrls.guSprite');
    background-size: 1200px 400px;
    background-repeat: no-repeat;
    transform: translateX(-50%) scale(2.4);
}
</style>
