feat: 添加game2

frontend-h5/src/commons/utils.ts

@@ -57,7 +57,7 @@ export function $read<T>(key: string | StorageRecord, defaultValue?: T): T | Sto
 }
 
 export function $format_str(str: string, num: number) {
-    if (str.length <= num - 2) {
+    if (str.length - 2 < num) {
         return str;
     }
     return str.substring(0, num) + '...';

frontend-h5/src/composables/useGameSocket.ts

@@ -94,7 +94,7 @@ export function useGameSocket(options: GameSocketOptions) {
                 }, 200);
                 return;
             }
-            debugger
+            // debugger
             return;
         }
 

frontend-h5/src/pages/game2/views/LoadingView.vue

+<script setup lang="ts">
+import { $getWechat } from '@/commons/utils.ts'
+import { onMounted, ref } from 'vue';
+
+defineProps<{
+    imageUrls: Record<string, string>
+    userJoinStatus: boolean
+}>();
+const nickname = ref('');
+const avatar = ref('');
+onMounted(() => {
+    const wechat = $getWechat();
+    nickname.value = wechat.nickname;
+    avatar.value = wechat.avatar;
+});
+</script>
+
+<template>
+    <div class="h5-page game-stage">
+        <div class="game-desc" @click="$emit('touchGameRule')">游戏规则</div>
+        <div class="img-logo"></div>
+        <div class="img-coin"></div>
+        <div class="txt-bottom" v-if="userJoinStatus">您已成功加入游戏<br />等待主持人开始</div>
+    </div>
+</template>
+
+<style scoped>
+.img-coin {
+    background: v-bind('imageUrls.coin') center / cover no-repeat;
+    width: 744px;
+    height: 756px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.6);
+    transform-origin: center;
+}
+
+.txt-bottom {
+    position: absolute;
+    bottom: 130px;
+    width: 100%;
+    line-height: 40px;
+    color: white;
+    font-size: 28px;
+    text-align: center;
+    animation: loading-text-scale 1.2s ease-in-out infinite;
+}
+
+
+@keyframes loading-text-scale {
+
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.08);
+    }
+}
+
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.game-desc {
+    position: absolute;
+    top: 40%;
+    left: var(--stage-viewport-left, 0);
+    display: flex;
+    width: 58px;
+    height: 158px;
+    padding-top: 10px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0 12px 12px 0;
+    background: rgba(40, 12, 8, 0.52);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 25px;
+    letter-spacing: 10px;
+    line-height: 1.25;
+    text-align: center;
+    text-orientation: upright;
+    transform: translateY(-50%);
+    writing-mode: vertical-rl;
+}
+
+.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: 20px;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+}
+
+.img-title {
+    position: absolute;
+    top: 200px;
+    left: 50%;
+    width: 609px;
+    height: 243px;
+    background: v-bind('imageUrls.title') center/cover;
+    transform: translateX(-50%);
+}
+
+.img-avatar {
+    position: absolute;
+    top: 480px;
+    left: 50%;
+    /* width: 148px;
+    height: 148px;
+    background: v-bind('avatar') center/cover; */
+    transform: translateX(-50%);
+}
+
+.txt-nickname {
+    position: absolute;
+    top: 640px;
+    left: 50%;
+    color: #E00000;
+    font-size: 25pt;
+    font-weight: bold;
+    transform: translateX(-50%);
+}
+
+.txt-loading {
+    position: absolute;
+    top: 710px;
+    left: 50%;
+    width: 288px;
+    color: #E00000;
+    font-size: 25pt;
+    font-weight: bold;
+    text-align: center;
+    transform: translateX(-50%);
+}
+
+.loading-gu {
+    position: absolute;
+    bottom: 100px;
+    left: 50%;
+    width: 600px;
+    height: 534px;
+    background: v-bind('imageUrls.gu') center/cover;
+    transform: translateX(-50%);
+}
+</style>

frontend-h5/src/pages/game2/views/PlayingView.vue

