Skip to content

F
fc-minigame
Commit 422bdede authored by 陈冲's avatar 陈冲
Browse files
Options

fix: 提示更新

parent 254f0527
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 60 deletions
frontend-h5/src/commons/utils.ts
View file @ 422bdede
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;
}
toastElement.textContent = message;
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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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
View file @ 422bdede
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment