wsy182/mahjong-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: wsy182:main
Branches Tags
wsy182:main wsy182:dev wsy182:dev-claude
..
compare: wsy182:1b15748d0d4db9eba7607809661557e35e6219f8
Branches Tags
wsy182:dev wsy182:dev-claude wsy182:main

6 Commits
main ... 1b15748d0d

Author SHA1 Message Date
wsy182
1b15748d0d ``` 
refactor(ChengduGamePage): replace manual WebSocket logic with composable hook

- Replace manual WebSocket connection and state management with
  useChengduGameRoom composable
- Remove unused imports and authentication related code
- Simplify component by extracting room state logic into separate hook
- Clean up redundant functions and variables that are now handled
 by the composable
- Update component lifecycle to use the new composable's methods
  for connecting WebSocket and managing room state
```
 2026-03-24 14:12:04 +08:00
wsy182
f97f1ffdbc ``` 
feat(game): add player cards and topbar styling for Chengdu Mahjong game

- Add new CSS classes for topbar layout including .topbar-left,
  .topbar-back-btn, .topbar-room-meta, .eyebrow, and .topbar-room-name
- Create dedicated player card components for each seat position
  (top, right, bottom, left)
- Refactor seatDecor computed property to use SeatPlayerCardModel
  interface with proper typing
- Replace inline player badge rendering with reusable player card
  components
- Update game header layout to use new topbar structure with
  back button and room metadata
- Adjust spacing and font sizes in game header elements
```
 2026-03-24 14:02:21 +08:00
wsy182
d4e217b11b Merge branch 'main' into dev 
# Conflicts:
#	src/views/ChengduGamePage.vue
#	vite.config.ts
 2026-03-24 13:45:30 +08:00
wsy182
a5c833c769 feat(game): 完善成都麻将游戏页面功能 
- 添加WebSocket URL构建逻辑和认证令牌刷新功能
- 实现游戏状态显示包括阶段、网络状态、时钟等信息
- 添加游戏桌面背景图片和玩家座位装饰组件
- 重构CSS样式为网格布局提升响应式体验
- 配置环境变量支持API和WebSocket代理目标设置
- 优化WebSocket连接管理增加错误处理机制
- 添加游戏桌墙体和中心计数器等UI元素
- 修复多处字符串国际化和路径处理问题
 2026-03-24 13:44:53 +08:00
wsy182
fcb9a02c68 ``` 
fix(backend): resolve merge conflicts and update API proxy configuration

- Remove leftover merge conflict markers from ChengduGamePage.vue
- Fix broken HTML structure by properly closing header and section tags
- Update proxy configuration to point to correct backend port (19000)
- Clean up import statements and remove conflicting code blocks
```
 2026-03-24 09:36:58 +08:00
wsy182
bb3b55f69b Update ChengduGamePage.vue 2026-03-24 09:30:50 +08:00
14 changed files with 1612 additions and 2230 deletions
Expand all files Collapse all files

1
.env.dev
View File

@@ -1 +0,0 @@
VITE_API_BASE_URL=http://localhost:8080/api/v1

4
.env.development Normal file
View File

@@ -0,0 +1,4 @@
VITE_API_BASE_URL=/api/v1
VITE_GAME_WS_URL=/api/v1/ws
VITE_API_PROXY_TARGET=http://127.0.0.1:19000
VITE_WS_PROXY_TARGET=http://127.0.0.1:19000

9
src/api/auth.ts
View File

