+ {/* Ambient lighting effects */}
+
+
+
+ {/* 3D Table Container */}
+
+ );
+};
diff --git a/ChatPanel.jsx b/ChatPanel.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..54aebabad9cc9fa4b5f1e20768eb54c0e6a6482f
--- /dev/null
+++ b/ChatPanel.jsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { apiClient } from 'app';
+import { MessageResponse } from 'types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { MessageCircle, Send, X } from 'lucide-react';
+
+interface Props {
+ tableId: string;
+ userId: string;
+ isOpen: boolean;
+ onToggle: () => void;
+}
+
+export const ChatPanel: React.FC
+ {/* Main Casino Table - GREEN/RED-BROWN FELT */}
+
+
+ {/* Felt Texture Overlay */}
+
+
+ {/* Table Edge (Padded Leather) */}
+
+
+ {/* Game Area Markings with Gold Lines - REMOVE EMPTY BOXES */}
+
+
+ {/* Center playing field */}
+
+
+ {/* Content Layer - Game UI */}
+
+ {/* Center Meld/Declaration Area */}
+
+
+ {/* Corner decorative lines */}
+
+
+
+
+
+
+
+ PLAY AREA
+
+
+ {children}
+
+
+ {/* Table Lighting - Spotlight effect */}
+
+
+ {/* Header */}
+
+
+
+ {/* Input */}
+
+ )}
+
+ );
+};
diff --git a/ChatSidebar.jsx b/ChatSidebar.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3da4113ac2b615632ec33bf2f46cee9f950bbaed
--- /dev/null
+++ b/ChatSidebar.jsx
@@ -0,0 +1,256 @@
+import { useState, useEffect, useRef } from 'react';
+import { apiClient } from 'app';
+import { ChatMessage } from 'types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { MessageCircle, X, Send, Lock, MessageSquare, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface Props {
+ tableId: string;
+ currentUserId: string;
+ players: Array<{ userId: string; displayName: string }>;
+}
+
+export default function ChatSidebar({ tableId, currentUserId, players }: Props) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [messages, setMessages] = useState
+
+
+
+
+
+ {/* Messages */}
+
+
+
+
+ {messages.map((msg) => (
+
+
+ {!msg.is_system && (
+
+ ))}
+
+ {msg.user_id === userId ? 'You' : msg.user_email?.split('@')[0] || 'Player'}
+ {msg.private_to && (Private)}
+
+ )}
+
+ {msg.message}
+
+
+ {new Date(msg.created_at).toLocaleTimeString()}
+
+
+
+
+ setNewMessage(e.target.value)}
+ onKeyPress={handleKeyPress}
+ placeholder="Type a message..."
+ disabled={sending}
+ className="flex-1 bg-slate-900 border-slate-700 text-white"
+ />
+
+
+
+ {/* Header */}
+
+
+
+ {/* Input Area */}
+
+ )}
+
+ );
+}
diff --git a/CreateTable.jsx b/CreateTable.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..59fc392527bed6a39e1c29bd3ea1df84662fa40b
--- /dev/null
+++ b/CreateTable.jsx
@@ -0,0 +1,349 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { ArrowLeft, Users, Trophy, Crown, Copy, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import apiclient from '../apiclient';
+import type { CreateTableRequest } from '../apiclient/data-contracts';
+import { useUser } from '@stackframe/react';
+
+interface VariantConfig {
+ id: string;
+ title: string;
+ wildJokerMode: 'no_joker' | 'close_joker' | 'open_joker';
+ description: string;
+ color: string;
+}
+
+const variantConfigs: Record
+
+
+
+
+
+ {/* Messages */}
+
+
+
+
+ {messages.map((msg) => {
+ const isOwnMessage = msg.user_id === currentUserId;
+ const isPrivate = msg.is_private;
+ const isRecipient = msg.recipient_id === currentUserId;
+ const isSender = msg.user_id === currentUserId;
+
+ return (
+
+
+
+ );
+ })}
+
+ {isPrivate &&
+
+ {isPrivate && (isSender || isRecipient) && (
+
+
+ {isSender
+ ? `To: ${players.find(p => p.userId === msg.recipient_id)?.displayName}`
+ : 'Private message'}
+
+ )}
+ {msg.message}
+
+ {recipient && (
+
+
+
+ )}
+
+
+ handleInputChange(e.target.value)}
+ onKeyPress={handleKeyPress}
+ placeholder="Type a message... (@name for private)"
+ className="flex-1"
+ />
+
+
+
+ + Tip: Type @username to send a private message +
+
+ {/* Header */}
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ {variant.title}
+{variant.description}
+
+
+
+
+
+
+
+ {/* Room Code Display */}
+
+
+ Room Created!
+Share this code with your friends
+
+
+
+ {/* Room Details */}
+ Room Code
++ {generatedCode} +
+ +
+
+
+ {/* Actions */}
+
+ Host:
+ {playerName}
+
+
+ Game Mode:
+ {variant.title}
+
+
+ Max Players:
+ {maxPlayers}
+
+
+ Disqualify Score:
+ {disqualifyScore} pts
+
+
+ Ace Value:
+ {aceValue} pt{aceValue === 1 ? '' : 's'}
+
+
+
+
+
+
+ {/* Header */}
+
+ );
+}
diff --git a/GameHistory.jsx b/GameHistory.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..94167c28d1fda42a1742b8cd586511c449a55d7a
--- /dev/null
+++ b/GameHistory.jsx
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { apiClient } from 'app';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { History, X, Trophy, AlertTriangle } from 'lucide-react';
+
+interface Props {
+ tableId: string;
+}
+
+export const GameHistory: React.FC
+
+
+
+
+
+ {variant.title}
+{variant.description}
+
+
+
+
+ Create Private Room
+ +
+ {/* Player Name */}
+
+
+
+ setPlayerName(e.target.value)}
+ placeholder="Enter your name"
+ className="bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500"
+ />
+
+
+ {/* Max Players */}
+
+
+
+
+
+ {/* Disqualification Score */}
+
+
+
+
+
+ {/* Ace Value */}
+ Players reaching this score will be disqualified
+
+
+
+
+ {/* Create Button */}
+
+
+
+
+
+
+ {/* Header */}
+
+ {loading ? (
+
+
+ )}
+
+ );
+};
diff --git a/GameRules.jsx b/GameRules.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7b74a6ab4b1363776ea398d2ac85fff69924b66c
--- /dev/null
+++ b/GameRules.jsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { X, ChevronRight, ChevronDown } from 'lucide-react';
+
+interface Props {
+ defaultOpen?: boolean;
+}
+
+export const GameRules: React.FC
+
+
+
+
+
+ {/* Content */}
+
+
+
+ Loading...
+ ) : history ? (
+
+ {/* Disqualified Players */}
+ {history.disqualified_players?.length > 0 && (
+
+ ) : (
+
+
+
+ {history.disqualified_players.map((p: any) => (
+
+ )}
+
+ {/* Near Disqualification */}
+ {history.near_disqualification?.length > 0 && (
+
+
+ {history.disqualified_players.map((p: any) => (
+
+ {p.email?.split('@')[0]} - {p.cumulative_score} pts
+
+ ))}
+
+
+
+ {history.near_disqualification.map((p: any) => (
+
+ )}
+
+ {/* Round History */}
+
+
+ {history.near_disqualification.map((p: any) => (
+
+ {p.email?.split('@')[0]} - {p.cumulative_score} pts
+
+ ))}
+
+
+ Rounds ({history.total_rounds})
+
+ {history.rounds?.map((round: any) => (
+
+
+
+ ))}
+ Round {round.round}
+
+ {round.players?.map((p: any, idx: number) => (
+
+
+
+ {idx === 0 &&
+ ))}
+ No history available
+ )}
+
+
+ );
+};
diff --git a/HandStrip.jsx b/HandStrip.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a71e7f7cf85f99d9190e72b7a56d1f715690ee11
--- /dev/null
+++ b/HandStrip.jsx
@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import type { RoundMeResponse } from "../apiclient/data-contracts";
+import { PlayingCard } from "./PlayingCard";
+
+export interface Props {
+ hand: RoundMeResponse["hand"];
+ onCardClick?: (card: RoundMeResponse["hand"][number], index: number) => void;
+ selectedIndex?: number;
+ highlightIndex?: number;
+ onReorder?: (reorderedHand: RoundMeResponse["hand"]) => void;
+}
+
+export const HandStrip: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+ Objective
++ Arrange your 13 cards into valid sequences and sets, then declare to win the round. +
+
+
+
+ Valid Melds
+-
+
- + • + Pure Sequence: 3+ consecutive cards of same suit (no jokers). Required to declare! + +
- + • + Impure Sequence: 3+ consecutive cards, jokers allowed. + +
- + • + Set: 3-4 cards of same rank, different suits. + +
+
+
+ Turn Flow
+-
+
- Draw 1 card (from stock or discard pile) +
- Arrange cards into melds if needed +
- Discard 1 card +
- If you have valid melds, click "Declare" to win +
+
+
+ Declaration Rules
+-
+
- • Must have at least 1 pure sequence +
- • Must have at least 2 total sequences/sets +
- • All 13 cards must be in valid melds +
+
+
+ Scoring
+-
+
- • Winner scores 0 points +
- • Others score sum of ungrouped cards (max 80) +
- • A, K, Q, J = 10 points each +
- • Number cards = face value +
- • Jokers = 0 points +
+
+ + Disqualification: First player to reach the target score (default 200) is eliminated. +
+
+
+ );
+};
diff --git a/HistoryTable.jsx b/HistoryTable.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..eca43eb1bcdb4785de55f7cc0addf0ddd6d1d36a
--- /dev/null
+++ b/HistoryTable.jsx
@@ -0,0 +1,121 @@
+import { useState, useEffect } from 'react';
+import { apiClient } from 'app';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Trophy, Users, Crown, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface HistoryEntry {
+ round_number: number;
+ winner_user_id: string | null;
+ winner_name: string | null;
+ disqualified_users: string[];
+ completed_at: string;
+}
+
+interface Props {
+ tableId: string;
+}
+
+export default function HistoryTable({ tableId }: Props) {
+ const [history, setHistory] = useState
+ {hand.map((card, idx) => (
+
+ handleDragStart(e, idx)}
+ onDragOver={(e) => handleDragOver(e, idx)}
+ onDragLeave={handleDragLeave}
+ onDrop={(e) => handleDrop(e, idx)}
+ onDragEnd={handleDragEnd}
+ onTouchStart={(e) => handleTouchStart(e, idx)}
+ onTouchMove={handleTouchMove}
+ onTouchEnd={handleTouchEnd}
+ className={`transition-all duration-200 ${
+ idx === draggedIndex ? 'opacity-50 scale-95' : ''
+ } ${
+ idx === dropTargetIndex ? 'scale-105 ring-2 ring-amber-400' : ''
+ }`}
+ >
+ onCardClick(card, idx) : undefined}
+ selected={selectedIndex === idx}
+ />
+ {idx === highlightIndex && (
+
+ )}
+
+ ))}
+
+
+
+ );
+ }
+
+ if (history.length === 0) {
+ return (
+
+
+ );
+ }
+
+ return (
+ No rounds completed yet
+
+ {history.map((round) => (
+
+
+
+ ))}
+
+
+
+ {/* Winner */}
+ {round.winner_user_id && (
+
+
+
+ {formatTimestamp(round.completed_at)}
+
+
+
+ Round {round.round_number}
+
+
+ )}
+
+ {/* Disqualified Players */}
+ {round.disqualified_users.length > 0 && (
+
+
+ )}
+
+
+ Disqualified:
+
+ {round.disqualified_users.map((userId) => (
+
+ {userId.slice(0, 8)}
+
+ ))}
+
+
+ {/* Header */}
+
+ );
+}
diff --git a/Home.png b/Home.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f8fc16d964e7bcac89a2e1f4efd172642ccc3bb
--- /dev/null
+++ b/Home.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0066c3f61bf1e9e6b47e7ab8190a0b4108fd313a5205de3b7da7e333832c7cc3
+size 319430
diff --git a/PlayerProfile.jsx b/PlayerProfile.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..dab23796bf91750196282e5e0b6b3e091d28f447
--- /dev/null
+++ b/PlayerProfile.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { User } from 'lucide-react';
+
+interface Props {
+ position: string;
+ name: string;
+ profilePic?: string | null;
+ isActive?: boolean;
+ isCurrentUser?: boolean;
+}
+
+export const PlayerProfile: React.FC
+
+
+ {/* Game Variants Grid */}
+
+
+
+
+
+
+
+ {/* Auth Section */}
+ Rummy Room
+Choose your game variant
+
+ {user ? (
+
+
+ {/* Profile Picture */}
+
+ ) : (
+
+ )}
+
+
+
+ {/* User Name */}
+
+
+ {user.displayName || 'Player'}
+
+
+ {user.primaryEmail}
+
+
+
+ {/* Sign Out Button */}
+
+
+
+
+ {gameVariants.map((variant) => (
+ handleSelectVariant(variant.id)}
+ >
+ {/* Gradient Background */}
+
+
+
+ ))}
+
+
+ {/* Join Table Section */}
+
+ {/* Icon */}
+
+
+ {variant.icon}
+
+
+ {/* Title */}
+ {variant.title}
+ + {/* Description */} +{variant.description}
+ + {/* Features */} +-
+ {variant.features.map((feature, idx) => (
+
- + + {feature} + + ))} +
+
+
+
+
+
+
+ Join a Friend's Game
+Enter the 6-letter room code shared by your friend
+
+
+
+
+
+
+
+ Join Room
+Enter details to join the table
+
+
+
+
+ setPlayerName(e.target.value)}
+ placeholder="Enter your name"
+ className="bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500"
+ />
+
+
+
+
+ setRoomCode(e.target.value.toUpperCase())}
+ placeholder="Enter 6-letter code"
+ maxLength={6}
+ className="bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500 uppercase tracking-wider text-lg font-mono text-center"
+ />
+
+
+
+
+ {!user && (
+ Please sign in to join a room
+ )} +
+ {/* Avatar with Profile Picture */}
+
+ );
+};
diff --git a/PlayingCard.jsx b/PlayingCard.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4f5ffee2cb456a67c6a46812be23637d57788000
--- /dev/null
+++ b/PlayingCard.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+import type { CardView } from "../apiclient/data-contracts";
+
+export interface Props {
+ card: CardView;
+ onClick?: () => void;
+ selected?: boolean;
+}
+
+const suitSymbols: Record
+ {profilePic ? (
+ 
+ ) : (
+
+
+ {/* Name */}
+
+
+
+ {/* Active Turn Indicator */}
+ {isActive && (
+
+ )}
+ + {name} +
++ {position} +
+
+
+ );
+};
diff --git a/PointsTable.jsx b/PointsTable.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..afc3255772e01cf533a9ba323dca6c1e432324ec
--- /dev/null
+++ b/PointsTable.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { ChevronDown, ChevronUp, Trophy } from 'lucide-react';
+import type { TableInfoResponse } from '../apiclient/data-contracts';
+
+export interface Props {
+ info: TableInfoResponse;
+ roundHistory: Array<{
+ round_number: number;
+ winner_user_id: string | null;
+ scores: Record
+ {isJoker ? (
+
+
+
+ ) : (
+ <>
+ ★
+ JOKER
+
+ {card.rank}
+
+
+ {suitSymbol}
+
+
+ {card.rank}
+
+
+ {card.rank}
+
+
+ )}
+
+ {/* Header */}
+
+
+ {/* Content */}
+ {isOpen && (
+
+ );
+};
diff --git a/ProfileCard.jsx b/ProfileCard.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c3523610262bf4a4662f314b0e82ff6f92d4b86
--- /dev/null
+++ b/ProfileCard.jsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from "react";
+import apiclient from "../apiclient";
+import type { GetMyProfileData } from "../apiclient/data-contracts";
+import { useUser } from "@stackframe/react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+export interface Props {}
+
+export const ProfileCard: React.FC
+
+ )}
+
+
+
+
+
+ | Player | + {roundHistory.map((round, idx) => ( ++ R{round.round_number} + | + ))} ++ Total + | +
|---|---|---|
|
+
+ {player.display_name || 'Player'}
+
+ |
+ {roundHistory.map((round, idx) => {
+ const isWinner = round.winner_user_id === player.user_id;
+ const roundScore = round.scores[player.user_id] || 0;
+ return (
+
+
+
+ {roundScore}
+
+ {isWinner &&
+ |
+ );
+ })}
+ + + {totalScore} + + | +
+
+ );
+ }
+
+ return (
+
+
+ Sign in to manage your profile.
+ +
+
+ );
+};
diff --git a/ScoreboardModal.jsx b/ScoreboardModal.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..89d242ffc4b4eeefe6db84c9986d112f8a93a8f8
--- /dev/null
+++ b/ScoreboardModal.jsx
@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trophy, Crown } from "lucide-react";
+import { PlayingCard } from "./PlayingCard";
+import type { RevealedHandsResponse } from "../apiclient/data-contracts";
+import { toast } from 'sonner';
+import apiclient from '../apiclient';
+
+export interface Props {
+ isOpen: boolean;
+ onClose: () => void;
+ data: RevealedHandsResponse | null;
+ players: Array<{ user_id: string; display_name?: string | null }>;
+ currentUserId: string;
+ tableId: string;
+ hostUserId: string;
+ onNextRound?: () => void;
+}
+
+export const ScoreboardModal: React.FC
+
+ {error && Your Profile
+ {loading && Loading…} +{error}
} +
+
+
+
+
+
+ {profile && (
+ User ID: {profile.user_id}
+ )} +
+ {/* Eliminated Player - Request to Spectate */}
+ {isEliminated && (
+
+ );
+}
diff --git a/Table.jsx b/Table.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7d1183d93a2c8a307dec29a14574b53c96b0778b
--- /dev/null
+++ b/Table.jsx
@@ -0,0 +1,2081 @@
+
+
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import apiclient from "../apiclient";
+import type { GetTableInfoParams, TableInfoResponse, StartGameRequest, GetRoundMeParams, RoundMeResponse, DrawRequest, DiscardRequest, DiscardCard, DeclareRequest, ScoreboardResponse, RoundScoreboardParams, GetRevealedHandsParams, RevealedHandsResponse, LockSequenceRequest, GrantSpectateRequest } from "../apiclient/data-contracts";
+import { Copy, Check, Crown, User2, Play, ArrowDown, Trash2, Trophy, X, ChevronDown, ChevronUp, LogOut, Mic, MicOff, UserX, Eye } from "lucide-react";
+import { toast } from "sonner";
+import { HandStrip } from "components/HandStrip";
+import { useUser } from "@stackframe/react";
+import { TableDiagram } from "components/TableDiagram";
+import { GameRules } from 'components/GameRules';
+import { CasinoTable3D } from 'components/CasinoTable3D';
+import { PlayerProfile } from 'components/PlayerProfile';
+import { PlayingCard } from "components/PlayingCard";
+import { Button } from "@/components/ui/button";
+import { ScoreboardModal } from "components/ScoreboardModal";
+import { WildJokerRevealModal } from "components/WildJokerRevealModal";
+import { PointsTable } from "components/PointsTable";
+import { parseCardCode } from "utils/cardCodeUtils";
+import ChatSidebar from "components/ChatSidebar";
+import VoicePanel from 'components/VoicePanel';
+import SpectateControls from 'components/SpectateControls';
+import HistoryTable from 'components/HistoryTable';
+
+// CardBack component with red checkered pattern
+const CardBack = ({ className = "" }: { className?: string }) => (
+
+
+ )}
+
+ {/* Host - Pending Spectate Requests */}
+ {isHost && spectateRequests.length > 0 && (
+
+
+ You've been eliminated
++ Request permission from the host to spectate the remaining players +
+ +
+
+ )}
+
+
+ Spectate Requests
+ + {spectateRequests.length} + +
+ {spectateRequests.map((userId) => (
+
+
+ {getUserName(userId)}
+
+ ))}
+
+
+
+
+
+
+);
+
+// Helper component for a 3-card meld slot box
+interface MeldSlotBoxProps {
+ title: string;
+ slots: (RoundMeResponse["hand"][number] | null)[];
+ setSlots: (slots: (RoundMeResponse["hand"][number] | null)[]) => void;
+ myRound: RoundMeResponse | null;
+ setMyRound: (round: RoundMeResponse) => void;
+ isLocked?: boolean;
+ onToggleLock?: () => void;
+ tableId: string;
+ onRefresh: () => void;
+ hideLockButton?: boolean;
+ gameMode?: string; // Add game mode prop
+}
+
+const MeldSlotBox = ({ title, slots, setSlots, myRound, setMyRound, isLocked = false, onToggleLock, tableId, onRefresh, hideLockButton, gameMode }: MeldSlotBoxProps) => {
+ const [locking, setLocking] = useState(false);
+ const [showRevealModal, setShowRevealModal] = useState(false);
+ const [revealedRank, setRevealedRank] = useState
+
+
+
+
+
+ {/* Wild Joker Reveal Modal */}
+ {revealedRank && (
+
+
+ {title} (3 cards)
+
+ {/* Only show lock button if game mode uses wild jokers */}
+ {!isLocked && gameMode !== 'no_joker' && (
+
+ )}
+ {onToggleLock && (
+
+ )}
+
+
+ {slots.map((card, i) => (
+
+ { e.preventDefault(); e.currentTarget.classList.add('ring-2', 'ring-purple-400'); }}
+ onDragLeave={(e) => { e.currentTarget.classList.remove('ring-2', 'ring-purple-400'); }}
+ onDrop={(e) => {
+ e.preventDefault();
+ e.currentTarget.classList.remove('ring-2', 'ring-purple-400');
+ const cardData = e.dataTransfer.getData('card');
+ if (cardData) handleSlotDrop(i, cardData);
+ }}
+ onClick={() => handleSlotClick(i)}
+ className="w-[60px] h-[84px] border-2 border-dashed border-muted-foreground/20 rounded bg-background/50 flex items-center justify-center cursor-pointer hover:border-purple-400/50 transition-all"
+ >
+ {card ? (
+
+ ))}
+
+ {}} />
+
+ ) : (
+ {i + 1}
+ )}
+
+
+
+ {/* Wild Joker Reveal Modal */}
+ {revealedRank && (
+
+
+ Leftover / 4-Card Seq
+
+ {/* Only show lock button if game mode uses wild jokers */}
+ {!isLocked && gameMode !== 'no_joker' && (
+
+ )}
+ {onToggleLock && (
+
+ )}
+
+
+ {slots.map((card, i) => (
+
+ { e.preventDefault(); e.currentTarget.classList.add('ring-2', 'ring-blue-400'); }}
+ onDragLeave={(e) => { e.currentTarget.classList.remove('ring-2', 'ring-blue-400'); }}
+ onDrop={(e) => {
+ e.preventDefault();
+ e.currentTarget.classList.remove('ring-2', 'ring-blue-400');
+ const cardData = e.dataTransfer.getData('card');
+ if (cardData) handleSlotDrop(i, cardData);
+ }}
+ onClick={() => handleSlotClick(i)}
+ className="w-[60px] h-[84px] border-2 border-dashed border-muted-foreground/20 rounded bg-background/50 flex items-center justify-center cursor-pointer hover:border-blue-400/50 transition-all"
+ >
+ {card ? (
+
+ ))}
+
+ {}} />
+
+ ) : (
+ {i + 1}
+ )}
+
+
+ );
+ }
+
+ return (
+
+
+ Missing tableId.
+ +
+
+ );
+}
diff --git a/TableDiagram.jsx b/TableDiagram.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..cbfb470a80711c80321ccaf611cef2650eda88a6
--- /dev/null
+++ b/TableDiagram.jsx
@@ -0,0 +1,90 @@
+import React from "react";
+import type { PlayerInfo } from "../apiclient/data-contracts";
+import { User2 } from "lucide-react";
+
+export interface Props {
+ players: PlayerInfo[];
+ activeUserId?: string | null;
+ currentUserId?: string;
+}
+
+export const TableDiagram: React.FC
+ {/* Collapsible Game Rules - positioned top right */}
+
+
+ setShowScoreboardModal(false)}
+ data={revealedHands}
+ players={info?.players || []}
+ currentUserId={user?.id || ''}
+ tableId={tableId || ''}
+ hostUserId={info?.host_user_id || ''}
+ onNextRound={() => {
+ setShowScoreboardModal(false);
+ onNextRound();
+ }}
+ />
+
+ {/* Side Panel for Scoreboard - Legacy */}
+ {showScoreboardPanel && revealedHands && (
+ ({
+ userId: p.user_id,
+ displayName: p.display_name || p.user_id.slice(0, 6)
+ }))}
+ />
+ )}
+
+ {/* Voice Panel - Fixed position */}
+ {user && info && tableId && (
+
+
+
+
+ {/* Responsive Layout: Single column on mobile, two columns on desktop */}
+ Table
+
+ {/* Voice Mute Toggle */}
+ {info?.status === 'playing' && (
+
+ )}
+
+ {/* Drop Game Button (only before first draw) */}
+ {info?.status === 'playing' && !hasDrawn && (
+
+ )}
+
+
+
+
+ {/* Main Game Area */}
+
+
+ {/* Scoreboard Modal */}
+
+ {loading &&
+
+ {/* Sidebar - Table Info with Round History */}
+ {tableInfoVisible && (
+ Loading…
} + {!loading && info && ( +
+
+ )}
+
+
+
+
+
+
+ Room Code
+{info.code}
+
+
+
+ {info.current_round_number && myRound && (
+ Players
+
+ {info.players.map((p) => (
+
+
+
+ ))}
+
+
+
+
+ {p.user_id === info.host_user_id && (
+
+ Seat {p.seat}
+{p.display_name || p.user_id.slice(0,6)}
+
+
+ {/* Player Positions Around Table - Only show if player exists */}
+
+
+ {/* Meld Grouping Zone - Outside the 3D table with clean design */}
+
+ )}
+
+ {/* Scoreboard Display */}
+ {scoreboard && info?.status === "finished" && (
+
+
+
+ {/* Table Color Picker */}
+
+
+ Round #{info.current_round_number}
+ {isMyTurn ? ( +Your turn!
+ ) : ( +Wait for your turn
+ )} +
+
+
+ Stock: {myRound.stock_count}
+
+ {myRound.discard_top && (
+
+ Discard Top: {myRound.discard_top}
+
+ )}
+
+ Wild Joker:{" "}
+ {myRound.wild_joker_revealed ? (
+ {myRound.wild_joker_rank}
+ ) : (
+ ???
+ )}
+
+
+ Table Color:
+
+
+ {/* 3D Casino Table - Contains ONLY Stock, Discard, Wild Joker */}
+
+ {/* Top players (P2, P3, P4) */}
+
+
+ {/* Cards ON the Table Surface - HORIZONTAL ROW */}
+
+ {info?.players?.[1] &&
+
+ {/* Left player (P1) */}
+ {info?.players?.[0] && (
+
+
+ )}
+
+ {/* Right player (P5) */}
+ {info?.players?.[4] && (
+
+
+ )}
+
+ {/* Bottom player (current user) */}
+
+
+
+
+
+ {/* Stock Pile - NOW CLICKABLE */}
+
+
+
+
+
+ {/* Wild Joker Card - only show if game mode uses wild jokers */}
+ {info?.game_mode !== 'no_joker' && (
+
+
+ STOCK PILE
+ {myRound.stock_count > 0 && ( +
+ {myRound.stock_count} cards
+
+ )}
+
+
+ )}
+
+ {/* Discard Pile */}
+
+ {myRound.wild_joker_revealed && myRound.wild_joker_rank ? (
+
+
+ {myRound.wild_joker_rank}
+ All {myRound.wild_joker_rank}s
+
+ ) : (
+
+ 🃏
+
+ )}
+ + {myRound.wild_joker_revealed ? ( + WILD JOKER + ) : ( + WILD JOKER + )} +
+
+
+
+ DISCARD PILE
+
+ toggleMeldLock('leftover')}
+ tableId={tableId}
+ onRefresh={refresh}
+ gameMode={info?.game_mode}
+ />
+
+ {/* Clear melds button only */}
+ {hasDrawn && (
+
+
+ {/* Hand */}
+ + {hasDrawn ? "Organize your 13 cards into melds (drag cards to slots)" : "Organize melds (draw a card first)"} +
+ + {/* Three 3-card meld boxes */} +
+ {/* Meld 1 - with lock button */}
+ toggleMeldLock('meld1')}
+ tableId={tableId}
+ onRefresh={refresh}
+ gameMode={info?.game_mode}
+ />
+ {/* Meld 2 - no lock button */}
+ toggleMeldLock('meld2')}
+ tableId={tableId}
+ onRefresh={refresh}
+ hideLockButton={true}
+ gameMode={info?.game_mode}
+ />
+ {/* Meld 3 - no lock button */}
+ toggleMeldLock('meld3')}
+ tableId={tableId}
+ onRefresh={refresh}
+ hideLockButton={true}
+ gameMode={info?.game_mode}
+ />
+
+
+ {/* Leftover cards */}
+
+
+
+ )}
+
+ c.rank === selectedCard.rank && c.suit === selectedCard.suit
+ ) : undefined}
+ highlightIndex={lastDrawnCard ? availableHand.findIndex(
+ c => c.rank === lastDrawnCard.rank && c.suit === lastDrawnCard.suit
+ ) : undefined}
+ onReorder={onReorderHand}
+ />
+
+ {/* Discard Button - Only shown when card is selected */}
+ {isMyTurn && hasDrawn && selectedCard && (
+
+
+ {/* Declare & Discard Actions - When turn is active */}
+ {isMyTurn && hasDrawn && (
+ + Your Hand ({availableHand.length} cards) + {lastDrawnCard && ★ New card highlighted} +
+
+
+ )}
+ + ✓ Card selected - Click to discard +
+ +
+
+ )}
+ Organize 13 cards into valid melds, then declare. The 14th card will be auto-discarded.
+
+
+ {selectedCard && (
+
+ )}
+
+
+
+ )}
+
+ {/* Show Next Round button if user is host and round is complete */}
+ {info?.status === 'round_complete' && info?.host_id === user?.id && (
+
+
+
+ {/* Next Round Button */}
+ {user && info.host_user_id === user.id && (
+
+
+
+ {scoreboard.winner_user_id && (
+ Round #{scoreboard.round_number} Complete!
+
+
+ )}
+
+ + 🎉 Winner: {info.players.find(p => p.user_id === scoreboard.winner_user_id)?.display_name || "Unknown"} +
+
+
+
+
+
+ | Player | +Points | +
|---|---|
|
+
+ {isWinner &&
+ |
+ + {score.points} + | +
+
+
+ )}
+ {user && info.host_user_id !== user.id && (
+ Waiting for host to start next round...
+ )} +
+
+
+ )}
+
+ {/* Header with Minimize/Close */}
+
+ )}
+
+ {/* Show Table Info button when closed */}
+ {!tableInfoVisible && (
+
+ )}
+
+ {/* Spectate Requests Panel (Host Only) */}
+ {info?.host_user_id === user?.id && spectateRequests.length > 0 && (
+
+
+
+ {/* Content - only show when not minimized */}
+ {!tableInfoMinimized && (
+ + {tableInfoMinimized ? 'Table' : 'Table Info'} +
+
+
+
+
+
+ {loading &&
+ )}
+ Loading…
} + {!loading && info && ( + <> + {/* Room Code */} +
+
+
+ {/* Players */}
+ Room Code
+
+
+
+ {info.code}
+
+
+
+
+
+ {/* Status */}
+ Players ({info.players.length})
+
+ {info.players.map((p) => (
+
+
+
+ ))}
+
+
+
+
+ {p.user_id === info.host_user_id && (
+
+ Seat {p.seat}
+{p.display_name || p.user_id.slice(0,6)}
+
+
+
+ {/* Round History & Points Table */}
+ {roundHistory.length > 0 && (
+ Status: {info?.status ?? "-"}
+ {user && info.host_user_id === user.id && ( + + )} + {info && info.status === "waiting" && user && user.id !== info.host_user_id && ( +Waiting for host to start...
+ )} +
+
+ )}
+
+ )}
+ Round History
+
+
+
+
+
+ | Player | + {roundHistory.map((round, idx) => ( ++ R{round.round_number} + | + ))} ++ Total + | +
|---|---|---|
|
+
+ {player.display_name || 'Player'}
+
+ |
+ {roundHistory.map((round, idx) => {
+ const isWinner = round.winner_user_id === player.user_id;
+ const roundScore = round.scores[player.user_id] || 0;
+ runningTotal += roundScore;
+ return (
+
+
+
+ {roundScore}
+
+ {isWinner &&
+ |
+ );
+ })}
+ + {runningTotal} + | +
+
+ )}
+ Spectate Requests
+
+ {spectateRequests.map(userId => (
+
+
+ {userId.slice(0, 8)}...
+
+ ))}
+
+
+
+
+
+
+ )}
+
+ {/* Chat Sidebar - Fixed position */}
+ {user && info && tableId && (
+
+
+
+
+
+ {/* Round Scores */}
+ Round Results
+ +
+
+
+ {/* All Players' Hands */}
+ Scores
+ {Object.entries(revealedHands.scores || {}).map(([uid, score]: [string, any]) => { + const playerName = revealedHands.player_names?.[uid] || "Unknown"; + return ( +
+
+ {playerName}
+
+
+ {score} pts
+
+
+ );
+ })}
+
+ {Object.entries(revealedHands.organized_melds || {}).map(([uid, melds]: [string, any]) => {
+ const playerName = revealedHands.player_names?.[uid] || "Unknown";
+ const playerScore = revealedHands.scores?.[uid] || 0;
+ const isWinner = playerScore === 0;
+
+ return (
+
+
+ {/* Next Round Button */}
+ {revealedHands.can_start_next && (
+
+ )}
+
+
+ );
+ })}
+
+
+
+ {melds && melds.length > 0 ? (
+ + {playerName} + {isWinner && " 🏆"} +
+ + {playerScore} pts + +
+ {melds.map((meld: any, idx: number) => {
+ const meldType = meld.type || "unknown";
+ let bgColor = "bg-gray-700";
+ let borderColor = "border-gray-600";
+ let label = "Cards";
+
+ if (meldType === "pure") {
+ bgColor = "bg-blue-900/40";
+ borderColor = "border-blue-500";
+ label = "Pure Sequence";
+ } else if (meldType === "impure") {
+ bgColor = "bg-purple-900/40";
+ borderColor = "border-purple-500";
+ label = "Impure Sequence";
+ } else if (meldType === "set") {
+ bgColor = "bg-orange-900/40";
+ borderColor = "border-orange-500";
+ label = "Set";
+ }
+
+ return (
+
+ ) : (
+
+
+ );
+ })}
+ {label}
+
+ {(meld.cards || []).map((card: any, cardIdx: number) => (
+
+
+ {card.name || card.code || "??"}
+
+ ))}
+ No melds
+ )}
+
+ {/* Player positions around the table */}
+ {players.map((player) => {
+ const { x, y } = getSeatPosition(player.seat, players.length);
+ const isActive = player.user_id === activeUserId;
+ const isCurrent = player.user_id === currentUserId;
+
+ return (
+
+ );
+};
diff --git a/VoiceControls.jsx b/VoiceControls.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e738c4be0d7749235ebdc0bdb5530b46598d1224
--- /dev/null
+++ b/VoiceControls.jsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Mic, MicOff, Video, VideoOff, PhoneOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface Props {
+ tableId: string;
+ onToggleAudio: (enabled: boolean) => void;
+ onToggleVideo: (enabled: boolean) => void;
+}
+
+export const VoiceControls: React.FC
+
+ );
+ })}
+
+
+
+ {player.profile_image_url ? (
+ 
+ ) : (
+
+
+
+ {isActive && (
+
+ )}
+
+ {isCurrent ? "You" : player.display_name?.slice(0, 10) || `Player ${player.seat}`}
+
+ Seat {player.seat}
+
+ {/* Audio Toggle */}
+
+
+ {/* Video Toggle */}
+
+
+ );
+};
diff --git a/VoicePanel.jsx b/VoicePanel.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..434ac8daa0d05e7cdc6775a1e64e3ceb1282b6cc
--- /dev/null
+++ b/VoicePanel.jsx
@@ -0,0 +1,276 @@
+import { useState, useEffect } from 'react';
+import { apiClient } from 'app';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Phone, PhoneOff, Mic, MicOff, Volume2, X, Users, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface Participant {
+ user_id: string;
+ display_name: string;
+ is_muted: boolean;
+ is_speaking: boolean;
+}
+
+interface Props {
+ tableId: string;
+ currentUserId: string;
+ isHost: boolean;
+ players: Array<{ user_id: string; display_name?: string | null }>;
+}
+
+export default function VoicePanel({ tableId, currentUserId, isHost, players }: Props) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [inCall, setInCall] = useState(false);
+ const [participants, setParticipants] = useState
+ {/* Header */}
+
+ {!inCall && (
+
+
+ {/* Footer Controls */}
+
+ );
+}
diff --git a/WildJokerRevealModal.jsx b/WildJokerRevealModal.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd02e2808fe1c1b968a7f5c95f140adc600e4823
--- /dev/null
+++ b/WildJokerRevealModal.jsx
@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from "react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+interface Props {
+ isOpen: boolean;
+ onClose: () => void;
+ wildJokerRank: string;
+}
+
+export const WildJokerRevealModal: React.FC
+
+
+ {/* Participants List */}
+
+
+
+ Voice Call
+ {inCall && ( + + Live + + )} +
+
+ )}
+ {inCall && participants.length === 0 && (
+ Join the voice call to see participants
+
+
+ )}
+ {inCall && participants.length > 0 && (
+ Waiting for others to join...
+
+ {participants.map((participant) => {
+ const isMe = participant.user_id === currentUserId;
+ return (
+
+ )}
+
+
+ );
+ })}
+
+ {/* Avatar with speaking indicator */}
+
+
+ {/* Mute controls */}
+
+
+
+ {/* Name */}
+
+
+ {(participant.display_name || participant.user_id).slice(0, 2).toUpperCase()}
+
+
+ {participant.is_speaking && (
+
+
+ + {participant.display_name || participant.user_id.slice(0, 8)} + {isMe && ' (You)'} +
+ {participant.is_speaking && ( +Speaking...
+ )} +
+ {participant.is_muted ? (
+
+
+ {/* Host controls */}
+ {isHost && inCall && (
+
+ )}
+
+ {/* Main call controls */}
+
+
+ {inCall && (
+
+ )}
+
+
+