fix: 修复h5端倒计时等问题

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

@@ -19,9 +19,7 @@ const imageUrls = {
     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'),
+    guSprite: cssAssetUrl('game1/gu-sprite.png'),
     scoreBg: cssAssetUrl('game1/score-bg.png'),
     back: cssAssetUrl('game1/back.png'),
     replay: cssAssetUrl('game1/replay.png'),
@@ -36,8 +34,7 @@ const countdownInterval = ref(60)
 const isDivDescVisible = ref(false)
 const tick = ref(0)  //点击次数
 const rank = ref(0)  //排名
-const guFrames: [string, string, string] = [imageUrls.gu01, imageUrls.gu02, imageUrls.gu03]
-const currentGu = ref(imageUrls.gu01)
+const currentGuFrame = ref(0)
 const isGuPlaying = ref(false)
 const token = ref(wechat?.token ?? '')
 const nickname = ref(wechat?.nickname ?? '')
@@ -106,6 +103,18 @@ function startGameCountdown(seconds = 60) {
     gameCountdownTimer = window.setTimeout(tickCountdown, 1000)
 }
 
+function syncGameCountdown(seconds: number) {
+    const syncedSeconds = Math.max(0, Math.floor(seconds))
+    if (countdownInterval.value - syncedSeconds <= 1) return
+
+    if (syncedSeconds === 0) {
+        countdownInterval.value = 0
+        return
+    }
+
+    startGameCountdown(syncedSeconds)
+}
+
 function resetToLoadingView() {
     stopGameCountdown()
     if (guFrameTimer) {
@@ -115,7 +124,7 @@ function resetToLoadingView() {
     tick.value = 0
     rank.value = 0
     countdownInterval.value = 60
-    currentGu.value = guFrames[0]
+    currentGuFrame.value = 0
     isGuPlaying.value = false
     userJoinStatus.value = false
     currentView.value = 'loading'
@@ -125,7 +134,7 @@ function resetToLoadingView() {
 function startGameView() {
     stopGameCountdown()
     tick.value = 0
-    currentGu.value = guFrames[0]
+    currentGuFrame.value = 0
     currentView.value = 'playing'
     startGameCountdown()
 }
@@ -149,12 +158,12 @@ const touchHandler = () => {
 
     let frameIndex = 0
     const playNextFrame = () => {
-        currentGu.value = guFrames[frameIndex] ?? imageUrls.gu01
+        currentGuFrame.value = frameIndex
         frameIndex += 1
 
-        if (frameIndex >= guFrames.length) {
+        if (frameIndex >= 3) {
             guFrameTimer = window.setTimeout(() => {
-                currentGu.value = guFrames[0]
+                currentGuFrame.value = 0
                 isGuPlaying.value = false
                 guFrameTimer = undefined
             }, 200)
@@ -200,7 +209,7 @@ if (wechat) {
                     rank.value = nextRank
                 }
                 if (Number.isFinite(remainingSeconds) && remainingSeconds >= 0) {
-                    countdownInterval.value = remainingSeconds
+                    syncGameCountdown(remainingSeconds)
                 }
             }
             return { code: 'JGQF', score: tick.value }
@@ -280,7 +289,7 @@ const showGameRuleHandler = () => {
         <LoadingView v-if="currentView === 'loading'" :image-urls="imageUrls" :user-join-status="userJoinStatus"
             @touchGameRule="showGameRuleHandler" />
         <PlayingView v-else-if="currentView === 'playing'" :image-urls="imageUrls" :tick="tick" :rank="rank"
-            :current-gu="currentGu" :countdown-interval="countdownInterval" :is-div-desc-visible="isDivDescVisible"
+            :current-gu-frame="currentGuFrame" :countdown-interval="countdownInterval" :is-div-desc-visible="isDivDescVisible"
             @touch="touchHandler" />
         <ScoreView v-else :image-urls="imageUrls" :rank="rank" :tick="tick" />
     </MobileStage>

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

@@ -5,7 +5,7 @@ defineProps<{
     isDivDescVisible: boolean
     tick: number
     rank: number
-    currentGu: string
+    currentGuFrame: number
 }>()
 
 defineEmits<{
@@ -28,7 +28,7 @@ defineEmits<{
             <div>当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
         </div>
         <div class="bg-bottom"></div>
-        <div class="play-gu" :style="{ background: `${currentGu} center/cover` }" @click="$emit('touch')"></div>
+        <div class="play-gu" :style="{ backgroundPosition: `-${currentGuFrame * 400}px 0` }" @click="$emit('touch')"></div>
     </div>
 </template>
 
@@ -159,6 +159,9 @@ defineEmits<{
     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>

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

@@ -128,6 +128,18 @@ function startGameCountdown(seconds = 60) {
     gameCountdownTimer = window.setTimeout(tickCountdown, 1000)
 }
 
+function syncGameCountdown(seconds: number) {
+    const syncedSeconds = Math.max(0, Math.floor(seconds))
+    if (countdownInterval.value - syncedSeconds <= 1) return
+
+    if (syncedSeconds === 0) {
+        countdownInterval.value = 0
+        return
+    }
+
+    startGameCountdown(syncedSeconds)
+}
+
 function resetToLoadingView() {
     stopGameCountdown()
     if (guFrameTimer) {
@@ -206,7 +218,7 @@ if (wechat) {
                     rank.value = nextRank
                 }
                 if (Number.isFinite(remainingSeconds) && remainingSeconds >= 0) {
-                    countdownInterval.value = remainingSeconds
+                    syncGameCountdown(remainingSeconds)
                 }
             } else if (typeof data === 'object' && data) {
                 if (Array.isArray(data.list)) {

frontend-h5/src/pages/game4/Game4.vue

@@ -118,6 +118,18 @@ function startGameCountdown(seconds = 60) {
     gameCountdownTimer = window.setTimeout(tickCountdown, 1000)
 }
 
+function syncGameCountdown(seconds: number) {
+    const syncedSeconds = Math.max(0, Math.floor(seconds))
+    if (countdownInterval.value - syncedSeconds <= 1) return
+
+    if (syncedSeconds === 0) {
+        countdownInterval.value = 0
+        return
+    }
+
+    startGameCountdown(syncedSeconds)
+}
+
 function showLoadingView() {
     stopGameCountdown()
     currentView.value = 'loading'
@@ -197,7 +209,7 @@ if (wechat) {
                 tick.value = nextScore
             }
             if (!is_save && Number.isFinite(remainingSeconds) && remainingSeconds >= 0) {
-                countdownInterval.value = remainingSeconds
+                syncGameCountdown(remainingSeconds)
             }
             if (Number.isFinite(nextRank) && nextRank > 0) {
                 rank.value = nextRank

frontend-h5/src/pages/game5/Game5.vue

@@ -174,6 +174,18 @@ function startGameCountdown(seconds = 60) {
     gameCountdownTimer = window.setTimeout(tickCountdown, 1000)
 }
 
+function syncGameCountdown(seconds: number) {
+    const syncedSeconds = Math.max(0, Math.floor(seconds))
+    if (countdownInterval.value - syncedSeconds <= 1) return
+
+    if (syncedSeconds === 0) {
+        countdownInterval.value = 0
+        return
+    }
+
+    startGameCountdown(syncedSeconds)
+}
+
 function showLoadingView() {
     stopGameCountdown()
     isGameStarting.value = false
@@ -265,7 +277,7 @@ if (wechat) {
                     rank.value = nextRank
                 }
                 if (Number.isFinite(remainingSeconds) && remainingSeconds >= 0) {
-                    countdownInterval.value = remainingSeconds
+                    syncGameCountdown(remainingSeconds)
                 }
             } else if (typeof data === 'object' && data) {
                 if (Array.isArray(data.list)) {

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

@@ -135,6 +135,18 @@ function startGameCountdown(seconds = 60) {
     gameCountdownTimer = window.setTimeout(tickCountdown, 1000)
 }
 
+function syncGameCountdown(seconds: number) {
+    const syncedSeconds = Math.max(0, Math.floor(seconds))
+    if (countdownInterval.value - syncedSeconds <= 1) return
+
+    if (syncedSeconds === 0) {
+        countdownInterval.value = 0
+        return
+    }
+
+    startGameCountdown(syncedSeconds)
+}
+
 function resetToLoadingView() {
     stopGameCountdown()
     if (guFrameTimer) {
@@ -213,7 +225,7 @@ if (wechat) {
                     rank.value = nextRank
                 }
                 if (Number.isFinite(remainingSeconds) && remainingSeconds >= 0) {
-                    countdownInterval.value = remainingSeconds
+                    syncGameCountdown(remainingSeconds)
                 }
             } else if (typeof data === 'object' && data) {
                 if (Array.isArray(data.list)) {

frontend-large/src/commons/utils.ts

@@ -111,7 +111,7 @@ export function $toast(message?: string, duration = 2000) {
             'left: 50%',
             'top: 45%',
             'z-index: 99999',
-            'max-width: 560px',
+            'max-width: 800px',
             'padding: 18px 28px',
             'border-radius: 18px',
             'background: rgba(0, 0, 0, 0.72)',

frontend-large/src/pages/Login.vue

@@ -27,6 +27,7 @@ async function login() {
   const data = await res.json()
   if (!res.ok || data.state !== 1) {
     // $notify(data.msg)
+    $toast(data.msg);
     //alert(data.msg || 'Login failed')
     // throw new Error(data.msg || 'Login failed')
   }
@@ -44,7 +45,6 @@ const loginHandler = async () => {
   for (let i in data) {
     $save(i, data[i]);
   }
-  // alert('登录成功')
   $toast('登录成功')
   await router.replace(`/main`);
 }