@@ -39,6 +39,15 @@ function buildUrl(path: string): string {
return normalizedPath
}
if (API_BASE_URL.startsWith('/')) {
const basePath = API_BASE_URL.startsWith('/') ? API_BASE_URL : `/${API_BASE_URL}`
if (normalizedPath === basePath || normalizedPath.startsWith(`${basePath}/`)) {
return normalizedPath
}
return `${basePath}${normalizedPath}`
}
// Avoid duplicated API prefix, e.g. base: /api/v1 + path: /api/v1/auth/login
try {
const baseUrl = new URL(API_BASE_URL)

9
src/api/authed-request.ts
View File

@@ -47,6 +47,15 @@ function buildUrl(path: string): string {
return normalizedPath
}
if (API_BASE_URL.startsWith('/')) {
const basePath = API_BASE_URL.startsWith('/') ? API_BASE_URL : `/${API_BASE_URL}`
if (normalizedPath === basePath || normalizedPath.startsWith(`${basePath}/`)) {
return normalizedPath
}
return `${basePath}${normalizedPath}`
}
try {
const baseUrl = new URL(API_BASE_URL)
const basePath = baseUrl.pathname.replace(/\/$/, '')

471
src/assets/styles/global.css
View File

@@ -423,36 +423,111 @@ button:disabled {
}
.game-page {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 12px;
width: 100%;
max-width: none;
height: 100vh;
min-height: 100vh;
margin: 0;
padding-top: max(12px, env(safe-area-inset-top));
padding-right: max(12px, env(safe-area-inset-right));
padding-bottom: max(12px, env(safe-area-inset-bottom));
padding-left: max(12px, env(safe-area-inset-left));
overflow: hidden;
}
.game-header {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(320px, auto) minmax(280px, 1fr);
align-items: center;
min-height: 96px;
padding: 14px 18px;
border-radius: 22px;
border: 1px solid rgba(233, 199, 108, 0.16);
background:
linear-gradient(180deg, rgba(20, 47, 35, 0.86), rgba(8, 24, 18, 0.82)),
radial-gradient(circle at top, rgba(255, 219, 123, 0.08), transparent 38%);
backdrop-filter: blur(10px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 16px 36px rgba(0, 0, 0, 0.28);
}
.game-header > div:first-child {
min-width: 0;
}
.topbar-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.topbar-back-btn {
flex: 0 0 auto;
min-width: 108px;
}
.topbar-room-meta {
min-width: 0;
}
.eyebrow {
color: #f7e4b0;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
.topbar-room-name {
margin-top: 4px;
color: #f6edd5;
font-size: 20px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.game-header h1 {
font-size: 28px;
font-weight: 800;
letter-spacing: 1px;
color: #f7e4b0;
}
.game-header .sub-title {
margin-top: 4px;
color: #d7eadf;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.game-table-panel {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
align-items: center;
min-height: 60px;
padding: 10px 14px;
overflow: hidden;
}
.room-brief {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
padding: 8px 10px;
margin-bottom: 0;
padding: 4px 2px;
border-radius: 8px;
border: 1px solid rgba(194, 226, 208, 0.2);
background: rgba(7, 28, 20, 0.55);
border: 0;
background: transparent;
overflow: hidden;
}
.room-brief-title {
@@ -495,6 +570,345 @@ button:disabled {
text-overflow: ellipsis;
}
.topbar-center {
display: flex;
justify-content: center;
min-width: 0;
}
.title-stack {
padding: 10px 18px;
border-radius: 18px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(7, 24, 17, 0.36);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.game-title {
font-size: 30px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 2px;
color: #f6edd5;
}
.game-subtitle {
margin-top: 6px;
color: #c4ddd0;
font-size: 13px;
}
.topbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.status-chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(198, 223, 209, 0.18);
background: rgba(5, 24, 17, 0.42);
font-size: 13px;
}
.wifi-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #9a6b6b;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
.wifi-dot.is-connected {
background: #62d78f;
}
.wifi-dot.is-connecting {
background: #f0c46b;
}
.wifi-dot.is-disconnected {
background: #d86f6f;
}
.header-btn {
height: 36px;
}
.table-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 12px;
min-height: 0;
overflow: hidden;
align-items: stretch;
}
.table-desk {
display: block;
grid-column: 1;
grid-row: 1;
width: 100%;
height: 100%;
border-radius: 28px;
object-fit: cover;
object-position: center;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 20px 42px rgba(0, 0, 0, 0.32);
}
.table-felt {
grid-column: 1;
grid-row: 1;
position: relative;
min-height: 0;
height: 100%;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.06);
background:
radial-gradient(circle at center, rgba(30, 126, 70, 0.12), transparent 42%),
linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.12));
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.table-felt::before {
content: '';
position: absolute;
inset: 22px;
border-radius: 24px;
background: radial-gradient(circle at center, rgba(35, 121, 68, 0.14), transparent 55%);
pointer-events: none;
}
.felt-frame {
position: absolute;
inset: 20px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.felt-frame.inner {
inset: 38px;
border-color: rgba(255, 255, 255, 0.06);
border-style: solid;
}
.table-watermark {
position: absolute;
left: 50%;
top: 24px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: rgba(244, 240, 220, 0.82);
text-align: center;
pointer-events: none;
}
.table-watermark span {
font-size: 12px;
color: #f7e4b0;
}
.table-watermark strong {
font-size: 26px;
letter-spacing: 2px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.table-watermark small {
font-size: 12px;
color: #bdd8ca;
}
.player-badge {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
min-width: 148px;
padding: 8px 12px;
border-radius: 14px;
border: 1px solid rgba(244, 222, 163, 0.24);
background: rgba(8, 27, 20, 0.72);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.player-badge.seat-top {
top: 76px;
left: 50%;
transform: translateX(-50%);
}
.player-badge.seat-right {
right: 24px;
top: 50%;
transform: translateY(-50%);
}
.player-badge.seat-bottom {
bottom: 90px;
left: 50%;
transform: translateX(-50%);
}
.player-badge.seat-left {
left: 24px;
top: 50%;
transform: translateY(-50%);
}
.player-badge.is-turn {
border-color: rgba(244, 222, 163, 0.72);
}
.player-badge.offline {
opacity: 0.55;
}
.avatar-card {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(145deg, #ecd995, #d3b767);
color: #1c2d23;
font-weight: 800;
}
.player-meta p {
font-size: 14px;
font-weight: 700;
}
.player-meta strong {
font-size: 13px;
color: #f7e4b0;
}
.dealer-mark,
.missing-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
border-radius: 999px;
font-size: 12px;
}
.dealer-mark {
background: rgba(236, 188, 84, 0.88);
color: #1c2d23;
}
.missing-mark {
margin-left: auto;
background: rgba(255, 255, 255, 0.08);
color: #d6eadf;
}
.wall {
position: absolute;
display: flex;
gap: 2px;
filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22));
}
.wall img {
display: block;
object-fit: contain;
}
.wall-top,
.wall-bottom {
left: 50%;
transform: translateX(-50%);
}
.wall-left,
.wall-right {
top: 50%;
transform: translateY(-50%);
flex-direction: column;
}
.wall-top {
top: 154px;
}
.wall-top img,
.wall-bottom img {
width: 24px;
height: 36px;
}
.wall-right {
right: 132px;
}
.wall-left {
left: 132px;
}
.wall-left img,
.wall-right img {
width: 36px;
height: 24px;
}
.wall-bottom {
bottom: 176px;
}
.center-deck {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-columns: repeat(2, 42px);
gap: 6px;
align-items: center;
justify-items: center;
padding: 12px 16px;
border-radius: 18px;
background: rgba(8, 27, 20, 0.82);
border: 1px solid rgba(244, 222, 163, 0.28);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.center-deck strong {
grid-column: 1 / -1;
font-size: 16px;
color: #f7e4b0;
}
.wind {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
font-weight: 700;
}
.table-tip {
margin-top: 4px;
color: #c1dfcf;
@@ -614,11 +1028,17 @@ button:disabled {
}
.ws-panel {
margin-top: 10px;
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
min-height: 0;
margin-top: 0;
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(176, 216, 194, 0.22);
background: rgba(5, 24, 17, 0.58);
overflow: hidden;
}
.ws-panel-head {
@@ -662,7 +1082,8 @@ button:disabled {
.ws-log {
margin-top: 8px;
max-height: 140px;
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 8px;
border-radius: 8px;
@@ -802,6 +1223,35 @@ button:disabled {
align-items: flex-start;
}
.game-header {
grid-template-columns: 1fr;
justify-items: stretch;
}
.topbar-left {
flex-wrap: wrap;
}
.topbar-center,
.topbar-right {
justify-content: flex-start;
}
.table-shell {
grid-template-columns: 1fr;
}
.table-desk,
.table-felt,
.ws-panel {
grid-column: auto;
grid-row: auto;
}
.ws-panel {
min-height: 180px;
}
.header-actions {
width: 100%;
display: grid;
@@ -824,6 +1274,9 @@ button:disabled {
padding-right: max(8px, env(safe-area-inset-right));
padding-bottom: max(8px, env(safe-area-inset-bottom));
padding-left: max(8px, env(safe-area-inset-left));
height: auto;
min-height: 100vh;
overflow: visible;
}
.game-mahjong-table {

12
src/components/game/BottomPlayerCard.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import SeatPlayerCard from './SeatPlayerCard.vue'
import type { SeatPlayerCardModel } from './seat-player-card'
defineProps<{
player: SeatPlayerCardModel
}>()
</script>
<template>
<SeatPlayerCard seat-class="seat-bottom" :player="player" />
</template>

12
src/components/game/LeftPlayerCard.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import SeatPlayerCard from './SeatPlayerCard.vue'
import type { SeatPlayerCardModel } from './seat-player-card'
defineProps<{
player: SeatPlayerCardModel
}>()
</script>
<template>
<SeatPlayerCard seat-class="seat-left" :player="player" />
</template>

12
src/components/game/RightPlayerCard.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import SeatPlayerCard from './SeatPlayerCard.vue'
import type { SeatPlayerCardModel } from './seat-player-card'
defineProps<{
player: SeatPlayerCardModel
}>()
</script>
<template>
<SeatPlayerCard seat-class="seat-right" :player="player" />
</template>

23
src/components/game/SeatPlayerCard.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import type { SeatPlayerCardModel } from './seat-player-card'
defineProps<{
seatClass: string
player: SeatPlayerCardModel
}>()
</script>
<template>
<article
class="player-badge"
:class="[seatClass, { 'is-turn': player.isTurn, offline: !player.isOnline }]"
>
<div class="avatar-card">{{ player.avatar }}</div>
<div class="player-meta">
<p>{{ player.name }}</p>
<strong>{{ player.money }}</strong>
</div>
<span v-if="player.dealer" class="dealer-mark">庄</span>
<span class="missing-mark">{{ player.missingSuitLabel }}</span>
</article>
</template>

12
src/components/game/TopPlayerCard.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import SeatPlayerCard from './SeatPlayerCard.vue'
import type { SeatPlayerCardModel } from './seat-player-card'
defineProps<{
player: SeatPlayerCardModel
}>()
</script>
<template>
<SeatPlayerCard seat-class="seat-top" :player="player" />
</template>

9
src/components/game/seat-player-card.ts Normal file
View File

@@ -0,0 +1,9 @@
export interface SeatPlayerCardModel {
avatar: string
name: string
money: string
dealer: boolean
isTurn: boolean
isOnline: boolean
missingSuitLabel: string
}

830
src/features/chengdu-game/useChengduGameRoom.ts Normal file
View File

@@ -0,0 +1,830 @@
import { computed, onBeforeUnmount, onMounted, ref, watch, type ComputedRef, type Ref } from 'vue'
import type { RouteLocationNormalizedLoaded, Router } from 'vue-router'
import type { AuthSession } from '../../api/authed-request'
import { refreshAccessToken } from '../../api/auth'
import { getUserInfo } from '../../api/user'
import {
DEFAULT_MAX_PLAYERS,
activeRoomState,
destroyActiveRoomState,
mergeActiveRoomState,
resetActiveRoomState,
type GameState,
type RoomPlayerState,
type RoomState,
} from '../../state/active-room'
import { readStoredAuth, writeStoredAuth } from '../../utils/auth-storage'
import type { StoredAuth } from '../../types/session'
export type SeatKey = 'top' | 'right' | 'bottom' | 'left'
interface ActionEventLike {
type?: unknown
status?: unknown
requestId?: unknown
request_id?: unknown
roomId?: unknown
room_id?: unknown
payload?: unknown
data?: unknown
}
export interface SeatView {
key: SeatKey
player: RoomPlayerState | null
isSelf: boolean
isTurn: boolean
label: string
subLabel: string
}
export interface ChengduGameRoomModel {
auth: Ref<StoredAuth | null>
roomState: typeof activeRoomState
roomId: ComputedRef<string>
roomName: ComputedRef<string>
currentUserId: ComputedRef<string>
loggedInUserName: ComputedRef<string>
wsStatus: Ref<'disconnected' | 'connecting' | 'connected'>
wsError: Ref<string>
wsMessages: Ref<string[]>
startGamePending: Ref<boolean>
leaveRoomPending: Ref<boolean>
canStartGame: ComputedRef<boolean>
seatViews: ComputedRef<SeatView[]>
connectWs: () => Promise<void>
sendStartGame: () => void
backHall: () => void
}
const WS_BASE_URL = import.meta.env.VITE_GAME_WS_URL ?? '/api/v1/ws'
export function useChengduGameRoom(
route: RouteLocationNormalizedLoaded,
router: Router,
): ChengduGameRoomModel {
const auth = ref(readStoredAuth())
const ws = ref<WebSocket | null>(null)
const wsStatus = ref<'disconnected' | 'connecting' | 'connected'>('disconnected')
const wsError = ref('')
const wsMessages = ref<string[]>([])
const startGamePending = ref(false)
const lastStartRequestId = ref('')
const leaveRoomPending = ref(false)
const lastLeaveRoomRequestId = ref('')
const leaveHallAfterAck = ref(false)
const roomId = computed(() => {
return typeof route.params.roomId === 'string' ? route.params.roomId : ''
})
const roomName = computed(() => {
return typeof route.query.roomName === 'string' ? route.query.roomName : ''
})
const currentUserId = computed(() => {
const user = auth.value?.user as Record<string, unknown> | undefined
const candidate = user?.id ?? user?.userID ?? user?.user_id
if (typeof candidate === 'string') {
return candidate
}
if (typeof candidate === 'number' && Number.isFinite(candidate)) {
return String(candidate)
}
return ''
})
const loggedInUserName = computed(() => {
if (!auth.value?.user) {
return ''
}
return auth.value.user.nickname ?? auth.value.user.username ?? ''
})
const roomState = activeRoomState
const isRoomFull = computed(() => {
return (
roomState.value.maxPlayers > 0 &&
roomState.value.playerCount === roomState.value.maxPlayers
)
})
const canStartGame = computed(() => {
return (
Boolean(roomState.value.id) &&
roomState.value.status === 'waiting' &&
isRoomFull.value &&
Boolean(currentUserId.value) &&
roomState.value.ownerId === currentUserId.value
)
})
const seatViews = computed<SeatView[]>(() => {
const seats: Record<SeatKey, RoomPlayerState | null> = {
top: null,
right: null,
bottom: null,
left: null,
}
const players = [...roomState.value.players].sort((a, b) => a.index - b.index)
const hasSelf = players.some((player) => player.playerId === currentUserId.value)
if (currentUserId.value && roomState.value.id && !hasSelf) {
players.unshift({
index: 0,
playerId: currentUserId.value,
ready: false,
})
}
const me = players.find((player) => player.playerId === currentUserId.value) ?? null
const anchorIndex = me?.index ?? players[0]?.index ?? 0
const clockwiseSeatByDelta: SeatKey[] = ['bottom', 'left', 'top', 'right']
for (const player of players) {
const normalizedDelta = ((player.index - anchorIndex) % 4 + 4) % 4
const seat = clockwiseSeatByDelta[normalizedDelta] ?? 'top'
seats[seat] = player
}
const turnSeat =
roomState.value.currentTurnIndex === null
? null
: clockwiseSeatByDelta[
((roomState.value.currentTurnIndex - anchorIndex) % 4 + 4) % 4
] ?? null
const order: SeatKey[] = ['top', 'right', 'bottom', 'left']
return order.map((seat) => {
const player = seats[seat]
const isSelf = Boolean(player) && player?.playerId === currentUserId.value
return {
key: seat,
player,
isSelf,
isTurn: turnSeat === seat,
label: player ? (isSelf ? '你' : player.playerId) : '空位',
subLabel: player ? `座位 ${player.index}` : '',
}
})
})
function backHall(): void {
if (leaveRoomPending.value) {
return
}
leaveHallAfterAck.value = true
const sent = sendLeaveRoom()
if (!sent) {
leaveHallAfterAck.value = false
pushWsMessage('[client] Leave room request was not sent')
}
}
function pushWsMessage(text: string): void {
const line = `[${new Date().toLocaleTimeString()}] ${text}`
wsMessages.value.unshift(line)
if (wsMessages.value.length > 80) {
wsMessages.value.length = 80
}
}
function logWsSend(message: unknown): void {
console.log('[WS][client] 发送:', message)
}
function logWsReceive(kind: string, payload?: unknown): void {
const now = new Date().toLocaleTimeString()
if (payload === undefined) {
console.log(`[WS][${now}] 收到${kind}`)
return
}
console.log(`[WS][${now}] 收到${kind}:`, payload)
}
function disconnectWs(): void {
if (ws.value) {
ws.value.close()
ws.value = null
}
wsStatus.value = 'disconnected'
}
function toRecord(value: unknown): Record<string, unknown> | null {
return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : null
}
function toStringOrEmpty(value: unknown): string {
if (typeof value === 'string') {
return value
}
if (typeof value === 'number' && Number.isFinite(value)) {
return String(value)
}
return ''
}
function toSession(source: NonNullable<typeof auth.value>): AuthSession {
return {
token: source.token,
tokenType: source.tokenType,
refreshToken: source.refreshToken,
expiresIn: source.expiresIn,
}
}
function syncAuth(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 ensureCurrentUserId(): Promise<void> {
if (currentUserId.value || !auth.value) {
return
}
try {
const userInfo = await getUserInfo(toSession(auth.value), syncAuth)
const payload = userInfo as Record<string, unknown>
const resolvedId = toStringOrEmpty(payload.userID ?? payload.user_id ?? payload.id)
if (!resolvedId) {
return
}
auth.value = {
...auth.value,
user: {
...(auth.value.user ?? {}),
id: resolvedId,
},
}
writeStoredAuth(auth.value)
} catch {
wsError.value = '获取当前用户 ID 失败，部分操作可能不可用'
}
}
async function ensureWsAuth(): Promise<string | null> {
const currentAuth = auth.value
if (!currentAuth?.token) {
return null
}
if (!currentAuth.refreshToken) {
return currentAuth.token
}
try {
const refreshed = await refreshAccessToken({
token: currentAuth.token,
tokenType: currentAuth.tokenType,
refreshToken: currentAuth.refreshToken,
})
const nextAuth = {
...currentAuth,
token: refreshed.token,
tokenType: refreshed.tokenType ?? currentAuth.tokenType,
refreshToken: refreshed.refreshToken ?? currentAuth.refreshToken,
expiresIn: refreshed.expiresIn,
user: refreshed.user ?? currentAuth.user,
}
auth.value = nextAuth
writeStoredAuth(nextAuth)
return nextAuth.token
} catch {
return currentAuth.token
}
}
function toFiniteNumber(value: unknown): number | null {
if (typeof value === 'number' && Number.isFinite(value)) {
return value
}
if (typeof value === 'string' && value.trim()) {
const parsed = Number(value)
return Number.isFinite(parsed) ? parsed : null
}
return null
}
function toBoolean(value: unknown): boolean {
if (typeof value === 'boolean') {
return value
}
if (typeof value === 'number') {
return value !== 0
}
if (typeof value === 'string') {
const normalized = value.trim().toLowerCase()
return normalized === '1' || normalized === 'true' || normalized === 'yes'
}
return false
}
function normalizeScores(value: unknown): Record<string, number> {
const record = toRecord(value)
if (!record) {
return {}
}
const scores: Record<string, number> = {}
for (const [key, score] of Object.entries(record)) {
const parsed = toFiniteNumber(score)
if (parsed !== null) {
scores[key] = parsed
}
}
return scores
}
function normalizePlayer(input: unknown, fallbackIndex: number): RoomPlayerState | null {
const player = toRecord(input)
if (!player) {
return null
}
const playerId = toStringOrEmpty(player.playerId ?? player.player_id ?? player.user_id ?? player.id)
if (!playerId) {
return null
}
const seatIndex = toFiniteNumber(player.index ?? player.seat ?? player.position ?? player.player_index)
return {
index: seatIndex ?? fallbackIndex,
playerId,
ready: Boolean(player.ready),
}
}
function extractCurrentTurnIndex(value: Record<string, unknown>): number | null {
const game = toRecord(value.game)
const gameState = toRecord(game?.state)
const keys = [
gameState?.currentTurn,
gameState?.current_turn,
gameState?.currentTurnIndex,
gameState?.current_turn_index,
value.currentTurnIndex,
value.current_turn_index,
value.currentPlayerIndex,
value.current_player_index,
value.turnIndex,
value.turn_index,
value.activePlayerIndex,
value.active_player_index,
]
for (const key of keys) {
const parsed = toFiniteNumber(key)
if (parsed !== null) {
return parsed
}
}
return null
}
function normalizeGame(input: unknown): GameState | null {
const game = toRecord(input)
if (!game) {
return null
}
const rule = toRecord(game.rule)
const rawState = toRecord(game.state)
const playersRaw =
(Array.isArray(rawState?.players) ? rawState?.players : null) ??
(Array.isArray(rawState?.playerStates) ? rawState?.playerStates : null) ??
[]
const normalizedPlayers = playersRaw
.map((item, index) => normalizePlayer(item, index))
.filter((item): item is RoomPlayerState => Boolean(item))
return {
rule: rule
? {
name: toStringOrEmpty(rule.name),
isBloodFlow: toBoolean(rule.isBloodFlow ?? rule.is_blood_flow),
hasHongZhong: toBoolean(rule.hasHongZhong ?? rule.has_hong_zhong),
}
: null,
state: rawState
? {
phase: toStringOrEmpty(rawState.phase),
dealerIndex: toFiniteNumber(rawState.dealerIndex ?? rawState.dealer_index) ?? 0,
currentTurn: toFiniteNumber(rawState.currentTurn ?? rawState.current_turn) ?? 0,
needDraw: toBoolean(rawState.needDraw ?? rawState.need_draw),
players: normalizedPlayers,
wall: Array.isArray(rawState.wall)
? rawState.wall.map((item) => toStringOrEmpty(item)).filter(Boolean)
: [],
lastDiscardTile: toStringOrEmpty(rawState.lastDiscardTile ?? rawState.last_discard_tile) || null,
lastDiscardBy: toStringOrEmpty(rawState.lastDiscardBy ?? rawState.last_discard_by),
pendingClaim: toRecord(rawState.pendingClaim ?? rawState.pending_claim),
winners: Array.isArray(rawState.winners)
? rawState.winners.map((item) => toStringOrEmpty(item)).filter(Boolean)
: [],
scores: normalizeScores(rawState.scores),
lastDrawPlayerId: toStringOrEmpty(rawState.lastDrawPlayerID ?? rawState.last_draw_player_id),
lastDrawFromGang: toBoolean(rawState.lastDrawFromGang ?? rawState.last_draw_from_gang),
lastDrawIsLastTile: toBoolean(rawState.lastDrawIsLastTile ?? rawState.last_draw_is_last_tile),
huWay: toStringOrEmpty(rawState.huWay ?? rawState.hu_way),
}
: null,
}
}
function normalizeRoom(input: unknown): RoomState | null {
const source = toRecord(input)
if (!source) {
return null
}
let room = source
let id = toStringOrEmpty(room.roomId ?? room.room_id ?? room.id)
if (!id) {
const nestedRoom = toRecord(room.data)
if (nestedRoom) {
room = nestedRoom
id = toStringOrEmpty(room.roomId ?? room.room_id ?? room.id)
}
}
if (!id) {
return null
}
const maxPlayers =
toFiniteNumber(room.maxPlayers ?? room.max_players) ?? roomState.value.maxPlayers ?? DEFAULT_MAX_PLAYERS
const playersRaw =
(Array.isArray(room.players) ? room.players : null) ??
(Array.isArray(room.playerList) ? room.playerList : null) ??
(Array.isArray(room.player_list) ? room.player_list : null) ??
[]
const playerIdsRaw =
(Array.isArray(room.player_ids) ? room.player_ids : null) ??
(Array.isArray(room.playerIds) ? room.playerIds : null) ??
[]
const players = playersRaw
.map((item, index) => normalizePlayer(item, index))
.filter((item): item is RoomPlayerState => Boolean(item))
.sort((a, b) => a.index - b.index)
const playersFromIds = playerIdsRaw
.map((item, index) => ({
index,
playerId: toStringOrEmpty(item),
ready: false,
}))
.filter((item) => Boolean(item.playerId))
const resolvedPlayers = players.length > 0 ? players : playersFromIds
const parsedPlayerCount = toFiniteNumber(room.player_count ?? room.playerCount)
const game = normalizeGame(room.game)
return {
id,
name: toStringOrEmpty(room.name) || roomState.value.name,
gameType: toStringOrEmpty(room.gameType ?? room.game_type) || roomState.value.gameType || 'chengdu',
ownerId: toStringOrEmpty(room.ownerId ?? room.owner_id),
maxPlayers,
playerCount: parsedPlayerCount ?? resolvedPlayers.length,
status: toStringOrEmpty(room.status) || roomState.value.status || 'waiting',
createdAt: toStringOrEmpty(room.createdAt ?? room.created_at) || roomState.value.createdAt,
updatedAt: toStringOrEmpty(room.updatedAt ?? room.updated_at) || roomState.value.updatedAt,
game: game ?? roomState.value.game,
players: resolvedPlayers,
currentTurnIndex: extractCurrentTurnIndex(room),
}
}
function mergeRoomState(next: RoomState): void {
if (roomId.value && next.id !== roomId.value) {
return
}
mergeActiveRoomState(next)
}
function consumeGameEvent(raw: string): void {
let parsed: unknown = null
try {
parsed = JSON.parse(raw)
} catch {
return
}
const event = toRecord(parsed) as ActionEventLike | null
if (!event) {
return
}
const payload = toRecord(event.payload)
const data = toRecord(event.data)
const eventType = toStringOrEmpty(event.type)
const eventStatus = toStringOrEmpty(event.status)
const eventRoomId = toStringOrEmpty(event.roomId ?? event.room_id ?? payload?.roomId ?? payload?.room_id)
const eventRequestId = toStringOrEmpty(
event.requestId ??
event.request_id ??
payload?.requestId ??
payload?.request_id ??
data?.requestId ??
data?.request_id,
)
const payloadPlayerIds = Array.isArray(payload?.player_ids)
? payload.player_ids.map((item) => toStringOrEmpty(item)).filter(Boolean)
: Array.isArray(payload?.playerIds)
? payload.playerIds.map((item) => toStringOrEmpty(item)).filter(Boolean)
: null
const leaveByRequestIdMatched = Boolean(
eventRequestId && eventRequestId === lastLeaveRoomRequestId.value,
)
const leaveByPlayerUpdateMatched =
leaveRoomPending.value &&
eventType === 'room_player_update' &&
eventStatus === 'ok' &&
eventRoomId === (roomState.value.id || roomId.value) &&
Array.isArray(payloadPlayerIds) &&
Boolean(currentUserId.value) &&
!payloadPlayerIds.includes(currentUserId.value)
if (leaveByRequestIdMatched || leaveByPlayerUpdateMatched) {
leaveRoomPending.value = false
lastLeaveRoomRequestId.value = ''
if (event.status === 'error') {
leaveHallAfterAck.value = false
wsError.value = '退出房间失败，请稍后重试'
pushWsMessage(`[client] 退出房间失败 requestId=${eventRequestId}`)
} else {
if (leaveByPlayerUpdateMatched) {
pushWsMessage('[client] 已确认退出房间 player_update')
} else {
pushWsMessage(`[client] 已确认退出房间 requestId=${eventRequestId}`)
}
if (leaveHallAfterAck.value) {
leaveHallAfterAck.value = false
void router.push('/hall')
}
}
}
const candidates: unknown[] = [event.payload, event.data]
if (payload) {
candidates.push(payload.room, payload.state, payload.roomState, payload.data)
}
if (data) {
candidates.push(data.room, data.state, data.roomState, data.data)
}
candidates.push(event)
for (const candidate of candidates) {
const normalized = normalizeRoom(candidate)
if (normalized) {
mergeRoomState(normalized)
break
}
}
if (
event.status === 'error' &&
typeof event.requestId === 'string' &&
event.requestId === lastStartRequestId.value
) {
startGamePending.value = false
}
}
function createRequestId(prefix: string): string {
return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
}
function sendStartGame(): void {
if (
!ws.value ||
ws.value.readyState !== WebSocket.OPEN ||
!canStartGame.value ||
startGamePending.value
) {
return
}
const sender = currentUserId.value
if (!sender) {
return
}
const requestId = createRequestId('start-game')
lastStartRequestId.value = requestId
startGamePending.value = true
const message = {
type: 'start_game',
sender,
target: 'room',
roomId: roomState.value.id || roomId.value,
seq: Date.now(),
requestId,
trace_id: createRequestId('trace'),
payload: {},
}
logWsSend(message)
ws.value.send(JSON.stringify(message))
pushWsMessage(`[client] 请求开始游戏 requestId=${requestId}`)
}
function sendLeaveRoom(): boolean {
if (!ws.value || ws.value.readyState !== WebSocket.OPEN) {
wsError.value = 'WebSocket 未连接，无法退出房间'
return false
}
const sender = currentUserId.value
const targetRoomId = roomState.value.id || roomId.value
if (!sender) {
wsError.value = '缺少当前用户 ID，无法退出房间'
return false
}
if (!targetRoomId) {
wsError.value = '缺少房间 ID，无法退出房间'
return false
}
const requestId = createRequestId('leave-room')
leaveRoomPending.value = true
lastLeaveRoomRequestId.value = requestId
const message = {
type: 'leave_room',
sender,
target: 'room',
roomId: targetRoomId,
seq: Date.now(),
requestId,
trace_id: createRequestId('trace'),
payload: {},
}
logWsSend(message)
ws.value.send(JSON.stringify(message))
pushWsMessage(`[client] 请求退出房间 requestId=${requestId}`)
return true
}
async function connectWs(): Promise<void> {
wsError.value = ''
const token = await ensureWsAuth()
if (!token) {
wsError.value = '缺少 token，无法建立 WebSocket 连接'
return
}
disconnectWs()
wsStatus.value = 'connecting'
const url = buildWsUrl(token)
const socket = new WebSocket(url)
ws.value = socket
socket.onopen = () => {
wsStatus.value = 'connected'
pushWsMessage('WebSocket 已连接')
}
socket.onmessage = (event) => {
if (typeof event.data === 'string') {
logWsReceive('文本消息', event.data)
try {
const parsed = JSON.parse(event.data)
logWsReceive('JSON 消息', parsed)
pushWsMessage(`[server] ${JSON.stringify(parsed, null, 2)}`)
} catch {
pushWsMessage(`[server] ${event.data}`)
}
consumeGameEvent(event.data)
return
}
logWsReceive('binary message')
pushWsMessage('[binary] message received')
}
socket.onerror = () => {
wsError.value = 'WebSocket 连接异常'
}
socket.onclose = () => {
wsStatus.value = 'disconnected'
startGamePending.value = false
if (leaveRoomPending.value) {
leaveRoomPending.value = false
lastLeaveRoomRequestId.value = ''
leaveHallAfterAck.value = false
wsError.value = '连接已断开，未收到退出房间确认'
pushWsMessage('[client] 连接断开，退出房间请求未确认')
}
pushWsMessage('WebSocket 已断开')
}
}
function buildWsUrl(token: string): string {
const baseUrl = /^wss?:\/\//.test(WS_BASE_URL)
? new URL(WS_BASE_URL)
: new URL(
WS_BASE_URL.startsWith('/') ? WS_BASE_URL : `/${WS_BASE_URL}`,
`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`,
)
baseUrl.searchParams.set('token', token)
return baseUrl.toString()
}
watch(
roomId,
(nextRoomId) => {
const currentRoom = roomState.value
if (!nextRoomId) {
destroyActiveRoomState()
} else if (currentRoom.id !== nextRoomId) {
resetActiveRoomState({
id: nextRoomId,
name: roomName.value,
})
} else if (!currentRoom.name && roomName.value) {
roomState.value = { ...currentRoom, name: roomName.value }
}
startGamePending.value = false
lastStartRequestId.value = ''
leaveRoomPending.value = false
lastLeaveRoomRequestId.value = ''
leaveHallAfterAck.value = false
},
{ immediate: true },
)
watch(roomName, (next) => {
roomState.value = { ...roomState.value, name: next || roomState.value.name }
})
watch(
[canStartGame, wsStatus],
([canStart, status]) => {
if (!canStart || status !== 'connected') {
return
}
sendStartGame()
},
{ immediate: true },
)
watch(
() => roomState.value.status,
(status) => {
if (status === 'playing' || status === 'finished') {
startGamePending.value = false
}
},
)
onMounted(async () => {
await ensureCurrentUserId()
void connectWs()
})
onBeforeUnmount(() => {
disconnectWs()
destroyActiveRoomState()
})
return {
auth,
roomState,
roomId,
roomName,
currentUserId,
loggedInUserName,
wsStatus,
wsError,
wsMessages,
startGamePending,
leaveRoomPending,
canStartGame,
seatViews,
connectWs,
sendStartGame,
backHall,
}
}

2402
src/views/ChengduGamePage.vue
View File

File diff suppressed because it is too large Load Diff

36
vite.config.ts
View File

@@ -1,20 +1,26 @@
import { defineConfig } from 'vite'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
host: '127.0.0.1',
port: 3000,
proxy: {
'/api/v1': {
target: 'http://127.0.0.1:19000',
changeOrigin: true,
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
const apiProxyTarget = (env.VITE_API_PROXY_TARGET || 'http://127.0.0.1:19000').replace(/\/$/, '')
const wsProxyTarget = (env.VITE_WS_PROXY_TARGET || apiProxyTarget).replace(/\/$/, '')
return {
plugins: [vue()],
server: {
proxy: {
'/api/v1/ws': {
target: wsProxyTarget,
changeOrigin: true,
ws: true,
rewriteWsOrigin: true,
},
'/api/v1': {
target: apiProxyTarget,
changeOrigin: true,
},
},
'/api/v1/ws': {
target: 'ws://127.0.0.1:19000',
ws: true,
}
}
},
}
})