Merge pull request #41 from NovaDrake76/dev

Dev

backend/routes/userRoutes.js

@@ -511,8 +511,9 @@ router.post('/claimBonus', authMiddleware.isAuthenticated, async (req, res) => {
       let currentBonus = user.bonusAmount; // Get current bonus amount
       user.walletBalance += user.bonusAmount; // Add bonus to wallet
 
-      user.nextBonus = new Date(currentTime.getTime() + 15 * 60000);      // Set next bonus time to 15 min later
-      user.bonusAmount = 200; // Set bonus amount to 20 for next time
+      user.nextBonus = new Date(currentTime.getTime() + 8 * 60000);      // Set next bonus time to 8 min later
+      // Set bonus amount to 200 * 10% of the user current level
+      user.bonusAmount = Math.floor(200 * (1 + 0.1 * user.level));
 
       // Save updated user
       await user.save();

src/components/Countdown.tsx

@@ -7,7 +7,7 @@ interface CountdownProps {
 }
 
 const Countdown: React.FC<CountdownProps> = ({ nextBonus, color = "#2d2b49", bold = true }) => {
-    const [untilNextBonus, setUntilNextBonus] = useState<string>("15:00");
+    const [untilNextBonus, setUntilNextBonus] = useState<string>("8:00");
 
     useEffect(() => {
         const interval = setInterval(() => {

src/components/Item.tsx

@@ -57,7 +57,6 @@ const Item: React.FC<itemProps> = ({ item, fixable, setRefresh }) => {
           className={` w-32 md:w-44 h-32 md:h-44 hover:scale-105 transition-all object-contain ${loaded ? '' : 'hidden'}`}
           onLoad={() => setLoaded(true)}
         />
-
         <div
           className="w-auto"
           style={{
@@ -75,7 +74,7 @@ const Item: React.FC<itemProps> = ({ item, fixable, setRefresh }) => {
           <BsPinAngleFill className="text-2xl text-blue-500 hover:text-blue-300 transition-all cursor-pointer" />
         </div>
       )}
-      <div className="flex gap-2 items-center -ml-1">
+      <div className="flex gap-2 items-center -ml-1 max-w-[160px]">
         <div className={`w-1 h-1 md:h-2 md:w-2 aspect-square rounded-full`} style={{
           backgroundColor: color
         }} />

src/components/header/Navbar/RightContent.tsx

@@ -39,7 +39,7 @@ const RightContent: React.FC<RightContentProps> = ({ loading, userData, setOpenU
                             currency: "DOL",
                             maximumFractionDigits: 0,
                         })
-                            .format(userData?.walletBalance)
+                            .format(Math.floor(userData?.walletBalance))
                             .replace("DOL", "K₽")}
                     </div>
                 </div>

src/pages/Profile/Profile.tsx

@@ -108,7 +108,7 @@ const Profile = () => {
   }, [refresh]);
 
   useEffect(() => {
-    setRefresh(true);
+    getInventoryInfo();
   }, [page]);
 
 

src/pages/Profile/UserInfo.tsx

@@ -134,8 +134,8 @@ const UserInfo: React.FC<UserProps> = ({
             </div>
             <div className="flex w-full items-center justify-between">
               <span className="text-[#dddcfc] font-semibold">
-                {`XP ${new Intl.NumberFormat("en-US").format(xp)} / 
-                ${new Intl.NumberFormat("en-US").format(calculateRequiredXP(level))
+                {`XP ${new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(xp)} / 
+    ${new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(calculateRequiredXP(level))
                   }`}
               </span>
               <Tooltip id="my-tooltip" />

src/pages/Slot/Game.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import SlotColumn from './SlotColumn';
 import { SlotProps } from './Types';
+import bottomBar from "/images/bottombar.webp"
+import Sidebar from "/images/sidebar.webp"
+import bar from "/images/bar.webp"
 
 interface SlotMachineProps {
     grid: string[];
@@ -13,13 +16,13 @@ const Game: React.FC<SlotMachineProps> = ({ grid, isSpinning, data, winningLines
 
     const renderSidebar = (index: number) => {
         return (
-            <img src={"/images/sidebar.png"} alt="bottom bar" className={`h-[340px] w-2 md:w-6 -mb-4 ${index == 1 ? "scale-x-[-1]" : ""}`} />
+            <img src={Sidebar} alt="bottom bar" className={`h-[340px] w-2 md:w-6 -mb-4 ${index == 1 ? "scale-x-[-1]" : ""}`} />
         )
     }
 
     return (
         <div className="flex flex-col justify-center items-center">
-            <img src={"/images/bottombar.png"} alt="bottom bar" className='w-screen md:w-[416px] scale-y-[-1]  ' />
+            <img src={bottomBar} alt="bottom bar" className='w-screen md:w-[416px] scale-y-[-1]  ' />
             <div className="flex ">
                 {renderSidebar(0)}
                 <div className="flex bg-gray-800 w-full md:min-w-[330px] min-h-[340px]">
@@ -36,7 +39,7 @@ const Game: React.FC<SlotMachineProps> = ({ grid, isSpinning, data, winningLines
                                 <SlotColumn symbols={[grid[line.line[0]], grid[line.line[1]], grid[line.line[2]]]}
                                     isSpinning={isSpinning} position={index} winningLines={winningLines} />
                                 {
-                                    index !== 2 && <img src={"/images/bar.webp"} alt="bar" className={`
+                                    index !== 2 && <img src={bar} alt="bar" className={`
                                 absolute right-0 overflow-hidden h-[340px] w-1 ${index == 0 ? 'scale-x-[-1]' : ''}
                                 `} />
                                 }
@@ -48,10 +51,10 @@ const Game: React.FC<SlotMachineProps> = ({ grid, isSpinning, data, winningLines
                 {renderSidebar(1)}
 
             </div >
-            <img src={"/images/bottombar.png"} alt="bottom bar" className='w-screen md:w-[416px] z-10' />
+            <img src={bottomBar} alt="bottom bar" className='w-screen md:w-[416px] z-10' />
 
             <div className='bg-[#AA1520] w-full  text-white text-xl font-bold p-1'>
-                <div className="rounded-full border-[#ECA823] border-4 w-full p-2 flex items-center justify-center min-h-[50px]"
+                <div className="rounded-full border-[#ECA823] border-4 w-full p-2 flex items-center justify-center min-h-[56px]"
                     style={{
                         boxShadow: "inset 0px 0px 10px 1px #000",
                     }}

src/pages/Slot/Slot.tsx

@@ -1,16 +1,13 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import Game from './Game';
 import { spinSlots } from '../../services/games/GamesServices';
 import { toast } from 'react-toastify';
 import { SlotProps } from './Types';
-import { FaCoins } from "react-icons/fa";
-import { BiWallet } from "react-icons/bi";
-import { TbPigMoney } from "react-icons/tb";
-import UserContext from '../../UserContext';
 import BigWinAlert from './BigWinAlert';
-import Monetary from '../../components/Monetary';
 import RenderMike from './RenderMike';
 import bigwin from "/bigwin.mp3"
+import ValueViewer from './ValueViewer';
+import UserContext from '../../UserContext';
 
 const renderPlaceholder = () => {
     const options = ['red', 'blue', 'green', 'yin_yang', 'hakkero', 'yellow', 'wild'];
@@ -26,18 +23,36 @@ const Slots = () => {
     const [totalWins, setTotalWins] = useState<number>(0);
     const [openBigWin, setOpenBigWin] = useState<boolean>(false);
     const [lostCount, setLostCount] = useState<number>(0);
+    const audioRef = useRef<HTMLAudioElement | null>(null);
     const { userData } = useContext(UserContext);
 
+    const startAudio = () => {
+        setTimeout(() => {
+            if (audioRef.current) {
+                audioRef.current.volume = 0.04;
+                audioRef.current.play();
+            }
+        }, 2800);
+    };
+
+    const pauseAudio = () => {
+        if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+        }
+    };
+
+
     const handleClick = () => {
         if (openBigWin) {
             setOpenBigWin(false);
+            pauseAudio();
         }
     };
 
-
     useEffect(() => {
         setTimeout(() => {
-            setTotalWins(totalWins + (response?.totalPayout || 0));
+            setTotalWins(response?.totalPayout || 0);
         }, 3000);
     }, [response]);
 
@@ -49,18 +64,16 @@ const Slots = () => {
         };
     }, [openBigWin]);
 
-    //fuction to play bigwin.mp3
-    const playBigWin = () => {
-        const audio = new Audio(bigwin);
-        //play at 20% volume
-        audio.volume = 0.2;
-        audio.play();
-    }
-
-
 
     const handleSpin = async () => {
         setOpenBigWin(false);
+        setTotalWins(0);
+
+        if (userData?.walletBalance < betAmount) {
+            toast.error("Insufficient funds");
+            return;
+        }
+
         try {
             const response = await spinSlots(betAmount);
             setResponse(response);
@@ -69,9 +82,7 @@ const Slots = () => {
             setIsSpinning(true);
             if (response.totalPayout >= betAmount * 8) {
                 setOpenBigWin(true);
-                setTimeout(() => {
-                    playBigWin();
-                }, 2800);
+                startAudio();
             }
 
             if (response.totalPayout == 0) {
@@ -108,30 +119,7 @@ const Slots = () => {
         );
     };
 
-    const renderValueViewer = (type: "balance" | "bet" | "wins") => {
-        return (
-            <div className="flex bg-black/30 p-2 rounded w-full md:w-[128px] items-center justify-between gap-4 text-sm">
-                <span className='text-unique'>
-                    {
-                        type == "balance" ? <BiWallet /> :
-                            type == "bet" ? <FaCoins /> :
-                                <TbPigMoney />
-                    }
-                </span>
-                <span className='truncate'>
-                    {
-                        type == "balance" ?
-                            <Monetary value={userData?.walletBalance} />
-                            :
-                            type == "bet" ? <Monetary value={betAmount} />
-                                :
-                                <Monetary value={totalWins} />
 
-                    }
-                </span>
-            </div>
-        )
-    }
 
     const getCurrentMike = () => {
         if (response) {
@@ -152,6 +140,10 @@ const Slots = () => {
             {
                 openBigWin && <BigWinAlert value={response?.totalPayout || 0} />
             }
+            <audio
+                ref={audioRef}
+                src={bigwin}
+            />
 
             <div className=" md:p-4 pb-1">
                 <RenderMike status={
@@ -166,7 +158,8 @@ const Slots = () => {
 
                     <div className="flex w-full items-center justify-center gap-2">
                         {
-                            ["balance", "bet", "wins"].map((type) => renderValueViewer(type as "balance" | "bet" | "wins"))
+                            ["balance", "bet", "wins"].map((type) => <ValueViewer type={type as "balance" | "bet" | "wins"} betAmount={betAmount} totalWins={totalWins} />
+                            )
                         }
                     </div>
                     <div className="flex items-center justify-center gap-8">

src/pages/Slot/ValueViewer.tsx

@@ -0,0 +1,43 @@
+import { FaCoins } from "react-icons/fa";
+import { BiWallet } from "react-icons/bi";
+import { TbPigMoney } from "react-icons/tb";
+import Monetary from '../../components/Monetary';
+import UserContext from '../../UserContext';
+import { useContext } from "react";
+
+
+interface ValueViewerProps {
+    type: "balance" | "bet" | "wins";
+    betAmount: number;
+    totalWins: number;
+}
+
+
+const ValueViewer: React.FC<ValueViewerProps> = ({ type, betAmount, totalWins }) => {
+    const { userData } = useContext(UserContext);
+
+    return (
+        <div className="flex bg-black/30 p-2 rounded w-full md:w-[128px] items-center justify-between gap-4 text-sm">
+            <span className='text-unique'>
+                {
+                    type == "balance" ? <BiWallet /> :
+                        type == "bet" ? <FaCoins /> :
+                            <TbPigMoney />
+                }
+            </span>
+            <span className='truncate'>
+                {
+                    type == "balance" ?
+                        <Monetary value={userData?.walletBalance} />
+                        :
+                        type == "bet" ? <Monetary value={betAmount} />
+                            :
+                            <Monetary value={totalWins} />
+
+                }
+            </span>
+        </div>
+    )
+}
+
+export default ValueViewer;