Enhance game features and UI

- Implement real player functionality for the Crash game. - Store and display the amount gambled and time spent on site. - Add an upgrade feature for increasing earnings per second on the homepage. - Include a leaderboard showcasing top player balances. - Add footer with creator credit: "made by @darksplice - Enjoy FreakyGambling." - Integrate with GitHub Pages for deployment. [skip gpt_engineer]
darksplice · Sep 26, 2024 · afe4242 · afe4242
1 parent 7f67cfb
commit afe4242
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 13 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -15,12 +15,14 @@ import ProtectedRoute from "./components/ProtectedRoute";
 import Sidebar from "./components/Sidebar";
 import Header from "./components/Header";
 import LoadingScreen from "./components/LoadingScreen";
+import Footer from "./components/Footer";
 
 const queryClient = new QueryClient();
 
 const App = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [user, setUser] = useState(null);
+  const [timeOnSite, setTimeOnSite] = useState(0);
 
   useEffect(() => {
     const storedUser = JSON.parse(localStorage.getItem('user'));
@@ -32,21 +34,39 @@ const App = () => {
 
   useEffect(() => {
     if (user) {
-      const interval = setInterval(() => {
+      const moneyInterval = setInterval(() => {
         setUser(prevUser => {
           const updatedUser = {
             ...prevUser,
-            balance: prevUser.balance + 1
+            balance: prevUser.balance + (prevUser.moneyPerSecond || 1/3)
           };
           localStorage.setItem('user', JSON.stringify(updatedUser));
           return updatedUser;
         });
-      }, 3000);
+      }, 1000);
 
-      return () => clearInterval(interval);
+      const timeInterval = setInterval(() => {
+        setTimeOnSite(prevTime => prevTime + 1);
+      }, 1000);
+
+      return () => {
+        clearInterval(moneyInterval);
+        clearInterval(timeInterval);
+      };
     }
   }, [user]);
 
+  useEffect(() => {
+    if (user && timeOnSite % 60 === 0) {
+      const updatedUser = {
+        ...user,
+        timeOnSite: (user.timeOnSite || 0) + 1
+      };
+      localStorage.setItem('user', JSON.stringify(updatedUser));
+      setUser(updatedUser);
+    }
+  }, [timeOnSite, user]);
+
   if (isLoading) {
     return <LoadingScreen />;
   }
@@ -55,7 +75,7 @@ const App = () => {
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
         <Toaster />
-        <BrowserRouter>
+        <BrowserRouter basename="/freakpay-gambleverse">
           <div className="flex h-screen bg-[#1a1b2e]">
             {user && <Sidebar />}
             <div className="flex flex-col flex-1">
@@ -72,6 +92,7 @@ const App = () => {
                   <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
                 </Routes>
               </div>
+              <Footer />
             </div>
           </div>
         </BrowserRouter>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-[#252640] text-white p-4 text-center">
+      <p>Made by @darksplice - Enjoy FreakyGambling</p>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Leaderboard.jsx b/src/components/Leaderboard.jsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+
+const Leaderboard = () => {
+  const [leaderboard, setLeaderboard] = useState([]);
+
+  useEffect(() => {
+    const users = JSON.parse(localStorage.getItem('users')) || [];
+    const sortedUsers = users.sort((a, b) => b.balance - a.balance).slice(0, 10);
+    setLeaderboard(sortedUsers);
+  }, []);
+
+  return (
+    <div className="bg-[#252640] rounded-lg shadow-md p-6 mt-8">
+      <h2 className="text-2xl font-semibold mb-4">Leaderboard</h2>
+      <div className="overflow-y-auto max-h-60">
+        {leaderboard.map((user, index) => (
+          <div key={index} className="flex justify-between items-center py-2 border-b border-gray-700">
+            <span>{index + 1}. {user.username}</span>
+            <span>${user.balance.toFixed(2)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Leaderboard;
diff --git a/src/components/UpgradeSystem.jsx b/src/components/UpgradeSystem.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+
+const UpgradeSystem = ({ user, setUser }) => {
+  const upgradeCost = (user.moneyPerSecond || 1/3) * 100;
+
+  const handleUpgrade = () => {
+    if (user.balance >= upgradeCost) {
+      const updatedUser = {
+        ...user,
+        balance: user.balance - upgradeCost,
+        moneyPerSecond: (user.moneyPerSecond || 1/3) + 1/3
+      };
+      localStorage.setItem('user', JSON.stringify(updatedUser));
+      setUser(updatedUser);
+    } else {
+      alert("Insufficient balance for upgrade!");
+    }
+  };
+
+  return (
+    <div className="bg-[#252640] rounded-lg shadow-md p-6 mt-8">
+      <h2 className="text-2xl font-semibold mb-4">Upgrade Money Generation</h2>
+      <p>Current rate: ${(user.moneyPerSecond || 1/3).toFixed(2)} per second</p>
+      <p>Upgrade cost: ${upgradeCost.toFixed(2)}</p>
+      <Button onClick={handleUpgrade} className="mt-4">Upgrade</Button>
+    </div>
+  );
+};
+
+export default UpgradeSystem;
diff --git a/src/pages/Crash.jsx b/src/pages/Crash.jsx
@@ -15,6 +15,16 @@ const Crash = () => {
   const canvasRef = useRef(null);
   const [players, setPlayers] = useState([]);
 
+  useEffect(() => {
+    const storedUsers = JSON.parse(localStorage.getItem('users')) || [];
+    const activePlayers = storedUsers.filter(u => u.username !== user.username).slice(0, 10);
+    setPlayers(activePlayers.map(p => ({
+      username: p.username,
+      bet: Math.floor(Math.random() * 1000) + 10,
+      multiplier: 1,
+    })));
+  }, [user.username]);
+
   useEffect(() => {
     let interval;
     if (gameState === 'playing') {
@@ -105,7 +115,7 @@ const Crash = () => {
     setIsCrashed(false);
     setMultiplier(1);
     setTotalEarnings(0);
-    simulatePlayers();
+    updatePlayerBets();
   };
 
   const handleCashOut = () => {
@@ -118,15 +128,20 @@ const Crash = () => {
     });
     setTotalEarnings(winnings);
     setGameState('waiting');
+    updateAmountGambled(bet);
   };
 
-  const simulatePlayers = () => {
-    const newPlayers = Array(Math.floor(Math.random() * 15) + 5).fill().map(() => ({
-      username: `Player${Math.floor(Math.random() * 1000)}`,
-      bet: Math.floor(Math.random() * 1000) + 10,
-      multiplier: (Math.random() * 2 + 1).toFixed(2),
-    }));
-    setPlayers(newPlayers);
+  const updatePlayerBets = () => {
+    setPlayers(prev => prev.map(player => ({
+      ...player,
+      multiplier: player.multiplier * (Math.random() * 0.5 + 1),
+    })));
+  };
+
+  const updateAmountGambled = (amount) => {
+    const stats = JSON.parse(localStorage.getItem('userStats')) || {};
+    stats.amountGambled = (stats.amountGambled || 0) + amount;
+    localStorage.setItem('userStats', JSON.stringify(stats));
   };
 
   return (

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from "@/components/ui/button";
+import Leaderboard from '../components/Leaderboard';
+import UpgradeSystem from '../components/UpgradeSystem';
 
 const Dashboard = () => {
   const [user, setUser] = useState(null);
   const [stats, setStats] = useState({
     amountGambled: 0,
     accountCreated: '',
     lifetimeBalance: 0,
+    timeOnSite: 0,
   });
 
   useEffect(() => {
@@ -18,6 +21,7 @@ const Dashboard = () => {
         amountGambled: 0,
         accountCreated: new Date().toISOString(),
         lifetimeBalance: storedUser.balance,
+        timeOnSite: 0,
       };
       setStats(storedStats);
     }
@@ -38,6 +42,7 @@ const Dashboard = () => {
           <p>Amount Gambled: ${stats.amountGambled.toFixed(2)}</p>
           <p>Account Created: {new Date(stats.accountCreated).toLocaleDateString()}</p>
           <p>Lifetime Balance: ${stats.lifetimeBalance.toFixed(2)}</p>
+          <p>Time on Site: {Math.floor(stats.timeOnSite / 60)} minutes</p>
         </div>
         <div className="bg-[#252640] rounded-lg shadow-md p-6">
           <h2 className="text-2xl font-semibold mb-4">Quick Links</h2>
@@ -54,6 +59,8 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
+      <UpgradeSystem user={user} setUser={setUser} />
+      <Leaderboard />
     </div>
   );
 };