@dreamboard-games/ui-sdk 0.0.41

package/src/components/__fixtures__/PhaseIndicator.fixture.tsx

@@ -0,0 +1,181 @@
+/**
+ * PhaseIndicator component fixtures
+ * Demonstrates phase and turn status display
+ */
+import React from "react";
+import { PhaseIndicator } from "../PhaseIndicator.js";
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 p-8">
+      <div className="max-w-md mx-auto space-y-6">{children}</div>
+    </div>
+  );
+}
+
+const phaseLabels: Record<string, string> = {
+  rollDice: "Roll Dice",
+  playerActions: "Take Actions",
+  tradePhase: "Trade Phase",
+  endTurn: "End Turn",
+  moveRobber: "Move the Robber",
+  discardCards: "Discard Cards",
+  setupPhase: "Setup Phase",
+};
+
+export default {
+  default: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Default (Badge Variant)
+      </h2>
+      <PhaseIndicator currentPhase="playerActions" phaseLabels={phaseLabels} />
+    </Container>
+  ),
+
+  yourTurn: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Your Turn</h2>
+      <PhaseIndicator
+        currentPhase="playerActions"
+        phaseLabels={phaseLabels}
+        isMyTurn={true}
+      />
+    </Container>
+  ),
+
+  waitingForOthers: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Waiting for Others</h2>
+      <PhaseIndicator
+        currentPhase="playerActions"
+        phaseLabels={phaseLabels}
+        isMyTurn={false}
+        activePlayerNames={["Alice", "Bob"]}
+      />
+    </Container>
+  ),
+
+  singleActivePlayer: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Single Active Player
+      </h2>
+      <PhaseIndicator
+        currentPhase="rollDice"
+        phaseLabels={phaseLabels}
+        isMyTurn={false}
+        activePlayerNames={["Alice"]}
+      />
+    </Container>
+  ),
+
+  barVariant: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Bar Variant</h2>
+      <PhaseIndicator
+        currentPhase="playerActions"
+        phaseLabels={phaseLabels}
+        isMyTurn={true}
+        variant="bar"
+      />
+    </Container>
+  ),
+
+  minimalVariant: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Minimal Variant</h2>
+      <PhaseIndicator
+        currentPhase="playerActions"
+        phaseLabels={phaseLabels}
+        variant="minimal"
+      />
+    </Container>
+  ),
+
+  noLabels: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Auto-Formatted Phase (No Labels)
+      </h2>
+      <p className="text-slate-400 text-sm mb-4">
+        Automatically formats camelCase phase names
+      </p>
+      <div className="space-y-2">
+        <PhaseIndicator currentPhase="rollForProduction" />
+        <PhaseIndicator currentPhase="moveSpacePirate" />
+        <PhaseIndicator currentPhase="playerActions" />
+      </div>
+    </Container>
+  ),
+
+  allPhases: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">All Phases Example</h2>
+      <div className="space-y-3">
+        <div>
+          <p className="text-slate-500 text-xs mb-1">Setup</p>
+          <PhaseIndicator currentPhase="setupPhase" phaseLabels={phaseLabels} />
+        </div>
+        <div>
+          <p className="text-slate-500 text-xs mb-1">Roll Dice</p>
+          <PhaseIndicator
+            currentPhase="rollDice"
+            phaseLabels={phaseLabels}
+            isMyTurn={true}
+          />
+        </div>
+        <div>
+          <p className="text-slate-500 text-xs mb-1">Move Robber</p>
+          <PhaseIndicator
+            currentPhase="moveRobber"
+            phaseLabels={phaseLabels}
+            isMyTurn={true}
+          />
+        </div>
+        <div>
+          <p className="text-slate-500 text-xs mb-1">Player Actions</p>
+          <PhaseIndicator
+            currentPhase="playerActions"
+            phaseLabels={phaseLabels}
+            isMyTurn={true}
+          />
+        </div>
+        <div>
+          <p className="text-slate-500 text-xs mb-1">Trade</p>
+          <PhaseIndicator
+            currentPhase="tradePhase"
+            phaseLabels={phaseLabels}
+            isMyTurn={true}
+          />
+        </div>
+        <div>
+          <p className="text-slate-500 text-xs mb-1">End Turn</p>
+          <PhaseIndicator
+            currentPhase="endTurn"
+            phaseLabels={phaseLabels}
+            isMyTurn={true}
+          />
+        </div>
+      </div>
+    </Container>
+  ),
+
+  gameHeader: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">As Game Header</h2>
+      <div className="bg-slate-800/50 p-4 rounded-lg flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-bold text-white">Space Settlers</h3>
+          <p className="text-slate-400 text-sm">Turn 5</p>
+        </div>
+        <PhaseIndicator
+          currentPhase="playerActions"
+          phaseLabels={phaseLabels}
+          isMyTurn={true}
+          variant="badge"
+        />
+      </div>
+    </Container>
+  ),
+};

