Add reactions (Sheklak), fix hakem card visibility during trump choice

- Reactions/emotes in-game: tray of owned emojis + animated per-seat bubbles
  (feature named "شکلک / Sheklak"). Packs: starter (free), champion/legend
  (earned by rating/wins), emotions/taunt (purchasable in shop)
- OnlineService.sendReaction/onReaction; mock echoes you + random opponents
- Fix: human hakem's 5 cards were blurred behind the trump-chooser overlay —
  raise hand to z-50 during choosing-trump so cards stay readable

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/lib/i18n.tsx

@@ -218,7 +218,10 @@ const fa: Dict = {
   "queue.upgrade": "ورود سریع (ویژه)",
 
   "shop.cardstyles": "طرح کارت‌ها",
+  "shop.reactions": "بسته شکلک‌ها",
   "reward.newTitle": "عنوان جدید",
+
+  "reactions.title": "شکلک‌ها",
 };
 
 const en: Dict = {
@@ -426,7 +429,10 @@ const en: Dict = {
   "queue.upgrade": "Skip queue (Pro)",
 
   "shop.cardstyles": "Card styles",
+  "shop.reactions": "Reaction packs",
   "reward.newTitle": "New title",
+
+  "reactions.title": "Reactions",
 };
 
 const DICTS: Record<Locale, Dict> = { fa, en };

src/lib/online/gamification.ts

@@ -10,6 +10,7 @@ import {
   PlayerStats,
   RankTier,
   RankTierId,
+  ReactionPackDef,
   RewardResult,
   TitleDef,
   TitleUnlock,
@@ -228,6 +229,39 @@ export function cardStyleById(id: string): CardStyleDef {
   return CARD_STYLES.find((c) => c.id === id) ?? CARD_STYLES[0];
 }
 
+/* --------------------- Reactions (Sheklak / شکلک) -------------------- */
+
+export const REACTION_PACKS: ReactionPackDef[] = [
+  { id: "starter", nameFa: "پایه", nameEn: "Starter", reactions: ["👍", "👏", "😂", "😮"], price: 0, default: true },
+  { id: "emotions", nameFa: "احساسات", nameEn: "Emotions", reactions: ["😎", "😭", "🤯", "🥳", "😍"], price: 600 },
+  { id: "taunt", nameFa: "طعنه", nameEn: "Taunts", reactions: ["😏", "🤡", "🙄", "😴", "🥱"], price: 900 },
+  { id: "champion", nameFa: "قهرمان", nameEn: "Champion", reactions: ["👑", "🏆", "💪", "🔥"], price: 0, unlockRating: 1300 },
+  { id: "legend", nameFa: "اسطوره", nameEn: "Legend", reactions: ["💎", "⚡", "🐐", "🎯"], price: 0, unlockWins: 100 },
+];
+
+export function reactionPackById(id: string): ReactionPackDef | undefined {
+  return REACTION_PACKS.find((p) => p.id === id);
+}
+
+/** Which packs the player currently owns (default + earned + purchased). */
+export function ownedReactionPackIds(profile: UserProfile): string[] {
+  const purchased = profile.ownedReactionPacks ?? [];
+  const ids = new Set<string>();
+  for (const p of REACTION_PACKS) {
+    const earned =
+      (p.unlockRating != null && profile.rating >= p.unlockRating) ||
+      (p.unlockWins != null && profile.stats.wins >= p.unlockWins);
+    if (p.default || earned || purchased.includes(p.id)) ids.add(p.id);
+  }
+  return [...ids];
+}
+
+/** Flattened emoji list the player can send. */
+export function ownedReactions(profile: UserProfile): string[] {
+  const ids = new Set(ownedReactionPackIds(profile));
+  return REACTION_PACKS.filter((p) => ids.has(p.id)).flatMap((p) => p.reactions);
+}
+
 /* ---------------------- Apply a match result ------------------------- */
 
 function applyStats(stats: PlayerStats, summary: MatchSummary): PlayerStats {

src/lib/online/mock-service.ts

@@ -2,7 +2,7 @@
 // Simulates remote players, friends presence, room invites and matchmaking
 // with timers, and computes rewards via gamification.ts.
 
-import { CARD_STYLES, applyMatchResult, dailyRewardFor } from "./gamification";
+import { CARD_STYLES, REACTION_PACKS, applyMatchResult, dailyRewardFor } from "./gamification";
 import {
   CreateRoomOptions,
   MatchmakingOptions,
@@ -112,6 +112,7 @@ function defaultProfile(session: AuthSession): UserProfile {
     ownedAvatars: [AVATARS[0].id, AVATARS[1].id],
     ownedCardStyles: ["classic"],
     ownedTitles: ["novice"],
+    ownedReactionPacks: [],
     title: "novice",
     cardStyle: "classic",
     achievements: {},
@@ -128,6 +129,7 @@ function migrateProfile(p: UserProfile): UserProfile {
     ownedAvatars: p.ownedAvatars ?? [AVATARS[0].id],
     ownedCardStyles: p.ownedCardStyles ?? ["classic"],
     ownedTitles: p.ownedTitles ?? ["novice"],
+    ownedReactionPacks: p.ownedReactionPacks ?? [],
     title: p.title ?? "novice",
     cardStyle: p.cardStyle ?? "classic",
   };
@@ -172,6 +174,8 @@ export class MockOnlineService implements OnlineService {
   private mmCbs = new Set<(s: MatchmakingState) => void>();
   private friendCbs = new Set<(f: Friend[]) => void>();
   private chatCbs = new Set<(friendId: string, m: ChatMessage[]) => void>();
+  private reactionCbs = new Set<(seat: number, reaction: string) => void>();
+  private reactionTimer: ReturnType<typeof setInterval> | null = null;
   private timers: ReturnType<typeof setTimeout>[] = [];
 
   constructor() {
@@ -439,6 +443,32 @@ export class MockOnlineService implements OnlineService {
     return () => this.chatCbs.delete(cb);
   }
 
+  /* ---------------------------- reactions ---------------------------- */
+
+  async sendReaction(reaction: string) {
+    for (const cb of this.reactionCbs) cb(0, reaction);
+  }
+
+  onReaction(cb: (seat: number, reaction: string) => void): Unsubscribe {
+    this.reactionCbs.add(cb);
+    if (this.reactionTimer == null) {
+      const pool = ["👍", "😂", "🔥", "😮", "👏", "😎", "🙄", "😭"];
+      this.reactionTimer = setInterval(() => {
+        if (this.reactionCbs.size === 0) return;
+        const seat = randInt(1, 3);
+        const r = pick(pool);
+        for (const c of this.reactionCbs) c(seat, r);
+      }, 9000);
+    }
+    return () => {
+      this.reactionCbs.delete(cb);
+      if (this.reactionCbs.size === 0 && this.reactionTimer) {
+        clearInterval(this.reactionTimer);
+        this.reactionTimer = null;
+      }
+    };
+  }
+
   /* ------------------------------ rooms ------------------------------ */
 
   private seatYou(): RoomSeat {
@@ -723,7 +753,15 @@ export class MockOnlineService implements OnlineService {
       price: c.price,
       preview: c.accent,
     }));
-    return [...avatarItems, ...cardItems];
+    const reactionItems: ShopItem[] = REACTION_PACKS.filter((r) => r.price > 0).map((r) => ({
+      id: r.id,
+      kind: "reactionpack",
+      nameFa: r.nameFa,
+      nameEn: r.nameEn,
+      price: r.price,
+      preview: r.reactions[0],
+    }));
+    return [...avatarItems, ...cardItems, ...reactionItems];
   }
 
   async buyItem(id: string) {
@@ -732,7 +770,11 @@ export class MockOnlineService implements OnlineService {
     const item = items.find((i) => i.id === id);
     if (!item) return { ok: false, messageFa: "آیتم یافت نشد", messageEn: "Item not found" };
     const owned =
-      item.kind === "avatar" ? p.ownedAvatars.includes(id) : p.ownedCardStyles.includes(id);
+      item.kind === "avatar"
+        ? p.ownedAvatars.includes(id)
+        : item.kind === "cardstyle"
+        ? p.ownedCardStyles.includes(id)
+        : p.ownedReactionPacks.includes(id);
     if (owned) return { ok: false, messageFa: "قبلاً خریداری شده", messageEn: "Already owned" };
     if (p.coins < item.price)
       return { ok: false, messageFa: "سکه کافی نیست", messageEn: "Not enough coins" };
@@ -743,6 +785,8 @@ export class MockOnlineService implements OnlineService {
       ownedAvatars: item.kind === "avatar" ? [...p.ownedAvatars, id] : p.ownedAvatars,
       ownedCardStyles:
         item.kind === "cardstyle" ? [...p.ownedCardStyles, id] : p.ownedCardStyles,
+      ownedReactionPacks:
+        item.kind === "reactionpack" ? [...p.ownedReactionPacks, id] : p.ownedReactionPacks,
     };
     this.saveProfile();
     return { ok: true, profile: this.profile, messageFa: "خرید انجام شد", messageEn: "Purchased" };

src/lib/online/service.ts

@@ -67,6 +67,10 @@ export interface OnlineService {
   markRead(friendId: string): Promise<void>;
   onChat(cb: (friendId: string, messages: ChatMessage[]) => void): Unsubscribe;
 
+  /* ----- reactions (in-game emotes) ----- */
+  sendReaction(reaction: string): Promise<void>;
+  onReaction(cb: (seat: number, reaction: string) => void): Unsubscribe;
+
   /* ----- rooms ----- */
   createRoom(opts: CreateRoomOptions): Promise<Room>;
   setPartner(roomId: string, friendId: string | null): Promise<Room>;

src/lib/online/types.ts

@@ -54,6 +54,7 @@ export interface UserProfile {
   ownedAvatars: string[];
   ownedCardStyles: string[];
   ownedTitles: string[];
+  ownedReactionPacks: string[]; // purchased reaction packs
   title: string | null; // equipped title id
   cardStyle: string; // equipped card-back style id
 
@@ -132,6 +133,19 @@ export interface CardStyleDef {
   price: number; // 0 = free/default
 }
 
+/* --------------------- Reactions (Sheklak / شکلک) -------------------- */
+
+export interface ReactionPackDef {
+  id: string;
+  nameFa: string;
+  nameEn: string;
+  reactions: string[]; // emoji/sticker chars
+  price: number; // >0 → purchasable in the shop
+  default?: boolean; // owned from the start
+  unlockRating?: number; // earned by reaching this rating
+  unlockWins?: number; // earned by total wins
+}
+
 /* ------------------------------ Friends ------------------------------ */
 
 export type PresenceStatus = "online" | "offline" | "in-game";
@@ -267,7 +281,7 @@ export interface LeaderboardEntry {
 
 /* ------------------------------- Shop -------------------------------- */
 
-export type ShopItemKind = "avatar" | "cardstyle";
+export type ShopItemKind = "avatar" | "cardstyle" | "reactionpack";
 
 export interface ShopItem {
   id: string;