Fable will fix it! Pt 3

frontend/src/lib/cards.js

@@ -2,6 +2,21 @@
 // Codes look like "10D", "KH", "Joker1" (black) / "Joker2" (red).
 export const SUIT_EMOJI = { C: '♣️', S: '♠️', H: '♥️', D: '♦️' };
 
+// Suit themes from the rulebook: how a Pi-Rat overcomes an Obstacle with that suit.
+export const SUIT_THEMES = {
+    C: "♣ Clubs — Shootin' and Stabbin': violence, combat, or direct confrontation",
+    D: "♦ Diamonds — Swimmin' and Sailin': nautical skills, athletics, or mobility",
+    S: "♠ Spades — Sneakin' and Schemin': stealth, deception, or cunning plans",
+    H: "♥ Hearts — Shoutin' and Singin': social skills, performance, or charisma",
+};
+
+// Default tooltip for a card: its suit theme (or what a Joker does).
+export function cardTooltip(code) {
+    if (!code) return '';
+    if (isJoker(code)) return '🃏 Joker — discards an Obstacle outright and draws a replacement';
+    return SUIT_THEMES[cardSuit(code)] || '';
+}
+
 export function isJoker(code) {
     return !!code && code.startsWith('Joker');
 }
@@ -22,6 +37,14 @@ export function getCardDisplay(code) {
     return `${cardValue(code)}${SUIT_EMOJI[cardSuit(code)] || cardSuit(code)}`;
 }
 
-export function playerName(players, id) {
-    return players.find(p => p.id === id)?.name || '???';
+// "Recruit Cheese (Tim)" — the Pi-Rat's identity with the human player's lobby
+// name in parentheses (omitted while the two are still identical, e.g. in the lobby).
+export function displayName(p) {
+    if (!p) return '???';
+    if (p.player_name && p.player_name !== p.name) return `${p.name} (${p.player_name})`;
+    return p.name;
+}
+
+export function playerName(players, id) {
+    return displayName(players.find(p => p.id === id));
 }