@dreamboard-games/sdk 0.2.0

package/src/ui/components/GameEndDisplay.tsx

@@ -0,0 +1,398 @@
+/**
+ * End-of-game winner display and scoreboard overlay.
+ *
+ * Visual styling derives entirely from the active {@link useTheme}
+ * (semantic + intent + elevation tokens). The win moment is the
+ * Peak-end anchor of the session, so the surface intentionally pushes
+ * the loudest theme signals (display typeface, primary intent,
+ * elevation.overlay) without inventing one-off colours.
+ */
+
+import { motion } from "framer-motion";
+import { Trophy, Home, Crown, Medal } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogTitle } from "../internal/ui/dialog.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+import {
+  chipStyle,
+  intentForVariant,
+  surfaceStyle,
+  type ButtonVariant,
+} from "../theme/derive.js";
+import type { Theme } from "../theme/tokens.js";
+import { ThemedButton } from "./ThemedButton.js";
+
+export interface PlayerScore {
+  playerId: string;
+  name: string;
+  score: number;
+  isWinner?: boolean;
+  details?: Record<string, number>;
+}
+
+export interface GameEndDisplayProps {
+  isGameOver: boolean;
+  /** Sorted by rank */
+  scores: PlayerScore[];
+  winnerMessage?: string;
+  showDetails?: boolean;
+  onReturnToLobby?: () => void;
+  className?: string;
+}
+
+function rankIntent(rank: number): ButtonVariant {
+  if (rank === 1) return "warning"; // gold
+  if (rank === 2) return "secondary"; // silver
+  if (rank === 3) return "info"; // bronze-ish (no bronze in palette)
+  return "secondary";
+}
+
+function RankIcon({ rank, theme }: { rank: number; theme: Theme }) {
+  const intent = intentForVariant(theme, rankIntent(rank));
+  if (rank === 1) {
+    return (
+      <Trophy
+        width={20}
+        height={20}
+        strokeWidth={3}
+        aria-hidden="true"
+        style={{ color: intent.solid }}
+      />
+    );
+  }
+  if (rank === 2 || rank === 3) {
+    return (
+      <Medal
+        width={20}
+        height={20}
+        strokeWidth={2.5}
+        aria-hidden="true"
+        style={{ color: intent.solid }}
+      />
+    );
+  }
+  return (
+    <span
+      style={{
+        width: 20,
+        textAlign: "center",
+        color: theme.semantic.text.muted,
+        fontFamily: theme.typography.fontFamily.tabular,
+        fontWeight: theme.typography.fontWeight.bold,
+      }}
+    >
+      #{rank}
+    </span>
+  );
+}
+
+export function GameEndDisplay({
+  isGameOver,
+  scores,
+  winnerMessage,
+  showDetails = false,
+  onReturnToLobby,
+  className,
+}: GameEndDisplayProps) {
+  const theme = useTheme();
+  const reducedMotion = theme.motion.reducedMotion === "true";
+  const [isOpen, setIsOpen] = useState(isGameOver);
+
+  useEffect(() => {
+    setIsOpen(isGameOver);
+  }, [isGameOver]);
+
+  if (!isGameOver) return null;
+
+  const winner = scores.find((s) => s.isWinner) || scores[0];
+  const sortedScores = [...scores].sort((a, b) => b.score - a.score);
+  const winningIntent = theme.semantic.intent.warning;
+  const title = `${winner?.name ?? "Game"} Wins!`;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent
+        className={`border-0 p-6 text-center shadow-none sm:max-w-lg ${className ?? ""}`}
+        overlayClassName="bg-black/50 backdrop-blur-md"
+        aria-describedby={undefined}
+        style={{
+          ...surfaceStyle(theme, { tone: "sheet", radius: "hud" }),
+          width: "100%",
+          maxWidth: 480,
+          padding: `${theme.space[8]} ${theme.space[6]}`,
+          textAlign: "center",
+          boxShadow: theme.elevation.overlay,
+          overflow: "hidden",
+          backgroundImage: `radial-gradient(circle at top, ${winningIntent.soft} 0%, ${theme.semantic.surface.sheet} 60%)`,
+          fontFamily: theme.typography.fontFamily.body,
+        }}
+      >
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+
+        {/* Trophy badge */}
+        <motion.div
+          initial={
+            reducedMotion
+              ? { scale: 1 }
+              : { scale: 0.95, rotate: -180, opacity: 0 }
+          }
+          animate={
+            reducedMotion ? { scale: 1 } : { scale: 1, rotate: 0, opacity: 1 }
+          }
+          transition={{
+            type: "spring",
+            stiffness: 200,
+            damping: 15,
+            delay: reducedMotion ? 0 : 0.2,
+          }}
+          style={{
+            marginBottom: theme.space[6],
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 96,
+            height: 96,
+            borderRadius: theme.radius.pill,
+            background: winningIntent.soft,
+            border: `3px solid ${winningIntent.border}`,
+            boxShadow: theme.elevation.lifted,
+          }}
+        >
+          <Trophy
+            width={48}
+            height={48}
+            strokeWidth={2.5}
+            aria-hidden="true"
+            style={{ color: winningIntent.solid }}
+          />
+        </motion.div>
+
+        <motion.div
+          initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 10 }}
+          animate={reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+          transition={{ delay: reducedMotion ? 0 : 0.4 }}
+        >
+          <h2
+            aria-hidden="true"
+            style={{
+              margin: 0,
+              fontFamily: theme.typography.fontFamily.display,
+              fontSize: theme.typography.fontSize["3xl"],
+              fontWeight: theme.typography.fontWeight.bold,
+              color: theme.semantic.text.primary,
+              marginBottom: theme.space[2],
+              lineHeight: theme.typography.lineHeight.tight,
+            }}
+          >
+            {title}
+          </h2>
+          {winnerMessage && (
+            <p
+              style={{
+                margin: 0,
+                marginBottom: theme.space[6],
+                display: "inline-block",
+                ...chipStyle(theme, { variant: "warning", size: "md" }),
+                fontSize: theme.typography.fontSize.sm,
+              }}
+            >
+              {winnerMessage}
+            </p>
+          )}
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: reducedMotion ? 0 : 0.6 }}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: theme.space[3],
+            marginBottom: theme.space[8],
+            textAlign: "left",
+          }}
+          role="list"
+          aria-label="Final scores"
+        >
+          {sortedScores.map((player, index) => {
+            const rank = index + 1;
+            const intent = intentForVariant(theme, rankIntent(rank));
+            const isWinner = player.isWinner ?? rank === 1;
+            return (
+              <motion.div
+                key={player.playerId}
+                initial={
+                  reducedMotion ? { opacity: 0 } : { opacity: 0, x: -20 }
+                }
+                animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x: 0 }}
+                transition={{
+                  delay: reducedMotion ? 0 : 0.6 + index * 0.1,
+                }}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: theme.space[3],
+                  background: isWinner
+                    ? intent.soft
+                    : theme.semantic.surface.card,
+                  border: `1px solid ${
+                    isWinner ? intent.border : theme.semantic.border.subtle
+                  }`,
+                  borderRadius: theme.radius.lg,
+                  boxShadow: isWinner
+                    ? theme.elevation.hover
+                    : theme.elevation.rest,
+                }}
+                role="listitem"
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: theme.space[3],
+                  }}
+                >
+                  <RankIcon rank={rank} theme={theme} />
+                  <span
+                    style={{
+                      fontFamily: theme.typography.fontFamily.body,
+                      fontSize: theme.typography.fontSize.lg,
+                      fontWeight: theme.typography.fontWeight.bold,
+                      color: isWinner
+                        ? intent.onSoft
+                        : theme.semantic.text.primary,
+                    }}
+                  >
+                    {player.name}
+                  </span>
+                  {isWinner && (
+                    <Crown
+                      width={20}
+                      height={20}
+                      strokeWidth={3}
+                      aria-label="Winner"
+                      style={{ color: intent.solid }}
+                    />
+                  )}
+                </div>
+                <span
+                  style={{
+                    fontFamily: theme.typography.fontFamily.tabular,
+                    fontSize: theme.typography.fontSize["2xl"],
+                    fontWeight: theme.typography.fontWeight.bold,
+                    color: isWinner
+                      ? intent.onSoft
+                      : theme.semantic.text.primary,
+                    paddingInline: theme.space[2],
+                    paddingBlock: theme.space[0.5],
+                    background: theme.semantic.surface.inset,
+                    borderRadius: theme.radius.md,
+                    border: `1px solid ${theme.semantic.border.subtle}`,
+                  }}
+                >
+                  {player.score}
+                </span>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+
+        {showDetails && winner?.details && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: reducedMotion ? 0 : 0.8 }}
+            style={{
+              marginBottom: theme.space[8],
+              padding: theme.space[4],
+              background: theme.semantic.surface.inset,
+              border: `1px dashed ${theme.semantic.border.default}`,
+              borderRadius: theme.radius.lg,
+              textAlign: "left",
+            }}
+          >
+            <h3
+              style={{
+                margin: 0,
+                marginBottom: theme.space[3],
+                fontFamily: theme.typography.fontFamily.display,
+                fontSize: theme.typography.fontSize.md,
+                fontWeight: theme.typography.fontWeight.bold,
+                color: theme.semantic.text.primary,
+                display: "flex",
+                alignItems: "center",
+                gap: theme.space[2],
+              }}
+            >
+              <span
+                style={{
+                  width: 8,
+                  height: 8,
+                  background: theme.semantic.intent.primary.solid,
+                  borderRadius: theme.radius.pill,
+                  display: "inline-block",
+                }}
+              />
+              Score Breakdown
+            </h3>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.space[2],
+              }}
+            >
+              {Object.entries(winner.details).map(([key, value]) => (
+                <div
+                  key={key}
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    fontSize: theme.typography.fontSize.md,
+                    color: theme.semantic.text.primary,
+                  }}
+                >
+                  <span style={{ textTransform: "capitalize" }}>
+                    {key.replace(/([A-Z])/g, " $1")}
+                  </span>
+                  <span
+                    style={{
+                      fontFamily: theme.typography.fontFamily.tabular,
+                      fontWeight: theme.typography.fontWeight.bold,
+                    }}
+                  >
+                    {value}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        )}
+
+        {onReturnToLobby && (
+          <motion.div
+            initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 10 }}
+            animate={reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            transition={{ delay: reducedMotion ? 0 : 1 }}
+            style={{ display: "flex", justifyContent: "center" }}
+          >
+            <ThemedButton
+              type="button"
+              variant="primary"
+              size="lg"
+              onClick={onReturnToLobby}
+              style={{
+                gap: theme.space[2],
+              }}
+            >
+              <Home size={20} strokeWidth={3} aria-hidden="true" />
+              Return to Lobby
+            </ThemedButton>
+          </motion.div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/ui/components/GameSkeleton.tsx

@@ -0,0 +1,260 @@
+/**
+ * GameSkeleton - Loading state component
+ *
+ * Displays animated placeholders while game content loads
+ */
+
+import { motion } from "framer-motion";
+import { clsx } from "clsx";
+import { Loader2 } from "lucide-react";
+
+const CARD_SKELETON_KEYS = ["card-1", "card-2", "card-3", "card-4", "card-5"];
+const PLAYER_SKELETON_KEYS = ["player-1", "player-2", "player-3", "player-4"];
+const HAND_SKELETON_KEYS = [
+  "hand-card-1",
+  "hand-card-2",
+  "hand-card-3",
+  "hand-card-4",
+  "hand-card-5",
+  "hand-card-6",
+];
+
+export interface GameSkeletonProps {
+  variant?: "default" | "cards" | "players" | "minimal";
+  message?: string;
+  className?: string;
+}
+function SkeletonBox({
+  className,
+  animate = true,
+}: {
+  className?: string;
+  animate?: boolean;
+}) {
+  return (
+    <motion.div
+      className={clsx("bg-slate-200 rounded", className)}
+      animate={
+        animate
+          ? {
+              opacity: [0.5, 1, 0.5],
+            }
+          : undefined
+      }
+      transition={{
+        duration: 1.5,
+        repeat: Infinity,
+        ease: "easeInOut",
+      }}
+      aria-hidden="true"
+    />
+  );
+}
+
+function CardSkeleton({ size = "md" }: { size?: "sm" | "md" | "lg" }) {
+  const sizeClasses = {
+    sm: "w-16 h-24 sm:w-20 sm:h-28",
+    md: "w-20 h-32 sm:w-24 sm:h-36",
+    lg: "w-24 h-36 sm:w-32 sm:h-48",
+  };
+
+  return (
+    <motion.div
+      className={clsx(
+        "rounded-lg sm:rounded-xl overflow-hidden",
+        sizeClasses[size],
+      )}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ type: "spring", stiffness: 300, damping: 25 }}
+    >
+      <SkeletonBox className="w-full h-full" />
+    </motion.div>
+  );
+}
+
+function PlayerSkeleton() {
+  return (
+    <div className="flex items-center gap-3 p-3 bg-white/80 rounded-xl border-2 border-slate-200">
+      <SkeletonBox className="w-12 h-12 sm:w-14 sm:h-14 rounded-full" />
+      <div className="flex-1 space-y-2">
+        <SkeletonBox className="h-4 w-24 sm:w-32" />
+        <SkeletonBox className="h-3 w-16 sm:w-20" />
+      </div>
+    </div>
+  );
+}
+
+export function GameSkeleton({
+  variant = "default",
+  message = "Loading game...",
+  className,
+}: GameSkeletonProps) {
+  if (variant === "minimal") {
+    return (
+      <div
+        className={clsx(
+          "flex flex-col items-center justify-center min-h-screen p-8 bg-gradient-to-br from-slate-50 to-slate-100",
+          className,
+        )}
+        role="status"
+        aria-live="polite"
+        aria-label={message}
+      >
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+        >
+          <Loader2 size={48} className="text-blue-500" aria-hidden="true" />
+        </motion.div>
+        <motion.p
+          className="mt-4 text-slate-600 text-lg font-medium"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+        >
+          {message}
+        </motion.p>
+      </div>
+    );
+  }
+
+  if (variant === "cards") {
+    return (
+      <div
+        className={clsx(
+          "flex flex-col items-center justify-center min-h-screen p-4 sm:p-8",
+          className,
+        )}
+        role="status"
+        aria-live="polite"
+        aria-label={message}
+      >
+        <div className="flex gap-2 sm:gap-4 mb-8">
+          {CARD_SKELETON_KEYS.map((key, i) => (
+            <motion.div
+              key={key}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.1 }}
+            >
+              <CardSkeleton />
+            </motion.div>
+          ))}
+        </div>
+        <motion.p
+          className="text-slate-600 text-sm sm:text-base"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5 }}
+        >
+          {message}
+        </motion.p>
+      </div>
+    );
+  }
+
+  if (variant === "players") {
+    return (
+      <div
+        className={clsx(
+          "flex flex-col items-center justify-center min-h-screen p-4 sm:p-8",
+          className,
+        )}
+        role="status"
+        aria-live="polite"
+        aria-label={message}
+      >
+        <div className="w-full max-w-md space-y-4 mb-8">
+          {PLAYER_SKELETON_KEYS.map((key, i) => (
+            <motion.div
+              key={key}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: i * 0.1 }}
+            >
+              <PlayerSkeleton />
+            </motion.div>
+          ))}
+        </div>
+        <motion.p
+          className="text-slate-600 text-sm sm:text-base"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.4 }}
+        >
+          {message}
+        </motion.p>
+      </div>
+    );
+  }
+
+  // Default variant - complete game layout
+  return (
+    <div
+      className={clsx(
+        "min-h-screen p-4 sm:p-8 bg-gradient-to-br from-slate-50 to-slate-100",
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+      aria-label={message}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6 sm:mb-8">
+        <SkeletonBox className="h-8 w-32 sm:w-48" />
+        <SkeletonBox className="h-8 w-20 sm:w-32" />
+      </div>
+
+      {/* Players */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
+        {PLAYER_SKELETON_KEYS.map((key, i) => (
+          <motion.div
+            key={key}
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: i * 0.1 }}
+          >
+            <PlayerSkeleton />
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Play area */}
+      <div className="mb-6 sm:mb-8">
+        <SkeletonBox className="w-full h-48 sm:h-64 rounded-2xl" />
+      </div>
+
+      {/* Hand */}
+      <div className="flex justify-center gap-2 sm:gap-4">
+        {HAND_SKELETON_KEYS.map((key, i) => (
+          <motion.div
+            key={key}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 + i * 0.05 }}
+          >
+            <CardSkeleton />
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Loading message */}
+      <motion.div
+        className="flex items-center justify-center mt-8"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.8 }}
+      >
+        <Loader2
+          size={24}
+          className="text-blue-500 animate-spin mr-3"
+          aria-hidden="true"
+        />
+        <p className="text-slate-600 text-sm sm:text-base font-medium">
+          {message}
+        </p>
+      </motion.div>
+    </div>
+  );
+}