create-dubhe 1.2.0-pre.98 → 2.0.0

package/templates/nextjs/sui-farm/packages/client/src/app/globals.css

@@ -0,0 +1,423 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+:root {
+  --background: #1a2e1a;
+  --foreground: #f0e6c8;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Pixel art image rendering */
+.pixel-art {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+/* Farm tile style */
+.farm-tile {
+  @apply relative rounded-lg border-2 border-amber-700 bg-amber-900/40 overflow-hidden cursor-pointer
+         transition-transform hover:scale-105 active:scale-95;
+}
+
+.farm-tile-empty {
+  @apply border-dashed border-amber-800/50 bg-amber-950/30 cursor-pointer;
+}
+
+/* Progress bar */
+.progress-bar-fill {
+  transition: width 1s linear;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PET ANIMATIONS
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Bunny — quick vertical hop */
+@keyframes pet-hop {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-8px) scaleX(0.92);
+  }
+  60% {
+    transform: translateY(-6px) scaleX(0.92);
+  }
+}
+.pet-anim-bunny {
+  animation: pet-hop 1s ease-in-out infinite;
+}
+
+/* Chick — left-right head wobble */
+@keyframes pet-wobble {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-10deg);
+  }
+  75% {
+    transform: rotate(10deg);
+  }
+}
+.pet-anim-chick {
+  animation: pet-wobble 0.8s ease-in-out infinite;
+}
+
+/* Fox — tail-wag rotation pivot at bottom */
+@keyframes pet-wag {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: bottom center;
+  }
+  30% {
+    transform: rotate(-8deg);
+    transform-origin: bottom center;
+  }
+  70% {
+    transform: rotate(8deg);
+    transform-origin: bottom center;
+  }
+}
+.pet-anim-fox {
+  animation: pet-wag 1.2s ease-in-out infinite;
+}
+
+/* Deer — gentle side sway */
+@keyframes pet-sway {
+  0%,
+  100% {
+    transform: translateX(0) rotate(0deg);
+  }
+  33% {
+    transform: translateX(-4px) rotate(-4deg);
+  }
+  66% {
+    transform: translateX(4px) rotate(4deg);
+  }
+}
+.pet-anim-deer {
+  animation: pet-sway 2s ease-in-out infinite;
+}
+
+/* Dragon — float up/down with scale pulse */
+@keyframes pet-float {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-7px) scale(1.04);
+  }
+}
+.pet-anim-dragon {
+  animation: pet-float 1.8s ease-in-out infinite;
+}
+
+/* Slow-down modifier for hungry pets (satiety 30-60) */
+.pet-anim-slow {
+  animation-duration: 3s !important;
+  opacity: 0.75;
+}
+
+/* Shake for starving pets (satiety < 30) */
+@keyframes pet-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-4px);
+  }
+  40% {
+    transform: translateX(4px);
+  }
+  60% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+}
+.pet-anim-starving {
+  animation: pet-shake 0.5s ease-in-out infinite !important;
+  filter: drop-shadow(0 0 4px #ef4444);
+}
+
+/* Egg idle wobble (ready state) */
+@keyframes egg-wobble-ready {
+  0%,
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+  20% {
+    transform: rotate(-8deg) scale(1.02);
+  }
+  40% {
+    transform: rotate(8deg) scale(1.02);
+  }
+  60% {
+    transform: rotate(-5deg) scale(1.01);
+  }
+  80% {
+    transform: rotate(5deg) scale(1.01);
+  }
+}
+.egg-ready {
+  animation: egg-wobble-ready 0.5s ease-in-out infinite;
+}
+
+/* Egg gentle rocking (>80% incubation progress) */
+@keyframes egg-rock {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  30% {
+    transform: rotate(-6deg);
+  }
+  70% {
+    transform: rotate(6deg);
+  }
+}
+.egg-rocking {
+  animation: egg-rock 1.4s ease-in-out infinite;
+}
+
+/* Egg glow pulse */
+@keyframes egg-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 4px #86efac);
+  }
+  50% {
+    filter: drop-shadow(0 0 12px #4ade80);
+  }
+}
+.egg-glow {
+  animation: egg-glow 1s ease-in-out infinite;
+}
+
+/* Egg crack: left half */
+@keyframes egg-crack-left {
+  0% {
+    transform: translateX(0) rotate(0deg) opacity(1);
+  }
+  100% {
+    transform: translateX(-40px) rotate(-30deg);
+    opacity: 0;
+  }
+}
+/* Egg crack: right half */
+@keyframes egg-crack-right {
+  0% {
+    transform: translateX(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(40px) rotate(30deg);
+    opacity: 0;
+  }
+}
+.egg-crack-left {
+  animation: egg-crack-left 0.4s ease-in forwards;
+}
+.egg-crack-right {
+  animation: egg-crack-right 0.4s ease-in forwards;
+}
+
+/* New pet pop-in after hatch */
+@keyframes pet-pop-in {
+  0% {
+    transform: scale(0) translateY(20px);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.4) translateY(-4px);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+.pet-pop-in {
+  animation: pet-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+/* Food fly — driven by inline style (JS sets --tx, --ty) */
+@keyframes food-fly {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--tx, -20px), var(--ty, -40px)) scale(0.4);
+    opacity: 0;
+  }
+}
+.food-fly {
+  animation: food-fly 0.5s ease-in forwards;
+}
+
+/* Heart particle float up */
+@keyframes heart-float {
+  0% {
+    transform: translateY(0) scale(1) rotate(var(--rot, 0deg));
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-48px) scale(0.6) rotate(var(--rot, 0deg));
+    opacity: 0;
+  }
+}
+.heart-float {
+  animation: heart-float 0.8s ease-out forwards;
+}
+
+/* Level-up star burst */
+@keyframes star-burst {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--sx, 0px), var(--sy, -30px)) scale(0);
+    opacity: 0;
+  }
+}
+.star-burst {
+  animation: star-burst 0.7s ease-out forwards;
+}
+
+/* Level-up gold glow on pet */
+@keyframes level-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 0px #fbbf24);
+  }
+  50% {
+    filter: drop-shadow(0 0 16px #fbbf24) drop-shadow(0 0 32px #f59e0b);
+  }
+}
+.level-up-glow {
+  animation: level-glow 0.8s ease-in-out 2;
+}
+
+/* Level-up banner slide-in / fade-out */
+@keyframes banner-slide {
+  0% {
+    transform: translateY(-12px);
+    opacity: 0;
+  }
+  20% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  70% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+}
+.level-banner {
+  animation: banner-slide 1.8s ease-in-out forwards;
+}
+
+/* Pet selected pulse ring */
+@keyframes pet-select-ring {
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.6);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.9), 0 0 14px rgba(251, 191, 36, 0.4);
+  }
+}
+.pet-selected {
+  animation: pet-select-ring 1.4s ease-in-out infinite;
+  border-color: rgb(251 191 36 / 0.8) !important;
+}
+
+/* Quick heartbeat when eating */
+@keyframes pet-eat {
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1.3);
+  }
+  65% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.pet-eating {
+  animation: pet-eat 0.35s ease-in-out forwards;
+}
+
+/* Ground strip shimmer inside habitat */
+@keyframes ground-shimmer {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 0.65;
+  }
+}
+.ground-shimmer {
+  animation: ground-shimmer 2.4s ease-in-out infinite;
+}
+
+/* Ranch pet shadow pulse */
+@keyframes pet-shadow-breathe {
+  0%,
+  100% {
+    transform: scaleX(1);
+    opacity: 0.28;
+  }
+  50% {
+    transform: scaleX(0.8);
+    opacity: 0.18;
+  }
+}
+.pet-shadow {
+  animation: pet-shadow-breathe 1.8s ease-in-out infinite;
+}
+
+/* Water ripple on trough */
+@keyframes water-ripple {
+  0% {
+    transform: scaleX(1);
+    opacity: 0.85;
+  }
+  50% {
+    transform: scaleX(1.04);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scaleX(1);
+    opacity: 0.85;
+  }
+}
+.water-ripple {
+  animation: water-ripple 1.6s ease-in-out infinite;
+}

