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>

scripts/sim.ts

@@ -91,6 +91,7 @@ function baseProfile(): UserProfile {
     ownedAvatars: ["a-fox"],
     ownedCardStyles: ["classic"],
     ownedTitles: ["novice"],
+    ownedReactionPacks: [],
     title: "novice",
     cardStyle: "classic",
     achievements: {},

src/components/GameTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import { Crown, LogOut, WifiOff } from "lucide-react";
+import { Crown, LogOut, SmilePlus, WifiOff } from "lucide-react";
 import { useEffect, useState } from "react";
 import { TURN_MS, useGameStore } from "@/lib/game-store";
 import { legalMoves } from "@/lib/hokm/engine";
@@ -17,7 +17,8 @@ import {
 } from "@/lib/hokm/types";
 import { useI18n } from "@/lib/i18n";
 import { useSessionStore } from "@/lib/session-store";
-import { cardStyleById } from "@/lib/online/gamification";
+import { cardStyleById, ownedReactions } from "@/lib/online/gamification";
+import { getService } from "@/lib/online/service";
 import { cn } from "@/lib/cn";
 import { PlayingCard } from "./PlayingCard";
 
@@ -89,6 +90,7 @@ export function GameTable({ onExit }: { onExit?: () => void } = {}) {
       <TurnIndicator />
       <TurnTimer />
       <DisconnectBanner />
+      <Reactions />
 
       {/* Overlays */}
       <AnimatePresence>
@@ -332,10 +334,17 @@ function PlayerHand({ legalIds }: { legalIds: Set<string> }) {
 
   const sorted = sortHand(hand);
   const myTurn = phase === "playing" && turn === 0;
+  // While choosing trump the hakem must see their cards above the chooser overlay.
+  const choosing = phase === "choosing-trump";
   const n = sorted.length;
 
   return (
-    <div className="absolute bottom-0 inset-x-0 z-20 flex justify-center pb-3 pointer-events-none">
+    <div
+      className={cn(
+        "absolute bottom-0 inset-x-0 flex justify-center pb-3 pointer-events-none",
+        choosing ? "z-50" : "z-20"
+      )}
+    >
       <div className="relative flex items-end justify-center pointer-events-auto">
         {sorted.map((card, i) => {
           const playable = myTurn && legalIds.has(card.id);
@@ -468,6 +477,91 @@ function DisconnectBanner() {
   );
 }
 
+/* ----------------------------- Reactions ------------------------------ */
+
+const REACTION_POS: Record<number, string> = {
+  0: "bottom-44 left-1/2 -translate-x-1/2",
+  1: "top-1/2 right-20 -translate-y-1/2",
+  2: "top-28 left-1/2 -translate-x-1/2",
+  3: "top-1/2 left-20 -translate-y-1/2",
+};
+
+interface Bubble {
+  id: string;
+  seat: number;
+  emoji: string;
+}
+
+function Reactions() {
+  const profile = useSessionStore((s) => s.profile);
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [bubbles, setBubbles] = useState<Bubble[]>([]);
+  const list = profile ? ownedReactions(profile) : [];
+
+  useEffect(() => {
+    const unsub = getService().onReaction((seat, emoji) => {
+      const id = `${seat}-${Date.now()}-${Math.random()}`;
+      setBubbles((b) => [...b, { id, seat, emoji }]);
+      setTimeout(() => setBubbles((b) => b.filter((x) => x.id !== id)), 2600);
+    });
+    return unsub;
+  }, []);
+
+  const send = (emoji: string) => {
+    getService().sendReaction(emoji);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {/* floating bubbles */}
+      {bubbles.map((b) => (
+        <motion.div
+          key={b.id}
+          initial={{ opacity: 0, scale: 0.4, y: 10 }}
+          animate={{ opacity: 1, scale: 1, y: -18 }}
+          exit={{ opacity: 0 }}
+          className={cn("absolute z-40 pointer-events-none", REACTION_POS[b.seat])}
+        >
+          <span className="text-4xl drop-shadow-lg">{b.emoji}</span>
+        </motion.div>
+      ))}
+
+      {/* tray */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ opacity: 0, y: 12, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 12, scale: 0.95 }}
+            className="absolute bottom-20 ltr:right-4 rtl:left-4 z-50 glass rounded-2xl p-2 grid grid-cols-5 gap-1 max-w-[260px]"
+          >
+            {list.map((emoji, i) => (
+              <button
+                key={`${emoji}-${i}`}
+                onClick={() => send(emoji)}
+                className="size-10 rounded-xl hover:bg-navy-800 transition flex items-center justify-center text-2xl"
+              >
+                {emoji}
+              </button>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* button */}
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="absolute bottom-4 ltr:right-4 rtl:left-4 z-50 glass rounded-full p-3 hover:bg-navy-800 transition"
+        title={t("reactions.title")}
+      >
+        <SmilePlus className="size-5 text-gold-400" />
+      </button>
+    </>
+  );
+}
+
 /* ------------------------------ Overlays ------------------------------ */
 
 function Backdrop({ children }: { children: React.ReactNode }) {

src/components/screens/ShopScreen.tsx

@@ -25,7 +25,9 @@ export function ShopScreen() {
   const owns = (item: ShopItem) =>
     item.kind === "avatar"
       ? profile.ownedAvatars.includes(item.id)
-      : profile.ownedCardStyles.includes(item.id);
+      : item.kind === "cardstyle"
+      ? profile.ownedCardStyles.includes(item.id)
+      : profile.ownedReactionPacks.includes(item.id);
 
   const buy = async (item: ShopItem) => {
     const res = await getService().buyItem(item.id);
@@ -39,6 +41,7 @@ export function ShopScreen() {
 
   const avatars = items.filter((i) => i.kind === "avatar");
   const cardstyles = items.filter((i) => i.kind === "cardstyle");
+  const reactions = items.filter((i) => i.kind === "reactionpack");
 
   return (
     <ScreenShell>
@@ -85,6 +88,20 @@ export function ShopScreen() {
           ))}
         </div>
       </Section>
+
+      <Section title={t("shop.reactions")}>
+        <div className="grid grid-cols-3 gap-3">
+          {reactions.map((item) => (
+            <ItemCard
+              key={item.id}
+              item={item}
+              owned={owns(item)}
+              onBuy={() => buy(item)}
+              preview={<span className="text-4xl">{item.preview}</span>}
+            />
+          ))}
+        </div>
+      </Section>
     </ScreenShell>
   );
 }

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;