Add friend chat; replace betting wording (شرط) with entry coins

- Friend-to-friend chat outside the game (ChatScreen) with mock replies, per-friend history, unread tracking; chat button on each friend row - OnlineService + mock + online-store extended with chat (list/get/send/markRead) - Reframe gambling term: "شرط"/"Stake" -> "سکه ورودی"/"Entry coins"; free entry labeled رایگان/Free Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-04 10:21:44 +03:30
parent e2d0a602b6
commit 5776036d78
10 changed files with 290 additions and 4 deletions
@@ -10,6 +10,7 @@ import { RoomScreen } from "@/components/screens/RoomScreen";
 import { MatchmakingScreen } from "@/components/screens/MatchmakingScreen";
 import { LeaderboardScreen } from "@/components/screens/LeaderboardScreen";
 import { ShopScreen } from "@/components/screens/ShopScreen";
+import { ChatScreen } from "@/components/screens/ChatScreen";
 import { AuthScreen } from "@/components/screens/AuthScreen";
 import { DailyRewardModal } from "@/components/online/DailyRewardModal";
 import { useSessionStore } from "@/lib/session-store";
@@ -53,6 +54,8 @@ function renderScreen(screen: string) {
      return <LeaderboardScreen />;
    case "shop":
      return <ShopScreen />;
+    case "chat":
+      return <ChatScreen />;
    default:
      return <HomeScreen />;
  }
@@ -0,0 +1,102 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, Send } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useOnlineStore } from "@/lib/online-store";
+import { useUIStore } from "@/lib/ui-store";
+import { useI18n } from "@/lib/i18n";
+import { avatarEmoji } from "@/lib/online/types";
+import { cn } from "@/lib/cn";
+
+export function ChatScreen() {
+  const { t, locale } = useI18n();
+  const friend = useOnlineStore((s) => s.activeChatFriend);
+  const messages = useOnlineStore((s) => s.chatMessages);
+  const sendChat = useOnlineStore((s) => s.sendChat);
+  const closeChat = useOnlineStore((s) => s.closeChat);
+  const go = useUIStore((s) => s.go);
+  const [text, setText] = useState("");
+  const endRef = useRef<HTMLDivElement>(null);
+  const Chevron = locale === "fa" ? ChevronRight : ChevronLeft;
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  if (!friend) {
+    return null;
+  }
+
+  const back = () => {
+    closeChat();
+    go("friends");
+  };
+
+  const send = async () => {
+    const v = text.trim();
+    if (!v) return;
+    setText("");
+    await sendChat(v);
+  };
+
+  return (
+    <main className="persian-pattern relative h-dvh w-full flex flex-col">
+      {/* header */}
+      <header className="glass flex items-center gap-3 p-3 shrink-0 z-10">
+        <button onClick={back} className="rounded-full p-2 hover:bg-navy-800/80 transition">
+          <Chevron className="size-5 text-cream/80" />
+        </button>
+        <span className="text-2xl">{avatarEmoji(friend.avatar)}</span>
+        <div className="min-w-0">
+          <div className="text-sm font-bold text-cream truncate">{friend.displayName}</div>
+          <div className="text-[11px] text-teal-300">
+            {friend.status === "online"
+              ? t("friends.online")
+              : friend.status === "in-game"
+              ? t("friends.inGame")
+              : t("friends.offline")}
+          </div>
+        </div>
+      </header>
+
+      {/* messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-2">
+        {messages.length === 0 && (
+          <p className="text-center text-cream/40 mt-16">{t("chat.empty")}</p>
+        )}
+        {messages.map((m) => (
+          <div
+            key={m.id}
+            className={cn(
+              "max-w-[78%] rounded-2xl px-3.5 py-2 text-sm",
+              m.fromMe
+                ? "ms-auto btn-gold rounded-ee-sm"
+                : "me-auto glass text-cream rounded-es-sm"
+            )}
+          >
+            {m.text}
+          </div>
+        ))}
+        <div ref={endRef} />
+      </div>
+
+      {/* input */}
+      <footer className="glass p-3 flex items-center gap-2 shrink-0">
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && send()}
+          placeholder={t("chat.placeholder")}
+          className="flex-1 rounded-full bg-navy-900/70 gold-border px-4 py-2.5 text-cream placeholder:text-cream/30 outline-none focus:ring-2 focus:ring-gold-500/40"
+        />
+        <button
+          onClick={send}
+          className="btn-gold rounded-full p-3 shrink-0"
+          aria-label={t("chat.send")}
+        >
+          <Send className="size-4 rtl:-scale-x-100" />
+        </button>
+      </footer>
+    </main>
+  );
+}
@@ -1,9 +1,10 @@
 "use client";