package/src/components/__fixtures__/PlayArea.fixture.tsx

@@ -0,0 +1,221 @@
+/**
+ * PlayArea component fixtures
+ * Demonstrates the central game board area with various layouts
+ */
+import React from "react";
+import { PlayArea } from "../PlayArea.js";
+import type { ViewCard } from "../Card.js";
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-700 to-slate-900 p-8">
+      <div className="max-w-4xl mx-auto">{children}</div>
+    </div>
+  );
+}
+
+// Sample card data for fixtures
+const SAMPLE_CARDS: ViewCard[] = [
+  {
+    id: "card-spade-A",
+    cardType: "standard",
+    name: "Ace of Spades",
+    text: "The highest card",
+    properties: { suit: "♠", rank: "A", value: 14 },
+  },
+  {
+    id: "card-heart-K",
+    cardType: "standard",
+    name: "King of Hearts",
+    text: "A royal card",
+    properties: { suit: "♥", rank: "K", value: 13 },
+  },
+  {
+    id: "card-diamond-Q",
+    cardType: "standard",
+    name: "Queen of Diamonds",
+    text: "A royal card",
+    properties: { suit: "♦", rank: "Q", value: 12 },
+  },
+  {
+    id: "card-club-J",
+    cardType: "standard",
+    name: "Jack of Clubs",
+    text: "A royal card",
+    properties: { suit: "♣", rank: "J", value: 11 },
+  },
+  {
+    id: "card-spade-10",
+    cardType: "standard",
+    name: "10 of Spades",
+    text: "A number card",
+    properties: { suit: "♠", rank: "10", value: 10 },
+  },
+  {
+    id: "card-heart-9",
+    cardType: "standard",
+    name: "9 of Hearts",
+    text: "A number card",
+    properties: { suit: "♥", rank: "9", value: 9 },
+  },
+  {
+    id: "card-diamond-8",
+    cardType: "standard",
+    name: "8 of Diamonds",
+    text: "A number card",
+    properties: { suit: "♦", rank: "8", value: 8 },
+  },
+  {
+    id: "card-club-7",
+    cardType: "standard",
+    name: "7 of Clubs",
+    text: "A number card",
+    properties: { suit: "♣", rank: "7", value: 7 },
+  },
+];
+
+// Custom card renderer
+function PlayingCardRenderer({ card }: { card: ViewCard }) {
+  const props = card.properties as { suit: string; rank: string };
+  const isRed = props.suit === "♥" || props.suit === "♦";
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-2">
+      <span
+        className={`text-xl font-bold ${isRed ? "text-red-500" : "text-slate-800"}`}
+      >
+        {props.rank}
+      </span>
+      <span className={`text-2xl ${isRed ? "text-red-500" : "text-slate-800"}`}>
+        {props.suit}
+      </span>
+    </div>
+  );
+}
+
+export default {
+  rowLayout: (
+    <Container>
+      <div className="space-y-4">
+        <h2 className="text-xl font-bold text-white">Row Layout (Default)</h2>
+        <p className="text-white/70">Cards displayed in a horizontal row</p>
+        <PlayArea
+          cards={SAMPLE_CARDS.slice(0, 4)}
+          layout="row"
+          renderCard={(card) => <PlayingCardRenderer card={card} />}
+        />
+      </div>
+    </Container>
+  ),
+
+  gridLayout: (
+    <Container>
+      <div className="space-y-4">
+        <h2 className="text-xl font-bold text-white">Grid Layout</h2>
+        <p className="text-white/70">Cards displayed in a responsive grid</p>
+        <PlayArea
+          cards={SAMPLE_CARDS}
+          layout="grid"
+          renderCard={(card) => <PlayingCardRenderer card={card} />}
+        />
+      </div>
+    </Container>
+  ),
+
+  emptyState: (
+    <Container>
+      <div className="space-y-4">
+        <h2 className="text-xl font-bold text-white">Empty State</h2>
+        <p className="text-white/70">No cards in the play area</p>
+        <PlayArea
+          cards={[]}
+          layout="row"
+          renderCard={(card) => <PlayingCardRenderer card={card} />}
+        />
+      </div>
+    </Container>
+  ),
+
+  interactive: (
+    <Container>
+      <div className="space-y-4">
+        <h2 className="text-xl font-bold text-white">Interactive Cards</h2>
+        <p className="text-white/70">Click on cards to interact</p>
+        <PlayArea
+          cards={SAMPLE_CARDS.slice(0, 4)}
+          layout="row"
+          interactive={true}
+          renderCard={(card) => <PlayingCardRenderer card={card} />}
+          onCardClick={(id) => console.log("Card clicked:", id)}
+        />
+      </div>
+    </Container>
+  ),
+
+  singleCard: (
+    <Container>
+      <div className="space-y-4">
+        <h2 className="text-xl font-bold text-white">
+          Single Card (Trick Winner)
+        </h2>
+        <p className="text-white/70">Displaying a winning card</p>
+        <PlayArea
+          cards={[SAMPLE_CARDS[0]]}
+          layout="row"
+          cardSize="lg"
+          renderCard={(card) => <PlayingCardRenderer card={card} />}
+        />
+      </div>
+    </Container>
+  ),
+
+  trickInProgress: (
+    <Container>
+      <div className="space-y-4">
+        <h2 className="text-xl font-bold text-white">Trick In Progress</h2>
+        <p className="text-white/70">Current trick with 4 played cards</p>
+        <PlayArea
+          cards={SAMPLE_CARDS.slice(0, 4)}
+          layout="row"
+          cardSize="lg"
+          renderCard={(card) => <PlayingCardRenderer card={card} />}
+          aria-label="Current trick"
+        />
+      </div>
+    </Container>
+  ),
+
+  sizes: (
+    <Container>
+      <div className="space-y-8">
+        <div>
+          <h3 className="text-lg font-bold text-white mb-2">Small Cards</h3>
+          <PlayArea
+            cards={SAMPLE_CARDS.slice(0, 4)}
+            layout="row"
+            cardSize="sm"
+            renderCard={(card) => <PlayingCardRenderer card={card} />}
+          />
+        </div>
+        <div>
+          <h3 className="text-lg font-bold text-white mb-2">Medium Cards</h3>
+          <PlayArea
+            cards={SAMPLE_CARDS.slice(0, 4)}
+            layout="row"
+            cardSize="md"
+            renderCard={(card) => <PlayingCardRenderer card={card} />}
+          />
+        </div>
+        <div>
+          <h3 className="text-lg font-bold text-white mb-2">Large Cards</h3>
+          <PlayArea
+            cards={SAMPLE_CARDS.slice(0, 4)}
+            layout="row"
+            cardSize="lg"
+            renderCard={(card) => <PlayingCardRenderer card={card} />}
+          />
+        </div>
+      </div>
+    </Container>
+  ),
+};