package/templates/nextjs/sui-farm/packages/client/src/app/hooks/useWorldPermitId.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useDubhe } from '@0xobelisk/react/sui';
+import { DappStorageId } from 'contracts/deployment';
+
+/**
+ * Reads the WorldPermit object ID directly from DappStorage dynamic fields.
+ *
+ * The world_permit_id global resource is stored by deploy_hook as:
+ *   key  = [b"world_permit_id", b"object_id"]  (vector<vector<u8>>)
+ *   value = 32-byte BCS-encoded address
+ *
+ * This hook queries it once on mount and caches it for the session.
+ * It automatically stays correct across redeployments without any manual update.
+ */
+
+let _cached: string | null = null; // module-level cache — one fetch per browser session
+
+export function useWorldPermitId() {
+  const { contract, dappStorageId } = useDubhe();
+  const [permitId, setPermitId] = useState<string | null>(_cached);
+  const [loading, setLoading] = useState(_cached === null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (_cached) {
+      setPermitId(_cached);
+      setLoading(false);
+      return;
+    }
+
+    const storageId = dappStorageId ?? DappStorageId;
+    if (!contract || !storageId || storageId === '0x0') return;
+
+    setLoading(true);
+    setError(null);
+
+    const KEY_WORLD = Array.from(Buffer.from('world_permit_id'));
+    const KEY_OBJECT_ID = Array.from(Buffer.from('object_id'));
+
+    const dfName = {
+      type: 'vector<vector<u8>>',
+      value: [KEY_WORLD, KEY_OBJECT_ID]
+    };
+
+    (contract as any).suiInteractor.currentClient
+      .getDynamicFieldObject({ parentId: storageId, name: dfName })
+      .then((res: any) => {
+        const bytes: number[] = res?.data?.content?.fields?.value;
+        if (!Array.isArray(bytes) || bytes.length !== 32) {
+          throw new Error('world_permit_id field not found or malformed');
+        }
+        const hex = '0x' + bytes.map((b: number) => b.toString(16).padStart(2, '0')).join('');
+        _cached = hex;
+        setPermitId(hex);
+      })
+      .catch((err: any) => {
+        console.error('useWorldPermitId error:', err);
+        setError(err?.message ?? String(err));
+      })
+      .finally(() => setLoading(false));
+  }, [contract, dappStorageId]);
+
+  return { permitId, loading, error };
+}

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

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+import { Providers } from './providers';
+import './globals.css';
+import '@mysten/dapp-kit/dist/index.css';
+
+export const metadata: Metadata = {
+  title: 'Harvest — Full-Chain Farming',
+  description: 'A full-chain casual farming game 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-farm/packages/client/src/app/leaderboard/page.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit';
+import { useDubhe } from '@0xobelisk/react/sui';
+import { motion } from 'framer-motion';
+import { IconTrophy, IconMedal } from '../components/PetAvatar';
+import { IconGold } from '../components/icons/GameIcons';
+
+interface LeaderboardEntry {
+  address: string;
+  earned: bigint;
+  rank: number;
+}
+
+export default function LeaderboardPage() {
+  const account = useCurrentAccount();
+  const { ecsWorld, graphqlClient } = useDubhe();
+  const [entries, setEntries] = useState<LeaderboardEntry[]>([]);
+  const [seasonId, setSeasonId] = useState(0);
+  const [seasonEnd, setSeasonEnd] = useState<bigint>(BigInt(0));
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchLeaderboard = useCallback(async () => {
+    if (!ecsWorld || !graphqlClient) return;
+    setIsLoading(true);
+    try {
+      // Fetch season config (global resource, no entityId key)
+      const seasonResult = await graphqlClient
+        .getAllTables<any>('seasonConfig', { first: 1 })
+        .catch(() => null);
+      const season = seasonResult?.edges?.[0]?.node;
+      if (season) {
+        setSeasonId(Number(season.seasonId ?? 0));
+        setSeasonEnd(BigInt(season.endMs ?? 0));
+      }
+
+      // Query top earners via season_stats (sorted by earned amount)
+      const statsResult = await graphqlClient
+        .getAllTables<any>('seasonStats', {
+          first: 20,
+          orderBy: [{ field: 'amount', direction: 'DESC' }]
+        })
+        .catch(() => null);
+
+      const edges = statsResult?.edges ?? [];
+      setEntries(
+        edges.map((e, i) => ({
+          address: e.node.entityId,
+          earned: BigInt(e.node.amount ?? 0),
+          rank: i + 1
+        }))
+      );
+    } catch (err) {
+      console.error('fetchLeaderboard error:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [ecsWorld, graphqlClient]);
+
+  useEffect(() => {
+    if (ecsWorld) fetchLeaderboard();
+  }, [ecsWorld, fetchLeaderboard]);
+
+  const now = Date.now();
+  const timeLeft = Math.max(0, Number(seasonEnd) - now);
+  const daysLeft = Math.floor(timeLeft / 86400000);
+  const hoursLeft = Math.floor((timeLeft % 86400000) / 3600000);
+  const isSeasonActive = seasonId > 0 && timeLeft > 0;
+
+  const rankMedal = (rank: number) => {
+    if (rank <= 3) return <IconMedal rank={rank as 1 | 2 | 3} size={28} />;
+    return <span className="font-pixel text-amber-600 text-sm">#{rank}</span>;
+  };
+
+  return (
+    <div
+      className="min-h-screen p-4 md:p-6"
+      style={{ background: 'radial-gradient(ellipse at top, #1a3a1a 0%, #0a1a0a 100%)' }}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
+        <div className="flex items-center gap-2">
+          <IconTrophy size={24} />
+          <h1 className="font-pixel text-amber-300 text-sm">LEADERBOARD</h1>
+        </div>
+        <ConnectButton />
+      </div>
+
+      {/* Navigation */}
+      <div className="flex gap-2 mb-6">
+        {['Farm', 'Market', 'Leaderboard'].map((tab) => (
+          <a
+            key={tab}
+            href={tab === 'Farm' ? '/' : `/${tab.toLowerCase()}`}
+            className={`px-4 py-2 text-xs font-pixel rounded-lg transition-colors border
+              ${
+                tab === 'Leaderboard'
+                  ? 'bg-amber-700 text-amber-100 border-amber-600'
+                  : 'bg-amber-900/40 hover:bg-amber-800/40 text-amber-400 border-amber-700/30'
+              }`}
+          >
+            {tab}
+          </a>
+        ))}
+      </div>
+
+      {/* Season info */}
+      <div className="bg-amber-950/60 border border-amber-700/50 rounded-xl p-4 mb-6">
+        <div className="flex items-center justify-between flex-wrap gap-3">
+          <div>
+            <p className="font-pixel text-amber-300 text-xs">
+              {isSeasonActive
+                ? `Season ${seasonId}`
+                : seasonId === 0
+                ? 'No Active Season'
+                : `Season ${seasonId} Ended`}
+            </p>
+            {isSeasonActive && (
+              <p className="text-amber-500 text-xs mt-1">
+                {daysLeft}d {hoursLeft}h remaining · Top 3 earn Trophy NFTs
+              </p>
+            )}
+          </div>
+          {isSeasonActive && (
+            <div className="flex gap-2 text-xs text-amber-400">
+              <div className="flex items-center gap-1">
+                <IconTrophy size={14} />
+                <span className="font-pixel">Trophy for top 3</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Rankings */}
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <div className="w-8 h-8 border-2 border-amber-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      ) : entries.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="font-pixel text-amber-600 text-xs">No rankings yet.</p>
+          <p className="text-amber-700 text-xs mt-2">Start farming to appear here!</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: i * 0.05 }}
+                className={`flex items-center justify-between px-4 py-3 rounded-xl border
+                  ${
+                    isMe
+                      ? 'bg-amber-800/40 border-amber-500'
+                      : 'bg-amber-950/40 border-amber-800/30'
+                  }`}
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-8 flex justify-center">{rankMedal(entry.rank)}</div>
+                  <div>
+                    <p className="text-sm text-amber-200 font-pixel">
+                      {entry.address.slice(0, 6)}...{entry.address.slice(-4)}
+                      {isMe && <span className="text-amber-400 ml-2">(you)</span>}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1">
+                  <IconGold size={14} />
+                  <p className="text-amber-300 font-pixel text-sm tabular-nums">
+                    {Number(entry.earned).toLocaleString()}
+                  </p>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}