-import { Check, UserPlus, X } from "lucide-react";
+import { Check, MessageCircle, UserPlus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { useOnlineStore } from "@/lib/online-store";
+import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { Friend, PresenceStatus, avatarEmoji } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
@@ -23,6 +24,8 @@ export function FriendsScreen() {
  const accept = useOnlineStore((s) => s.acceptRequest);
  const decline = useOnlineStore((s) => s.declineRequest);
  const remove = useOnlineStore((s) => s.removeFriend);
+  const openChat = useOnlineStore((s) => s.openChat);
+  const go = useUIStore((s) => s.go);

  const [query, setQuery] = useState("");

@@ -110,6 +113,16 @@ export function FriendsScreen() {
              </div>
            </div>
            <span className="text-[11px] text-gold-300/80">{Math.round(f.rating)}</span>
+            <button
+              onClick={async () => {
+                await openChat(f);
+                go("chat");
+              }}
+              className="size-8 rounded-lg hover:bg-teal-700/40 flex items-center justify-center text-teal-300/80 hover:text-teal-200"
+              title={t("friends.message")}
+            >
+              <MessageCircle className="size-4" />
+            </button>
            <button
              onClick={() => remove(f.id)}
              className="size-8 rounded-lg hover:bg-rose-700/40 flex items-center justify-center text-cream/40 hover:text-rose-300"
@@ -47,7 +47,7 @@ export function OnlineLobbyScreen() {
                stake === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
              )}
            >
-              {s === 0 ? t("menu.guest") : s.toLocaleString()}
+              {s === 0 ? t("common.free") : s.toLocaleString()}
            </button>
          ))}
        </div>
