create-dubhe 1.2.0-pre.98 → 2.0.0

package/templates/nextjs/sui-card-duel/packages/client/src/app/hooks/useGame.ts

@@ -0,0 +1,313 @@
+'use client';
+
+/**
+ * Core game hook shared by every page.
+ *
+ * Bundles:
+ *  - wallet connection + SUI balance
+ *  - UserStorage discovery, registration state
+ *  - player resources (gold / profile / deck / cards / battle_state) via ECS indexer
+ *  - transaction execution (session key silent-sign, main-wallet fallback,
+ *    auto settle_writes prepending)
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import {
+  useCurrentAccount,
+  useCurrentWallet,
+  useSignAndExecuteTransaction
+} from '@mysten/dapp-kit';
+import { useDubhe, useDubheTx, SessionInvalidatedError } from '@0xobelisk/react/sui';
+import { Transaction } from '@0xobelisk/sui-client';
+import { ZERO_ADDRESS } from '@0xobelisk/graphql-client';
+import { toast } from 'sonner';
+
+import { DappHubId, DappStorageId, PackageId } from 'contracts/deployment';
+import type { CardData, ProfileData, BattleStateData } from '../lib/game';
+
+export interface PlayerState {
+  isRegistered: boolean;
+  gold: bigint;
+  profile: ProfileData | null;
+  deck: string[];
+  cards: CardData[];
+  battle: BattleStateData;
+}
+
+const INITIAL_PLAYER: PlayerState = {
+  isRegistered: false,
+  gold: 0n,
+  profile: null,
+  deck: [],
+  cards: [],
+  battle: { matchId: ZERO_ADDRESS, hp: 0n, shield: 0n }
+};
+
+export function useGame(pollMs = 10000) {
+  const account = useCurrentAccount();
+  const { connectionStatus } = useCurrentWallet();
+  const { mutateAsync: signAndExecuteTransaction } = useSignAndExecuteTransaction();
+  const dubheCtx = useDubhe();
+  const { contract, ecsWorld, graphqlClient, dappStorageId, dappHubId, network, packageId } =
+    dubheCtx;
+
+  const hubId = dappHubId ?? DappHubId;
+  const storageId = dappStorageId ?? DappStorageId;
+  const pkg = packageId ?? PackageId;
+  const isConnected = connectionStatus === 'connected';
+
+  const [player, setPlayer] = useState<PlayerState>(INITIAL_PLAYER);
+  const [balance, setBalance] = useState(0);
+  const [userStorageId, setUserStorageId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Main-wallet signer injected into the framework tx layer.
+  const signWithWallet = useCallback(
+    async (tx: Transaction) => {
+      const resp = await signAndExecuteTransaction({
+        transaction: tx.serialize() as any,
+        chain: `sui:${network ?? 'localnet'}`
+      });
+      return { digest: resp.digest };
+    },
+    [signAndExecuteTransaction, network]
+  );
+
+  // Framework tx layer: session state is scoped to the connected main wallet
+  // (switching accounts never shows or signs with another account's session)
+  // and settle_writes is prepended automatically when the threshold is hit.
+  const dubheTx = useDubheTx({
+    owner: account?.address ?? null,
+    userStorageId,
+    signWithWallet
+  });
+  const session = dubheTx.session;
+
+  // ── Fetchers ────────────────────────────────────────────────────────────────
+
+  const fetchPlayerState = useCallback(
+    async (addr: string) => {
+      if (!ecsWorld) return;
+      try {
+        const profileData = await ecsWorld
+          .getComponent<{ wins: number; losses: number; rating: number }>(addr, 'profile')
+          .catch(() => null);
+
+        if (!profileData) {
+          setPlayer((p) => ({ ...p, isRegistered: false }));
+          return;
+        }
+
+        const [goldData, deckData, battleData, cardsResult] = await Promise.all([
+          ecsWorld.getComponent<{ amount: string }>(addr, 'gold').catch(() => null),
+          ecsWorld.getComponent<{ cardIds: string[] }>(addr, 'deck').catch(() => null),
+          ecsWorld
+            .getComponent<{ matchId: string; hp: string; shield: string }>(addr, 'battleState')
+            .catch(() => null),
+          ecsWorld
+            .getResources<{ cardId: string; kind: number; power: number; rarity: number }>('card', {
+              filters: { entityId: addr },
+              limit: 200
+            })
+            .catch(() => ({ items: [] as any[] }))
+        ]);
+
+        const cards: CardData[] = cardsResult.items
+          .filter((c: any) => !c.isDeleted)
+          .map((c: any) => ({
+            cardId: String(c.cardId),
+            kind: Number(c.kind),
+            power: Number(c.power),
+            rarity: Number(c.rarity)
+          }));
+
+        setPlayer({
+          isRegistered: true,
+          gold: BigInt(goldData?.amount ?? 0),
+          profile: {
+            wins: Number(profileData.wins ?? 0),
+            losses: Number(profileData.losses ?? 0),
+            rating: Number(profileData.rating ?? 0)
+          },
+          deck: (deckData?.cardIds ?? []).map(String),
+          cards,
+          battle: {
+            matchId: String(battleData?.matchId ?? ZERO_ADDRESS),
+            hp: BigInt(battleData?.hp ?? 0),
+            shield: BigInt(battleData?.shield ?? 0)
+          }
+        });
+      } catch (err) {
+        console.error('fetchPlayerState error:', err);
+      }
+    },
+    [ecsWorld]
+  );
+
+  const refresh = useCallback(async () => {
+    if (!account?.address || !contract) return;
+    try {
+      const b = await contract.balanceOf(account.address);
+      setBalance(Number(b.totalBalance) / 1_000_000_000);
+    } catch {}
+    try {
+      const id = await contract.getUserStorageId(account.address);
+      setUserStorageId(id);
+    } catch {
+      setUserStorageId(null);
+    }
+    dubheTx.refreshSettleState().catch(() => {});
+    await fetchPlayerState(account.address);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account?.address, contract, fetchPlayerState, dubheTx.refreshSettleState]);
+
+  useEffect(() => {
+    if (isConnected && account?.address) {
+      refresh();
+      const interval = setInterval(refresh, pollMs);
+      return () => clearInterval(interval);
+    } else {
+      setPlayer(INITIAL_PLAYER);
+      setUserStorageId(null);
+      setBalance(0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected, account?.address, pollMs]);
+
+  // ── Tx helpers ──────────────────────────────────────────────────────────────
+
+  const explorerUrl = (digest: string) =>
+    contract?.getTxExplorerUrl(digest) ??
+    `https://suiscan.xyz/${network ?? 'testnet'}/tx/${digest}`;
+
+  const txToast = useCallback(
+    (msg: string, digest: string) =>
+      toast.success(msg, {
+        description: `Tx: ${digest.slice(0, 10)}… — ${explorerUrl(digest)}`
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [contract, network]
+  );
+
+  const checkPreconditions = useCallback(() => {
+    if (!isConnected) {
+      toast.error('Please connect your wallet first');
+      return false;
+    }
+    if (balance === 0) {
+      toast.error('Your SUI balance is 0. Please top up before proceeding.');
+      return false;
+    }
+    return true;
+  }, [isConnected, balance]);
+
+  /** Always main wallet (UserStorage creation, register, marketplace, admin). */
+  const execTxWithMainWallet = useCallback(
+    async (
+      buildFn: (tx: Transaction) => void | Promise<void>,
+      successMsg: string,
+      onSuccess?: () => void
+    ) => {
+      if (!checkPreconditions()) return;
+      setIsLoading(true);
+      try {
+        const { digest } = await dubheTx.execTxWithMainWallet(buildFn);
+        txToast(successMsg, digest);
+        onSuccess?.();
+        setTimeout(refresh, 1500);
+      } catch (err: any) {
+        console.error('tx error:', err);
+        toast.error(`Transaction failed: ${err?.message ?? err}`);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [checkPreconditions, dubheTx, txToast, refresh]
+  );
+
+  /**
+   * Game action: session key silent-sign when active, otherwise main wallet.
+   * settle_writes is prepended automatically by the framework tx layer.
+   */
+  const execTx = useCallback(
+    async (
+      buildFn: (tx: Transaction) => void | Promise<void>,
+      successMsg: string,
+      onSuccess?: () => void
+    ) => {
+      if (!checkPreconditions()) return;
+      setIsLoading(true);
+      try {
+        const { digest } = await dubheTx.execTx(buildFn);
+        onSuccess?.();
+        txToast(successMsg, digest);
+        setTimeout(refresh, 1500);
+      } catch (err: any) {
+        if (err instanceof SessionInvalidatedError) {
+          toast.error('Session is no longer valid — please activate it again.');
+        } else {
+          console.error('tx error:', err);
+          toast.error(`Transaction failed: ${err?.message ?? err}`);
+        }
+        setTimeout(refresh, 500);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [checkPreconditions, dubheTx, txToast, refresh]
+  );
+
+  // ── Onboarding actions ──────────────────────────────────────────────────────
+
+  const handleCreateStorage = useCallback(
+    () =>
+      execTxWithMainWallet((tx) => {
+        tx.moveCall({
+          target: `${pkg}::user_storage_init::init_user_storage`,
+          arguments: [tx.object(hubId), tx.object(storageId)]
+        });
+      }, 'UserStorage created! Now register to play.'),
+    [execTxWithMainWallet, pkg, hubId, storageId]
+  );
+
+  const handleRegister = useCallback(
+    () =>
+      execTxWithMainWallet((tx) => {
+        if (!userStorageId) throw new Error('UserStorage not found');
+        tx.moveCall({
+          target: `${pkg}::player_system::register`,
+          arguments: [tx.object(storageId), tx.object(userStorageId)]
+        });
+      }, 'Welcome to Card Duel! You received 500 gold and a starter deck.'),
+    [execTxWithMainWallet, pkg, storageId, userStorageId]
+  );
+
+  return {
+    // context
+    account,
+    isConnected,
+    contract,
+    ecsWorld,
+    graphqlClient,
+    network,
+    pkg,
+    hubId,
+    storageId,
+    // state
+    player,
+    balance,
+    userStorageId,
+    isLoading,
+    setIsLoading,
+    // session
+    session,
+    // actions
+    refresh,
+    execTx,
+    execTxWithMainWallet,
+    handleCreateStorage,
+    handleRegister,
+    signAndExecuteTransaction,
+    txToast
+  };
+}

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

@@ -0,0 +1,24 @@
+import type { Metadata } from 'next';
+import { Providers } from './providers';
+import './globals.css';
+import '@mysten/dapp-kit/dist/index.css';
+
+export const metadata: Metadata = {
+  title: 'Card Duel — Full-Chain PvP Card Battles',
+  description:
+    'A full-chain PvP card battle game (1v1 duels + multiplayer brawls) built on Sui with Dubhe'
+};
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="antialiased" suppressHydrationWarning>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,123 @@
+'use client';
+
+/**
+ * Leaderboard — ladder rating ranking from the indexed `profile` resource.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { motion } from 'framer-motion';
+
+import { useGame } from '../hooks/useGame';
+import { GameShell } from '../components/GameShell';
+import { IconTrophy, IconMedal } from '../components/icons';
+import { shortAddr } from '../lib/game';
+
+interface Entry {
+  address: string;
+  wins: number;
+  losses: number;
+  rating: number;
+  rank: number;
+}
+
+export default function LeaderboardPage() {
+  const game = useGame(15000);
+  const { account, graphqlClient } = game;
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchLeaderboard = useCallback(async () => {
+    if (!graphqlClient) return;
+    setLoading(true);
+    try {
+      const result = await graphqlClient.getAllTables<any>('profile', {
+        first: 50,
+        orderBy: [{ field: 'rating', direction: 'DESC' }]
+      });
+      const edges = result?.edges ?? [];
+      setEntries(
+        edges
+          .filter((e: any) => !e.node.isDeleted)
+          .map((e: any, i: number) => ({
+            address: e.node.entityId,
+            wins: Number(e.node.wins ?? 0),
+            losses: Number(e.node.losses ?? 0),
+            rating: Number(e.node.rating ?? 0),
+            rank: i + 1
+          }))
+      );
+    } catch (err) {
+      console.error('fetchLeaderboard error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [graphqlClient]);
+
+  useEffect(() => {
+    fetchLeaderboard();
+    const interval = setInterval(fetchLeaderboard, 10000);
+    return () => clearInterval(interval);
+  }, [fetchLeaderboard]);
+
+  return (
+    <GameShell game={game} gate={false}>
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center gap-2 mb-6">
+          <IconTrophy size={22} />
+          <h2 className="font-pixel text-indigo-300 text-sm">LADDER RANKING</h2>
+        </div>
+
+        {loading && entries.length === 0 ? (
+          <div className="flex items-center justify-center py-12">
+            <div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+          </div>
+        ) : entries.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="font-pixel text-indigo-600 text-xs">No duelists ranked yet.</p>
+            <p className="text-indigo-700 text-xs mt-2">Win matches to climb the ladder!</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {entries.map((entry, i) => {
+              const isMe = entry.address === account?.address;
+              return (
+                <motion.div
+                  key={entry.address}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: Math.min(i * 0.04, 0.6) }}
+                  className={`flex items-center justify-between px-4 py-3 rounded-xl border ${
+                    isMe
+                      ? 'bg-indigo-800/40 border-indigo-500'
+                      : 'bg-slate-950/50 border-indigo-900/40'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 flex justify-center">
+                      {entry.rank <= 3 ? (
+                        <IconMedal rank={entry.rank as 1 | 2 | 3} size={26} />
+                      ) : (
+                        <span className="font-pixel text-indigo-600 text-sm">#{entry.rank}</span>
+                      )}
+                    </div>
+                    <p className="text-sm text-indigo-200 font-pixel">
+                      {shortAddr(entry.address)}
+                      {isMe && <span className="text-amber-400 ml-2">(you)</span>}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-4 text-xs">
+                    <span className="text-emerald-400 font-pixel">{entry.wins}W</span>
+                    <span className="text-red-400 font-pixel">{entry.losses}L</span>
+                    <span className="text-indigo-300 font-pixel tabular-nums w-14 text-right">
+                      {entry.rating.toLocaleString()}
+                    </span>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </GameShell>
+  );
+}

package/templates/nextjs/sui-card-duel/packages/client/src/app/lib/game.ts

@@ -0,0 +1,77 @@
+/**
+ * Game constants mirrored from the Move contracts
+ * (card_system.move / duel_system.move / brawl_system.move).
+ */
+
+// ── Card kinds (enum CardKind) ────────────────────────────────────────────────
+
+export const KIND_STRIKE = 1;
+export const KIND_FIREBALL = 2;
+export const KIND_HEAL = 3;
+export const KIND_SHIELD = 4;
+
+export const KIND_NAME: Record<number, string> = {
+  [KIND_STRIKE]: 'Strike',
+  [KIND_FIREBALL]: 'Fireball',
+  [KIND_HEAL]: 'Heal',
+  [KIND_SHIELD]: 'Shield'
+};
+
+export const KIND_EMOJI: Record<number, string> = {
+  [KIND_STRIKE]: '⚔️',
+  [KIND_FIREBALL]: '🔥',
+  [KIND_HEAL]: '💚',
+  [KIND_SHIELD]: '🛡️'
+};
+
+export const isAttackKind = (kind: number) => kind === KIND_STRIKE || kind === KIND_FIREBALL;
+export const isDefenseKind = (kind: number) => kind === KIND_HEAL || kind === KIND_SHIELD;
+
+// ── Rarities (enum Rarity) ────────────────────────────────────────────────────
+
+export const RARITY_COMMON = 0;
+export const RARITY_RARE = 1;
+export const RARITY_EPIC = 2;
+
+export const RARITY_NAME: Record<number, string> = {
+  [RARITY_COMMON]: 'Common',
+  [RARITY_RARE]: 'Rare',
+  [RARITY_EPIC]: 'Epic'
+};
+
+export const RARITY_COLOR: Record<number, string> = {
+  [RARITY_COMMON]: 'text-slate-400 border-slate-600',
+  [RARITY_RARE]: 'text-sky-400 border-sky-600',
+  [RARITY_EPIC]: 'text-fuchsia-400 border-fuchsia-600'
+};
+
+// ── Match states (enum MatchState) ────────────────────────────────────────────
+
+export const STATE_WAITING = 0; // duel: invite pending / brawl: room open
+export const STATE_ACTIVE = 1;
+export const STATE_FINISHED = 2;
+
+export const DECK_SIZE = 5;
+
+// ── Shared types ──────────────────────────────────────────────────────────────
+
+export interface CardData {
+  cardId: string;
+  kind: number;
+  power: number;
+  rarity: number;
+}
+
+export interface ProfileData {
+  wins: number;
+  losses: number;
+  rating: number;
+}
+
+export interface BattleStateData {
+  matchId: string;
+  hp: bigint;
+  shield: bigint;
+}
+
+export const shortAddr = (addr: string) => (addr ? `${addr.slice(0, 6)}…${addr.slice(-4)}` : '—');