feat: game3 第一页完成；

frontend-large/src/pages/game3/Game3.vue

+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import Loading from './views/LoadingView.vue'
+import Rank1 from './views/Rank1View.vue'
+import Rank2 from './views/Rank2View.vue'
+import { useAdminGameSocket } from '@/composables/useAdminGameSocket'
+import type Player from '@/commons/player.ts'
+import { playApplauseMusic, playGame6Music, stopAllMusic, stopGame6Music } from '@/commons/music'
+import { $confirm, $remove_socket_storage, $toast } from '@/commons/utils.ts'
+
+const router = useRouter()
+
+type GameScreen = 'loading' | 'rank1' | 'rank2'
+
+const PLAYER_LIMIT = 20
+const RANK_LIMIT = 10
+
+const emptyLoadingPlayer = () => ({
+    score: '-',
+    telephone: '',
+    userid: '',
+    wechat_id: '',
+    nickname: '虚位以待',
+    avatar: '',
+})
+
+const emptyRankPlayer = (index: number): Player => ({
+    wechat_id: `empty-${index}`,
+    nickname: '虚位以待',
+    avatar: '',
+    score: '-',
+})
+
+const screen = ref<GameScreen>('loading')
+const loadingPlayers = ref<any[]>(Array.from({ length: PLAYER_LIMIT }, emptyLoadingPlayer))
+const playerCount = ref(0)
+const rankPlayers = ref<Player[]>(Array.from({ length: RANK_LIMIT }, (_, index) => emptyRankPlayer(index)))
+const rank1Ref = ref<InstanceType<typeof Rank1> | null>(null)
+let isPlayingStartAnimation = false
+
+const confirmRefresh = (event: BeforeUnloadEvent) => {
+    event.preventDefault()
+    event.returnValue = ''
+}
+
+const renderPlayers = (data: any) => {
+    const players = Array.isArray(data?.list) ? data.list : []
+    playerCount.value = Number(data?.count ?? players.length)
+    loadingPlayers.value = Array.from(
+        { length: PLAYER_LIMIT },
+        (_, index) => players[index] ?? emptyLoadingPlayer(),
+    )
+}
+
+const updateRankPlayers = (data: any) => {
+    if (!Array.isArray(data)) return
+
+    rankPlayers.value = Array.from(
+        { length: RANK_LIMIT },
+        (_, index) => data[index] ?? emptyRankPlayer(index),
+    )
+}
+
+const playerToRankPlayer = (player: any, index: number): Player => ({
+    telephone: player?.telephone ?? '',
+    userid: player?.userid ?? '',
+    wechat_id: player?.wechat_id || `empty-${index}`,
+    nickname: player?.nickname || '虚位以待',
+    avatar: player?.avatar || '',
+    score: player?.score ?? '-',
+})
+
+const seedRankPlayersFromLoading = () => {
+    rankPlayers.value = Array.from(
+        { length: RANK_LIMIT },
+        (_, index) => {
+            const player = loadingPlayers.value[index]
+
+            if (!player?.userid && !player?.wechat_id) {
+                return emptyRankPlayer(index)
+            }
+
+            return playerToRankPlayer(player, index)
+        },
+    )
+}
+
+const resetRoundState = () => {
+    playerCount.value = 0
+    loadingPlayers.value = Array.from({ length: PLAYER_LIMIT }, emptyLoadingPlayer)
+    rankPlayers.value = Array.from({ length: RANK_LIMIT }, (_, index) => emptyRankPlayer(index))
+    isPlayingStartAnimation = false
+}
+
+const gotoLoading = (reset = false) => {
+    if (reset) {
+        resetRoundState()
+    }
+
+    screen.value = 'loading'
+}
+
+const gotoRank1WithIntro = async () => {
+    if (isPlayingStartAnimation) return
+
+    isPlayingStartAnimation = true
+    seedRankPlayersFromLoading()
+    screen.value = 'rank1'
+    await nextTick()
+    await rank1Ref.value?.startIntro()
+    screen.value = 'rank2'
+    isPlayingStartAnimation = false
+}
+
+function handleRoomState(data: any) {
+    if (Array.isArray(data?.list)) {
+        renderPlayers(data)
+    }
+
+    switch (data?.status) {
+        case 0:
+            gotoLoading(true)
+            createRoom(6)
+            break
+        case 1:
+            gotoLoading()
+            break
+        case 2:
+            seedRankPlayersFromLoading()
+            screen.value = 'rank1'
+            break
+        case 3:
+            screen.value = 'rank2'
+            break
+    }
+}
+const gameId='game6'
+const { startGame, createRoom, backRoom, closeRoom } = useAdminGameSocket({
+    gameId,
+    onRoomState: handleRoomState,
+    onRoomJoin: (data) => {
+        renderPlayers(data)
+        gotoLoading()
+    },
+    onGameStart: gotoRank1WithIntro,
+    onRoomRank: updateRankPlayers,
+    onRelogin: async () => {
+        $remove_socket_storage();
+        await router.replace('/')
+    }
+})
+
+const startGameWithMusic = () => {
+    if (playerCount.value == 0) {
+        // alert('房间中没有玩家')
+        $toast('房间中没有玩家');
+        return;
+    }
+    startGame()
+}
+
+const nextRound = () => {
+    gotoLoading(true)
+    //重开房间
+    backRoom(6)
+}
+
+const nextRoundWithMusic = () => {
+    nextRound()
+}
+
+const backHandler = async() => {
+    const ok = await $confirm({
+        title: '提示',
+        message: '是否关闭当前房间回到首页',
+        confirmText: '确定',
+        cancelText: '取消',
+    })
+    if (ok) {
+        closeRoom();
+        stopAllMusic()
+        router.replace('/main');
+    }
+}
+
+onMounted(() => {
+    window.addEventListener('beforeunload', confirmRefresh)
+    playGame6Music()
+})
+
+onUnmounted(() => {
+    stopAllMusic();
+    window.removeEventListener('beforeunload', confirmRefresh)
+})
+
+watch(screen, (value) => {
+    // console.log(value);
+    if(value == 'rank2'){
+        playApplauseMusic();
+    }else if(value == 'loading'){
+        playGame6Music();
+    }
+})
+</script>
+
+<template>
+    <Loading v-if="screen === 'loading'" :players="loadingPlayers" :player-count="playerCount"
+        @start="startGameWithMusic" @back="backHandler" />
+    <Rank1 v-else-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" />
+    <Rank2 v-else :rank-list="rankPlayers" @next="nextRoundWithMusic" @back="backHandler" />
+</template>

