wsy182
e96c45739e
- 实现 ChengduGamePage.vue 组件，包含完整的麻将游戏界面 - 实现 HallPage.vue 组件，支持房间列表展示、创建和加入功能 - 添加 mahjong API 接口用于房间管理操作 - 集成 store 状态管理和本地存储功能 - 实现 ChengduBottomActions 等游戏控制组件 - 添加 websocket 连接和游戏会话管理逻辑 - 实现游戏倒计时、结算等功能模块
74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
show: boolean
|
|
isLastRound: boolean
|
|
currentRound: number
|
|
totalRounds: number
|
|
settlementPlayers: Array<{
|
|
playerId: string
|
|
displayName: string
|
|
score: number
|
|
isWinner: boolean
|
|
seatIndex: number
|
|
}>
|
|
loggedInUserId: string
|
|
nextRoundPending: boolean
|
|
settlementCountdown: number | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
nextRound: []
|
|
backHall: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="show" class="settlement-overlay">
|
|
<div class="settlement-panel">
|
|
<h2 class="settlement-title">
|
|
{{ isLastRound ? '最终结算' : `第 ${currentRound} 局结算` }}
|
|
</h2>
|
|
<p v-if="totalRounds > 0" class="settlement-round-info">{{ currentRound }} / {{ 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="emit('nextRound')"
|
|
>
|
|
<span class="ready-toggle-label">
|
|
{{
|
|
nextRoundPending
|
|
? '准备中...'
|
|
: settlementCountdown != null && settlementCountdown > 0
|
|
? `下一局 (${settlementCountdown}s)`
|
|
: '下一局'
|
|
}}
|
|
</span>
|
|
</button>
|
|
<button v-else class="ready-toggle ready-toggle-inline settlement-btn" type="button" @click="emit('backHall')">
|
|
<span class="ready-toggle-label">返回大厅</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|