fix: 提示更新

frontend-h5/src/commons/utils.ts

 import SHA256 from 'crypto-js/sha256'
 
 type StorageRecord = Record<string, unknown>;
+type ToastLine = string | { text: string; bold?: boolean };
 
 function isStorageRecord(value: unknown): value is StorageRecord {
     return Object.prototype.toString.call(value) === '[object Object]';
@@ -80,8 +81,8 @@ export function $hideToast() {
     toastElement.style.transform = 'translate(-50%, -40%)';
 }
 
-export function $toast(message?: string, duration = 2000) {
-    if (!message) {
+export function $toast(message?: string | ToastLine[], duration = 2000) {
+    if (!message || (Array.isArray(message) && message.length === 0)) {
         return;
     }
 
@@ -92,14 +93,15 @@ export function $toast(message?: string, duration = 2000) {
             'left: 50%',
             'top: 45%',
             'z-index: 99999',
-            'max-width: 560px',
-            'padding: 18px 28px',
+            'max-width: 680px',
+            'padding: 28px 40px',
             'border-radius: 18px',
             'background: rgba(0, 0, 0, 0.72)',
             'color: #fff',
-            'font-size: 16px',
-            'line-height: 1.4',
+            'font-size: 26px',
+            'line-height: 1.65',
             'text-align: center',
+            'white-space: pre-line',
             'transform: translate(-50%, -40%)',
             'opacity: 0',
             'pointer-events: none',
@@ -113,7 +115,20 @@ export function $toast(message?: string, duration = 2000) {
         toastTimer = undefined;
     }
 
+    if (Array.isArray(message)) {
+        toastElement.textContent = '';
+        for (const line of message) {
+            const lineElement = document.createElement('div');
+            const text = typeof line === 'string' ? line : line.text;
+            lineElement.textContent = text;
+            if (typeof line !== 'string' && line.bold) {
+                lineElement.style.fontWeight = '700';
+            }
+            toastElement.appendChild(lineElement);
+        }
+    } else {
         toastElement.textContent = message;
+    }
     toastElement.style.opacity = '1';
     toastElement.style.transform = 'translate(-50%, -50%)';
 
@@ -128,6 +143,21 @@ export function $toast(message?: string, duration = 2000) {
     }, duration);
 }
 
+export function $scoreSubmitFailedToast(duration = 10 * 60 * 1000) {
+    $toast([
+        '网络异常，分数提交失败',
+        '请以大屏游戏结果排行为准。',
+    ], duration);
+}
+
+export function $alreadyRankedToast(duration = 10 * 60 * 1000) {
+    $toast([
+        { text: '一人只能上榜领奖一次', bold: true },
+        '您的福利已到手',
+        '把机会留给其他玩家吧',
+    ], duration);
+}
+
 type ConfirmOptions = {
     title?: string;
     message?: string;

frontend-h5/src/composables/useGameSocket.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Socket } from 'socket.io-client'
 import { initSocket, onSocketMessage, sendSocketMessage } from '@/commons/ws'
-import { $getWechat, $hideToast, $read, $save, $toast, postScreenGameScore } from '@/commons/utils'
+import { $alreadyRankedToast, $getWechat, $hideToast, $read, $save, $scoreSubmitFailedToast, $toast, postScreenGameScore } from '@/commons/utils'
 
 type SocketPayload = {
     msg?: string
@@ -66,7 +66,7 @@ const networkDisconnectToastDuration = 30 * 60 * 1000;
 export function sendGameMessage(cmd: string, data: any = {}) {
     const sent = sendSocketMessage(cmd, data)
     if (!sent && cmd === 'submit_score_save') {
-        $toast('网络不好，分数无法提交', networkDisconnectToastDuration)
+        $scoreSubmitFailedToast(networkDisconnectToastDuration)
     }
     return sent
 }

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

@@ -6,7 +6,7 @@ import { useGameSocket, sendGameMessage, userJoinStatus, userTop10RankStatus, jo
 import LoadingView from './views/LoadingView.vue'
 import PlayingView from './views/PlayingView.vue'
 import ScoreView from './views/ScoreView.vue'
-import { $getWechat, $toast } from '@/commons/utils.ts'
+import { $alreadyRankedToast, $getWechat, $toast } from '@/commons/utils.ts'
 import { playGame1Music, stopAllMusic } from '@/commons/music'
 
 type GameView = 'loading' | 'playing' | 'score'
@@ -119,11 +119,6 @@ function submitScore(save: boolean = false, currentTick = tick.value) {
             avatar: wechat.avatar,
             rank: rank.value,
         })
-        if (sent && !userTop10RankStatus.value) {
-            window.setTimeout(() => {
-                $toast('成绩提交中，请稍候...', 5000)
-            }, 0)
-        }
         return sent
     } else {
         return sendGameMessage('submit_score', { score: currentTick })
@@ -144,10 +139,12 @@ function startGameCountdown(seconds = 60) {
             setDivDescVisible(false)
             isGameEnded.value = true
             hasFinalScoreResult.value = false
-            submitScore(true)
+            const sent = submitScore(true)
             if (userTop10RankStatus.value) {
                 userJoinStatus.value = false
-                $toast('一人只能上榜领奖一次，您的福利已到手，把机会留给其他玩家吧', 30000)
+                $alreadyRankedToast()
+            } else if (sent) {
+                $toast('成绩提交中，请稍候...', 5000)
             }
             return
         }
@@ -206,7 +203,7 @@ function showScoreView() {
     if (userTop10RankStatus.value) {
         currentView.value = 'loading'
         userJoinStatus.value = false;
-        $toast('一人只能上榜领奖一次，您的福利已到手，把机会留给其他玩家吧', 30000)
+        $alreadyRankedToast()
     } else {
         currentView.value = 'score'
     }

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

@@ -30,7 +30,7 @@ function handleTouch() {
         </Transition>
         <div class="img-logo"></div>
         <div class="play-content">
-            <div>当前击鼓积分</div>
+            <div>积分</div>
             <div>{{ tick }}</div>
             <!-- <div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label></label>&nbsp;名</div> -->
         </div>

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

@@ -31,7 +31,7 @@ onMounted(() => {
             <div class="score-content">
                 <div>{{ nickname }}</div>
                 <div>您的成绩</div>
-                <div>击鼓积分</div>
+                <div>积分</div>
                 <div>{{ tick }}</div>
                 <div>最终排名</div>
                 <div v-if="rank>0">第<label>{{ rank }}</label>名</div>

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

@@ -6,7 +6,7 @@ import { useGameSocket, sendGameMessage, userJoinStatus, userTop10RankStatus, jo
 import LoadingView from './views/LoadingView.vue'
 import PlayingView from './views/PlayingView.vue'
 import ScoreView from './views/ScoreView.vue'
-import { $format_str, $getWechat, $toast } from '@/commons/utils.ts'
+import { $alreadyRankedToast, $format_str, $getWechat, $toast } from '@/commons/utils.ts'
 import { playGame2Music, stopAllMusic } from '@/commons/music';
 
 type GameView = 'loading' | 'playing' | 'score'
@@ -156,11 +156,6 @@ function submitScore(save: boolean = false, currentTick = score.value) {
             avatar: wechat.avatar,
             rank: rank.value,
         })
-        if (sent && !userTop10RankStatus.value) {
-            window.setTimeout(() => {
-                $toast('成绩提交中，请稍候...', 5000)
-            }, 0)
-        }
         return sent
     } else {
         return sendGameMessage('submit_score', { score: currentTick })
@@ -181,13 +176,13 @@ function startGameCountdown(seconds = 60) {
             setDivDescVisible(false)
             isGameEnded.value = true
             hasFinalScoreResult.value = false
-            submitScore(true)
+            const sent = submitScore(true)
             if (userTop10RankStatus.value) {
                 userJoinStatus.value = false;
                 showGameRank.value = false;
-                $toast('一人只能上榜领奖一次，您的福利已到手，把机会留给其他玩家吧', 30000)
+                $alreadyRankedToast()
                 //这里还要再发
-            } else {
+            } else if (sent) {
                 $toast('成绩提交中，请稍候...', 5000)
             }
             return

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

@@ -31,7 +31,7 @@ onMounted(() => {
             <div class="score-content">
                 <div>{{ nickname }}</div>
                 <div>您的成绩</div>
-                <div>击鼓积分</div>
+                <div>积分</div>
                 <div>{{ tick }}</div>
                 <div>最终排名</div>
                 <div v-if="rank>0">第<label>{{ rank }}</label>名</div>

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

@@ -6,7 +6,7 @@ import { useGameSocket, joinSharedRoom, sendGameMessage, userJoinStatus, userTop
 import LoadingView from './views/LoadingView.vue'
 import PlayingView from './views/PlayingView.vue'
 import ScoreView from './views/ScoreView.vue'
-import { $getWechat, $toast, $is_run_local } from '@/commons/utils.ts'
+import { $alreadyRankedToast, $getWechat, $toast, $is_run_local } from '@/commons/utils.ts'
 import { playGame3Music, stopAllMusic } from '@/commons/music';
 
 type GameView = 'loading' | 'playing' | 'score'
@@ -169,11 +169,6 @@ function submitScore(save: boolean = false, currentTick = score.value) {
             avatar: wechat.avatar,
             rank: rank.value,
         })
-        if (sent && !userTop10RankStatus.value) {
-            window.setTimeout(() => {
-                $toast('成绩提交中，请稍候...', 5000)
-            }, 0)
-        }
         return sent
     } else {
         if (isLocalMode && !wechat) {
@@ -197,12 +192,12 @@ function startGameCountdown(seconds = 60) {
             gameCountdownTimer = undefined
             setDivDescVisible(false)
             hasFinalScoreResult.value = false
-            submitScore(true)
+            const sent = submitScore(true)
             if (userTop10RankStatus.value) {
                 userJoinStatus.value = false;
                 showGameRank.value = false;
-                $toast('一人只能上榜领奖一次，您的福利已到手，把机会留给其他玩家吧', 30000)
-            } else {
+                $alreadyRankedToast()
+            } else if (sent) {
                 $toast('成绩提交中，请稍候...', 5000)
             }
             return

frontend-h5/src/pages/game3/views/ScoreView.vue

@@ -32,7 +32,7 @@ onMounted(() => {
             <div class="score-content">
                 <div>{{ nickname }}</div>
                 <div>您的成绩</div>
-                <div>当前积分</div>
+                <div>积分</div>
                 <div>{{ tick }}</div>
                 <div>最终排名</div>
                 <div v-if="rank>0">第<label>{{ rank }}</label>名</div>

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

@@ -12,7 +12,7 @@ import {
 import LoadingView from "./views/LoadingView.vue";
 import PlayingView from "./views/PlayingView.vue";
 import ScoreView from "./views/ScoreView.vue";
-import { $getWechat, $toast, $is_run_local } from "@/commons/utils.ts";
+import { $alreadyRankedToast, $getWechat, $toast, $is_run_local } from "@/commons/utils.ts";
 
 const gameId = "game4";
 type GameView = "loading" | "playing" | "score";
@@ -163,12 +163,12 @@ function startGameCountdown(seconds = 60) {
       gameCountdownTimer = undefined;
       setDivDescVisible(false);
       isGameEnded.value = true;
-      submitScore(true);
+      const sent = submitScore(true);
       if (userTop10RankStatus.value) {
         userJoinStatus.value = false;
         // showGameRank.value = false;
-        $toast('一人只能上榜领奖一次，您的福利已到手，把机会留给其他玩家吧', 30000)
-      } else {
+        $alreadyRankedToast()
+      } else if (sent) {
         $toast('成绩提交中，请稍候...', 5000)
       }
       return;

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

@@ -6,7 +6,7 @@ import { useGameSocket, sendGameMessage, userJoinStatus, joinSharedRoom, userTop
 import LoadingView from './views/LoadingView.vue'
 import PlayingView from './views/PlayingView.vue'
 import ScoreView from './views/ScoreView.vue'
-import { $getWechat, $toast } from '@/commons/utils.ts'
+import { $alreadyRankedToast, $getWechat, $toast } from '@/commons/utils.ts'
 import { playGame1Music } from '@/commons/music'
 
 const gameId = 'game5';
@@ -216,12 +216,12 @@ function startGameCountdown(seconds = 60) {
             gameCountdownTimer = undefined
             setDivDescVisible(false)
             hasFinalScoreResult.value = false
-            submitScore(true)
+            const sent = submitScore(true)
             if (userTop10RankStatus.value) {
                 userJoinStatus.value = false;
                 // showGameRank.value = false;
-                $toast('一人只能上榜领奖一次，您的福利已到手，把机会留给其他玩家吧', 30000)
-            } else {
+                $alreadyRankedToast()
+            } else if (sent) {
                 $toast('成绩提交中，请稍候...', 5000)
             }
             return

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

@@ -413,7 +413,7 @@ onBeforeUnmount(() => {
                 <div class="txt-bold"></div>
             </div>
             <div class="txt-right">
-                <div>实时积分</div>
+                <div>积分</div>
                 <div class="txt-bold">{{ tick }}</div>
             </div> -->
         </div>

frontend-h5/src/pages/game5/views/ScoreView.vue

@@ -31,7 +31,7 @@ onMounted(() => {
             <div class="score-content">
                 <div>{{ nickname }}</div>
                 <div>您的成绩</div>
-                <div>击鼓积分</div>
+                <div>积分</div>
                 <div>{{ tick }}</div>
                 <div>最终排名</div>
                  <div v-if="rank>0">第<label>{{ rank }}</label>名</div>

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

@@ -6,7 +6,7 @@ import { useGameSocket, sendGameMessage, userJoinStatus, userTop10RankStatus, jo
 import LoadingView from './views/LoadingView.vue'
 import PlayingView from './views/PlayingView.vue'
 import ScoreView from './views/ScoreView.vue'
-import { $format_str, $getWechat, $toast } from '@/commons/utils.ts'
+import { $alreadyRankedToast, $format_str, $getWechat, $toast } from '@/commons/utils.ts'
 import { playGame6Music, stopAllMusic } from '@/commons/music';
 
 type GameView = 'loading' | 'playing' | 'score'
@@ -163,11 +163,6 @@ function submitScore(save: boolean = false, currentTick = score.value) {
             avatar: wechat.avatar,
             rank: rank.value,
         })
-        if (sent && !userTop10RankStatus.value) {
-            window.setTimeout(() => {
-                $toast('成绩提交中，请稍候...', 5000)
-            }, 0)
-        }
         return sent
     } else {
         return sendGameMessage('submit_score', { score: currentTick })
@@ -188,12 +183,12 @@ function startGameCountdown(seconds = 60) {
             setDivDescVisible(false)
             isGameEnded.value = true
             hasFinalScoreResult.value = false
-            submitScore(true)
+            const sent = submitScore(true)
             if (userTop10RankStatus.value) {
                 userJoinStatus.value = false;
                 showGameRank.value = false;
-                $toast('一人只能上榜领奖一次，您的福利已到手，把机会留给其他玩家吧', 30000)
-            } else {
+                $alreadyRankedToast()
+            } else if (sent) {
                 $toast('成绩提交中，请稍候...', 5000)
             }
             return

frontend-h5/src/pages/game6/views/ScoreView.vue

@@ -31,7 +31,7 @@ onMounted(() => {
             <div class="score-content">
                 <div>{{ nickname }}</div>
                 <div>您的成绩</div>
-                <div>击鼓积分</div>
+                <div>积分</div>
                 <div>{{ tick }}</div>
                 <div>最终排名</div>
                 <div v-if="rank>0">第<label>{{ rank }}</label>名</div>