feat: won trick ui

lib/feature/game/presentation/widgets/table_hud.dart

@@ -24,60 +24,67 @@ class TableHud extends StatelessWidget {
   // مکانِ آواتارِ هر جایگاهِ نسبی (۰=پایین/شما، ۱=چپ، ۲=بالا، ۳=راست).
   static const _spots = {
     0: Alignment(0, 1.0),
-    1: Alignment(-0.94, -0.08),
+    1: Alignment(-1.0, -0.05), // چسبیده به لبه‌ی چپ
     2: Alignment(0, -0.92),
-    3: Alignment(0.94, -0.08),
+    3: Alignment(1.0, -0.05), // چسبیده به لبه‌ی راست
   };
 
   int _rel(int seat) => (seat - s.yourSeat + 4) % 4;
 
   @override
   Widget build(BuildContext context) {
-    return LayoutBuilder(builder: (context, c) {
-      final w = c.maxWidth;
-      final avatarD = (w * 0.17).clamp(48.0, 84.0);
-      return Stack(
-        children: [
-          for (final p in s.players)
-            Align(
-              alignment: _spots[_rel(p.seat)]!,
-              child: Padding(
-                padding: EdgeInsets.only(
-                  bottom: _rel(p.seat) == 0 ? 2 : 0,
-                  top: _rel(p.seat) == 2 ? 6 : 0,
-                ),
-                child: _PlayerSeat(
-                  player: p,
-                  diameter: avatarD,
-                  isTurn: s.turn == p.seat,
-                  isHakem: s.hakem == p.seat,
-                  nameAbove: _rel(p.seat) == 2,
-                  cardCount:
-                      p.seat < s.handCounts.length ? s.handCounts[p.seat] : 0,
-                  turnToken: '${s.turn}|${s.trick.length}|${s.phase}',
-                  turnSeconds: s.turnTimeoutMs > 0 ? s.turnTimeoutMs / 1000 : 30,
-                  showRing: s.phase == 'playing' || s.phase == 'choose_trump',
+    return LayoutBuilder(
+      builder: (context, c) {
+        final w = c.maxWidth;
+        final avatarD = (w * 0.17).clamp(48.0, 84.0);
+        return Stack(
+          children: [
+            for (final p in s.players)
+              Align(
+                alignment: _spots[_rel(p.seat)]!,
+                child: Padding(
+                  padding: EdgeInsets.only(
+                    bottom: _rel(p.seat) == 0 ? 2 : 0,
+                    top: _rel(p.seat) == 2 ? 6 : 0,
+                  ),
+                  child: _PlayerSeat(
+                    player: p,
+                    diameter: avatarD,
+                    isTurn: s.turn == p.seat,
+                    isHakem: s.hakem == p.seat,
+                    nameAbove: _rel(p.seat) == 2,
+                    cardCount:
+                        p.seat < s.handCounts.length ? s.handCounts[p.seat] : 0,
+                    teamTricks:
+                        (p.seat % 2) < s.tricksWon.length
+                            ? s.tricksWon[p.seat % 2]
+                            : 0,
+                    turnToken: '${s.turn}|${s.trick.length}|${s.phase}',
+                    turnSeconds:
+                        s.turnTimeoutMs > 0 ? s.turnTimeoutMs / 1000 : 30,
+                    showRing: s.phase == 'playing' || s.phase == 'choose_trump',
+                  ),
                 ),
               ),
+            Positioned(top: 8, left: 8, child: SafeArea(child: _scorePanel())),
+            Positioned(
+              top: 8,
+              right: 8,
+              child: SafeArea(child: _topRight(context)),
             ),
-          Positioned(top: 8, left: 8, child: SafeArea(child: _scorePanel())),
-          Positioned(
-            top: 8,
-            right: 8,
-            child: SafeArea(child: _topRight(context)),
-          ),
-          Positioned(
-            bottom: 16,
-            right: 12,
-            child: _RoundBtn(
-              icon: Icons.chat_bubble,
-              color: const Color(0xFF1E5FA8),
-              onTap: onChat,
+            Positioned(
+              bottom: 16,
+              right: 12,
+              child: _RoundBtn(
+                icon: Icons.chat_bubble,
+                color: const Color(0xFF1E5FA8),
+                onTap: onChat,
+              ),
             ),
-          ),
-        ],
-      );
-    });
+          ],
+        );
+      },
+    );
   }
 
   // پنلِ امتیاز (ما/حریف) + چیپِ حکم. امتیازِ تیمِ شما = scores[yourSeat%2].
@@ -111,16 +118,21 @@ class TableHud extends StatelessWidget {
   }
 
   Widget _scoreCol(String label, int v) => Column(
-        children: [
-          Text(label,
-              style: const TextStyle(color: Color(0xFFE9B949), fontSize: 12)),
-          Text('$v',
-              style: const TextStyle(
-                  color: Colors.white,
-                  fontSize: 18,
-                  fontWeight: FontWeight.bold)),
-        ],
-      );
+    children: [
+      Text(
+        label,
+        style: const TextStyle(color: Color(0xFFE9B949), fontSize: 12),
+      ),
+      Text(
+        '$v',
+        style: const TextStyle(
+          color: Colors.white,
+          fontSize: 18,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+    ],
+  );
 
   Widget _hokmChip() {
     final (glyph, color) = _trumpGlyph(s.trump);
@@ -130,11 +142,14 @@ class TableHud extends StatelessWidget {
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          const Text('حکم',
-              style: TextStyle(
-                  color: Color(0xFFE9B949),
-                  fontSize: 13,
-                  fontWeight: FontWeight.bold)),
+          const Text(
+            'حکم',
+            style: TextStyle(
+              color: Color(0xFFE9B949),
+              fontSize: 13,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
           const SizedBox(width: 6),
           Text(glyph, style: TextStyle(color: color, fontSize: 18)),
         ],
@@ -151,15 +166,20 @@ class TableHud extends StatelessWidget {
           decoration: _panelDeco(),
           child: Row(
             children: [
-              Icon(ok ? Icons.wifi : Icons.wifi_off,
-                  color: ok ? const Color(0xFF4CD964) : Colors.redAccent,
-                  size: 16),
+              Icon(
+                ok ? Icons.wifi : Icons.wifi_off,
+                color: ok ? const Color(0xFF4CD964) : Colors.redAccent,
+                size: 16,
+              ),
               const SizedBox(width: 5),
-              Text(ok ? 'آنلاین' : 'قطع',
-                  style: TextStyle(
-                      color: ok ? const Color(0xFF4CD964) : Colors.redAccent,
-                      fontSize: 12,
-                      fontWeight: FontWeight.bold)),
+              Text(
+                ok ? 'آنلاین' : 'قطع',
+                style: TextStyle(
+                  color: ok ? const Color(0xFF4CD964) : Colors.redAccent,
+                  fontSize: 12,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
             ],
           ),
         ),
@@ -175,15 +195,15 @@ class TableHud extends StatelessWidget {
   }
 
   static BoxDecoration _panelDeco() => BoxDecoration(
-        gradient: const LinearGradient(
-          begin: Alignment.topCenter,
-          end: Alignment.bottomCenter,
-          colors: [Color(0xFF2A2018), Color(0xFF14100B)],
-        ),
-        borderRadius: BorderRadius.circular(14),
-        border: Border.all(color: const Color(0xFFB8860B), width: 1.4),
-        boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 6)],
-      );
+    gradient: const LinearGradient(
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
+      colors: [Color(0xFF2A2018), Color(0xFF14100B)],
+    ),
+    borderRadius: BorderRadius.circular(14),
+    border: Border.all(color: const Color(0xFFB8860B), width: 1.4),
+    boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 6)],
+  );
 
   (String, Color) _trumpGlyph(String? suit) {
     switch (suit) {
@@ -208,6 +228,8 @@ class _PlayerSeat extends StatelessWidget {
   final bool isHakem;
   final bool nameAbove;
   final int cardCount;
+  final int
+  teamTricks; // دست‌های برده‌ی تیمِ این بازیکن در این هَند (tricks_won)
   final String turnToken;
   final double turnSeconds;
   final bool showRing;
@@ -218,6 +240,7 @@ class _PlayerSeat extends StatelessWidget {
     required this.isHakem,
     required this.nameAbove,
     required this.cardCount,
+    required this.teamTricks,
     required this.turnToken,
     required this.turnSeconds,
     required this.showRing,
@@ -228,12 +251,13 @@ class _PlayerSeat extends StatelessWidget {
     final ringW = diameter * 0.08;
     final name = Container(
       constraints: BoxConstraints(maxWidth: diameter * 1.7),
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+      padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 1),
       decoration: BoxDecoration(
         color: const Color(0xCC14100B),
         borderRadius: BorderRadius.circular(10),
         border: Border.all(
-            color: isTurn ? const Color(0xFFE9B949) : const Color(0x55B8860B)),
+          color: isTurn ? const Color(0xFFE9B949) : const Color(0x55B8860B),
+        ),
       ),
       child: Text(
         player.bot ? '${player.name} (ربات)' : player.name,
@@ -266,16 +290,22 @@ class _PlayerSeat extends StatelessWidget {
                 end: Alignment.bottomCenter,
                 colors: [Color(0xFFF3D27A), Color(0xFFB8860B)],
               ),
-              boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 6)],
+              boxShadow: const [
+                BoxShadow(color: Colors.black54, blurRadius: 6),
+              ],
             ),
             padding: EdgeInsets.all(ringW),
             child: ClipOval(
               child: Container(
                 color: const Color(0xFF1A2740),
-                child: player.bot
-                    ? Icon(Icons.smart_toy,
-                        color: Colors.white70, size: diameter * 0.5)
-                    : RandomAvatar(player.name.isEmpty ? '?' : player.name),
+                child:
+                    player.bot
+                        ? Icon(
+                          Icons.smart_toy,
+                          color: Colors.white70,
+                          size: diameter * 0.5,
+                        )
+                        : RandomAvatar(player.name.isEmpty ? '?' : player.name),
               ),
             ),
           ),
@@ -291,45 +321,32 @@ class _PlayerSeat extends StatelessWidget {
           // تاجِ حاکم بالای آواتار.
           if (isHakem)
             Positioned(
-              top: -diameter * 0.32,
-              child: Icon(Icons.workspace_premium,
-                  color: const Color(0xFFFFC107), size: diameter * 0.42),
+              top: -diameter * 0.40,
+              child: Text('👑', style: TextStyle(fontSize: diameter * 0.4)),
             ),
-          // حبابِ تعدادِ کارت (پایین-راست).
-          if (cardCount > 0)
+          // دست‌های برده‌ی تیمِ این بازیکن در این هَند (بالا-چپ، با نشانِ تک‌خال).
+          if (teamTricks > 0)
             Positioned(
-              right: -diameter * 0.04,
-              bottom: -diameter * 0.04,
-              child: Container(
-                padding: EdgeInsets.all(diameter * 0.06),
-                constraints: BoxConstraints(
-                    minWidth: diameter * 0.34, minHeight: diameter * 0.34),
-                decoration: BoxDecoration(
-                  color: const Color(0xFF0E2A12),
-                  shape: BoxShape.circle,
-                  border: Border.all(color: const Color(0xFFE9B949), width: 1.4),
-                ),
-                alignment: Alignment.center,
-                child: Text('$cardCount',
-                    style: TextStyle(
-                        color: Colors.white,
-                        fontSize: diameter * 0.18,
-                        fontWeight: FontWeight.bold)),
-              ),
+              left: -diameter * 0.06,
+              top: -diameter * 0.06,
+              child: _TricksBadge(count: teamTricks, diameter: diameter),
             ),
+
+          // حبابِ تعدادِ کارت (پایین-راست).
         ],
       ),
     );
 
     // نشانِ رتبه‌ی فشرده (تصویر) کنارِ آواتار.
-    final badge = (!player.bot && player.rankTier.isNotEmpty)
-        ? Image.asset(
-            'assets/images/badge/${player.rankTier}.png',
-            width: diameter * 0.34,
-            height: diameter * 0.34,
-            errorBuilder: (_, __, ___) => const SizedBox.shrink(),
-          )
-        : const SizedBox.shrink();
+    final badge =
+        (!player.bot && player.rankTier.isNotEmpty)
+            ? Image.asset(
+              'assets/images/badge/${player.rankTier}.png',
+              width: diameter * 0.34,
+              height: diameter * 0.34,
+              errorBuilder: (_, __, ___) => const SizedBox.shrink(),
+            )
+            : const SizedBox.shrink();
 
     final nameRow = Row(
       mainAxisSize: MainAxisSize.min,
@@ -339,18 +356,23 @@ class _PlayerSeat extends StatelessWidget {
         Flexible(child: name),
         if (!player.bot && player.coins > 0) ...[
           const SizedBox(width: 4),
-          Text('${player.coins}',
-              style: TextStyle(
-                  color: const Color(0xFFE9B949), fontSize: diameter * 0.16)),
+          Text(
+            '${player.coins}',
+            style: TextStyle(
+              color: const Color(0xFFE9B949),
+              fontSize: diameter * 0.16,
+            ),
+          ),
         ],
       ],
     );
 
     return Column(
       mainAxisSize: MainAxisSize.min,
-      children: nameAbove
-          ? [nameRow, SizedBox(height: diameter * 0.06), avatar]
-          : [avatar, SizedBox(height: diameter * 0.06), nameRow],
+      children:
+          nameAbove
+              ? [nameRow, SizedBox(height: diameter * 0.06), avatar]
+              : [avatar, SizedBox(height: diameter * 0.06), nameRow],
     );
   }
 }
@@ -361,8 +383,11 @@ class _TurnRing extends StatefulWidget {
   final String token;
   final double seconds;
   final double stroke;
-  const _TurnRing(
-      {required this.token, required this.seconds, required this.stroke});
+  const _TurnRing({
+    required this.token,
+    required this.seconds,
+    required this.stroke,
+  });
 
   @override
   State<_TurnRing> createState() => _TurnRingState();
@@ -376,8 +401,9 @@ class _TurnRingState extends State<_TurnRing>
   void initState() {
     super.initState();
     _c = AnimationController(
-        vsync: this, duration: Duration(milliseconds: (widget.seconds * 1000).round()))
-      ..forward();
+      vsync: this,
+      duration: Duration(milliseconds: (widget.seconds * 1000).round()),
+    )..forward();
   }
 
   @override
@@ -423,7 +449,8 @@ class _RingPainter extends CustomPainter {
     final radius = (size.shortestSide - stroke) / 2;
     const start = -1.5708; // بالا
     final sweep = 6.28318 * left;
-    final color = left < 0.3 ? const Color(0xFFE53935) : const Color(0xFF4CD964);
+    final color =
+        left < 0.3 ? const Color(0xFFE53935) : const Color(0xFF4CD964);
     canvas.drawArc(
       Rect.fromCircle(center: center, radius: radius),
       start,
@@ -442,16 +469,92 @@ class _RingPainter extends CustomPainter {
       old.left != left || old.stroke != stroke;
 }
 
+/// نشانِ دست‌های برده‌ی تیم؛ هنگامِ نمایش و هر بار که عدد زیاد می‌شود یک «پاپ»
+/// (بزرگ‌نماییِ کوتاه) می‌زند تا کاربر بفهمد دست‌های برده اینجا نشان داده می‌شوند.
+class _TricksBadge extends StatefulWidget {
+  final int count;
+  final double diameter;
+  const _TricksBadge({required this.count, required this.diameter});
+
+  @override
+  State<_TricksBadge> createState() => _TricksBadgeState();
+}
+
+class _TricksBadgeState extends State<_TricksBadge>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _c;
+  late final Animation<double> _scale;
+
+  @override
+  void initState() {
+    super.initState();
+    _c = AnimationController(
+        vsync: this, duration: const Duration(milliseconds: 420));
+    _scale = TweenSequence<double>([
+      TweenSequenceItem(tween: Tween(begin: 0.4, end: 1.35), weight: 50),
+      TweenSequenceItem(tween: Tween(begin: 1.35, end: 1.0), weight: 50),
+    ]).animate(CurvedAnimation(parent: _c, curve: Curves.easeOut));
+    _c.forward(); // پاپِ اولیه هنگامِ ظاهرشدن
+  }
+
+  @override
+  void didUpdateWidget(covariant _TricksBadge old) {
+    super.didUpdateWidget(old);
+    if (old.count != widget.count) {
+      _c
+        ..reset()
+        ..forward(); // پاپ هر بار که دستِ برده اضافه می‌شود
+    }
+  }
+
+  @override
+  void dispose() {
+    _c.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final d = widget.diameter;
+    return ScaleTransition(
+      scale: _scale,
+      child: Container(
+        padding:
+            EdgeInsets.symmetric(horizontal: d * 0.08, vertical: d * 0.03),
+        decoration: BoxDecoration(
+          color: const Color(0xFF7B0E14),
+          borderRadius: BorderRadius.circular(d),
+          border: Border.all(color: const Color(0xFFE9B949), width: 1.4),
+          boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 4)],
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(Icons.layers, color: Colors.white, size: d * 0.18),
+            SizedBox(width: d * 0.03),
+            Text('${widget.count}',
+                style: TextStyle(
+                    color: Colors.white,
+                    fontSize: d * 0.2,
+                    fontWeight: FontWeight.bold)),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class _RoundBtn extends StatelessWidget {
   final IconData icon;
   final Color color;
   final VoidCallback onTap;
   final double size;
-  const _RoundBtn(
-      {required this.icon,
-      required this.color,
-      required this.onTap,
-      this.size = 46});
+  const _RoundBtn({
+    required this.icon,
+    required this.color,
+    required this.onTap,
+    this.size = 46,
+  });
 
   @override
   Widget build(BuildContext context) {