package/src/components/__fixtures__/ResourceCounter.fixture.tsx

@@ -0,0 +1,227 @@
+/**
+ * ResourceCounter component fixtures
+ * Demonstrates resource display in various configurations
+ */
+import React, { useState } from "react";
+import {
+  Coins,
+  TreePine,
+  Gem,
+  Zap,
+  Droplet,
+  Mountain,
+  Cpu,
+  Leaf,
+} from "lucide-react";
+import {
+  ResourceCounter,
+  type ResourceDisplayConfig,
+} from "../ResourceCounter.js";
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 p-8">
+      <div className="max-w-2xl mx-auto space-y-6">{children}</div>
+    </div>
+  );
+}
+
+// Fantasy game resources
+const fantasyResources: ResourceDisplayConfig[] = [
+  {
+    type: "gold",
+    label: "Gold",
+    icon: Coins,
+    iconColor: "text-yellow-400",
+    bgColor: "bg-yellow-900/30",
+  },
+  {
+    type: "wood",
+    label: "Wood",
+    icon: TreePine,
+    iconColor: "text-amber-600",
+    bgColor: "bg-amber-900/30",
+  },
+  {
+    type: "gems",
+    label: "Gems",
+    icon: Gem,
+    iconColor: "text-purple-400",
+    bgColor: "bg-purple-900/30",
+  },
+];
+
+// Sci-fi game resources (Catan-style)
+const scifiResources: ResourceDisplayConfig[] = [
+  {
+    type: "minerals",
+    label: "Minerals",
+    icon: Mountain,
+    iconColor: "text-amber-600",
+    bgColor: "bg-amber-900/30",
+  },
+  {
+    type: "energy",
+    label: "Energy",
+    icon: Zap,
+    iconColor: "text-blue-400",
+    bgColor: "bg-blue-900/30",
+  },
+  {
+    type: "water",
+    label: "Water",
+    icon: Droplet,
+    iconColor: "text-cyan-400",
+    bgColor: "bg-cyan-900/30",
+  },
+  {
+    type: "tech",
+    label: "Tech Parts",
+    icon: Cpu,
+    iconColor: "text-purple-400",
+    bgColor: "bg-purple-900/30",
+  },
+  {
+    type: "bio",
+    label: "Bio-matter",
+    icon: Leaf,
+    iconColor: "text-green-400",
+    bgColor: "bg-green-900/30",
+  },
+];
+
+// Interactive demo
+function InteractiveDemo() {
+  const [counts, setCounts] = useState<Record<string, number>>({
+    gold: 5,
+    wood: 3,
+    gems: 1,
+  });
+
+  const handleClick = (type: string) => {
+    setCounts((prev) => ({
+      ...prev,
+      [type]: (prev[type] ?? 0) + 1,
+    }));
+  };
+
+  return (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Interactive (Click to Add)
+      </h2>
+      <ResourceCounter
+        resources={fantasyResources}
+        counts={counts}
+        onResourceClick={handleClick}
+        size="lg"
+      />
+      <p className="text-slate-400 text-sm mt-4">
+        Click any resource to add +1
+      </p>
+    </Container>
+  );
+}
+
+export default {
+  default: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Default (Row Layout)
+      </h2>
+      <ResourceCounter
+        resources={fantasyResources}
+        counts={{ gold: 5, wood: 3, gems: 1 }}
+      />
+    </Container>
+  ),
+
+  gridLayout: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Grid Layout (5 Resources)
+      </h2>
+      <ResourceCounter
+        resources={scifiResources}
+        counts={{ minerals: 4, energy: 2, water: 3, tech: 1, bio: 5 }}
+        layout="grid"
+        columns={5}
+      />
+    </Container>
+  ),
+
+  compactLayout: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Compact Layout</h2>
+      <ResourceCounter
+        resources={fantasyResources}
+        counts={{ gold: 10, wood: 5, gems: 2 }}
+        layout="compact"
+        size="sm"
+      />
+    </Container>
+  ),
+
+  sizes: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Size Variants</h2>
+      <div className="space-y-6">
+        <div>
+          <p className="text-slate-400 text-sm mb-2">Small</p>
+          <ResourceCounter
+            resources={fantasyResources}
+            counts={{ gold: 5, wood: 3, gems: 1 }}
+            size="sm"
+          />
+        </div>
+        <div>
+          <p className="text-slate-400 text-sm mb-2">Medium (Default)</p>
+          <ResourceCounter
+            resources={fantasyResources}
+            counts={{ gold: 5, wood: 3, gems: 1 }}
+            size="md"
+          />
+        </div>
+        <div>
+          <p className="text-slate-400 text-sm mb-2">Large</p>
+          <ResourceCounter
+            resources={fantasyResources}
+            counts={{ gold: 5, wood: 3, gems: 1 }}
+            size="lg"
+          />
+        </div>
+      </div>
+    </Container>
+  ),
+
+  hideZeroValues: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Hide Zero Values</h2>
+      <p className="text-slate-400 text-sm mb-4">
+        Only showing resources with count {">"} 0
+      </p>
+      <ResourceCounter
+        resources={scifiResources}
+        counts={{ minerals: 4, energy: 0, water: 3, tech: 0, bio: 5 }}
+        showZero={false}
+      />
+    </Container>
+  ),
+
+  interactive: <InteractiveDemo />,
+
+  sciFiTheme: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Sci-Fi Resources (Catan Style)
+      </h2>
+      <ResourceCounter
+        resources={scifiResources}
+        counts={{ minerals: 3, energy: 2, water: 1, tech: 4, bio: 2 }}
+        layout="grid"
+        columns={5}
+        size="md"
+      />
+    </Container>
+  ),
+};