{friend.displayName}
-
- {friend.status === "online"
+
+ {peerTyping
+ ? t("chat.typing")
+ : friend.status === "online"
? t("friends.online")
: friend.status === "in-game"
? t("friends.inGame")
@@ -142,6 +179,17 @@ export function ChatScreen() {
{m.text}
))}
+ {peerTyping && (
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
+ )}
@@ -172,7 +220,7 @@ export function ChatScreen() {
setShowEmoji(false)}
- onChange={(e) => setText(e.target.value)}
+ onChange={(e) => onType(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && send()}
placeholder={t("chat.placeholder")}
className="flex-1 min-w-0 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"
diff --git a/src/components/screens/RoomScreen.tsx b/src/components/screens/RoomScreen.tsx
index 80f9a06..acc87ae 100644
--- a/src/components/screens/RoomScreen.tsx
+++ b/src/components/screens/RoomScreen.tsx
@@ -8,9 +8,17 @@ import { useGameStore } from "@/lib/game-store";
import { useOnlineStore } from "@/lib/online-store";
import { useUIStore } from "@/lib/ui-store";
import { useI18n } from "@/lib/i18n";
-import { Friend, RoomSeat, avatarEmoji } from "@/lib/online/types";
+import { Friend, PresenceStatus, RoomSeat, avatarEmoji } from "@/lib/online/types";
import { cn } from "@/lib/cn";
+const STATUS_COLOR: Record
= {
+ online: "bg-teal-400",
+ offline: "bg-slate-500",
+ "in-game": "bg-gold-400",
+};
+// online first, then in-game, then offline
+const statusRank = (s: PresenceStatus) => (s === "online" ? 0 : s === "in-game" ? 1 : 2);
+
export function RoomScreen() {
const { t } = useI18n();
const room = useOnlineStore((s) => s.room);
@@ -35,6 +43,8 @@ export function RoomScreen() {
if (!room) return null;
const seat = (n: number) => room.seats.find((s) => s.seat === n)!;
+ const statusLabel = (s: PresenceStatus) =>
+ s === "online" ? t("friends.online") : s === "in-game" ? t("friends.inGame") : t("friends.offline");
const pick = async (friend: Friend) => {
if (!picker) return;
@@ -152,21 +162,39 @@ export function RoomScreen() {
onClick={(e) => e.stopPropagation()}
className="panel rounded-3xl p-5 w-full max-w-sm max-h-[70vh] overflow-y-auto"
>
- {t("room.pickFriend")}
+ {t("room.pickFriend")}
+ {t("room.inviteHint")}
- {friends.map((f) => (
-
- ))}
+ {friends.length === 0 && (
+
{t("friends.empty")}
+ )}
+ {[...friends]
+ .sort((a, b) => statusRank(a.status) - statusRank(b.status))
+ .map((f) => {
+ const inGame = f.status === "in-game";
+ return (
+
+ );
+ })}
@@ -210,7 +238,16 @@ function SeatCard({
{seat.kind === "bot" && 🤖}
{seat.kind === "invited" ? (
- {t("room.waiting")}
+
+ {t("room.waiting")}
+
+
) : (
role !== "you" && (