@@ -87,6 +87,13 @@ const fa: Dict = {
  "common.soon": "به‌زودی",
  "common.copy": "کپی",
  "common.copied": "کپی شد",
+  "common.free": "رایگان",
+
+  "chat.title": "گفتگو",
+  "chat.placeholder": "پیام بنویسید…",
+  "chat.send": "ارسال",
+  "chat.empty": "گفتگو را شروع کنید",
+  "friends.message": "پیام",

  "profile.title": "پروفایل",
  "profile.stats": "آمار",
@@ -128,7 +135,7 @@ const fa: Dict = {
  "room.empty": "خالی",
  "room.waiting": "در انتظار…",
  "room.start": "شروع بازی",
-  "room.stake": "شرط",
+  "room.stake": "سکه ورودی",
  "room.leave": "ترک اتاق",
  "room.pickFriend": "یک دوست را انتخاب کنید",

@@ -265,6 +272,13 @@ const en: Dict = {
  "common.soon": "Coming soon",
  "common.copy": "Copy",
  "common.copied": "Copied",
+  "common.free": "Free",
+
+  "chat.title": "Chat",
+  "chat.placeholder": "Type a message…",
+  "chat.send": "Send",
+  "chat.empty": "Start the conversation",
+  "friends.message": "Message",

  "profile.title": "Profile",
  "profile.stats": "Stats",
@@ -306,7 +320,7 @@ const en: Dict = {
  "room.empty": "Empty",
  "room.waiting": "Waiting…",
  "room.start": "Start game",
-  "room.stake": "Stake",
+  "room.stake": "Entry coins",
  "room.leave": "Leave room",
  "room.pickFriend": "Pick a friend",

@@ -3,6 +3,7 @@
 import { create } from "zustand";
 import { CreateRoomOptions, MatchmakingOptions, getService } from "./online/service";
 import {
+  ChatMessage,
  Friend,
  FriendRequest,
  LeaderboardEntry,
@@ -35,11 +36,19 @@ interface OnlineStore {
  cancelMatchmaking: () => Promise<void>;

  loadLeaderboard: () => Promise<void>;
+
+  // chat
+  activeChatFriend: Friend | null;
+  chatMessages: ChatMessage[];
+  openChat: (friend: Friend) => Promise<void>;
+  sendChat: (text: string) => Promise<void>;
+  closeChat: () => void;
 }

 let roomUnsub: (() => void) | null = null;
 let mmUnsub: (() => void) | null = null;
 let friendUnsub: (() => void) | null = null;
+let chatUnsub: (() => void) | null = null;

 export const useOnlineStore = create<OnlineStore>((set, get) => ({
  friends: [],
@@ -128,4 +137,36 @@ export const useOnlineStore = create<OnlineStore>((set, get) => ({
    const leaderboard = await getService().getLeaderboard();
    set({ leaderboard });
  },
+
+  activeChatFriend: null,
+  chatMessages: [],
+
+  openChat: async (friend) => {
+    const svc = getService();
+    set({ activeChatFriend: friend, chatMessages: await svc.getMessages(friend.id) });
+    await svc.markRead(friend.id);
+    if (chatUnsub) chatUnsub();
+    chatUnsub = svc.onChat((friendId, msgs) => {
+      const active = get().activeChatFriend;
+      if (active && active.id === friendId) {
+        set({ chatMessages: msgs });
+        svc.markRead(friendId);
+      }
+    });
+  },
+
+  sendChat: async (text) => {
+    const friend = get().activeChatFriend;
+    if (!friend || !text.trim()) return;
+    await getService().sendMessage(friend.id, text);
+    set({ chatMessages: await getService().getMessages(friend.id) });
+  },
+
+  closeChat: () => {
+    if (chatUnsub) {
+      chatUnsub();
+      chatUnsub = null;
+    }
+    set({ activeChatFriend: null, chatMessages: [] });
+  },
 }));
@@ -12,6 +12,8 @@ import {
 import {
  AVATARS,
  AuthSession,
+  ChatMessage,
+  Conversation,
  DailyRewardState,
  Friend,
  FriendRequest,
@@ -52,8 +54,22 @@ const LS = {
  session: "hokm.session",
  profile: "hokm.profile",
  daily: "hokm.daily",
+  chats: "hokm.chats",
 };

+const CANNED_REPLIES = [
+  "سلام! 👋",
+  "بزن بریم 🔥",
+  "یه دست دیگه؟",
+  "من آماده‌ام",
+  "آفرین، کارت خوب بود",
+  "حکم چی بکنیم؟",
+  "😂😂",
+  "الان میام بازی",
+  "حتماً!",
+  "تو رو خدا این دفعه کُتمون نکن 😅",
+];
+
 function load<T>(key: string): T | null {
  if (!isBrowser()) return null;
  try {
@@ -132,14 +148,19 @@ export class MockOnlineService implements OnlineService {
  private currentOppRating = 1000;
  private lastOtp = "";

+  private messages: Record<string, ChatMessage[]> = {};
+  private unread: Record<string, number> = {};
+
  private roomCbs = new Set<(r: Room) => void>();
  private mmCbs = new Set<(s: MatchmakingState) => void>();
  private friendCbs = new Set<(f: Friend[]) => void>();
+  private chatCbs = new Set<(friendId: string, m: ChatMessage[]) => void>();
  private timers: ReturnType<typeof setTimeout>[] = [];

  constructor() {
    this.session = load<AuthSession>(LS.session);
    this.profile = load<UserProfile>(LS.profile);
+    this.messages = load<Record<string, ChatMessage[]>>(LS.chats) ?? {};
    this.seedFriends();
  }

@@ -320,6 +341,73 @@ export class MockOnlineService implements OnlineService {
    return () => this.friendCbs.delete(cb);
  }

+  /* ------------------------------- chat ------------------------------ */
+
+  private saveChats() {
+    save(LS.chats, this.messages);
+  }
+  private emitChat(friendId: string) {
+    const msgs = this.messages[friendId] ?? [];
+    for (const cb of this.chatCbs) cb(friendId, [...msgs]);
+  }
+
+  async listConversations(): Promise<Conversation[]> {
+    const convs: Conversation[] = [];
+    for (const friend of this.friends) {
+      const msgs = this.messages[friend.id];
+      if (!msgs || msgs.length === 0) continue;
+      convs.push({
+        friend,
+        lastMessage: msgs[msgs.length - 1],
+        unread: this.unread[friend.id] ?? 0,
+      });
+    }
+    return convs.sort(
+      (a, b) => (b.lastMessage?.ts ?? 0) - (a.lastMessage?.ts ?? 0)
+    );
+  }
+
+  async getMessages(friendId: string): Promise<ChatMessage[]> {
+    return [...(this.messages[friendId] ?? [])];
+  }
+
+  async sendMessage(friendId: string, text: string): Promise<ChatMessage> {
+    const msg: ChatMessage = {
+      id: rid("m"),
+      fromMe: true,
+      text: text.trim(),
+      ts: Date.now(),
+    };
+    this.messages[friendId] = [...(this.messages[friendId] ?? []), msg];
+    this.saveChats();
+    this.emitChat(friendId);
+
+    // simulate a reply from the friend
+    this.after(randInt(900, 1900), () => {
+      const reply: ChatMessage = {
+        id: rid("m"),
+        fromMe: false,
+        text: pick(CANNED_REPLIES),
+        ts: Date.now(),
+      };
+      this.messages[friendId] = [...(this.messages[friendId] ?? []), reply];
+      this.unread[friendId] = (this.unread[friendId] ?? 0) + 1;
+      this.saveChats();
+      this.emitChat(friendId);
+    });
+
+    return msg;
+  }
+
+  async markRead(friendId: string) {
+    this.unread[friendId] = 0;
+  }
+
+  onChat(cb: (friendId: string, m: ChatMessage[]) => void): Unsubscribe {
+    this.chatCbs.add(cb);
+    return () => this.chatCbs.delete(cb);
+  }
+
  /* ------------------------------ rooms ------------------------------ */

  private seatYou(): RoomSeat {
@@ -4,6 +4,8 @@

 import {
  AuthSession,
+  ChatMessage,
+  Conversation,
  DailyRewardState,
  Friend,
  FriendRequest,
@@ -53,6 +55,13 @@ export interface OnlineService {
  removeFriend(id: string): Promise<void>;
  onFriends(cb: (friends: Friend[]) => void): Unsubscribe;

+  /* ----- chat ----- */
+  listConversations(): Promise<Conversation[]>;
+  getMessages(friendId: string): Promise<ChatMessage[]>;
+  sendMessage(friendId: string, text: string): Promise<ChatMessage>;
+  markRead(friendId: string): Promise<void>;
+  onChat(cb: (friendId: string, messages: ChatMessage[]) => void): Unsubscribe;
+
  /* ----- rooms ----- */
  createRoom(opts: CreateRoomOptions): Promise<Room>;
  setPartner(roomId: string, friendId: string | null): Promise<Room>;
@@ -245,6 +245,21 @@ export interface DailyRewardState {
  available: boolean;
 }

+/* ------------------------------- Chat -------------------------------- */
+
+export interface ChatMessage {
+  id: string;
+  fromMe: boolean;
+  text: string;
+  ts: number;
+}
+
+export interface Conversation {
+  friend: Friend;
+  lastMessage: ChatMessage | null;
+  unread: number;
+}
+
 /* ------------------------------ Avatars ------------------------------ */

 export const AVATARS: { id: string; emoji: string }[] = [
@@ -12,6 +12,7 @@ export type Screen =
  | "matchmaking"
  | "leaderboard"
  | "shop"
+  | "chat"
  | "game"; // the table (used for both ai + online)

 interface UIStore {