create-dubhe 1.2.0-pre.98 → 2.0.0

package/templates/nextjs/sui-card-duel/packages/client/src/app/collection/page.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+/**
+ * Collection — card inventory, pack opening (on-chain randomness) and
+ * battle deck selection (exactly 5 distinct owned cards).
+ */
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useGame } from '../hooks/useGame';
+import { GameShell } from '../components/GameShell';
+import { CardView } from '../components/CardView';
+import { IconGold, IconCards } from '../components/icons';
+import { DECK_SIZE } from '../lib/game';
+import { ZERO_ADDRESS } from '@0xobelisk/graphql-client';
+
+const SUI_RANDOM = '0x8';
+const PACK_PRICE = 100; // mirrors deploy_hook default; shown as a hint only
+
+export default function CollectionPage() {
+  const game = useGame(5000);
+  const { player, userStorageId, storageId, pkg, execTx, isLoading } = game;
+
+  // Deck editing state: starts from the on-chain deck.
+  const [editing, setEditing] = useState(false);
+  const [selection, setSelection] = useState<string[]>([]);
+
+  const inMatch = player.battle.matchId !== ZERO_ADDRESS;
+  const deckSet = new Set(player.deck);
+
+  const startEditing = () => {
+    setSelection([...player.deck]);
+    setEditing(true);
+  };
+
+  const toggleCard = (cardId: string) => {
+    setSelection((sel) => {
+      if (sel.includes(cardId)) return sel.filter((c) => c !== cardId);
+      if (sel.length >= DECK_SIZE) {
+        toast.error(`Deck is full (${DECK_SIZE} cards) — remove one first`);
+        return sel;
+      }
+      return [...sel, cardId];
+    });
+  };
+
+  const handleOpenPack = () =>
+    execTx((tx) => {
+      if (!userStorageId) throw new Error('UserStorage not found');
+      tx.moveCall({
+        target: `${pkg}::card_system::open_pack`,
+        arguments: [tx.object(storageId), tx.object(userStorageId), tx.object(SUI_RANDOM)]
+      });
+    }, 'Pack opened — a new card joins your collection!');
+
+  const handleSaveDeck = () => {
+    if (selection.length !== DECK_SIZE) {
+      toast.error(`Select exactly ${DECK_SIZE} cards`);
+      return;
+    }
+    execTx(
+      (tx) => {
+        if (!userStorageId) throw new Error('UserStorage not found');
+        tx.moveCall({
+          target: `${pkg}::card_system::set_deck`,
+          arguments: [
+            tx.object(storageId),
+            tx.object(userStorageId),
+            tx.pure.vector('address', selection)
+          ]
+        });
+      },
+      'Battle deck updated!',
+      () => setEditing(false)
+    );
+  };
+
+  const sortedCards = [...player.cards].sort(
+    (a, b) => b.rarity - a.rarity || a.kind - b.kind || b.power - a.power
+  );
+
+  return (
+    <GameShell game={game}>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* ── Left: pack + deck ── */}
+        <div className="space-y-4">
+          <div className="bg-slate-950/80 border-2 border-indigo-800 rounded-2xl p-4 space-y-3">
+            <h2 className="font-pixel text-indigo-300 text-xs flex items-center gap-2">
+              <IconCards size={18} /> Card Pack
+            </h2>
+            <p className="text-indigo-700 text-[11px]">
+              Mint a random card using Sui on-chain randomness. Kind: Strike 40% / Fireball 25% /
+              Heal 20% / Shield 15%. Rarity: Common 70% / Rare 25% / Epic 5%.
+            </p>
+            <button
+              onClick={handleOpenPack}
+              disabled={isLoading || player.gold < BigInt(PACK_PRICE)}
+              className="w-full py-2.5 bg-indigo-700 hover:bg-indigo-600 text-white text-xs font-pixel rounded-lg disabled:opacity-40 transition-colors flex items-center justify-center gap-2"
+            >
+              Open Pack — <IconGold size={12} /> {PACK_PRICE}
+            </button>
+          </div>
+
+          <div className="bg-slate-950/80 border-2 border-amber-800/60 rounded-2xl p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h2 className="font-pixel text-amber-300 text-xs">Battle Deck ({DECK_SIZE})</h2>
+              {!editing ? (
+                <button
+                  onClick={startEditing}
+                  disabled={inMatch}
+                  title={inMatch ? 'Cannot edit the deck mid-match' : undefined}
+                  className="px-3 py-1 bg-amber-800 hover:bg-amber-700 text-white text-[10px] font-pixel rounded-lg disabled:opacity-40 transition-colors"
+                >
+                  Edit
+                </button>
+              ) : (
+                <div className="flex gap-1.5">
+                  <button
+                    onClick={handleSaveDeck}
+                    disabled={isLoading || selection.length !== DECK_SIZE}
+                    className="px-3 py-1 bg-emerald-700 hover:bg-emerald-600 text-white text-[10px] font-pixel rounded-lg disabled:opacity-40 transition-colors"
+                  >
+                    Save ({selection.length}/{DECK_SIZE})
+                  </button>
+                  <button
+                    onClick={() => setEditing(false)}
+                    className="px-3 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[10px] font-pixel rounded-lg transition-colors"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              )}
+            </div>
+            <p className="text-amber-700/70 text-[11px]">
+              In duels each deck card can be played once per match. Brawl cards are reusable every
+              turn.
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {(editing ? selection : player.deck).map((id) => {
+                const card = player.cards.find((c) => c.cardId === id);
+                return card ? (
+                  <CardView
+                    key={id}
+                    card={card}
+                    small
+                    onClick={editing ? () => toggleCard(id) : undefined}
+                    selected={editing}
+                  />
+                ) : (
+                  <div
+                    key={id}
+                    className="w-20 h-28 rounded-xl border-2 border-dashed border-slate-700 flex items-center justify-center text-slate-600 text-[9px] font-pixel"
+                  >
+                    listed?
+                  </div>
+                );
+              })}
+              {(editing ? selection : player.deck).length === 0 && (
+                <p className="text-slate-600 text-[11px]">No deck set.</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* ── Right: full collection ── */}
+        <div className="lg:col-span-2">
+          <h2 className="font-pixel text-indigo-400 text-xs mb-3">
+            Collection ({player.cards.length} cards)
+            {editing && (
+              <span className="text-amber-400 ml-2">— click cards to add/remove from deck</span>
+            )}
+          </h2>
+          {sortedCards.length === 0 ? (
+            <div className="bg-slate-950/40 border border-indigo-900/40 rounded-xl p-8 text-center">
+              <p className="text-indigo-700 font-pixel text-[11px]">
+                No cards yet — register grants a starter deck, or open a pack.
+              </p>
+            </div>
+          ) : (
+            <div className="flex flex-wrap gap-3">
+              {sortedCards.map((card) => (
+                <div key={card.cardId} className="relative">
+                  <CardView
+                    card={card}
+                    selected={editing ? selection.includes(card.cardId) : deckSet.has(card.cardId)}
+                    onClick={editing ? () => toggleCard(card.cardId) : undefined}
+                  />
+                  {!editing && deckSet.has(card.cardId) && (
+                    <span className="absolute -top-1.5 -right-1.5 bg-amber-500 text-black text-[8px] font-pixel px-1.5 py-0.5 rounded-full">
+                      DECK
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </GameShell>
+  );
+}

package/templates/nextjs/sui-card-duel/packages/client/src/app/components/CardView.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { CardData } from '../lib/game';
+import { KIND_NAME, KIND_EMOJI, RARITY_NAME, RARITY_COLOR, isAttackKind } from '../lib/game';
+
+/**
+ * A single playing card. Used in the collection, deck builder and battle pages.
+ */
+export function CardView({
+  card,
+  selected = false,
+  disabled = false,
+  used = false,
+  small = false,
+  onClick
+}: {
+  card: CardData;
+  selected?: boolean;
+  disabled?: boolean;
+  /** Already played this match (duel rule: one use per card). */
+  used?: boolean;
+  small?: boolean;
+  onClick?: () => void;
+}) {
+  const rarityCls = RARITY_COLOR[card.rarity] ?? RARITY_COLOR[0];
+  const clickable = Boolean(onClick) && !disabled && !used;
+
+  return (
+    <motion.button
+      type="button"
+      onClick={clickable ? onClick : undefined}
+      whileHover={clickable ? { y: -4, scale: 1.03 } : undefined}
+      whileTap={clickable ? { scale: 0.97 } : undefined}
+      disabled={!clickable && Boolean(onClick)}
+      className={`relative flex flex-col items-center justify-between rounded-xl border-2 bg-slate-900/90 text-left transition-colors
+        ${small ? 'w-20 h-28 p-1.5' : 'w-28 h-40 p-2.5'}
+        ${rarityCls}
+        ${selected ? 'ring-2 ring-amber-400 -translate-y-1' : ''}
+        ${used || disabled ? 'opacity-40 grayscale' : ''}
+        ${clickable ? 'cursor-pointer hover:bg-slate-800/90' : 'cursor-default'}`}
+    >
+      <span className={`font-pixel ${small ? 'text-[8px]' : 'text-[10px]'} text-slate-300`}>
+        {KIND_NAME[card.kind] ?? '?'}
+      </span>
+      <span className={small ? 'text-2xl' : 'text-4xl'}>{KIND_EMOJI[card.kind] ?? '❓'}</span>
+      <div className="w-full flex items-center justify-between">
+        <span className={`${small ? 'text-[8px]' : 'text-[10px]'} opacity-80`}>
+          {RARITY_NAME[card.rarity]}
+        </span>
+        <span
+          className={`font-pixel ${small ? 'text-[9px]' : 'text-xs'} ${
+            isAttackKind(card.kind) ? 'text-red-400' : 'text-emerald-400'
+          }`}
+        >
+          {card.power}
+        </span>
+      </div>
+      {used && (
+        <span className="absolute inset-0 flex items-center justify-center font-pixel text-[9px] text-red-400 bg-black/40 rounded-xl">
+          USED
+        </span>
+      )}
+    </motion.button>
+  );
+}

package/templates/nextjs/sui-card-duel/packages/client/src/app/components/GameShell.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { ConnectButton } from '@mysten/dapp-kit';
+import { motion } from 'framer-motion';
+import { toast } from 'sonner';
+
+import type { useGame } from '../hooks/useGame';
+import { IconCards, IconGold, IconTrophy } from './icons';
+
+type Game = ReturnType<typeof useGame>;
+
+const NAV = [
+  { href: '/', label: 'Lobby' },
+  { href: '/collection', label: 'Collection' },
+  { href: '/market', label: 'Market' },
+  { href: '/leaderboard', label: 'Leaderboard' }
+];
+
+const BG = 'radial-gradient(ellipse at top, #1e1b4b 0%, #0b0a1a 65%)';
+
+/**
+ * Common page chrome: header, nav, session-key bar and onboarding gates
+ * (connect wallet → create UserStorage → register). Children render only
+ * once the player is fully onboarded, unless `gate` is set to false.
+ */
+export function GameShell({
+  game,
+  children,
+  gate = true
+}: {
+  game: Game;
+  children: React.ReactNode;
+  /** Set false for pages that are viewable before registration (e.g. leaderboard). */
+  gate?: boolean;
+}) {
+  const pathname = usePathname();
+  const { isConnected, player, balance, userStorageId, isLoading } = game;
+
+  if (!isConnected) {
+    return (
+      <div
+        className="min-h-screen flex flex-col items-center justify-center gap-6 p-8"
+        style={{ background: BG }}
+      >
+        <motion.div
+          initial={{ y: -20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          className="text-center"
+        >
+          <div className="mb-4 flex justify-center">
+            <IconCards size={80} />
+          </div>
+          <h1 className="font-pixel text-indigo-300 text-2xl mb-2">CARD DUEL</h1>
+          <p className="text-indigo-500 text-sm mb-8">Full-Chain PvP Card Battles on Sui</p>
+          <ConnectButton />
+        </motion.div>
+      </div>
+    );
+  }
+
+  const balanceWarning = balance === 0 && (
+    <div className="mb-4 bg-red-900/40 border border-red-600/50 rounded-xl px-4 py-3 text-red-300 text-xs font-pixel">
+      Your SUI balance is 0. Please get some {game.network ?? 'localnet'} SUI before making
+      transactions.
+    </div>
+  );
+
+  const header = (
+    <div className="flex items-center justify-between mb-4 flex-wrap gap-3">
+      <div className="flex items-center gap-2">
+        <IconCards size={28} />
+        <h1 className="font-pixel text-indigo-300 text-sm">CARD DUEL</h1>
+      </div>
+      <div className="flex items-center gap-4 flex-wrap">
+        {player.isRegistered && (
+          <>
+            <span className="flex items-center gap-1 text-xs font-pixel text-amber-300">
+              <IconGold size={14} /> {player.gold.toLocaleString()}
+            </span>
+            <span className="flex items-center gap-1 text-xs font-pixel text-indigo-300">
+              <IconTrophy size={14} /> {player.profile?.rating ?? 0}
+            </span>
+          </>
+        )}
+        {balance > 0 ? (
+          <span className="text-xs text-indigo-500 font-pixel">{balance.toFixed(3)} SUI</span>
+        ) : (
+          <span className="text-xs text-red-400 font-pixel">0 SUI — top up needed</span>
+        )}
+        <ConnectButton />
+      </div>
+    </div>
+  );
+
+  const nav = (
+    <div className="flex gap-2 mb-6 flex-wrap">
+      {NAV.map(({ href, label }) => (
+        <a
+          key={href}
+          href={href}
+          className={`px-4 py-2 text-xs font-pixel rounded-lg border transition-colors ${
+            pathname === href
+              ? 'bg-indigo-700 text-indigo-100 border-indigo-500'
+              : 'bg-indigo-950/60 hover:bg-indigo-900/60 text-indigo-400 border-indigo-800/40'
+          }`}
+        >
+          {label}
+        </a>
+      ))}
+    </div>
+  );
+
+  // ── Onboarding gates ────────────────────────────────────────────────────────
+
+  if (gate && !userStorageId) {
+    return (
+      <div className="min-h-screen p-4 md:p-6" style={{ background: BG }}>
+        {header}
+        {balanceWarning}
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
+          <div className="mb-4">
+            <IconCards size={60} />
+          </div>
+          <h2 className="font-pixel text-indigo-300 text-lg mb-2">Setup Your Account</h2>
+          <p className="text-indigo-500 text-sm mb-2">Step 1 of 2 — Create your on-chain storage</p>
+          <p className="text-indigo-700 text-xs mb-6 max-w-xs">
+            This creates your personal UserStorage object on Sui — required before interacting with
+            any DApp.
+          </p>
+          <motion.button
+            onClick={game.handleCreateStorage}
+            disabled={isLoading || balance === 0}
+            className="bg-blue-700 hover:bg-blue-600 text-white font-pixel px-8 py-3 rounded-xl disabled:opacity-50 transition-colors"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            {isLoading ? 'Creating...' : 'Create Storage (Step 1)'}
+          </motion.button>
+        </div>
+      </div>
+    );
+  }
+
+  if (gate && !player.isRegistered) {
+    return (
+      <div className="min-h-screen p-4 md:p-6" style={{ background: BG }}>
+        {header}
+        {balanceWarning}
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
+          <div className="mb-4">
+            <IconCards size={60} />
+          </div>
+          <h2 className="font-pixel text-indigo-300 text-lg mb-2">Enter the Arena</h2>
+          <p className="text-indigo-500 text-sm mb-2">Step 2 of 2 — Register as a duelist</p>
+          <p className="text-indigo-700 text-xs mb-6 max-w-xs">
+            You will receive 500 gold and a 5-card starter deck.
+            <br />
+            After registering, activate a Session Key to play without wallet popups.
+          </p>
+          <motion.button
+            onClick={game.handleRegister}
+            disabled={isLoading || balance === 0}
+            className="bg-indigo-700 hover:bg-indigo-600 text-white font-pixel px-8 py-3 rounded-xl disabled:opacity-50 transition-colors"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            {isLoading ? 'Registering...' : 'Register (Step 2)'}
+          </motion.button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen p-4 md:p-6" style={{ background: BG }}>
+      {header}
+      {balanceWarning}
+      {player.isRegistered && <SessionBar game={game} />}
+      {nav}
+      {children}
+    </div>
+  );
+}
+
+// ── Session key status bar ──────────────────────────────────────────────────
+
+function SessionBar({ game }: { game: Game }) {
+  const {
+    session,
+    userStorageId,
+    isLoading,
+    setIsLoading,
+    network,
+    signAndExecuteTransaction,
+    txToast
+  } = game;
+
+  const handleActivate = async () => {
+    if (!userStorageId) {
+      toast.error('Create storage first');
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const tx = session.buildActivateTx(userStorageId, session.SESSION_DURATION_MS);
+      await signAndExecuteTransaction(
+        { transaction: (tx as any).serialize(), chain: `sui:${network ?? 'localnet'}` },
+        {
+          onSuccess: (resp: any) => {
+            session.confirmActivation(session.SESSION_DURATION_MS);
+            txToast(
+              'Session activated for 1 hour — no wallet popups for game actions!',
+              resp.digest
+            );
+          },
+          onError: (err: any) => toast.error(`Failed: ${err.message}`)
+        }
+      );
+    } catch (err: any) {
+      toast.error(`Error: ${err?.message ?? err}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFund = async () => {
+    setIsLoading(true);
+    try {
+      const tx = session.buildFundSessionTx(0.1);
+      await signAndExecuteTransaction(
+        { transaction: (tx as any).serialize(), chain: `sui:${network ?? 'localnet'}` },
+        {
+          onSuccess: (resp: any) => txToast('Topped up 0.1 SUI to session wallet', resp.digest),
+          onError: (e: any) => toast.error(`Top-up failed: ${e.message}`)
+        }
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className={`mb-4 flex items-center justify-between px-4 py-2 rounded-xl border text-xs font-pixel flex-wrap gap-2 ${
+        session.isActive
+          ? 'bg-emerald-900/30 border-emerald-700/40 text-emerald-300'
+          : 'bg-indigo-900/20 border-indigo-700/30 text-indigo-400'
+      }`}
+    >
+      {session.keypairLoading ? (
+        <span className="opacity-60">Loading session key...</span>
+      ) : session.isActive ? (
+        <>
+          <span className="flex items-center gap-2 flex-wrap">
+            Session active — {session.minutesLeft}m left
+            <span className="font-mono text-emerald-400/70">
+              {session.sessionAddress.slice(0, 6)}…{session.sessionAddress.slice(-4)}
+            </span>
+          </span>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleFund}
+              disabled={isLoading}
+              className="bg-indigo-800 hover:bg-indigo-700 text-white px-2 py-0.5 rounded disabled:opacity-50 transition-colors"
+            >
+              Fund 0.1 SUI
+            </button>
+            <button
+              onClick={() => {
+                session.clearSession();
+                toast.success('Session cleared.');
+              }}
+              className="text-red-400 hover:text-red-300 transition-colors"
+            >
+              Deactivate
+            </button>
+          </div>
+        </>
+      ) : (
+        <>
+          <span>Session inactive — wallet approval required for every action</span>
+          <button
+            onClick={handleActivate}
+            disabled={isLoading || !userStorageId || session.keypairLoading}
+            className="ml-4 bg-emerald-700 hover:bg-emerald-600 text-white px-3 py-1 rounded-lg disabled:opacity-50 transition-colors"
+          >
+            Activate Session (1h)
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/sui-card-duel/packages/client/src/app/components/icons.tsx

@@ -0,0 +1,101 @@
+/** Minimal inline SVG icon set for the Card Duel UI. */
+
+export function IconCards({ size = 24 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <rect x="3" y="5" width="11" height="15" rx="2" fill="#6366f1" transform="rotate(-8 3 5)" />
+      <rect
+        x="9"
+        y="4"
+        width="11"
+        height="15"
+        rx="2"
+        fill="#a855f7"
+        stroke="#1e1b4b"
+        strokeWidth="1"
+        transform="rotate(8 9 4)"
+      />
+      <path d="M15.5 8l1 2 2 .3-1.5 1.5.4 2-1.9-1-1.9 1 .4-2L12.5 10l2-.3z" fill="#fde047" />
+    </svg>
+  );
+}
+
+export function IconSword({ size = 20 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M5 19l10-10 3-6-6 3L2 16z" fill="#cbd5e1" stroke="#475569" strokeWidth="1" />
+      <path d="M4 20l2 2 3-1-4-4-1 3z" fill="#92400e" />
+    </svg>
+  );
+}
+
+export function IconShield({ size = 20 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M12 2l8 3v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5z"
+        fill="#0ea5e9"
+        stroke="#0c4a6e"
+        strokeWidth="1.5"
+      />
+      <path d="M12 5l5 2v4c0 3.5-2.2 6.7-5 7.8V5z" fill="#38bdf8" opacity="0.6" />
+    </svg>
+  );
+}
+
+export function IconGold({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="9" fill="#fbbf24" stroke="#92400e" strokeWidth="1.5" />
+      <circle cx="12" cy="12" r="5.5" fill="none" stroke="#92400e" strokeWidth="1" opacity="0.5" />
+      <text x="12" y="16" textAnchor="middle" fontSize="9" fontWeight="bold" fill="#92400e">
+        G
+      </text>
+    </svg>
+  );
+}
+
+export function IconTrophy({ size = 20 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M7 4h10v5a5 5 0 0 1-10 0V4z" fill="#fbbf24" stroke="#92400e" strokeWidth="1.5" />
+      <path d="M7 5H4a3 3 0 0 0 3 4M17 5h3a3 3 0 0 1-3 4" stroke="#92400e" strokeWidth="1.5" />
+      <path d="M11 14h2v3h-2z" fill="#fbbf24" />
+      <rect x="8" y="17" width="8" height="3" rx="1" fill="#92400e" />
+    </svg>
+  );
+}
+
+export function IconMedal({ rank, size = 24 }: { rank: 1 | 2 | 3; size?: number }) {
+  const colors: Record<number, [string, string]> = {
+    1: ['#fbbf24', '#92400e'],
+    2: ['#cbd5e1', '#475569'],
+    3: ['#d97706', '#7c2d12']
+  };
+  const [fill, stroke] = colors[rank];
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M8 2h3l-2 7H6zM16 2h-3l2 7h3z" fill={stroke} opacity="0.7" />
+      <circle cx="12" cy="14" r="7" fill={fill} stroke={stroke} strokeWidth="1.5" />
+      <text x="12" y="18" textAnchor="middle" fontSize="9" fontWeight="bold" fill={stroke}>
+        {rank}
+      </text>
+    </svg>
+  );
+}
+
+export function IconSkull({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M12 3a8 8 0 0 0-8 8c0 3 1.5 5 3.5 6.2V20a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-2.8C18.5 16 20 14 20 11a8 8 0 0 0-8-8z"
+        fill="#e2e8f0"
+        stroke="#475569"
+        strokeWidth="1.2"
+      />
+      <circle cx="9" cy="11" r="1.8" fill="#1e293b" />
+      <circle cx="15" cy="11" r="1.8" fill="#1e293b" />
+      <path d="M12 14l1 2.5h-2z" fill="#1e293b" />
+    </svg>
+  );
+}