+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+
+defineProps<{
+    imageUrls: Record<string, string>
+    countdownInterval: number
+    isDivDescVisible: boolean
+    tick: number
+    rank: number
+    // currentGu: string
+}>()
+
+const emit = defineEmits<{
+    touch: [value: number]
+}>()
+
+const score = ref(0)
+const FULL_ROTATION = Math.PI * 2
+const DRAG_RESISTANCE = 0.82
+const INERTIA_FRICTION = 0.94
+const MIN_INERTIA_VELOCITY = 0.05
+const coinRef = ref<HTMLElement | null>(null)
+const coinRotation = ref(0)
+
+let activePointerId: number | null = null
+let previousAngle = 0
+let clockwiseAngle = 0
+let angularVelocity = 0
+let inertiaFrame: number | undefined
+
+function getPointerAngle(event: PointerEvent) {
+    const rect = coinRef.value?.getBoundingClientRect()
+    if (!rect) return 0
+
+    const centerX = rect.left + rect.width / 2
+    const centerY = rect.top + rect.height / 2
+
+    return Math.atan2(event.clientY - centerY, event.clientX - centerX)
+}
+
+function normalizeAngle(angle: number) {
+    if (angle > Math.PI) return angle - FULL_ROTATION
+    if (angle < -Math.PI) return angle + FULL_ROTATION
+    return angle
+}
+
+function startRotation(event: PointerEvent) {
+    if (activePointerId !== null) return
+
+    stopInertia()
+    activePointerId = event.pointerId
+    previousAngle = getPointerAngle(event)
+    clockwiseAngle = 0
+    angularVelocity = 0
+    coinRef.value?.setPointerCapture(event.pointerId)
+}
+
+function rotateCoin(event: PointerEvent) {
+    if (event.pointerId !== activePointerId) return
+
+    const currentAngle = getPointerAngle(event)
+    const angleDelta = normalizeAngle(currentAngle - previousAngle)
+    previousAngle = currentAngle
+
+    if (angleDelta <= 0) {
+        angularVelocity = 0
+        return
+    }
+
+    const rotationDelta = angleDelta * 180 / Math.PI * DRAG_RESISTANCE
+    coinRotation.value += rotationDelta
+    angularVelocity = angularVelocity * 0.55 + rotationDelta * 0.45
+    clockwiseAngle += angleDelta
+
+    while (clockwiseAngle >= FULL_ROTATION) {
+        clockwiseAngle -= FULL_ROTATION
+        score.value += 5
+        emit('touch', score.value)
+    }
+}
+
+function stopRotation(event: PointerEvent) {
+    if (event.pointerId !== activePointerId) return
+
+    if (coinRef.value?.hasPointerCapture(event.pointerId)) {
+        coinRef.value.releasePointerCapture(event.pointerId)
+    }
+    activePointerId = null
+    clockwiseAngle = 0
+    startInertia()
+}
+
+function stopInertia() {
+    if (inertiaFrame !== undefined) {
+        cancelAnimationFrame(inertiaFrame)
+        inertiaFrame = undefined
+    }
+}
+
+function startInertia() {
+    stopInertia()
+    angularVelocity = Math.max(0, angularVelocity)
+
+    const animate = () => {
+        angularVelocity *= INERTIA_FRICTION
+
+        if (Math.abs(angularVelocity) < MIN_INERTIA_VELOCITY) {
+            angularVelocity = 0
+            inertiaFrame = undefined
+            return
+        }
+
+        coinRotation.value += angularVelocity
+        inertiaFrame = requestAnimationFrame(animate)
+    }
+
+    inertiaFrame = requestAnimationFrame(animate)
+}
+
+onBeforeUnmount(stopInertia)
+</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="img-hydt"></div>
+        <div class="rank-content">
+            <div class="txt-left">
+                <div>排名</div>
+                <div class="txt-bold">{{ rank }}</div>
+            </div>
+            <div class="txt-right">
+                <div>实时得分</div>
+                <div class="txt-bold">{{ tick }}</div>
+            </div>
+        </div>
+        <div ref="coinRef" class="img-coin" :style="{ '--coin-rotation': `${coinRotation}deg` }"
+            @pointerdown="startRotation" @pointermove="rotateCoin" @pointerup="stopRotation"
+            @pointercancel="stopRotation"></div>
+        <!-- <div class="img-process">
+            <div class="txt-process">{{ score }}</div>
+            <div class="img-coin-icon"></div>
+        </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;
+    }
+}
+
+.rank-content {
+    width: 600px;
+    height: 140px;
+    background: v-bind('imageUrls.rank') center/cover;
+    position: absolute;
+    left: 50%;
+    top: 570px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    color: #A10A06;
+
+    .txt-bold {
+        font-size: 40px;
+        font-weight: bold;
+    }
+
+    >div {
+        display: flex;
+        width: 50%;
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+/* 
+.txt-tick {
+    position: absolute;
+    left: 500px;
+    top: 267px;
+    font-size: 70px;
+    font-weight: bold;
+    color: #BF1D19;
+} */
+
+.img-coin {
+    background: v-bind('imageUrls.coin') center / cover no-repeat;
+    width: 744px;
+    height: 756px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.5) rotate(var(--coin-rotation, 0deg));
+    transform-origin: center;
+    touch-action: none;
+    user-select: none;
+    cursor: grab;
+    will-change: transform;
+    margin-top:60px;
+}
+
+.img-coin:active {
+    cursor: grabbing;
+}
+
+/* .img-process {
+    background: v-bind('imageUrls.process') center / cover no-repeat;
+    width: 662px;
+    height: 82px;
+    position: absolute;
+    bottom: 110px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .txt-process {
+        font-size: 30px;
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        top: 38px;
+        color: white;
+        font-weight: bold;
+    }
+}
+
+.img-coin-icon {
+    background: v-bind('imageUrls.coinIcon') center / cover no-repeat;
+    width: 132px;
+    height: 67px;
+    position: absolute;
+    top: -10px;
+} */
+</style>

frontend-h5/src/pages/game6/Game.vue

@@ -340,8 +340,8 @@ const rankCloseHandler = () => {
                         <div class="col-3">{{ rankScore }}</div>
                     </div>
                 </div>
-            </div>
                 <div class="img-close" @click="rankCloseHandler"></div>
+            </div>            
         </template>
         <LoadingView v-if="currentView === 'loading'" :image-urls="imageUrls" :user-join-status="userJoinStatus"
             @touchGameRule="showGameRuleHandler" />
@@ -472,11 +472,18 @@ const rankCloseHandler = () => {
 }
 
 .img-close {
-    width: 57px;
+    /* width: 57px;
     height: 57px;
     border-radius: 29px;
     background: v-bind('imageUrls.close')center/cover;
     transform: scale(0.7);
-    margin-top: 500px;
+    margin-top: 500px; */
+    width: 57px;
+    height: 57px;
+    background: v-bind('imageUrls.close') center / cover no-repeat;
+    transform: translateX(-50%) scale(1.4);
+    position: absolute;
+    top: 0;
+    left: 100%;
 }
 </style>

frontend-h5/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import { $read } from '@/commons/utils'
 import Loading from '@/pages/Loading.vue'
 import Game1 from '@/pages/game1/Game.vue'
+import Game2 from '@/pages/game2/Game.vue'
 import Game3 from '@/pages/game3/Game3.vue'
 import Game4 from '@/pages/game4/Game4.vue'
 import Game5 from '@/pages/game5/Game5.vue'
@@ -14,10 +15,6 @@ const getWechatId = () => {
 const router = createRouter({
     history: createWebHashHistory(),
     routes: [
-        // {
-        //     path: '/',
-        //     redirect: () => (getWechatId() ? '/game1' : '/login'),
-        // },
         {
             path: '/loading',
             name: 'Loading',
@@ -27,9 +24,11 @@ const router = createRouter({
             path: '/game1',
             name: 'Game1',
             component: Game1,
-            // meta: {
-            //     requiresAuth: true,
-            // },
+        },
+        {
+            path: '/game2',
+            name: 'Game2',
+            component: Game2,
         },
         {
             path: '/game3',
@@ -51,10 +50,6 @@ const router = createRouter({
             name: 'Game6',
             component: Game6,
         }
-        // {
-        //     path: '/:pathMatch(.*)*',
-        //     redirect: '/',
-        // },
     ],
 })
 

frontend-large/src/commons/music.ts

 import game1MusicUrl from '@/assets/images/game1.mp3'
+import game2MusicUrl from '@/assets/images/game2.mp3'
 import game4MusicUrl from '@/assets/images/cmyf-bgm.mp3'
 import game5MusicUrl from '@/assets/images/qcnf-bgm.mp3'
 import game6MusicUrl from '@/assets/images/game6.mp3'
@@ -15,7 +16,7 @@ const countdownAudios = new Set<HTMLAudioElement>()
 export function stopAllMusic() {
     stopApplauseMusic();
     stopGame1Music();
-    // stopGame2Music();
+    stopGame2Music();
     // stopGame3Music();
     stopGame4Music();
     stopGame5Music();
@@ -80,6 +81,24 @@ export function stopGame1Music() {
     backgroundMusic?.pause()
 }
 
+export async function playGame2Music() {
+    const audio = getBackgroundMusic(game2MusicUrl)
+
+    try {
+        await audio.play()
+        window.removeEventListener('pointerdown', playGame2Music)
+        window.removeEventListener('keydown', playGame2Music)
+    } catch {
+        window.addEventListener('pointerdown', playGame2Music, { once: true })
+        window.addEventListener('keydown', playGame2Music, { once: true })
+    }
+}
+
+export function stopGame2Music() {
+    window.removeEventListener('pointerdown', playGame2Music)
+    window.removeEventListener('keydown', playGame2Music)
+    backgroundMusic?.pause()
+}
 
 export async function playGame4Music() {
     const audio = getBackgroundMusic(game4MusicUrl)

frontend-large/src/pages/game2/Game.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, playGame2Music, stopAllMusic } 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) => {
+    // closeRoom();
+    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
+}
+
+const gameId = 'game2'
+const { startGame, createRoom, backRoom, closeRoom } = useAdminGameSocket({
+    gameId,
+    onRoomState: (data: any) => {
+        if (Array.isArray(data?.list)) {
+            renderPlayers(data)
+        }
+        switch (data?.status) {
+            case 0:
+                gotoLoading(true)
+                createRoom(2)
+                break
+            case 1:
+                // if(data.gameId && data.gameId!=gameId){
+                //     return;
+                // }
+                gotoLoading()
+                break
+            case 2:
+                seedRankPlayersFromLoading()
+                debugger
+                screen.value = 'rank1'
+                break
+            case 3:
+                debugger
+                screen.value = 'rank2'
+                break
+        }
+    },
+    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(2)
+}
+
+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)
+    playGame2Music()
+})
+
+onUnmounted(() => {
+    stopAllMusic()
+    window.removeEventListener('beforeunload', confirmRefresh)
+})
+
+watch(screen, (value) => {
+    // console.log(value);
+    if (value == 'rank2') {
+        playApplauseMusic();
+    } else if (value == 'loading') {
+        playGame2Music();
+    }
+})
+</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/game2/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('game2/bg.png'),
+    logo: cssAssetUrl('game1/logo.png'),
+    title1: cssAssetUrl('game2/title.png'),
+    qrcode: assetUrl('game6/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('game6/mole.png'),
+    // imgRabbit: cssAssetUrl('game6/rabbit.png'),
+
+    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="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, 8) }}</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: 831px;
+    height: 314px;
+    margin: 0 auto;
+    position: relative;
+    top: 110px;
+}
+
+/* .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;
+    }
+
+    .txt-qrcode {
+        font-size: 24px;
+        color: white;
+    }
+}
+
+.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/game2/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('game2/bg3.png'),
+    logo: cssAssetUrl('game1/logo.png'),
+    title: cssAssetUrl('game6/title3.png'),
+    title2: cssAssetUrl('game2/title2.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: 436px;
+    height: 54px;
+    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 Game2 from '@/pages/game2/Game.vue'
 import Game3 from '@/pages/game3/Game3.vue'
 import Game4 from '@/pages/game4/Game4.vue'
 import Game5 from '@/pages/game5/Game5.vue'
@@ -38,6 +39,14 @@ const router = createRouter({
             },
         },
         {
+            path: '/game2',
+            name: 'Game2',
+            component: Game2,
+            meta: {
+                requiresAuth: true,
+            },
+        },
+        {
             path: '/game3',
             name: 'Game3',
             component: Game3,