wsy182
dc09c7e487
- 添加 HandSuitLabel 类型定义区分万筒条三种花色 - 创建手牌花色排序映射和标签映射配置 - 实现 visibleHandTileGroups 计算属性按花色对手牌进行分组 - 新增 player-hand-group 样式类支持分组布局 - 调整 tile-chip 尺寸适配新的分组显示方式 - 修改底部控制面板位置避免遮挡手牌区域
1630 lines
47 KiB
Vue
1630 lines
47 KiB
Vue
<script setup lang="ts">
|
|
import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
|
|
import {useRoute, useRouter} from 'vue-router'
|
|
import deskImage from '../assets/images/desk/desk_01.png'
|
|
import wanIcon from '../assets/images/flowerClolor/wan.png'
|
|
import tongIcon from '../assets/images/flowerClolor/tong.png'
|
|
import tiaoIcon from '../assets/images/flowerClolor/tiao.png'
|
|
import robotIcon from '../assets/images/icons/robot.svg'
|
|
import exitIcon from '../assets/images/icons/exit.svg'
|
|
import '../assets/styles/room.css'
|
|
import topBackImage from '../assets/images/tiles/top/tbgs_2.png'
|
|
import rightBackImage from '../assets/images/tiles/right/tbgs_1.png'
|
|
import bottomBackImage from '../assets/images/tiles/bottom/tdbgs_4.png'
|
|
import leftBackImage from '../assets/images/tiles/left/tbgs_3.png'
|
|
import TopPlayerCard from '../components/game/TopPlayerCard.vue'
|
|
import RightPlayerCard from '../components/game/RightPlayerCard.vue'
|
|
import BottomPlayerCard from '../components/game/BottomPlayerCard.vue'
|
|
import LeftPlayerCard from '../components/game/LeftPlayerCard.vue'
|
|
import WindSquare from '../components/game/WindSquare.vue'
|
|
import eastWind from '../assets/images/direction/dong.png'
|
|
import southWind from '../assets/images/direction/nan.png'
|
|
import westWind from '../assets/images/direction/xi.png'
|
|
import northWind from '../assets/images/direction/bei.png'
|
|
import type {SeatPlayerCardModel} from '../components/game/seat-player-card'
|
|
import type {SeatKey} from '../game/seat'
|
|
import type {GameAction, RoomPlayerUpdatePayload} from '../game/actions'
|
|
import {dispatchGameAction} from '../game/dispatcher'
|
|
import {refreshAccessToken} from '../api/auth'
|
|
import {AuthExpiredError, type AuthSession} from '../api/authed-request'
|
|
import {getUserInfo} from '../api/user'
|
|
import {clearAuth, readStoredAuth, writeStoredAuth} from '../utils/auth-storage'
|
|
import type {WsStatus} from '../ws/client'
|
|
import {wsClient} from '../ws/client'
|
|
import {sendWsMessage} from '../ws/sender'
|
|
import {buildWsUrl} from '../ws/url'
|
|
import {useGameStore} from '../store/gameStore'
|
|
import {setActiveRoom, useActiveRoomState} from '../store'
|
|
import type {PlayerState} from '../types/state'
|
|
import type {Tile} from '../types/tile'
|
|
import {getTileImage} from "../config/bottomTileMap.ts";
|
|
|
|
const gameStore = useGameStore()
|
|
const activeRoom = useActiveRoomState()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const auth = ref(readStoredAuth())
|
|
|
|
type DisplayPlayer = PlayerState & {
|
|
displayName?: string
|
|
missingSuit?: string | null
|
|
}
|
|
|
|
type GameActionPayload<TType extends GameAction['type']> = Extract<GameAction, { type: TType }>['payload']
|
|
type HandSuitLabel = '万' | '筒' | '条'
|
|
|
|
interface SeatViewModel {
|
|
key: SeatKey
|
|
player?: DisplayPlayer
|
|
isSelf: boolean
|
|
isTurn: boolean
|
|
}
|
|
|
|
const now = ref(Date.now())
|
|
const wsStatus = ref<WsStatus>('idle')
|
|
const wsMessages = ref<string[]>([])
|
|
const wsError = ref('')
|
|
const selectedTile = ref<string | null>(null)
|
|
const leaveRoomPending = ref(false)
|
|
const readyTogglePending = ref(false)
|
|
const startGamePending = ref(false)
|
|
let clockTimer: number | null = null
|
|
let unsubscribe: (() => void) | null = null
|
|
let pendingRoomInfoRequest = false
|
|
|
|
const menuOpen = ref(false)
|
|
const isTrustMode = ref(false)
|
|
const menuTriggerActive = ref(false)
|
|
let menuTriggerTimer: number | null = null
|
|
let menuOpenTimer: number | null = null
|
|
let refreshingWsToken = false
|
|
let lastForcedRefreshAt = 0
|
|
|
|
const loggedInUserId = computed(() => {
|
|
const source = auth.value?.user as Record<string, unknown> | undefined
|
|
const rawId =
|
|
source?.id ??
|
|
source?.userID ??
|
|
source?.user_id
|
|
|
|
if (typeof rawId === 'string' && rawId.trim()) {
|
|
return rawId
|
|
}
|
|
if (typeof rawId === 'number') {
|
|
return String(rawId)
|
|
}
|
|
return ''
|
|
})
|
|
|
|
const loggedInUserName = computed(() => {
|
|
return auth.value?.user?.nickname || auth.value?.user?.username || ''
|
|
})
|
|
|
|
const localCachedAvatarUrl = computed(() => {
|
|
const source = auth.value?.user as Record<string, unknown> | undefined
|
|
if (!source) {
|
|
return ''
|
|
}
|
|
|
|
const avatarCandidates = [
|
|
source.avatar,
|
|
source.avatar_url,
|
|
source.avatarUrl,
|
|
source.head_img,
|
|
source.headImg,
|
|
source.profile_image,
|
|
source.profileImage,
|
|
]
|
|
|
|
for (const candidate of avatarCandidates) {
|
|
if (typeof candidate === 'string' && candidate.trim()) {
|
|
return candidate
|
|
}
|
|
}
|
|
|
|
return ''
|
|
})
|
|
|
|
const myPlayer = computed(() => {
|
|
return gameStore.players[loggedInUserId.value]
|
|
})
|
|
|
|
const myHandTiles = computed(() => {
|
|
return myPlayer.value?.handTiles ?? []
|
|
})
|
|
|
|
const handSuitOrder: Record<Tile['suit'], number> = {
|
|
W: 0,
|
|
T: 1,
|
|
B: 2,
|
|
}
|
|
|
|
const handSuitLabelMap: Record<Tile['suit'], HandSuitLabel> = {
|
|
W: '万',
|
|
T: '筒',
|
|
B: '条',
|
|
}
|
|
|
|
const visibleHandTileGroups = computed(() => {
|
|
const grouped = new Map<HandSuitLabel, Tile[]>()
|
|
|
|
myHandTiles.value
|
|
.slice()
|
|
.sort((left, right) => {
|
|
const suitDiff = handSuitOrder[left.suit] - handSuitOrder[right.suit]
|
|
if (suitDiff !== 0) {
|
|
return suitDiff
|
|
}
|
|
|
|
const valueDiff = left.value - right.value
|
|
if (valueDiff !== 0) {
|
|
return valueDiff
|
|
}
|
|
|
|
return left.id - right.id
|
|
})
|
|
.forEach((tile) => {
|
|
const label = handSuitLabelMap[tile.suit]
|
|
const current = grouped.get(label) ?? []
|
|
current.push(tile)
|
|
grouped.set(label, current)
|
|
})
|
|
|
|
return (['万', '筒', '条'] as HandSuitLabel[])
|
|
.map((suit) => ({
|
|
suit,
|
|
tiles: grouped.get(suit) ?? [],
|
|
}))
|
|
.filter((group) => group.tiles.length > 0)
|
|
})
|
|
|
|
const visibleHandTiles = computed(() => {
|
|
if (gameStore.phase === 'waiting') {
|
|
return []
|
|
}
|
|
|
|
return myHandTiles.value
|
|
})
|
|
|
|
const remainingTiles = computed(() => {
|
|
return gameStore.remainingTiles
|
|
})
|
|
|
|
const gamePlayers = computed<DisplayPlayer[]>(() => {
|
|
return Object.values(gameStore.players).sort((a, b) => a.seatIndex - b.seatIndex) as DisplayPlayer[]
|
|
})
|
|
|
|
const roomName = computed(() => {
|
|
const queryRoomName = typeof route.query.roomName === 'string' ? route.query.roomName : ''
|
|
const activeRoomName =
|
|
activeRoom.value && activeRoom.value.roomId === gameStore.roomId
|
|
? activeRoom.value.roomName
|
|
: ''
|
|
return queryRoomName || activeRoomName || `房间 ${gameStore.roomId || '--'}`
|
|
})
|
|
|
|
const roomState = computed(() => {
|
|
const status = gameStore.phase === 'waiting' ? 'waiting' : gameStore.phase === 'settlement' ? 'finished' : 'playing'
|
|
const wall = Array.from({length: remainingTiles.value}, (_, index) => `wall-${index}`)
|
|
const maxPlayers =
|
|
activeRoom.value && activeRoom.value.roomId === gameStore.roomId
|
|
? activeRoom.value.maxPlayers
|
|
: 4
|
|
|
|
return {
|
|
roomId: gameStore.roomId,
|
|
name: roomName.value,
|
|
playerCount: gamePlayers.value.length,
|
|
maxPlayers,
|
|
status,
|
|
game: {
|
|
state: {
|
|
wall,
|
|
dealerIndex: gameStore.dealerIndex,
|
|
currentTurn: gameStore.currentTurn,
|
|
phase: gameStore.phase,
|
|
},
|
|
},
|
|
}
|
|
})
|
|
|
|
const seatViews = computed<SeatViewModel[]>(() => {
|
|
const players = gamePlayers.value
|
|
const tableOrder: SeatKey[] = ['bottom', 'right', 'top', 'left']
|
|
const selfSeatIndex = myPlayer.value?.seatIndex ?? players.find((player) => player.playerId === loggedInUserId.value)?.seatIndex ?? 0
|
|
const currentTurn = gameStore.currentTurn
|
|
|
|
return players.slice(0, 4).map((player) => {
|
|
const relativeIndex = (selfSeatIndex - player.seatIndex + 4) % 4
|
|
const seatKey = tableOrder[relativeIndex] ?? 'top'
|
|
return {
|
|
key: seatKey,
|
|
player,
|
|
isSelf: player.playerId === loggedInUserId.value,
|
|
isTurn: player.seatIndex === currentTurn,
|
|
}
|
|
})
|
|
})
|
|
|
|
const seatWinds = computed<Record<SeatKey, string>>(() => {
|
|
const tableOrder: SeatKey[] = ['bottom', 'right', 'top', 'left']
|
|
const players = gamePlayers.value
|
|
const selfSeatIndex = myPlayer.value?.seatIndex ?? players.find((player) => player.playerId === loggedInUserId.value)?.seatIndex ?? 0
|
|
|
|
const directionBySeatIndex = [eastWind, southWind, westWind, northWind]
|
|
const result: Record<SeatKey, string> = {
|
|
top: northWind,
|
|
right: eastWind,
|
|
bottom: southWind,
|
|
left: westWind,
|
|
}
|
|
|
|
for (let absoluteSeat = 0; absoluteSeat < 4; absoluteSeat += 1) {
|
|
const relativeIndex = (selfSeatIndex - absoluteSeat + 4) % 4
|
|
const seatKey = tableOrder[relativeIndex] ?? 'top'
|
|
result[seatKey] = directionBySeatIndex[absoluteSeat] ?? northWind
|
|
}
|
|
|
|
return result
|
|
})
|
|
|
|
const rightMessages = computed(() => wsMessages.value.slice(-16).reverse())
|
|
|
|
const currentPhaseText = computed(() => {
|
|
const map: Record<string, string> = {
|
|
waiting: '等待中',
|
|
dealing: '发牌中',
|
|
playing: '对局中',
|
|
action: '操作中',
|
|
settlement: '已结算',
|
|
}
|
|
return map[gameStore.phase] ?? gameStore.phase
|
|
})
|
|
|
|
const roomStatusText = computed(() => {
|
|
const map: Record<string, string> = {
|
|
waiting: '等待玩家',
|
|
playing: '游戏中',
|
|
finished: '已结束',
|
|
}
|
|
const status = roomState.value.status
|
|
return map[status] ?? status ?? '--'
|
|
})
|
|
|
|
const myReadyState = computed(() => {
|
|
return Boolean(myPlayer.value?.isReady)
|
|
})
|
|
|
|
const isRoomOwner = computed(() => {
|
|
const room = activeRoom.value
|
|
return Boolean(
|
|
room &&
|
|
room.roomId === gameStore.roomId &&
|
|
room.ownerId &&
|
|
loggedInUserId.value &&
|
|
room.ownerId === loggedInUserId.value,
|
|
)
|
|
})
|
|
|
|
const allPlayersReady = computed(() => {
|
|
return (
|
|
gamePlayers.value.length === 4 &&
|
|
gamePlayers.value.every((player) => Boolean(player.isReady))
|
|
)
|
|
})
|
|
|
|
const showStartGameButton = computed(() => {
|
|
return gameStore.phase === 'waiting' && allPlayersReady.value
|
|
})
|
|
|
|
const showWaitingOwnerTip = computed(() => {
|
|
return showStartGameButton.value && !isRoomOwner.value
|
|
})
|
|
|
|
const canStartGame = computed(() => {
|
|
return showStartGameButton.value && isRoomOwner.value && !startGamePending.value
|
|
})
|
|
|
|
const showReadyToggle = computed(() => {
|
|
if (gameStore.phase !== 'waiting' || !gameStore.roomId) {
|
|
return false
|
|
}
|
|
|
|
if (showStartGameButton.value) {
|
|
return !isRoomOwner.value
|
|
}
|
|
|
|
return true
|
|
})
|
|
|
|
function applyPlayerReadyState(playerId: string, ready: boolean): void {
|
|
const player = gameStore.players[playerId]
|
|
if (player) {
|
|
player.isReady = ready
|
|
}
|
|
|
|
const room = activeRoom.value
|
|
if (!room || room.roomId !== gameStore.roomId) {
|
|
return
|
|
}
|
|
|
|
const roomPlayer = room.players.find((item) => item.playerId === playerId)
|
|
if (roomPlayer) {
|
|
roomPlayer.ready = ready
|
|
}
|
|
}
|
|
|
|
function syncReadyStatesFromRoomUpdate(payload: RoomPlayerUpdatePayload): void {
|
|
if (!Array.isArray(payload.players)) {
|
|
return
|
|
}
|
|
|
|
for (const item of payload.players) {
|
|
const playerId =
|
|
(typeof item.PlayerID === 'string' && item.PlayerID) ||
|
|
(typeof item.player_id === 'string' && item.player_id) ||
|
|
''
|
|
const ready =
|
|
typeof item.Ready === 'boolean'
|
|
? item.Ready
|
|
: typeof item.ready === 'boolean'
|
|
? item.ready
|
|
: undefined
|
|
|
|
if (!playerId || typeof ready !== 'boolean') {
|
|
continue
|
|
}
|
|
|
|
applyPlayerReadyState(playerId, ready)
|
|
}
|
|
}
|
|
|
|
function normalizeWsType(type: string): string {
|
|
return type.replace(/[-\s]/g, '_').toUpperCase()
|
|
}
|
|
|
|
function asRecord(value: unknown): Record<string, unknown> | null {
|
|
return value && typeof value === 'object' ? value as Record<string, unknown> : null
|
|
}
|
|
|
|
function readString(source: Record<string, unknown>, ...keys: string[]): string {
|
|
for (const key of keys) {
|
|
const value = source[key]
|
|
if (typeof value === 'string' && value.trim()) {
|
|
return value
|
|
}
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function readNumber(source: Record<string, unknown>, ...keys: string[]): number | null {
|
|
for (const key of keys) {
|
|
const value = source[key]
|
|
if (typeof value === 'number' && Number.isFinite(value)) {
|
|
return value
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
function readStringArray(source: Record<string, unknown>, ...keys: string[]): string[] {
|
|
for (const key of keys) {
|
|
const value = source[key]
|
|
if (Array.isArray(value)) {
|
|
return value.filter((item): item is string => typeof item === 'string')
|
|
}
|
|
}
|
|
return []
|
|
}
|
|
|
|
function readBoolean(source: Record<string, unknown>, ...keys: string[]): boolean | null {
|
|
for (const key of keys) {
|
|
const value = source[key]
|
|
if (typeof value === 'boolean') {
|
|
return value
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
function tileToText(tile: Tile): string {
|
|
return `${tile.suit}${tile.value}`
|
|
}
|
|
|
|
function normalizeTile(tile: unknown): Tile | null {
|
|
const source = asRecord(tile)
|
|
if (!source) {
|
|
return null
|
|
}
|
|
|
|
const id = readNumber(source, 'id')
|
|
const suit = readString(source, 'suit') as Tile['suit'] | ''
|
|
const value = readNumber(source, 'value')
|
|
if (typeof id !== 'number' || !suit || typeof value !== 'number') {
|
|
return null
|
|
}
|
|
|
|
if (suit !== 'W' && suit !== 'T' && suit !== 'B') {
|
|
return null
|
|
}
|
|
|
|
return {
|
|
id,
|
|
suit,
|
|
value,
|
|
}
|
|
}
|
|
|
|
function normalizeTiles(value: unknown): Tile[] {
|
|
if (!Array.isArray(value)) {
|
|
return []
|
|
}
|
|
|
|
return value
|
|
.map((item) => normalizeTile(item))
|
|
.filter((item): item is Tile => Boolean(item))
|
|
}
|
|
|
|
function requestRoomInfo(): void {
|
|
const routeRoomId = typeof route.params.roomId === 'string' ? route.params.roomId : ''
|
|
const roomId = routeRoomId || gameStore.roomId || activeRoom.value?.roomId || ''
|
|
if (!roomId) {
|
|
pendingRoomInfoRequest = true
|
|
wsMessages.value.push('[client] get_room_info pending: missing roomId')
|
|
return
|
|
}
|
|
|
|
if (wsStatus.value !== 'connected') {
|
|
pendingRoomInfoRequest = true
|
|
wsMessages.value.push(`[client] get_room_info pending: ws=${wsStatus.value}`)
|
|
return
|
|
}
|
|
|
|
pendingRoomInfoRequest = false
|
|
wsMessages.value.push(`[client] get_room_info ${roomId}`)
|
|
sendWsMessage({
|
|
type: 'get_room_info',
|
|
roomId,
|
|
payload: {
|
|
room_id: roomId,
|
|
},
|
|
})
|
|
}
|
|
|
|
function handleRoomInfoResponse(message: unknown): void {
|
|
const source = asRecord(message)
|
|
if (!source || typeof source.type !== 'string') {
|
|
return
|
|
}
|
|
|
|
const normalizedType = normalizeWsType(source.type)
|
|
if (normalizedType !== 'GET_ROOM_INFO' && normalizedType !== 'ROOM_INFO') {
|
|
return
|
|
}
|
|
|
|
const payload = asRecord(source.payload) ?? source
|
|
const room = asRecord(payload.room)
|
|
const gameState = asRecord(payload.game_state)
|
|
const playerView = asRecord(payload.player_view)
|
|
const roomId =
|
|
readString(room ?? {}, 'room_id', 'roomId') ||
|
|
readString(gameState ?? {}, 'room_id', 'roomId') ||
|
|
readString(playerView ?? {}, 'room_id', 'roomId') ||
|
|
readString(payload, 'room_id', 'roomId') ||
|
|
readString(source, 'roomId')
|
|
if (!roomId) {
|
|
return
|
|
}
|
|
|
|
const roomPlayers = Array.isArray(room?.players) ? room.players : []
|
|
const gamePlayers = Array.isArray(gameState?.players) ? gameState.players : []
|
|
const playerMap = new Map<string, {
|
|
roomPlayer: {
|
|
index: number
|
|
playerId: string
|
|
displayName?: string
|
|
missingSuit?: string | null
|
|
ready: boolean
|
|
hand: string[]
|
|
melds: string[]
|
|
outTiles: string[]
|
|
hasHu: boolean
|
|
}
|
|
gamePlayer: {
|
|
playerId: string
|
|
seatIndex: number
|
|
displayName?: string
|
|
avatarURL?: string
|
|
missingSuit?: string | null
|
|
isReady: boolean
|
|
handTiles: Tile[]
|
|
melds: PlayerState['melds']
|
|
discardTiles: Tile[]
|
|
score: number
|
|
}
|
|
}>()
|
|
|
|
roomPlayers.forEach((item, fallbackIndex) => {
|
|
const player = asRecord(item)
|
|
if (!player) {
|
|
return
|
|
}
|
|
|
|
const playerId = readString(player, 'player_id', 'PlayerID', 'id', 'user_id')
|
|
if (!playerId) {
|
|
return
|
|
}
|
|
|
|
const seatIndex = readNumber(player, 'index', 'Index', 'seat_index', 'seatIndex') ?? fallbackIndex
|
|
const displayName =
|
|
readString(player, 'player_name', 'PlayerName', 'display_name', 'displayName', 'nickname', 'username') ||
|
|
(playerId === loggedInUserId.value ? loggedInUserName.value : '')
|
|
const ready = readBoolean(player, 'ready', 'Ready') ?? false
|
|
const missingSuit = readString(player, 'missing_suit', 'MissingSuit') || null
|
|
|
|
playerMap.set(playerId, {
|
|
roomPlayer: {
|
|
index: seatIndex,
|
|
playerId,
|
|
displayName: displayName || undefined,
|
|
missingSuit,
|
|
ready,
|
|
hand: [],
|
|
melds: [],
|
|
outTiles: [],
|
|
hasHu: false,
|
|
},
|
|
gamePlayer: {
|
|
playerId,
|
|
seatIndex,
|
|
displayName: displayName || undefined,
|
|
avatarURL: readString(player, 'avatar_url', 'AvatarUrl', 'avatar', 'avatarUrl') || undefined,
|
|
missingSuit,
|
|
isReady: ready,
|
|
handTiles: [],
|
|
melds: [],
|
|
discardTiles: [],
|
|
score: 0,
|
|
},
|
|
})
|
|
})
|
|
|
|
gamePlayers.forEach((item, fallbackIndex) => {
|
|
const player = asRecord(item)
|
|
if (!player) {
|
|
return
|
|
}
|
|
|
|
const playerId = readString(player, 'player_id', 'PlayerID')
|
|
if (!playerId) {
|
|
return
|
|
}
|
|
|
|
const existing = playerMap.get(playerId)
|
|
const seatIndex =
|
|
existing?.gamePlayer.seatIndex ??
|
|
readNumber(player, 'index', 'Index', 'seat_index', 'seatIndex') ??
|
|
fallbackIndex
|
|
const displayName = existing?.gamePlayer.displayName || (playerId === loggedInUserId.value ? loggedInUserName.value : '')
|
|
const missingSuit = readString(player, 'missing_suit', 'MissingSuit') || existing?.gamePlayer.missingSuit || null
|
|
const handCount = readNumber(player, 'hand_count', 'handCount') ?? 0
|
|
const outTiles = normalizeTiles(player.out_tiles ?? player.outTiles)
|
|
|
|
playerMap.set(playerId, {
|
|
roomPlayer: {
|
|
index: seatIndex,
|
|
playerId,
|
|
displayName: displayName || undefined,
|
|
missingSuit,
|
|
ready: existing?.roomPlayer.ready ?? false,
|
|
hand: Array.from({length: handCount}, () => ''),
|
|
melds: [],
|
|
outTiles: outTiles.map((tile) => tileToText(tile)),
|
|
hasHu: Boolean(player.has_hu ?? player.hasHu),
|
|
},
|
|
gamePlayer: {
|
|
playerId,
|
|
seatIndex,
|
|
displayName: displayName || undefined,
|
|
avatarURL: existing?.gamePlayer.avatarURL,
|
|
missingSuit,
|
|
isReady: existing?.gamePlayer.isReady ?? false,
|
|
handTiles: existing?.gamePlayer.handTiles ?? [],
|
|
melds: existing?.gamePlayer.melds ?? [],
|
|
discardTiles: outTiles,
|
|
score: existing?.gamePlayer.score ?? 0,
|
|
},
|
|
})
|
|
})
|
|
|
|
const privateHand = normalizeTiles(playerView?.hand)
|
|
if (loggedInUserId.value && playerMap.has(loggedInUserId.value)) {
|
|
const current = playerMap.get(loggedInUserId.value)
|
|
if (current) {
|
|
current.roomPlayer.hand = privateHand.map((tile) => tileToText(tile))
|
|
current.gamePlayer.handTiles = privateHand
|
|
}
|
|
}
|
|
|
|
const players = Array.from(playerMap.values()).sort((a, b) => a.gamePlayer.seatIndex - b.gamePlayer.seatIndex)
|
|
|
|
const previousPlayers = gameStore.players
|
|
const nextPlayers: typeof gameStore.players = {}
|
|
players.forEach(({gamePlayer}) => {
|
|
const previous = previousPlayers[gamePlayer.playerId]
|
|
const score = (gameState?.scores && typeof gameState.scores === 'object'
|
|
? (gameState.scores as Record<string, unknown>)[gamePlayer.playerId]
|
|
: undefined)
|
|
nextPlayers[gamePlayer.playerId] = {
|
|
playerId: gamePlayer.playerId,
|
|
seatIndex: gamePlayer.seatIndex,
|
|
displayName: gamePlayer.displayName ?? previous?.displayName,
|
|
avatarURL: gamePlayer.avatarURL ?? previous?.avatarURL,
|
|
missingSuit: gamePlayer.missingSuit ?? previous?.missingSuit,
|
|
handTiles: gamePlayer.handTiles.length > 0 ? gamePlayer.handTiles : previous?.handTiles ?? [],
|
|
melds: gamePlayer.melds.length > 0 ? gamePlayer.melds : previous?.melds ?? [],
|
|
discardTiles: gamePlayer.discardTiles.length > 0 ? gamePlayer.discardTiles : previous?.discardTiles ?? [],
|
|
score: typeof score === 'number' ? score : previous?.score ?? gamePlayer.score ?? 0,
|
|
isReady: gamePlayer.isReady,
|
|
}
|
|
})
|
|
|
|
const status =
|
|
readString(gameState ?? {}, 'status') ||
|
|
readString(room ?? {}, 'status') ||
|
|
readString(gameState ?? {}, 'phase') ||
|
|
'waiting'
|
|
const phase =
|
|
readString(gameState ?? {}, 'phase') ||
|
|
readString(room ?? {}, 'status') ||
|
|
'waiting'
|
|
const wallCount = readNumber(gameState ?? {}, 'wall_count', 'wallCount')
|
|
const dealerIndex = readNumber(gameState ?? {}, 'dealer_index', 'dealerIndex')
|
|
const currentTurnSeat = readNumber(gameState ?? {}, 'current_turn', 'currentTurn')
|
|
const currentTurnPlayerId = readString(gameState ?? {}, 'current_turn_player', 'currentTurnPlayer')
|
|
const currentTurn =
|
|
currentTurnSeat ??
|
|
(currentTurnPlayerId && nextPlayers[currentTurnPlayerId]
|
|
? nextPlayers[currentTurnPlayerId].seatIndex
|
|
: null)
|
|
|
|
gameStore.roomId = roomId
|
|
if (Object.keys(nextPlayers).length > 0) {
|
|
gameStore.players = nextPlayers
|
|
}
|
|
|
|
const phaseMap: Record<string, typeof gameStore.phase> = {
|
|
waiting: 'waiting',
|
|
dealing: 'dealing',
|
|
playing: 'playing',
|
|
action: 'action',
|
|
settlement: 'settlement',
|
|
finished: 'settlement',
|
|
}
|
|
gameStore.phase = phaseMap[phase] ?? gameStore.phase
|
|
if (typeof wallCount === 'number') {
|
|
gameStore.remainingTiles = wallCount
|
|
}
|
|
if (typeof dealerIndex === 'number') {
|
|
gameStore.dealerIndex = dealerIndex
|
|
}
|
|
if (typeof currentTurn === 'number') {
|
|
gameStore.currentTurn = currentTurn
|
|
}
|
|
const scores = asRecord(gameState?.scores)
|
|
if (scores) {
|
|
gameStore.scores = Object.fromEntries(
|
|
Object.entries(scores).filter(([, value]) => typeof value === 'number'),
|
|
) as Record<string, number>
|
|
}
|
|
gameStore.winners = readStringArray(gameState ?? {}, 'winners')
|
|
|
|
setActiveRoom({
|
|
roomId,
|
|
roomName: readString(room ?? {}, 'name', 'room_name') || activeRoom.value?.roomName || roomName.value,
|
|
gameType: readString(room ?? {}, 'game_type') || activeRoom.value?.gameType || 'chengdu',
|
|
ownerId: readString(room ?? {}, 'owner_id') || activeRoom.value?.ownerId || '',
|
|
maxPlayers: readNumber(room ?? {}, 'max_players') ?? activeRoom.value?.maxPlayers ?? 4,
|
|
playerCount: readNumber(room ?? {}, 'player_count') ?? players.length,
|
|
status,
|
|
createdAt: readString(room ?? {}, 'created_at') || activeRoom.value?.createdAt || '',
|
|
updatedAt: readString(room ?? {}, 'updated_at') || activeRoom.value?.updatedAt || '',
|
|
players: players.map((item) => item.roomPlayer),
|
|
myHand: privateHand.map((tile) => tileToText(tile)),
|
|
game: {
|
|
state: {
|
|
wall: Array.from({length: wallCount ?? 0}, (_, index) => `wall-${index}`),
|
|
scores: gameStore.scores,
|
|
dealerIndex: typeof dealerIndex === 'number' ? dealerIndex : activeRoom.value?.game?.state?.dealerIndex ?? -1,
|
|
currentTurn: typeof currentTurn === 'number' ? currentTurn : activeRoom.value?.game?.state?.currentTurn ?? -1,
|
|
phase,
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
const networkLabel = computed(() => {
|
|
const map: Record<WsStatus, string> = {
|
|
connected: '已连接',
|
|
connecting: '连接中',
|
|
error: '连接异常',
|
|
idle: '未连接',
|
|
closed: '未连接',
|
|
}
|
|
|
|
return map[wsStatus.value] ?? '未连接'
|
|
})
|
|
|
|
const formattedClock = computed(() => {
|
|
return new Date(now.value).toLocaleTimeString('zh-CN', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
hour12: false,
|
|
})
|
|
})
|
|
|
|
const wallBacks = computed<Record<SeatKey, string[]>>(() => {
|
|
if (gameStore.phase === 'waiting' || remainingTiles.value <= 0) {
|
|
return {
|
|
top: [],
|
|
right: [],
|
|
bottom: [],
|
|
left: [],
|
|
}
|
|
}
|
|
|
|
const wallSize = remainingTiles.value
|
|
const perSide = Math.max(6, Math.ceil((wallSize || 48) / 4 / 2))
|
|
|
|
return {
|
|
top: Array.from({length: perSide}, (_, index) => `top-${index}`),
|
|
right: Array.from({length: perSide}, (_, index) => `right-${index}`),
|
|
bottom: Array.from({length: perSide}, (_, index) => `bottom-${index}`),
|
|
left: Array.from({length: perSide}, (_, index) => `left-${index}`),
|
|
}
|
|
})
|
|
|
|
const seatDecor = computed<Record<SeatKey, SeatPlayerCardModel>>(() => {
|
|
const dealerIndex = roomState.value.game?.state?.dealerIndex ?? -1
|
|
const defaultMissingSuitLabel = missingSuitLabel(null)
|
|
|
|
const emptySeat = (): SeatPlayerCardModel => ({
|
|
avatarUrl: '',
|
|
name: '空位',
|
|
dealer: false,
|
|
isTurn: false,
|
|
isReady: false,
|
|
missingSuitLabel: defaultMissingSuitLabel,
|
|
})
|
|
|
|
const result: Record<SeatKey, SeatPlayerCardModel> = {
|
|
top: emptySeat(),
|
|
right: emptySeat(),
|
|
bottom: emptySeat(),
|
|
left: emptySeat(),
|
|
}
|
|
|
|
for (const seat of seatViews.value) {
|
|
if (!seat.player) {
|
|
continue
|
|
}
|
|
|
|
const displayName = seat.player.displayName || `玩家${seat.player.seatIndex + 1}`
|
|
const avatarUrl = seat.isSelf
|
|
? (localCachedAvatarUrl.value || seat.player.avatarURL || '')
|
|
: (seat.player.avatarURL || '')
|
|
const selfDisplayName = seat.player.displayName || loggedInUserName.value || '你自己'
|
|
|
|
result[seat.key] = {
|
|
avatarUrl,
|
|
name: Array.from(seat.isSelf ? selfDisplayName : displayName).slice(0, 4).join(''),
|
|
dealer: seat.player.seatIndex === dealerIndex,
|
|
isTurn: seat.isTurn,
|
|
isReady: Boolean(seat.player.isReady),
|
|
missingSuitLabel: missingSuitLabel(seat.player.missingSuit),
|
|
}
|
|
}
|
|
|
|
return result
|
|
})
|
|
|
|
const floatingMissingSuit = computed(() => {
|
|
const suitMap: Record<string, string> = {
|
|
万: wanIcon,
|
|
筒: tongIcon,
|
|
条: tiaoIcon,
|
|
}
|
|
|
|
const topLabel = seatDecor.value.top?.missingSuitLabel ?? ''
|
|
const leftLabel = seatDecor.value.left?.missingSuitLabel ?? ''
|
|
const rightLabel = seatDecor.value.right?.missingSuitLabel ?? ''
|
|
|
|
return {
|
|
top: suitMap[topLabel] ?? '',
|
|
left: suitMap[leftLabel] ?? '',
|
|
right: suitMap[rightLabel] ?? '',
|
|
}
|
|
})
|
|
|
|
function missingSuitLabel(value: string | null | undefined): string {
|
|
const suitMap: Record<string, string> = {
|
|
wan: '万',
|
|
tong: '筒',
|
|
tiao: '条',
|
|
}
|
|
|
|
if (!value) {
|
|
return ''
|
|
}
|
|
return suitMap[value] ?? value
|
|
}
|
|
|
|
function getBackImage(seat: SeatKey): string {
|
|
const imageMap: Record<SeatKey, string> = {
|
|
top: topBackImage,
|
|
right: rightBackImage,
|
|
bottom: bottomBackImage,
|
|
left: leftBackImage,
|
|
}
|
|
|
|
return imageMap[seat]
|
|
}
|
|
|
|
function toggleMenu(): void {
|
|
menuTriggerActive.value = true
|
|
if (menuTriggerTimer !== null) {
|
|
window.clearTimeout(menuTriggerTimer)
|
|
}
|
|
menuTriggerTimer = window.setTimeout(() => {
|
|
menuTriggerActive.value = false
|
|
menuTriggerTimer = null
|
|
}, 180)
|
|
|
|
if (menuOpen.value) {
|
|
menuOpen.value = false
|
|
return
|
|
}
|
|
|
|
if (menuOpenTimer !== null) {
|
|
window.clearTimeout(menuOpenTimer)
|
|
}
|
|
menuOpenTimer = window.setTimeout(() => {
|
|
menuOpen.value = true
|
|
menuOpenTimer = null
|
|
}, 85)
|
|
}
|
|
|
|
function toggleTrustMode(): void {
|
|
isTrustMode.value = !isTrustMode.value
|
|
menuOpen.value = false
|
|
}
|
|
|
|
function selectTile(tile: string): void {
|
|
selectedTile.value = selectedTile.value === tile ? null : tile
|
|
}
|
|
|
|
function formatTile(tile: Tile): string {
|
|
return `${tile.suit}${tile.value}`
|
|
}
|
|
|
|
function handlePlayerHandResponse(message: unknown): void {
|
|
const source = asRecord(message)
|
|
if (!source || typeof source.type !== 'string') {
|
|
return
|
|
}
|
|
|
|
if (normalizeWsType(source.type) !== 'PLAYER_HAND') {
|
|
return
|
|
}
|
|
|
|
const payload = asRecord(source.payload)
|
|
if (!payload) {
|
|
return
|
|
}
|
|
|
|
const roomId =
|
|
readString(payload, 'room_id', 'roomId') ||
|
|
readString(source, 'roomId')
|
|
if (roomId && gameStore.roomId && roomId !== gameStore.roomId) {
|
|
return
|
|
}
|
|
|
|
const handTiles = normalizeTiles(payload.hand)
|
|
if (!loggedInUserId.value || handTiles.length === 0) {
|
|
return
|
|
}
|
|
|
|
const existingPlayer = gameStore.players[loggedInUserId.value]
|
|
if (existingPlayer) {
|
|
existingPlayer.handTiles = handTiles
|
|
}
|
|
|
|
const room = activeRoom.value
|
|
if (room && room.roomId === (roomId || gameStore.roomId)) {
|
|
room.myHand = handTiles.map((tile) => tileToText(tile))
|
|
const roomPlayer = room.players.find((item) => item.playerId === loggedInUserId.value)
|
|
if (roomPlayer) {
|
|
roomPlayer.hand = room.myHand
|
|
}
|
|
}
|
|
}
|
|
|
|
function toGameAction(message: unknown): GameAction | null {
|
|
if (!message || typeof message !== 'object') {
|
|
return null
|
|
}
|
|
|
|
const source = message as Record<string, unknown>
|
|
if (typeof source.type !== 'string') {
|
|
return null
|
|
}
|
|
|
|
const type = normalizeWsType(source.type)
|
|
const payload = source.payload
|
|
|
|
switch (type) {
|
|
case 'GAME_INIT':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'GAME_INIT', payload: payload as GameActionPayload<'GAME_INIT'>}
|
|
}
|
|
return null
|
|
case 'GAME_START':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'GAME_START', payload: payload as GameActionPayload<'GAME_START'>}
|
|
}
|
|
return null
|
|
case 'DRAW_TILE':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'DRAW_TILE', payload: payload as GameActionPayload<'DRAW_TILE'>}
|
|
}
|
|
return null
|
|
case 'PLAY_TILE':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'PLAY_TILE', payload: payload as GameActionPayload<'PLAY_TILE'>}
|
|
}
|
|
return null
|
|
case 'PENDING_CLAIM':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'PENDING_CLAIM', payload: payload as GameActionPayload<'PENDING_CLAIM'>}
|
|
}
|
|
return null
|
|
case 'CLAIM_RESOLVED':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'CLAIM_RESOLVED', payload: payload as GameActionPayload<'CLAIM_RESOLVED'>}
|
|
}
|
|
return null
|
|
case 'ROOM_PLAYER_UPDATE':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'ROOM_PLAYER_UPDATE', payload: payload as GameActionPayload<'ROOM_PLAYER_UPDATE'>}
|
|
}
|
|
return null
|
|
case 'ROOM_MEMBER_JOINED':
|
|
if (payload && typeof payload === 'object') {
|
|
return {type: 'ROOM_PLAYER_UPDATE', payload: payload as GameActionPayload<'ROOM_PLAYER_UPDATE'>}
|
|
}
|
|
return null
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
function handleReadyStateResponse(message: unknown): void {
|
|
if (!message || typeof message !== 'object') {
|
|
return
|
|
}
|
|
|
|
const source = message as Record<string, unknown>
|
|
if (typeof source.type !== 'string') {
|
|
return
|
|
}
|
|
|
|
const type = normalizeWsType(source.type)
|
|
if (type !== 'SET_READY') {
|
|
return
|
|
}
|
|
|
|
const payload = source.payload
|
|
if (!payload || typeof payload !== 'object') {
|
|
return
|
|
}
|
|
|
|
const readyPayload = payload as Record<string, unknown>
|
|
const roomId =
|
|
typeof readyPayload.room_id === 'string'
|
|
? readyPayload.room_id
|
|
: typeof source.roomId === 'string'
|
|
? source.roomId
|
|
: ''
|
|
const userId =
|
|
typeof readyPayload.user_id === 'string'
|
|
? readyPayload.user_id
|
|
: typeof source.target === 'string'
|
|
? source.target
|
|
: ''
|
|
const ready = readyPayload.ready
|
|
|
|
if (roomId && roomId !== gameStore.roomId) {
|
|
return
|
|
}
|
|
|
|
if (typeof ready === 'boolean' && userId) {
|
|
applyPlayerReadyState(userId, ready)
|
|
}
|
|
|
|
if (userId && userId === loggedInUserId.value) {
|
|
readyTogglePending.value = false
|
|
}
|
|
}
|
|
|
|
function logoutToLogin(): void {
|
|
clearAuth()
|
|
auth.value = null
|
|
wsClient.close()
|
|
void router.replace('/login')
|
|
}
|
|
|
|
function currentSession(): AuthSession | null {
|
|
const current = auth.value
|
|
if (!current?.token) {
|
|
return null
|
|
}
|
|
|
|
return {
|
|
token: current.token,
|
|
tokenType: current.tokenType,
|
|
refreshToken: current.refreshToken,
|
|
expiresIn: current.expiresIn,
|
|
}
|
|
}
|
|
|
|
function syncAuthSession(next: AuthSession): void {
|
|
if (!auth.value) {
|
|
return
|
|
}
|
|
|
|
auth.value = {
|
|
...auth.value,
|
|
token: next.token,
|
|
tokenType: next.tokenType ?? auth.value.tokenType,
|
|
refreshToken: next.refreshToken ?? auth.value.refreshToken,
|
|
expiresIn: next.expiresIn,
|
|
}
|
|
writeStoredAuth(auth.value)
|
|
}
|
|
|
|
async function ensureCurrentUserLoaded(): Promise<void> {
|
|
if (loggedInUserId.value) {
|
|
return
|
|
}
|
|
|
|
const currentAuth = auth.value
|
|
const session = currentSession()
|
|
if (!session) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
const userInfo = await getUserInfo(session, syncAuthSession)
|
|
const resolvedId = userInfo.userID ?? userInfo.user_id ?? userInfo.id ?? currentAuth?.user?.id
|
|
const nextUser = {
|
|
...(currentAuth?.user ?? {}),
|
|
...userInfo,
|
|
id:
|
|
typeof resolvedId === 'string' || typeof resolvedId === 'number'
|
|
? resolvedId
|
|
: undefined,
|
|
}
|
|
|
|
if (!currentAuth) {
|
|
return
|
|
}
|
|
|
|
auth.value = {
|
|
...currentAuth,
|
|
user: nextUser,
|
|
}
|
|
writeStoredAuth(auth.value)
|
|
} catch (error) {
|
|
if (error instanceof AuthExpiredError) {
|
|
logoutToLogin()
|
|
}
|
|
}
|
|
}
|
|
|
|
function decodeJwtExpMs(token: string): number | null {
|
|
const parts = token.split('.')
|
|
const payloadPart = parts[1]
|
|
if (!payloadPart) {
|
|
return null
|
|
}
|
|
|
|
try {
|
|
const normalized = payloadPart.replace(/-/g, '+').replace(/_/g, '/')
|
|
const padded = normalized + '='.repeat((4 - (normalized.length % 4)) % 4)
|
|
const payload = JSON.parse(window.atob(padded)) as { exp?: number }
|
|
return typeof payload.exp === 'number' ? payload.exp * 1000 : null
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
function shouldRefreshWsToken(token: string): boolean {
|
|
const expMs = decodeJwtExpMs(token)
|
|
if (!expMs) {
|
|
return false
|
|
}
|
|
|
|
return expMs <= Date.now() + 30_000
|
|
}
|
|
|
|
async function resolveWsToken(forceRefresh = false, logoutOnRefreshFail = false): Promise<string | null> {
|
|
const current = auth.value
|
|
if (!current?.token) {
|
|
return null
|
|
}
|
|
|
|
if (!forceRefresh && !shouldRefreshWsToken(current.token)) {
|
|
return current.token
|
|
}
|
|
|
|
if (!current.refreshToken || refreshingWsToken) {
|
|
return current.token
|
|
}
|
|
|
|
refreshingWsToken = true
|
|
try {
|
|
const refreshed = await refreshAccessToken({
|
|
token: current.token,
|
|
tokenType: current.tokenType,
|
|
refreshToken: current.refreshToken,
|
|
})
|
|
|
|
const nextAuth = {
|
|
...current,
|
|
token: refreshed.token,
|
|
tokenType: refreshed.tokenType ?? current.tokenType,
|
|
refreshToken: refreshed.refreshToken ?? current.refreshToken,
|
|
expiresIn: refreshed.expiresIn,
|
|
}
|
|
auth.value = nextAuth
|
|
writeStoredAuth(nextAuth)
|
|
return nextAuth.token
|
|
} catch {
|
|
if (logoutOnRefreshFail) {
|
|
logoutToLogin()
|
|
}
|
|
return null
|
|
} finally {
|
|
refreshingWsToken = false
|
|
}
|
|
}
|
|
|
|
async function ensureWsConnected(forceRefresh = false): Promise<void> {
|
|
const token = await resolveWsToken(forceRefresh, false)
|
|
if (!token) {
|
|
wsError.value = '未找到登录凭证，无法建立连接'
|
|
return
|
|
}
|
|
|
|
wsError.value = ''
|
|
wsClient.connect(buildWsUrl(), token)
|
|
}
|
|
|
|
async function reconnectWsInternal(forceRefresh = false): Promise<boolean> {
|
|
const token = await resolveWsToken(forceRefresh, false)
|
|
if (!token) {
|
|
wsError.value = '未找到登录凭证，无法建立连接'
|
|
return false
|
|
}
|
|
|
|
wsError.value = ''
|
|
wsClient.reconnect(buildWsUrl(), token)
|
|
return true
|
|
}
|
|
|
|
function reconnectWs(): void {
|
|
void reconnectWsInternal()
|
|
}
|
|
|
|
function backHall(): void {
|
|
leaveRoomPending.value = true
|
|
const roomId = gameStore.roomId
|
|
sendWsMessage({
|
|
type: 'leave_room',
|
|
roomId,
|
|
payload: {
|
|
room_id: roomId,
|
|
},
|
|
})
|
|
wsClient.close()
|
|
void router.push('/hall').finally(() => {
|
|
leaveRoomPending.value = false
|
|
})
|
|
}
|
|
|
|
function toggleReadyState(): void {
|
|
if (readyTogglePending.value) {
|
|
return
|
|
}
|
|
|
|
const nextReady = !myReadyState.value
|
|
readyTogglePending.value = true
|
|
console.log('[ready-toggle]', {
|
|
loggedInUserId: loggedInUserId.value,
|
|
myReadyState: myReadyState.value,
|
|
nextReady,
|
|
})
|
|
sendWsMessage({
|
|
type: 'set_ready',
|
|
roomId: gameStore.roomId,
|
|
payload: {
|
|
ready: nextReady,
|
|
},
|
|
})
|
|
}
|
|
|
|
function startGame(): void {
|
|
if (!canStartGame.value) {
|
|
return
|
|
}
|
|
|
|
startGamePending.value = true
|
|
sendWsMessage({
|
|
type: 'start_game',
|
|
roomId: gameStore.roomId,
|
|
payload: {
|
|
room_id: gameStore.roomId,
|
|
},
|
|
})
|
|
}
|
|
|
|
function handleLeaveRoom(): void {
|
|
menuOpen.value = false
|
|
backHall()
|
|
}
|
|
|
|
function handleGlobalClick(event: MouseEvent): void {
|
|
const target = event.target as HTMLElement | null
|
|
if (!target) {
|
|
return
|
|
}
|
|
|
|
if (target.closest('.menu-trigger-wrap')) {
|
|
return
|
|
}
|
|
|
|
menuOpen.value = false
|
|
}
|
|
|
|
function handleGlobalEsc(event: KeyboardEvent): void {
|
|
if (event.key === 'Escape') {
|
|
menuOpen.value = false
|
|
}
|
|
}
|
|
|
|
function hydrateFromActiveRoom(routeRoomId: string): void {
|
|
const room = activeRoom.value
|
|
if (!room) {
|
|
return
|
|
}
|
|
|
|
const targetRoomId = routeRoomId || room.roomId
|
|
if (!targetRoomId || room.roomId !== targetRoomId) {
|
|
return
|
|
}
|
|
|
|
gameStore.roomId = room.roomId
|
|
|
|
const phaseMap: Record<string, typeof gameStore.phase> = {
|
|
waiting: 'waiting',
|
|
playing: 'playing',
|
|
finished: 'settlement',
|
|
}
|
|
gameStore.phase = phaseMap[room.status] ?? gameStore.phase
|
|
|
|
const nextPlayers: Record<string, PlayerState> = {}
|
|
for (const player of room.players) {
|
|
if (!player.playerId) {
|
|
continue
|
|
}
|
|
|
|
const previous = gameStore.players[player.playerId]
|
|
nextPlayers[player.playerId] = {
|
|
playerId: player.playerId,
|
|
seatIndex: player.index,
|
|
displayName: player.displayName || player.playerId,
|
|
avatarURL: previous?.avatarURL,
|
|
missingSuit: player.missingSuit ?? previous?.missingSuit,
|
|
isReady: player.ready,
|
|
handTiles: previous?.handTiles ?? [],
|
|
melds: previous?.melds ?? [],
|
|
discardTiles: previous?.discardTiles ?? [],
|
|
score: previous?.score ?? 0,
|
|
}
|
|
}
|
|
gameStore.players = nextPlayers
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
const routeRoomId = typeof route.params.roomId === 'string' ? route.params.roomId : ''
|
|
pendingRoomInfoRequest = true
|
|
void ensureCurrentUserLoaded().finally(() => {
|
|
hydrateFromActiveRoom(routeRoomId)
|
|
if (routeRoomId) {
|
|
gameStore.roomId = routeRoomId
|
|
}
|
|
requestRoomInfo()
|
|
})
|
|
|
|
const handler = (status: WsStatus) => {
|
|
wsStatus.value = status
|
|
if (status === 'connected' && pendingRoomInfoRequest) {
|
|
requestRoomInfo()
|
|
}
|
|
}
|
|
|
|
wsClient.onMessage((msg: unknown) => {
|
|
const text = typeof msg === 'string' ? msg : JSON.stringify(msg)
|
|
wsMessages.value.push(`[server] ${text}`)
|
|
handleRoomInfoResponse(msg)
|
|
handlePlayerHandResponse(msg)
|
|
handleReadyStateResponse(msg)
|
|
const gameAction = toGameAction(msg)
|
|
if (gameAction) {
|
|
dispatchGameAction(gameAction)
|
|
if (gameAction.type === 'GAME_START') {
|
|
startGamePending.value = false
|
|
}
|
|
if (gameAction.type === 'ROOM_PLAYER_UPDATE') {
|
|
syncReadyStatesFromRoomUpdate(gameAction.payload)
|
|
readyTogglePending.value = false
|
|
}
|
|
}
|
|
})
|
|
wsClient.onError((message: string) => {
|
|
wsError.value = message
|
|
wsMessages.value.push(`[error] ${message}`)
|
|
|
|
// WebSocket 握手失败时浏览器拿不到 401 状态码，统一按需强制刷新 token 后重连一次
|
|
const nowMs = Date.now()
|
|
if (nowMs - lastForcedRefreshAt > 5000) {
|
|
lastForcedRefreshAt = nowMs
|
|
void resolveWsToken(true, true).then((refreshedToken) => {
|
|
if (!refreshedToken) {
|
|
return
|
|
}
|
|
wsError.value = ''
|
|
wsClient.reconnect(buildWsUrl(), refreshedToken)
|
|
}).catch(() => {
|
|
logoutToLogin()
|
|
})
|
|
}
|
|
})
|
|
|
|
unsubscribe = wsClient.onStatusChange(handler)
|
|
void ensureWsConnected()
|
|
|
|
clockTimer = window.setInterval(() => {
|
|
now.value = Date.now()
|
|
}, 1000)
|
|
|
|
window.addEventListener('click', handleGlobalClick)
|
|
window.addEventListener('keydown', handleGlobalEsc)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (unsubscribe) {
|
|
unsubscribe()
|
|
unsubscribe = null
|
|
}
|
|
|
|
if (clockTimer !== null) {
|
|
window.clearInterval(clockTimer)
|
|
clockTimer = null
|
|
}
|
|
|
|
window.removeEventListener('click', handleGlobalClick)
|
|
window.removeEventListener('keydown', handleGlobalEsc)
|
|
|
|
if (menuTriggerTimer !== null) {
|
|
window.clearTimeout(menuTriggerTimer)
|
|
menuTriggerTimer = null
|
|
}
|
|
|
|
if (menuOpenTimer !== null) {
|
|
window.clearTimeout(menuOpenTimer)
|
|
menuOpenTimer = null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="picture-scene">
|
|
<div class="picture-layout">
|
|
<section class="table-stage">
|
|
<img class="table-desk" :src="deskImage" alt=""/>
|
|
|
|
<div class="table-felt">
|
|
<div class="table-surface"></div>
|
|
<div class="inner-outline outer"></div>
|
|
<div class="inner-outline mid"></div>
|
|
|
|
<div class="top-left-tools">
|
|
<div class="menu-trigger-wrap">
|
|
<button
|
|
class="metal-circle menu-trigger"
|
|
:class="{ 'is-feedback': menuTriggerActive }"
|
|
type="button"
|
|
:disabled="leaveRoomPending"
|
|
@click.stop="toggleMenu"
|
|
>
|
|
<span class="menu-trigger-icon">☰</span>
|
|
</button>
|
|
<transition name="menu-pop">
|
|
<div v-if="menuOpen" class="menu-popover" @click.stop>
|
|
<div class="menu-list">
|
|
<button class="menu-item menu-item-delay-1" type="button" @click="toggleTrustMode">
|
|
<span class="menu-item-icon">
|
|
<img :src="robotIcon" alt=""/>
|
|
</span>
|
|
<span>{{ isTrustMode ? '取消托管' : '托管' }}</span>
|
|
</button>
|
|
<button
|
|
class="menu-item menu-item-danger menu-item-delay-2"
|
|
type="button"
|
|
:disabled="leaveRoomPending"
|
|
@click="handleLeaveRoom"
|
|
>
|
|
<span class="menu-item-icon">
|
|
<img :src="exitIcon" alt=""/>
|
|
</span>
|
|
<span>{{ leaveRoomPending ? '退出中...' : '退出' }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
<div class="left-counter">
|
|
<span class="counter-light"></span>
|
|
<strong>{{ roomState.game?.state?.wall?.length ?? 48 }}</strong>
|
|
</div>
|
|
<span v-if="isTrustMode" class="trust-chip">托管中</span>
|
|
</div>
|
|
|
|
<div class="top-right-clock">
|
|
<div class="signal-chip">
|
|
<span class="wifi-dot" :class="`is-${wsStatus}`"></span>
|
|
<strong>{{ networkLabel }}</strong>
|
|
</div>
|
|
<span>{{ formattedClock }}</span>
|
|
</div>
|
|
|
|
|
|
<TopPlayerCard :player="seatDecor.top"/>
|
|
<RightPlayerCard :player="seatDecor.right"/>
|
|
<BottomPlayerCard :player="seatDecor.bottom"/>
|
|
<LeftPlayerCard :player="seatDecor.left"/>
|
|
|
|
<div class="wall wall-top">
|
|
<img v-for="key in wallBacks.top" :key="key" :src="getBackImage('top')" alt=""/>
|
|
</div>
|
|
<div class="wall wall-right">
|
|
<img v-for="key in wallBacks.right" :key="key" :src="getBackImage('right')" alt=""/>
|
|
</div>
|
|
<div class="wall wall-bottom">
|
|
<img v-for="key in wallBacks.bottom" :key="key" :src="getBackImage('bottom')" alt=""/>
|
|
</div>
|
|
<div class="wall wall-left">
|
|
<img v-for="key in wallBacks.left" :key="key" :src="getBackImage('left')" alt=""/>
|
|
</div>
|
|
|
|
<div class="floating-status top">
|
|
<img v-if="floatingMissingSuit.top" :src="floatingMissingSuit.top" alt=""/>
|
|
<span>{{ seatDecor.top.missingSuitLabel }}</span>
|
|
</div>
|
|
<div class="floating-status left">
|
|
<img v-if="floatingMissingSuit.left" :src="floatingMissingSuit.left" alt=""/>
|
|
<span>{{ seatDecor.left.missingSuitLabel }}</span>
|
|
</div>
|
|
<div class="floating-status right">
|
|
<img v-if="floatingMissingSuit.right" :src="floatingMissingSuit.right" alt=""/>
|
|
<span>{{ seatDecor.right.missingSuitLabel }}</span>
|
|
</div>
|
|
|
|
<WindSquare class="center-wind-square" :seat-winds="seatWinds"/>
|
|
|
|
<div v-if="showWaitingOwnerTip" class="waiting-owner-tip">
|
|
<span>等待房主开始游戏</span>
|
|
</div>
|
|
|
|
|
|
<div class="bottom-control-panel">
|
|
<div v-if="showReadyToggle || showStartGameButton" class="bottom-action-bar">
|
|
<button
|
|
v-if="showReadyToggle"
|
|
class="ready-toggle ready-toggle-inline"
|
|
type="button"
|
|
:disabled="readyTogglePending"
|
|
@click="toggleReadyState"
|
|
>
|
|
<span class="ready-toggle-label">{{ myReadyState ? '取 消' : '准 备' }}</span>
|
|
</button>
|
|
|
|
<button
|
|
v-if="showStartGameButton && isRoomOwner"
|
|
class="ready-toggle ready-toggle-inline"
|
|
type="button"
|
|
:disabled="!canStartGame"
|
|
@click="startGame"
|
|
>
|
|
<span class="ready-toggle-label">开始游戏</span>
|
|
</button>
|
|
</div>
|
|
<div class="player-hand" v-if="visibleHandTiles.length > 0">
|
|
<div
|
|
v-for="group in visibleHandTileGroups"
|
|
:key="group.suit"
|
|
class="player-hand-group"
|
|
:data-suit="group.suit"
|
|
>
|
|
<button
|
|
v-for="tile in group.tiles"
|
|
:key="tile.id"
|
|
class="tile-chip"
|
|
:class="{ selected: selectedTile === formatTile(tile) }"
|
|
type="button"
|
|
@click="selectTile(formatTile(tile))"
|
|
>
|
|
<img
|
|
class="tile-chip-image"
|
|
:src="getTileImage(tile)"
|
|
:alt="formatTile(tile)"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="ws-sidebar">
|
|
<div class="sidebar-head">
|
|
<div>
|
|
<p class="sidebar-title">WebSocket 消息</p>
|
|
<small>{{ networkLabel }} · {{ loggedInUserName || '未登录昵称' }}</small>
|
|
</div>
|
|
<button class="sidebar-btn" type="button" @click="reconnectWs">重连</button>
|
|
</div>
|
|
|
|
<div class="sidebar-stats">
|
|
<div class="sidebar-stat">
|
|
<span>房间</span>
|
|
<strong>{{ roomState.name || roomName || '未命名' }}</strong>
|
|
</div>
|
|
<div class="sidebar-stat">
|
|
<span>阶段</span>
|
|
<strong>{{ currentPhaseText }}</strong>
|
|
</div>
|
|
<div class="sidebar-stat">
|
|
<span>人数</span>
|
|
<strong>{{ roomState.playerCount }}/{{ roomState.maxPlayers }}</strong>
|
|
</div>
|
|
<div class="sidebar-stat">
|
|
<span>状态</span>
|
|
<strong>{{ roomStatusText }}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-if="wsError" class="sidebar-error">{{ wsError }}</p>
|
|
|
|
<div class="sidebar-log">
|
|
<p v-if="rightMessages.length === 0" class="sidebar-empty">等待服务器消息...</p>
|
|
<p v-for="(line, index) in rightMessages" :key="index" class="sidebar-line">{{ line }}</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</template>
|