more functions

frontend/src/components/MainPage.tsx

@@ -6,7 +6,7 @@ const MainPage = () => {
   return (
     <div>
       <div className="flex flex-col">
-        <Navbar />
+        {/*<Navbar />*/}
         <Table/>
       </div>
     </div>

frontend/src/components/Table.tsx

@@ -1,30 +1,104 @@
 import React, {useState, useEffect} from "react"
 import cardBackground from "../CryptoHoldem_assests/Cards new/Card Background.png"
 
-import { Button, Modal, notification } from "antd";
+import blueA from "../CryptoHoldem_assests/Cards new/Blue/Card Blue A.png"
+import blueJ from "../CryptoHoldem_assests/Cards new/Blue/Card Blue J.svg"
+import blueK from "../CryptoHoldem_assests/Cards new/Blue/Card Blue Q.svg"
+import blueQ from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 1.svg"
+import blue2 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 2.svg"
+import blue3 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 3.svg"
+import blue4 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 4.svg"
+import blue5 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 5.svg"
+import blue6 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 6.svg"
+import blue7 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 7.svg"
+import blue8 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 8.svg"
+import blue9 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 9.svg"
+import blue10 from "../CryptoHoldem_assests/Cards new/Blue/Card Blue 10.svg"
+
+import pinkA from "../CryptoHoldem_assests/Cards new/Pink/Card Pink A.svg"
+import pinkJ from "../CryptoHoldem_assests/Cards new/Pink/Card Pink J.svg"
+import pinkK from "../CryptoHoldem_assests/Cards new/Pink/Card Pink Q.svg"
+import pinkQ from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 1.svg"
+import pink2 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 2.svg"
+import pink3 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 3.svg"
+import pink4 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 4.svg"
+import pink5 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 5.svg"
+import pink6 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 6.svg"
+import pink7 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 7.svg"
+import pink8 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 8.svg"
+import pink9 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 9.svg"
+import pink10 from "../CryptoHoldem_assests/Cards new/Pink/Card Pink 10.svg"
+
+import greenA from "../CryptoHoldem_assests/Cards new/Green/Card Green A.svg"
+import greenJ from "../CryptoHoldem_assests/Cards new/Green/Card Green J.svg"
+import greenK from "../CryptoHoldem_assests/Cards new/Green/Card Green Q.svg"
+import greenQ from "../CryptoHoldem_assests/Cards new/Green/Card Green 1.svg"
+import green2 from "../CryptoHoldem_assests/Cards new/Green/Card Green 2.svg"
+import green3 from "../CryptoHoldem_assests/Cards new/Green/Card Green 3.svg"
+import green4 from "../CryptoHoldem_assests/Cards new/Green/Card Green 4.svg"
+import green5 from "../CryptoHoldem_assests/Cards new/Green/Card Green 5.svg"
+import green6 from "../CryptoHoldem_assests/Cards new/Green/Card Green 6.svg"
+import green7 from "../CryptoHoldem_assests/Cards new/Green/Card Green 7.svg"
+import green8 from "../CryptoHoldem_assests/Cards new/Green/Card Green 8.svg"
+import green9 from "../CryptoHoldem_assests/Cards new/Green/Card Green 9.svg"
+import green10 from "../CryptoHoldem_assests/Cards new/Green/Card Green 10.svg"
+
+import redA from "../CryptoHoldem_assests/Cards new/Red/Card Red A.svg"
+import redJ from "../CryptoHoldem_assests/Cards new/Red/Card Red J.svg"
+import redK from "../CryptoHoldem_assests/Cards new/Red/Card Red Q.svg"
+import redQ from "../CryptoHoldem_assests/Cards new/Red/Card Red 1.svg"
+import red2 from "../CryptoHoldem_assests/Cards new/Red/Card Red 2.svg"
+import red3 from "../CryptoHoldem_assests/Cards new/Red/Card Red 3.svg"
+import red4 from "../CryptoHoldem_assests/Cards new/Red/Card Red 4.svg"
+import red5 from "../CryptoHoldem_assests/Cards new/Red/Card Red 5.svg"
+import red6 from "../CryptoHoldem_assests/Cards new/Red/Card Red 6.svg"
+import red7 from "../CryptoHoldem_assests/Cards new/Red/Card Red 7.svg"
+import red8 from "../CryptoHoldem_assests/Cards new/Red/Card Red 8.svg"
+import red9 from "../CryptoHoldem_assests/Cards new/Red/Card Red 9.svg"
+import red10 from "../CryptoHoldem_assests/Cards new/Red/Card Red 10.svg"
+
 
 
+import { Button, Modal, notification } from "antd";
 import playerOne from "../CryptoHoldem_assests/Player/head-cat.png"
 import playerPlaceholder from "../CryptoHoldem_assests/Player/Placeholder Player/Placeholder Player 3.svg"
 import mainPlayer from "../CryptoHoldem_assests/Player/head-whale-alive.png"
 
+
+
 import roundTable from "../CryptoHoldem_assests/Rest/Pixel Table.png"
 import { Contract, Eip1193Provider, ethers } from 'ethers';
 
 import { BrowserProvider } from "ethers";
 import { use } from "chai";
 
 const Table: React.FC = () => {
+
+  const [ownBudget, setOwnBudget] = useState<string>("0.00");
+  const [playerBudget, setPlayerBudget] = useState<string>("0.00");
+  const [potBudget, setPotBudget] = useState<string>("0.00");
+
+  const [inputField, setInputField] = useState<number|undefined>()
+
+  const [ownCardLeft, setOwnCardLeft] = useState()
+  const [ownCardRight, setOwnCardRight] = useState()
+  const [tableCardOne, setTableCardOne] = useState()
+  const [tableCardTwo, setTableCardTwo] = useState()
+  const [tableCardThree, setTableCardThree] = useState()
+  const [tableCardFour, setTableCardFour] = useState()
+  const [tableCardFive, setTableCardFive] = useState()
+
+
   const [api] = notification.useNotification();
-  
+
   useEffect(() => {
     const interval = setInterval(() => {
       getState();
     }, 500);
 
     return () => clearInterval(interval);
   }, []);
-  
+
   const abi = ["function bet() public", "function fold() public", "function getState() public view"];
 
   var provider =  new BrowserProvider(window.ethereum as Eip1193Provider);
@@ -50,7 +124,7 @@ const Table: React.FC = () => {
       console.warn("failed to bet..", err);
       //openNotification();
     }
-  } 
+  }
 
   const getState = async () => {
     try {
@@ -64,7 +138,7 @@ const Table: React.FC = () => {
       console.warn("failed to get state...", err);
       //openNotification();
     }
-  } 
+  }
 
   const fold = async () => {
     try {
@@ -78,16 +152,16 @@ const Table: React.FC = () => {
       console.warn("failed to fold..", err);
       //openNotification();
     }
-  } 
+  }
 
   return (
     <div className={"flex justify-center bg-primary h-[94vH]"}>
       <div>
         <img src={roundTable} alt="Table" className="w-full roundTable " />
-        <p className={"text-white bg-[#500004] rounded absolute top-[35%] left-[43%] text-4xl pr-2 pl-2 pt-1 pb-1 "}>Total Pot: 200$</p>
+        <p className={"text-white bg-[#500004] rounded absolute top-[35%] left-[43%] text-4xl pr-2 pl-2 pt-1 pb-1 "}>Total Pot: {potBudget}$</p>
 
-        <p className={"bg-cgrey text-primary rounded absolute top-[31%] left-[15.5%] text-2xl p-1"}>2000$</p>
-        <p className={"bg-cgrey text-primary rounded absolute top-[87%] right-[23%] text-2xl p-1"}>2000$</p>
+        <p className={"bg-cgrey text-primary rounded absolute top-[31%] left-[15.5%] text-2xl p-1"}>{playerBudget}$</p>
+        <p className={"bg-cgrey text-primary rounded absolute top-[87%] right-[23%] text-2xl p-1"}>{ownBudget}$</p>
         <div className={"flex flex-col absolute right-[32%] top-[65%] w-[8%] gap-3"}>
           <button
             className={"text-primary bg-cgrey hover:bg-white rounded text-2xl pr-3 pl-3"} onClick={fold}>
@@ -97,7 +171,7 @@ const Table: React.FC = () => {
             className={"text-primary bg-cgrey hover:bg-white rounded text-2xl pr-3 pl-3"} onClick={bet}>
             Check
           </button>
-          <button 
+          <button
             className={"text-primary bg-cgrey hover:bg-white rounded text-2xl pr-3 pl-3"} onClick={bet}>
             Raise
           </button>