frontend-large/src/pages/game3/views/LoadingView.vue

+<script setup lang="ts">
+import { ref } from 'vue'
+import router from '@/router';
+import { $format_str } from '@/commons/utils.ts';
+import DesignStage from '@/components/DesignStage.vue'
+import { assetUrl, cssAssetUrl } from '@/commons/assets.ts';
+
+defineProps<{
+    players: any[];
+    playerCount: number;
+}>();
+
+const emit = defineEmits<{
+    start: [];
+    back:[];
+}>();
+
+const imageUrls = {
+    bg: cssAssetUrl('game3/bg.webp'),
+    logo: cssAssetUrl('game1/logo.png'),
+    title1: cssAssetUrl('game3/title.webp'),
+    title2: cssAssetUrl('game1/title2.png'),
+    qrcode: assetUrl('game3/qrcode.png'),
+    // gu: cssAssetUrl('game1/gu.png'),
+
+    // bg: cssAssetUrl('game1/bg.png'),
+    // logo: cssAssetUrl('game1/logo.png'),
+    // title1: cssAssetUrl('game1/title1.png'),
+    // title2: cssAssetUrl('game1/title2.png'),
+    // qrcode: assetUrl('game1/qrcode.png'),
+    // gu: cssAssetUrl('game1/gu.png'),
+    imgMole: cssAssetUrl('game3/left.webp'),
+    imgRabbit: cssAssetUrl('game3/right.webp'),
+
+    bottomLayers: cssAssetUrl('game1/bottom-layers.png'),
+    avatarAnimation: cssAssetUrl('avatar-red_animation.png'),
+    avatar: cssAssetUrl('avatar-red.png'),
+    line: cssAssetUrl('game1/line.png'),
+    // start1: cssAssetUrl('game1/start-1.png'),
+    // start2: cssAssetUrl('game1/start-2.png'),
+
+    start: cssAssetUrl('game1/start.png'),
+    back: cssAssetUrl('game1/back.png'),
+};
+
+const isStartPressed = ref(false);
+
+const pressStartButton = () => {
+    isStartPressed.value = true;
+    emit('start');
+};
+
+const releaseStartButton = () => {
+    isStartPressed.value = false;
+};
+
+const renderAvatar = (item: any | null) => {
+    if (item && item.avatar) {
+        return `background: url("${String(item.avatar).replace(/"/g, '\\"')}") center / cover no-repeat;`
+    }
+    return `background: ${imageUrls.avatar} center / cover no-repeat;`
+}
+</script>
+
+<template>
+    <DesignStage>
+        <div class="bg">
+            <div class="img-logo"></div>
+            <div class="img-title1"></div>
+            <!-- <div class="img-title2"></div> -->
+            <div class="img-qrcode-container">
+                <div class="img-qrcode"><img :src="imageUrls.qrcode" /></div>
+                <div class="txt-qrcode">微信扫码参与</div>
+            </div>
+            <div class="img-mole"></div>
+            <div class="img-rabbit"></div>
+            <div class="list-container">
+                <div class="txt-count">当前在线人数 <span>{{ playerCount }}</span></div>
+                <div class="list-container-left">
+                    <div v-for="(item, index) in players" :key="item.userid || item.wechat_id || `empty-${index}`">
+                        <div>
+                            <div class="img-avatar-container">
+                                <div class="img-avatar" :style="`${renderAvatar(item)}`"></div>
+                            </div>
+                            <div class="txt-nickname">{{ $format_str(item.nickname, 12) }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="list-container-line"></div>
+                <div class="list-container-right">
+                    <!-- <div class="btn-start" :class="{ pressed: isStartPressed }" @pointerdown="pressStartButton"
+                        @pointerup="releaseStartButton" @pointerleave="releaseStartButton"
+                        @pointercancel="releaseStartButton"></div> -->
+                    <div class="btn-start" @click="pressStartButton"></div>
+                    <div class="btn-back" @click="emit('back')"></div>
+                </div>
+            </div>
+        </div>
+    </DesignStage>
+</template>
+
+<style scoped>
+.bg {
+    width: 1920px;
+    height: 1080px;
+    background: v-bind('imageUrls.bg') center / cover no-repeat;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.img-logo {
+    background: v-bind('imageUrls.logo');
+    background-size: cover;
+    width: 428px;
+    height: 77px;
+    position: absolute;
+    left: 37px;
+    top: 82px;
+}
+
+.img-title1 {
+    background: v-bind('imageUrls.title1');
+    width: 910px;
+    height: 437px;
+    /* margin: 0 auto; */
+    position: absolute;
+    left: 511px;
+    top:0;
+}
+
+.img-title2 {
+    background: v-bind('imageUrls.title2');
+    width: 643px;
+    height: 140px;
+    margin: 0 auto;
+    position: relative;
+    top: 80px;
+}
+
+.img-qrcode-container {
+    width: 144px;
+    height: 177px;
+    position: absolute;
+    z-index: 1;
+    top: 40px;
+    right: 40px;
+
+    .img-qrcode {
+        width: 100%;
+        height: 144px;
+        border-radius: 10px;
+        img {
+            width: 147px;
+            height: 147px;
+        }
+    }
+
+    .txt-qrcode {
+        font-size: 24px;
+        color: white;
+    }
+}
+
+.img-mole {
+    background: v-bind('imageUrls.imgMole') center / cover no-repeat;
+    width: 344px;
+    height: 354px;
+    position: absolute;
+    top: 311px;
+    left: 144px;
+}
+
+.img-rabbit {
+    background: v-bind('imageUrls.imgRabbit') center / cover no-repeat;
+    width: 633px;
+    height: 367px;
+    position: absolute;
+    top: 293px;
+    left: 1260px;
+}
+
+.list-container {
+    background: v-bind('imageUrls.bottomLayers');
+    width: 1800px;
+    height: 397px;
+    position: absolute;
+    left: 60px;
+    bottom: 60px;
+    border: 3px solid #AA0000;
+    border-radius: 10px;
+
+    .txt-count {
+        font-size: 36px;
+        margin-left: 30px;
+        margin-top: 20px;
+        color: #AA0000;
+        font-weight: bold;
+
+        >span {
+            margin-left: 20px;
+            font-size: 48px;
+            position: relative;
+            top: 5px;
+        }
+    }
+
+    .list-container-left {
+        float: left;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        row-gap: 20px;
+        width: 73%;
+        margin-top: 30px;
+        height: 250px;
+        align-content: center;
+
+        .img-avatar-container {
+            position: relative;
+            margin: 0 auto;
+            width: 72px;
+            height: 72px;
+            border-radius: 36px;
+        }
+
+        .img-avatar-container::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background: v-bind('imageUrls.avatarAnimation') center / cover no-repeat;
+            animation: avatar-rotate 10s linear infinite;
+        }
+
+        .img-avatar {
+            position: relative;
+            top: 6px;
+            z-index: 1;
+            margin: 0 auto;
+            width: 60px;
+            height: 60px;
+            border-radius: 30px;
+            /* background: v-bind('imageUrls.avatar'); */
+        }
+
+        .txt-nickname {
+            color: #666;
+            font-size: 20px;
+            text-align: center;
+        }
+    }
+
+    .list-container-line {
+        float: left;
+        width: 1px;
+        height: 281px;
+        margin-left: 50px;
+        background: v-bind('imageUrls.line') center no-repeat;
+    }
+
+    .list-container-right {
+        float: left;
+
+        .btn-start {
+            width: 316px;
+            height: 105px;
+            margin-left: 60px;
+            margin-top: 10px;
+            background: v-bind('imageUrls.start');
+            cursor: pointer;
+        }
+
+        /* .btn-start.pressed {
+            background: v-bind('imageUrls.start2');
+        } */
+
+        .btn-back {
+            width: 316px;
+            height: 105px;
+            margin-left: 60px;
+            margin-top: 30px;
+            background: v-bind('imageUrls.back');
+            cursor: pointer;
+        }
+    }
+}
+</style>

frontend-large/src/pages/game3/views/Rank2View.vue

+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import DesignStage from '../../../components/DesignStage.vue'
+import type Player from '../../../commons/player.ts'
+import { cssAssetUrl } from '@/commons/assets.ts';
+
+const props = defineProps<{
+    rankList: Player[];
+}>();
+
+const emit = defineEmits<{
+    next: [];
+    back: [];
+}>();
+
+const FINAL_RANK_LIMIT = 10;
+const imageUrls = {
+    bg: cssAssetUrl('game6/bg3.png'),
+    logo: cssAssetUrl('game1/logo.png'),
+    title: cssAssetUrl('game6/title3.png'),
+    podium: cssAssetUrl('game6/podium.png'),
+    vip: cssAssetUrl('game6/vip.png'),
+    avatar: cssAssetUrl('avatar-yellow.png'),
+    avatarAnimation: cssAssetUrl('avatar-yellow_animation.png'),
+    rankIcon: cssAssetUrl('game6/no4.png'),
+    next: cssAssetUrl('game1/next.png'),
+    back: cssAssetUrl('game1/back.png'),
+};
+
+const emptyPlayer = (index: number): Player => ({
+    active: false,
+    wechat_id: `empty-${index}`,
+    nickname: '虚位以待',
+    avatar: '',
+    score: 0,
+});
+
+const list = ref<Player[]>(Array.from({ length: FINAL_RANK_LIMIT }, (_, index) => emptyPlayer(index)));
+
+const updateFinalRank = (rankList: Player[]) => {
+    list.value = Array.from(
+        { length: FINAL_RANK_LIMIT },
+        (_, index) => rankList[index] ?? emptyPlayer(index),
+    );
+};
+
+watch(
+    () => props.rankList,
+    (rankList) => updateFinalRank(rankList),
+    { immediate: true, deep: true },
+);
+
+const renderAvatar = (item: any | null) => {
+    if (item && item.avatar) {
+        return `background: url('${item.avatar}') center / cover no-repeat;`
+    }
+    return `background: ${imageUrls.avatar} center / cover no-repeat;`
+}
+</script>
+
+<template>
+    <DesignStage>
+        <div class="bg">
+            <div class="img-logo"></div>
+            <div class="img-title"></div>
+            <div class="img-title2"></div>
+
+            <div class="podium">
+                <div class="img-vip"></div>
+                <div class="rank-no1">
+                    <div class="avatar" :style="`${renderAvatar(list[0])}`">
+                    </div>
+                    <div class="nickname">{{ list[0]?.nickname }}</div>
+                </div>
+                <div class="rank-no2">
+                    <div class="avatar" :style="`${renderAvatar(list[1])}`">
+                    </div>
+                    <div class="nickname">{{ list[1]?.nickname }}</div>
+                </div>
+                <div class="rank-no3">
+                    <div class="avatar" :style="`${renderAvatar(list[2])}`">
+                    </div>
+                    <div class="nickname">{{ list[2]?.nickname }}</div>
+                </div>
+            </div>
+
+            <div class="rank-container">
+                <div v-for="(item, index) in list.slice(3)" :key="item.userid || item.wechat_id || `rank-${index}`">
+                    <div class="no-icon">{{ index + 4 }}</div>
+                    <div>
+                        <div class="img-avatar-container">
+                            <div class="img-avatar" :style="`${renderAvatar(list[index + 3])}`"></div>
+                        </div>
+                        <div class="txt-nickname">{{ item.nickname }}</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="btn-next" @click="emit('next')"></div>
+            <div class="btn-back" @click="emit('back')"></div>
+        </div>
+    </DesignStage>
+</template>
+
+<style scoped>
+.bg {
+    width: 1920px;
+    height: 1080px;
+    background: v-bind('imageUrls.bg') center / cover no-repeat;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.img-logo {
+    background: v-bind('imageUrls.logo');
+    background-size: cover;
+    width: 428px;
+    height: 77px;
+    position: absolute;
+    left: 37px;
+    top: 82px;
+}
+
+.img-title {
+    background: v-bind('imageUrls.title') center / cover no-repeat;
+    width: 831px;
+    height: 120px;
+    margin: 0 auto;
+    margin-top: 64px;
+}
+
+/* .img-title2 {
+    background: v-bind('imageUrls.title2') no-repeat center;
+    width: 457px;
+    height: 57px;
+    margin: 0 auto;
+    margin-top: 37px;
+} */
+
+.podium {
+    background: v-bind('imageUrls.podium') no-repeat center;
+    width: 1920px;
+    height: 740px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    .img-vip {
+        width: 969px;
+        height: 238px;
+        position: absolute;
+        left: 480px;
+        top: -60px;
+        background: v-bind('imageUrls.vip') center / cover no-repeat;
+    }
+
+    .rank-no1 {
+        position: relative;
+
+        .avatar {
+            width: 160px;
+            height: 160px;
+            border-radius: 80px;
+            position: absolute;
+            left: 884px;
+            top: -7px;
+        }
+
+        .nickname {
+            width: 220px;
+            height: 52px;
+            background: linear-gradient(0deg, #FFBF5A 0%, #FFE47A 100%);
+            border: 1px solid #FFF9DC;
+            text-align: center;
+            line-height: 46px;
+            position: absolute;
+            left: 850px;
+            top: 136px;
+            z-index: 1;
+            border-radius: 26px;
+            font-size: 30px;
+            color: #4B1A14;
+        }
+    }
+
+    .rank-no2 {
+        position: relative;
+
+        .avatar {
+            width: 144px;
+            height: 144px;
+            border-radius: 72px;
+            position: absolute;
+            left: 488px;
+            top: 27px;
+            /* border: 1px solid red; */
+        }
+
+        .nickname {
+            width: 220px;
+            height: 52px;
+            background: linear-gradient(0deg, #AEA6A7 0%, #EAE4DF 100%);
+            border: 1px solid white;
+            color: #383636;
+            text-align: center;
+            line-height: 52px;
+            position: absolute;
+            left: 447px;
+            top: 160px;
+            z-index: 1;
+            border-radius: 23px;
+            font-size: 30px;
+        }
+    }
+
+    .rank-no3 {
+        position: relative;
+
+        .avatar {
+            width: 144px;
+            height: 144px;
+            border-radius: 72px;
+            position: absolute;
+            left: 1297px;
+            top: 26px;
+        }
+
+        .nickname {
+            width: 220px;
+            height: 52px;
+            background: linear-gradient(0deg, #F3AE76 0%, #F9CDA3 100%);
+            color: #6F3A0E;
+            text-align: center;
+            line-height: 46px;
+            position: absolute;
+            left: 1255px;
+            top: 160px;
+            z-index: 1;
+            border-radius: 26px;
+            font-size: 30px;
+            border: 1px solid #FEFEFD;
+        }
+    }
+}
+
+.rank-container {
+    display: flex;
+    align-items: center;
+    width: 1570px;
+    height: 115px;
+    position: absolute;
+    bottom: 263px;
+    left: 200px;
+
+    >div {
+        flex: 1;
+        display: grid;
+        width: 100px;
+        height: 100%;
+
+        .no-icon {
+            background: v-bind('imageUrls.rankIcon') no-repeat center;
+            width: 42px;
+            height: 47px;
+            position: absolute;
+            text-align: center;
+            line-height: 42px;
+            color: #CC7F36;
+            font-weight: bold;
+            top: 50px;
+        }
+
+        .img-avatar-container {
+            position: relative;
+            margin: 0 auto;
+            margin-top: 10px;
+            width: 72px;
+            height: 72px;
+            border-radius: 36px;
+            transform: scale(1.6);
+            top: 50px;
+        }
+
+        .img-avatar-container::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background: v-bind('imageUrls.avatarAnimation') center / cover no-repeat;
+            animation: avatar-rotate 10s linear infinite;
+        }
+
+        .img-avatar {
+            position: relative;
+            top: 6px;
+            z-index: 1;
+            margin: 0 auto;
+            width: 60px;
+            height: 60px;
+            border-radius: 30px;
+            background: v-bind('imageUrls.avatar') center / cover no-repeat;
+        }
+
+        .txt-nickname {
+            color: #F9EBCB;
+            font-size: 22px;
+            text-align: center;
+            position: absolute;
+            top: 170px;
+            text-align: center;
+            /* left:10px; */
+            margin-left: 68px;
+        }
+    }
+}
+
+.btn-next {
+    position: absolute;
+    bottom: 50px;
+    left: 620px;
+    width: 316px;
+    height: 105px;
+    cursor: pointer;
+    background: v-bind('imageUrls.next') center / cover no-repeat;
+}
+.btn-back {
+    position: absolute;
+    bottom: 50px;
+    left: 1020px;
+    width: 316px;
+    height: 105px;
+    cursor: pointer;
+    background: v-bind('imageUrls.back') center / cover no-repeat;
+}
+</style>

frontend-large/src/router/index.ts

@@ -4,6 +4,7 @@ import { $read } from '@/commons/utils'
 import Login from '@/pages/Login.vue'
 import Main from '@/pages/Main.vue'
 import Game1 from '@/pages/game1/Game.vue'
+import Game3 from '@/pages/game3/Game3.vue'
 import Game4 from '@/pages/game4/Game4.vue'
 import Game5 from '@/pages/game5/Game5.vue'
 import Game6 from '@/pages/game6/Game.vue'
@@ -37,6 +38,14 @@ const router = createRouter({
             },
         },
         {
+            path: '/game3',
+            name: 'Game3',
+            component: Game3,
+            meta: {
+                requiresAuth: true,
+            },
+        },
+        {
             path: '/game4',
             name: 'Game4',
             component: Game4,