feat(game): 添加局间结算界面,对接后端settlement状态
- GameState新增currentRound/totalRounds字段 - 解析后端返回的current_round和total_rounds - 新增结算弹窗:展示每位玩家得分、胡牌标记和排名 - 状态面板显示当前局数信息 - 新增next_round动作,结算后点击"下一局"继续游戏 - 最后一局结算后显示"返回大厅"按钮 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -97,6 +97,7 @@ const dingQuePending = ref(false)
|
||||
const discardPending = ref(false)
|
||||
const claimActionPending = ref(false)
|
||||
const turnActionPending = ref(false)
|
||||
const nextRoundPending = ref(false)
|
||||
const selectedDiscardTileId = ref<number | null>(null)
|
||||
let clockTimer: number | null = null
|
||||
let discardPendingTimer: number | null = null
|
||||
@@ -322,6 +323,35 @@ const roomStatusText = computed(() => {
|
||||
return map[status] ?? status ?? '--'
|
||||
})
|
||||
|
||||
const roundText = computed(() => {
|
||||
if (gameStore.totalRounds > 0) {
|
||||
return `${gameStore.currentRound}/${gameStore.totalRounds}`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const showSettlementOverlay = computed(() => {
|
||||
return gameStore.phase === 'settlement'
|
||||
})
|
||||
|
||||
const isLastRound = computed(() => {
|
||||
return gameStore.currentRound >= gameStore.totalRounds && gameStore.totalRounds > 0
|
||||
})
|
||||
|
||||
const settlementPlayers = computed(() => {
|
||||
const players = Object.values(gameStore.players)
|
||||
const winnerSet = new Set(gameStore.winners)
|
||||
return players
|
||||
.map((player) => ({
|
||||
playerId: player.playerId,
|
||||
displayName: player.displayName || `玩家${player.seatIndex + 1}`,
|
||||
score: gameStore.scores[player.playerId] ?? 0,
|
||||
isWinner: winnerSet.has(player.playerId),
|
||||
seatIndex: player.seatIndex,
|
||||
}))
|
||||
.sort((a, b) => b.score - a.score)
|
||||
})
|
||||
|
||||
const myReadyState = computed(() => {
|
||||
return Boolean(myPlayer.value?.isReady)
|
||||
})
|
||||
@@ -1203,6 +1233,14 @@ function handleRoomStateResponse(message: unknown): void {
|
||||
) as Record<string, number>
|
||||
}
|
||||
gameStore.winners = readStringArray(payload, 'winners')
|
||||
const currentRound = readNumber(payload, 'current_round', 'currentRound')
|
||||
const totalRounds = readNumber(payload, 'total_rounds', 'totalRounds')
|
||||
if (typeof currentRound === 'number') {
|
||||
gameStore.currentRound = currentRound
|
||||
}
|
||||
if (typeof totalRounds === 'number') {
|
||||
gameStore.totalRounds = totalRounds
|
||||
}
|
||||
gameStore.pendingClaim = normalizePendingClaim(payload)
|
||||
if (!gameStore.pendingClaim) {
|
||||
claimActionPending.value = false
|
||||
@@ -1255,6 +1293,9 @@ function handleRoomStateResponse(message: unknown): void {
|
||||
if (phase !== 'waiting') {
|
||||
startGamePending.value = false
|
||||
}
|
||||
if (phase !== 'settlement') {
|
||||
nextRoundPending.value = false
|
||||
}
|
||||
if (currentTurnPlayerId && currentTurnPlayerId !== loggedInUserId.value) {
|
||||
markDiscardCompleted()
|
||||
}
|
||||
@@ -1534,6 +1575,14 @@ function handleRoomInfoResponse(message: unknown): void {
|
||||
) as Record<string, number>
|
||||
}
|
||||
gameStore.winners = readStringArray(gameState ?? {}, 'winners')
|
||||
const infoCurrentRound = readNumber(gameState ?? {}, 'current_round', 'currentRound')
|
||||
const infoTotalRounds = readNumber(gameState ?? {}, 'total_rounds', 'totalRounds')
|
||||
if (typeof infoCurrentRound === 'number') {
|
||||
gameStore.currentRound = infoCurrentRound
|
||||
}
|
||||
if (typeof infoTotalRounds === 'number') {
|
||||
gameStore.totalRounds = infoTotalRounds
|
||||
}
|
||||
|
||||
setActiveRoom({
|
||||
roomId,
|
||||
@@ -2465,6 +2514,19 @@ function startGame(): void {
|
||||
})
|
||||
}
|
||||
|
||||
function nextRound(): void {
|
||||
if (nextRoundPending.value) {
|
||||
return
|
||||
}
|
||||
|
||||
nextRoundPending.value = true
|
||||
sendWsMessage({
|
||||
type: 'next_round',
|
||||
roomId: gameStore.roomId,
|
||||
payload: {},
|
||||
})
|
||||
}
|
||||
|
||||
function chooseDingQue(suit: Tile['suit']): void {
|
||||
if (dingQuePending.value || !showDingQueChooser.value) {
|
||||
return
|
||||
@@ -2887,6 +2949,10 @@ onBeforeUnmount(() => {
|
||||
<span>人数</span>
|
||||
<strong>{{ roomState.playerCount }}/{{ roomState.maxPlayers }}</strong>
|
||||
</div>
|
||||
<div v-if="roundText" class="room-status-item">
|
||||
<span>局数</span>
|
||||
<strong>{{ roundText }}</strong>
|
||||
</div>
|
||||
<div class="room-status-item">
|
||||
<span>状态</span>
|
||||
<strong>{{ roomStatusText }}</strong>
|
||||
@@ -3062,6 +3128,52 @@ onBeforeUnmount(() => {
|
||||
<span>等待房主开始游戏</span>
|
||||
</div>
|
||||
|
||||
<div v-if="showSettlementOverlay" class="settlement-overlay">
|
||||
<div class="settlement-panel">
|
||||
<h2 class="settlement-title">
|
||||
{{ isLastRound ? '最终结算' : `第 ${gameStore.currentRound} 局结算` }}
|
||||
</h2>
|
||||
<p v-if="gameStore.totalRounds > 0" class="settlement-round-info">
|
||||
{{ gameStore.currentRound }} / {{ gameStore.totalRounds }} 局
|
||||
</p>
|
||||
<div class="settlement-list">
|
||||
<div
|
||||
v-for="(item, index) in settlementPlayers"
|
||||
:key="item.playerId"
|
||||
class="settlement-row"
|
||||
:class="{ 'is-winner': item.isWinner, 'is-self': item.playerId === loggedInUserId }"
|
||||
>
|
||||
<span class="settlement-rank">{{ index + 1 }}</span>
|
||||
<span class="settlement-name">
|
||||
{{ item.displayName }}
|
||||
<span v-if="item.isWinner" class="settlement-winner-badge">胡</span>
|
||||
</span>
|
||||
<span class="settlement-score" :class="{ 'is-positive': item.score > 0, 'is-negative': item.score < 0 }">
|
||||
{{ item.score > 0 ? '+' : '' }}{{ item.score }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settlement-actions">
|
||||
<button
|
||||
v-if="!isLastRound"
|
||||
class="ready-toggle ready-toggle-inline settlement-btn"
|
||||
type="button"
|
||||
:disabled="nextRoundPending"
|
||||
@click="nextRound"
|
||||
>
|
||||
<span class="ready-toggle-label">{{ nextRoundPending ? '准备中...' : '下一局' }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="ready-toggle ready-toggle-inline settlement-btn"
|
||||
type="button"
|
||||
@click="backHall"
|
||||
>
|
||||
<span class="ready-toggle-label">返回大厅</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-control-panel">
|
||||
<div v-if="showDingQueChooser || showReadyToggle || showStartGameButton || selectedDiscardTile" class="bottom-action-bar">
|
||||
|
||||
Reference in New Issue
Block a user