wsy182
e96c45739e
- 实现 ChengduGamePage.vue 组件，包含完整的麻将游戏界面 - 实现 HallPage.vue 组件，支持房间列表展示、创建和加入功能 - 添加 mahjong API 接口用于房间管理操作 - 集成 store 状态管理和本地存储功能 - 实现 ChengduBottomActions 等游戏控制组件 - 添加 websocket 连接和游戏会话管理逻辑 - 实现游戏倒计时、结算等功能模块
56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { SeatKey } from '../../game/seat'
|
|
import type { DeskSeatState } from '../../views/chengdu/types'
|
|
|
|
defineProps<{
|
|
deskSeats: Record<SeatKey, DeskSeatState>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="deskSeats.top.tiles.length > 0 || deskSeats.top.hasHu" class="desk-zone desk-zone-top">
|
|
<img
|
|
v-for="tile in deskSeats.top.tiles"
|
|
:key="tile.key"
|
|
class="desk-tile"
|
|
:class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
|
|
:src="tile.src"
|
|
:alt="tile.alt"
|
|
/>
|
|
<span v-if="deskSeats.top.hasHu" class="desk-hu-flag">胡</span>
|
|
</div>
|
|
<div v-if="deskSeats.right.tiles.length > 0 || deskSeats.right.hasHu" class="desk-zone desk-zone-right">
|
|
<img
|
|
v-for="tile in deskSeats.right.tiles"
|
|
:key="tile.key"
|
|
class="desk-tile"
|
|
:class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
|
|
:src="tile.src"
|
|
:alt="tile.alt"
|
|
/>
|
|
<span v-if="deskSeats.right.hasHu" class="desk-hu-flag">胡</span>
|
|
</div>
|
|
<div v-if="deskSeats.bottom.tiles.length > 0 || deskSeats.bottom.hasHu" class="desk-zone desk-zone-bottom">
|
|
<img
|
|
v-for="tile in deskSeats.bottom.tiles"
|
|
:key="tile.key"
|
|
class="desk-tile"
|
|
:class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
|
|
:src="tile.src"
|
|
:alt="tile.alt"
|
|
/>
|
|
<span v-if="deskSeats.bottom.hasHu" class="desk-hu-flag">胡</span>
|
|
</div>
|
|
<div v-if="deskSeats.left.tiles.length > 0 || deskSeats.left.hasHu" class="desk-zone desk-zone-left">
|
|
<img
|
|
v-for="tile in deskSeats.left.tiles"
|
|
:key="tile.key"
|
|
class="desk-tile"
|
|
:class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
|
|
:src="tile.src"
|
|
:alt="tile.alt"
|
|
/>
|
|
<span v-if="deskSeats.left.hasHu" class="desk-hu-flag">胡</span>
|
|
</div>
|
|
</template>
|