@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-versus-card/WakaVersusCard.stories.tsx

@@ -0,0 +1,530 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaVersusCard, useVersusCard } from './index'
+import type { Competitor, Challenge, ChallengeStatus } from './index'
+import * as React from 'react'
+import { Target, Zap, Trophy } from 'lucide-react'
+
+const defaultCompetitorLeft: Competitor = {
+  id: 'player1',
+  name: 'DragonSlayer',
+  avatar: 'https://i.pravatar.cc/100?img=1',
+  score: 1250,
+  rank: 'Diamond III',
+  winStreak: 5,
+  isCurrentUser: true,
+}
+
+const defaultCompetitorRight: Competitor = {
+  id: 'player2',
+  name: 'ShadowMage',
+  avatar: 'https://i.pravatar.cc/100?img=2',
+  score: 1180,
+  rank: 'Diamond II',
+  winStreak: 3,
+}
+
+const defaultChallenge: Challenge = {
+  type: 'score',
+  name: 'Weekly Showdown',
+  description: 'First to 2000 points wins!',
+  targetScore: 2000,
+  startTime: new Date(),
+  endTime: new Date(Date.now() + 2 * 60 * 60 * 1000),
+  rewards: [
+    { type: 'xp', value: 500 },
+    { type: 'badge', value: 'Champion' },
+  ],
+}
+
+const meta: Meta<typeof WakaVersusCard> = {
+  title: 'Components/Gamification/WakaVersusCard',
+  component: WakaVersusCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A versus matchup card with real-time score tracking, animated updates, challenge types, time remaining, and winner celebration effects.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Card size variant',
+    },
+    status: {
+      control: 'select',
+      options: ['upcoming', 'live', 'finished'],
+      description: 'Challenge status',
+    },
+    showLivePulse: {
+      control: 'boolean',
+      description: 'Show live pulse animation',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaVersusCard>
+
+export const Default: Story = {
+  args: {
+    competitorLeft: defaultCompetitorLeft,
+    competitorRight: defaultCompetitorRight,
+    challenge: defaultChallenge,
+    status: 'live',
+  },
+  render: (args) => (
+    <div className="w-[500px]">
+      <WakaVersusCard {...args} />
+    </div>
+  ),
+}
+
+export const ChallengeStatuses: Story = {
+  render: () => {
+    const statuses: ChallengeStatus[] = ['upcoming', 'live', 'finished']
+
+    return (
+      <div className="space-y-6 w-[500px]">
+        {statuses.map((status) => (
+          <div key={status}>
+            <p className="text-sm text-muted-foreground mb-2 capitalize">{status}</p>
+            <WakaVersusCard
+              competitorLeft={defaultCompetitorLeft}
+              competitorRight={defaultCompetitorRight}
+              challenge={{
+                ...defaultChallenge,
+                startTime: status === 'upcoming' ? new Date(Date.now() + 60 * 60 * 1000) : new Date(),
+              }}
+              status={status}
+              winnerId={status === 'finished' ? 'player1' : undefined}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  },
+}
+
+export const ChallengeTypes: Story = {
+  render: () => {
+    const types: Array<{ type: Challenge['type']; name: string; description: string }> = [
+      { type: 'score', name: 'Score Battle', description: 'Highest score wins' },
+      { type: 'time', name: 'Time Trial', description: 'Fastest completion' },
+      { type: 'streak', name: 'Streak Challenge', description: 'Longest streak wins' },
+      { type: 'collection', name: 'Collection Race', description: 'Most items collected' },
+      { type: 'custom', name: 'Custom Battle', description: 'Special rules apply' },
+    ]
+
+    return (
+      <div className="space-y-4 w-[500px]">
+        {types.map(({ type, name, description }) => (
+          <WakaVersusCard
+            key={type}
+            competitorLeft={{ ...defaultCompetitorLeft, score: Math.floor(Math.random() * 500) + 100 }}
+            competitorRight={{ ...defaultCompetitorRight, score: Math.floor(Math.random() * 500) + 100 }}
+            challenge={{ ...defaultChallenge, type, name, description }}
+            status="live"
+          />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <div className="w-[400px]">
+          <WakaVersusCard
+            competitorLeft={defaultCompetitorLeft}
+            competitorRight={defaultCompetitorRight}
+            challenge={defaultChallenge}
+            status="live"
+            size="sm"
+          />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <div className="w-[500px]">
+          <WakaVersusCard
+            competitorLeft={defaultCompetitorLeft}
+            competitorRight={defaultCompetitorRight}
+            challenge={defaultChallenge}
+            status="live"
+            size="default"
+          />
+        </div>
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <div className="w-[600px]">
+          <WakaVersusCard
+            competitorLeft={defaultCompetitorLeft}
+            competitorRight={defaultCompetitorRight}
+            challenge={defaultChallenge}
+            status="live"
+            size="lg"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithStats: Story = {
+  render: () => {
+    const leftWithStats: Competitor = {
+      ...defaultCompetitorLeft,
+      stats: [
+        { name: 'Wins', value: 42, icon: <Trophy className="h-3 w-3 text-yellow-500" /> },
+        { name: 'Streak', value: 5, icon: <Zap className="h-3 w-3 text-orange-500" /> },
+      ],
+    }
+
+    const rightWithStats: Competitor = {
+      ...defaultCompetitorRight,
+      stats: [
+        { name: 'Wins', value: 38, icon: <Trophy className="h-3 w-3 text-yellow-500" /> },
+        { name: 'Streak', value: 3, icon: <Zap className="h-3 w-3 text-orange-500" /> },
+      ],
+    }
+
+    return (
+      <div className="w-[550px]">
+        <WakaVersusCard
+          competitorLeft={leftWithStats}
+          competitorRight={rightWithStats}
+          challenge={defaultChallenge}
+          status="live"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithTargetScore: Story = {
+  render: () => {
+    const challengeWithTarget: Challenge = {
+      ...defaultChallenge,
+      name: 'Race to 1000',
+      description: 'First to reach 1000 points wins!',
+      targetScore: 1000,
+    }
+
+    return (
+      <div className="w-[500px]">
+        <WakaVersusCard
+          competitorLeft={{ ...defaultCompetitorLeft, score: 720 }}
+          competitorRight={{ ...defaultCompetitorRight, score: 680 }}
+          challenge={challengeWithTarget}
+          status="live"
+        />
+      </div>
+    )
+  },
+}
+
+export const Finished: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaVersusCard
+        competitorLeft={{ ...defaultCompetitorLeft, score: 2150 }}
+        competitorRight={{ ...defaultCompetitorRight, score: 1980 }}
+        challenge={defaultChallenge}
+        status="finished"
+        winnerId="player1"
+      />
+    </div>
+  ),
+}
+
+export const CloseMatch: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <p className="text-sm text-muted-foreground mb-4 text-center">
+        Score difference: 5 points - intense battle!
+      </p>
+      <WakaVersusCard
+        competitorLeft={{ ...defaultCompetitorLeft, score: 1495 }}
+        competitorRight={{ ...defaultCompetitorRight, score: 1490 }}
+        challenge={defaultChallenge}
+        status="live"
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const {
+      competitorLeft,
+      competitorRight,
+      status,
+      winnerId,
+      incrementScore,
+      start,
+      finish,
+      reset,
+      isLive,
+      scoreDifference,
+    } = useVersusCard({
+      competitorLeft: { ...defaultCompetitorLeft, score: 0 },
+      competitorRight: { ...defaultCompetitorRight, score: 0 },
+      challenge: { ...defaultChallenge, targetScore: 100 },
+      initialStatus: 'upcoming',
+      onWinner: (id) => console.log('Winner:', id),
+    })
+
+    return (
+      <div className="space-y-6 w-[500px]">
+        <WakaVersusCard
+          competitorLeft={competitorLeft}
+          competitorRight={competitorRight}
+          challenge={{ ...defaultChallenge, targetScore: 100 }}
+          status={status}
+          winnerId={winnerId}
+        />
+
+        <div className="p-4 rounded-lg border">
+          <h4 className="font-medium mb-3">Controls</h4>
+          <div className="grid grid-cols-2 gap-2 text-sm mb-4">
+            <div>Status: <span className="font-medium capitalize">{status}</span></div>
+            <div>Diff: <span className="font-medium">{scoreDifference}</span></div>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            {status === 'upcoming' && (
+              <button
+                onClick={start}
+                className="px-3 py-1.5 text-xs rounded bg-green-500 text-white"
+              >
+                Start Challenge
+              </button>
+            )}
+            {isLive && (
+              <>
+                <button
+                  onClick={() => incrementScore(competitorLeft.id, 10)}
+                  className="px-3 py-1.5 text-xs rounded bg-blue-500 text-white"
+                >
+                  +10 Left
+                </button>
+                <button
+                  onClick={() => incrementScore(competitorRight.id, 10)}
+                  className="px-3 py-1.5 text-xs rounded bg-purple-500 text-white"
+                >
+                  +10 Right
+                </button>
+                <button
+                  onClick={finish}
+                  className="px-3 py-1.5 text-xs rounded bg-red-500 text-white"
+                >
+                  End Match
+                </button>
+              </>
+            )}
+            <button
+              onClick={reset}
+              className="px-3 py-1.5 text-xs rounded border hover:bg-muted"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      competitorLeft,
+      competitorRight,
+      status,
+      winnerId,
+      incrementScore,
+      updateStatus,
+      leftIsWinning,
+      rightIsWinning,
+      isTied,
+    } = useVersusCard({
+      competitorLeft: { ...defaultCompetitorLeft, score: 500 },
+      competitorRight: { ...defaultCompetitorRight, score: 500 },
+      challenge: defaultChallenge,
+      initialStatus: 'live',
+    })
+
+    // Simulate score updates
+    React.useEffect(() => {
+      if (status !== 'live') return
+
+      const interval = setInterval(() => {
+        const random = Math.random()
+        if (random < 0.5) {
+          incrementScore(competitorLeft.id, Math.floor(Math.random() * 20) + 5)
+        } else {
+          incrementScore(competitorRight.id, Math.floor(Math.random() * 20) + 5)
+        }
+      }, 2000)
+
+      return () => clearInterval(interval)
+    }, [status, competitorLeft.id, competitorRight.id, incrementScore])
+
+    return (
+      <div className="space-y-6 w-[500px]">
+        <WakaVersusCard
+          competitorLeft={competitorLeft}
+          competitorRight={competitorRight}
+          challenge={defaultChallenge}
+          status={status}
+          winnerId={winnerId}
+        />
+
+        <div className="p-4 rounded-lg border text-sm">
+          <div className="grid grid-cols-3 gap-2 text-center">
+            <div className={leftIsWinning ? 'text-green-500 font-medium' : ''}>
+              Left {leftIsWinning && '(Winning)'}
+            </div>
+            <div className={isTied ? 'text-yellow-500 font-medium' : ''}>
+              {isTied ? 'Tied!' : 'vs'}
+            </div>
+            <div className={rightIsWinning ? 'text-green-500 font-medium' : ''}>
+              Right {rightIsWinning && '(Winning)'}
+            </div>
+          </div>
+          <p className="text-muted-foreground text-center mt-2">
+            Scores update automatically every 2 seconds
+          </p>
+          <div className="flex justify-center mt-3">
+            <button
+              onClick={() => updateStatus('finished')}
+              className="px-3 py-1.5 text-xs rounded bg-red-500 text-white"
+            >
+              End Match
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const NoAvatars: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaVersusCard
+        competitorLeft={{ ...defaultCompetitorLeft, avatar: undefined }}
+        competitorRight={{ ...defaultCompetitorRight, avatar: undefined }}
+        challenge={defaultChallenge}
+        status="live"
+      />
+    </div>
+  ),
+}
+
+export const Upcoming: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaVersusCard
+        competitorLeft={{ ...defaultCompetitorLeft, score: 0 }}
+        competitorRight={{ ...defaultCompetitorRight, score: 0 }}
+        challenge={{
+          ...defaultChallenge,
+          startTime: new Date(Date.now() + 2 * 60 * 60 * 1000),
+        }}
+        status="upcoming"
+      />
+    </div>
+  ),
+}
+
+export const MultipleRewards: Story = {
+  render: () => {
+    const challengeWithRewards: Challenge = {
+      ...defaultChallenge,
+      name: 'Grand Championship',
+      rewards: [
+        { type: 'xp', value: 1000 },
+        { type: 'badge', value: 'Champion' },
+        { type: 'currency', value: 500 },
+        { type: 'item', value: 'Rare Sword' },
+      ],
+    }
+
+    return (
+      <div className="w-[550px]">
+        <WakaVersusCard
+          competitorLeft={defaultCompetitorLeft}
+          competitorRight={defaultCompetitorRight}
+          challenge={challengeWithRewards}
+          status="live"
+        />
+      </div>
+    )
+  },
+}
+
+export const TournamentMatch: Story = {
+  render: () => (
+    <div className="p-6 rounded-xl bg-gradient-to-br from-violet-900/20 to-purple-900/20 border border-violet-500/30">
+      <div className="text-center mb-6">
+        <div className="text-xs text-violet-400 uppercase tracking-wider mb-1">Quarter Finals</div>
+        <h2 className="text-xl font-bold">Spring Championship 2024</h2>
+        <p className="text-sm text-muted-foreground">Match 3 of 4</p>
+      </div>
+
+      <div className="w-[550px] mx-auto">
+        <WakaVersusCard
+          competitorLeft={{
+            ...defaultCompetitorLeft,
+            rank: 'Seed #1',
+            winStreak: 8,
+          }}
+          competitorRight={{
+            ...defaultCompetitorRight,
+            rank: 'Seed #4',
+            winStreak: 2,
+          }}
+          challenge={{
+            type: 'score',
+            name: 'Best of 3',
+            description: 'First to 2 wins advances',
+            targetScore: 2,
+            endTime: new Date(Date.now() + 30 * 60 * 1000),
+            rewards: [
+              { type: 'xp', value: 2000 },
+              { type: 'badge', value: 'Finalist' },
+            ],
+          }}
+          status="live"
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoLivePulse: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Live match without pulse animation
+      </p>
+      <WakaVersusCard
+        competitorLeft={defaultCompetitorLeft}
+        competitorRight={defaultCompetitorRight}
+        challenge={defaultChallenge}
+        status="live"
+        showLivePulse={false}
+      />
+    </div>
+  ),
+}