practice mode

app/page.tsx

@@ -29,6 +29,7 @@ export default function Home() {
   const [dashboardError, setDashboardError] = useState<string | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [refreshCounter, setRefreshCounter] = useState(0);
+  const [isPracticeMode, setIsPracticeMode] = useState(false);
   const headerRef = useRef<HeaderRef>(null);
 
   // Poll for available tickets every 5 seconds (only when no ticket is available)
@@ -161,6 +162,7 @@ export default function Home() {
     console.log("game_close_signal", status);
     setHasTicket(false);
     setTicketTxHash(null);
+    setIsPracticeMode(false);
   };
 
   // Auto-hide payment success panel after 5 seconds
@@ -315,11 +317,15 @@ export default function Home() {
     <div className="min-h-screen">
       <Header ref={headerRef} />
       
-              {/* Game iframe - shown when user has a ticket */}
-        {hasTicket && (
+              {/* Game iframe - shown when user has a ticket or in practice mode */}
+        {(hasTicket || isPracticeMode) && (
           <div className="w-full h-screen flex justify-center items-center bg-white" style={{ marginTop: '80px' }}>
+            
             <iframe
-              src={`/Build/index.html?tx=${ticketTxHash}&highscore=${highscore}`}
+              src={isPracticeMode 
+                ? `/Build/index.html?isPractice=1&highscore=${highscore}`
+                : `/Build/index.html?tx=${ticketTxHash}&highscore=${highscore}`
+              }
               className="w-full h-full"
               title="Dino Game"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -328,8 +334,8 @@ export default function Home() {
           </div>
         )}
 
-      {/* Main content - only shown when no ticket */}
-      {!hasTicket && (
+      {/* Main content - only shown when no ticket and not in practice mode */}
+      {!hasTicket && !isPracticeMode && (
         <main className="pt-20">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
             <div className="text-center">
@@ -364,6 +370,14 @@ export default function Home() {
                     }
                   </button>
 
+                  {/* Practice Button */}
+                  <button
+                    onClick={() => setIsPracticeMode(true)}
+                    className="px-8 py-3 text-lg font-semibold rounded-xl shadow-lg transition-all duration-300 transform hover:scale-105 hover:-translate-y-1 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/30"
+                  >
+                    Practice Mode (Free)
+                  </button>
+
                   {/* Status Messages */}
                   {error && (
                     <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg max-w-md">