Build Hokm card game: offline vs-AI + online social/gamification (mock backend)

- Pure-TS Hokm engine (deal, hakem, trump, tricks, scoring, Kot) + AI bots - Persian-luxury RTL UI (Next 16 / React 19 / Tailwind v4 / Framer Motion / Zustand) - Online platform behind OnlineService seam (mock now, .NET SignalR later): auth (phone OTP + email/Google), profiles, friends, private rooms with partner pick, ranked matchmaking, leaderboard, shop - Gamification: ranks/leagues, coins, XP/levels, daily rewards, achievements - i18n fa/en, PWA manifest, engine + gamification sims Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-04 10:11:00 +03:30
parent dff1a34f95
commit e2d0a602b6
41 changed files with 5766 additions and 93 deletions
@@ -0,0 +1,52 @@
+"use client";
+
+import { Coins, Gift } from "lucide-react";
+import { useSessionStore } from "@/lib/session-store";
+import { useUIStore } from "@/lib/ui-store";
+import { useI18n } from "@/lib/i18n";
+import { avatarEmoji } from "@/lib/online/types";
+
+export function TopBar() {
+  const profile = useSessionStore((s) => s.profile);
+  const go = useUIStore((s) => s.go);
+  const openDaily = useUIStore((s) => s.openDaily);
+  const { t } = useI18n();
+  if (!profile) return null;
+
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <button
+        onClick={() => go("profile")}
+        className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 hover:bg-navy-800/80 transition"
+      >
+        <span className="size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center text-xl">
+          {avatarEmoji(profile.avatar)}
+        </span>
+        <span className="text-start leading-tight">
+          <span className="block text-sm font-bold text-cream max-w-24 truncate">
+            {profile.displayName}
+          </span>
+          <span className="block text-[10px] text-gold-400/80">
+            {t("common.level")} {profile.level}
+          </span>
+        </span>
+      </button>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={openDaily}
+          className="glass rounded-full p-2 hover:bg-navy-800/80 transition"
+          title={t("daily.title")}
+        >
+          <Gift className="size-4 text-gold-400" />
+        </button>
+        <div className="glass rounded-full px-3 py-1.5 flex items-center gap-1.5">
+          <Coins className="size-4 text-gold-400" />
+          <span className="text-sm font-bold text-cream tabular-nums">
+            {profile.coins.toLocaleString()}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}