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
```
This commit is contained in:
2026-03-24 14:02:21 +08:00
parent d4e217b11b
commit f97f1ffdbc
8 changed files with 189 additions and 35 deletions

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>