22.01.2024 - more changes to beerpong

sth-frontend/src/features/beerpong/components/Cup.jsx

@@ -2,6 +2,6 @@ import React from 'react';
 
 const Cup = ({state}) => {
 
-    return <div className={`w-12 h-12 ${state ? 'bg-green-500' : 'bg-red-500'} rounded-full m-2`}/>;
+    return <div className={`w-16 h-16 ${state ? 'bg-green-500' : 'bg-red-500'} rounded-full m-2`}/>;
 };
 export default Cup;

sth-frontend/src/features/beerpong/components/CupFormation.jsx

@@ -141,20 +141,38 @@ const CupFormation = () => {
     }
 
     return (
-        <div className="flex flex-row items-center">
-            <div className="flex flex-row">
-                {renderLeft()}
+        <div className="h-screen w-screen flex justify-center items-center bg-deepPurple">
+            <div className="flex flex-col items-center">
+                <h1 className="text-7xl text-darkGray font-bold ">Score:</h1>
+                <div className="flex pb-10 ">
+                    <div>
+                        2
+                    </div>
+                    <p>
+                        :
+                    </p>
+                    <div>
+                        1
+                    </div>
+                </div>
+            <div className="flex flex-row justify-between items-center bg-darkGray rounded-3xl border-lightGray border-2 h-fit">
+                <div className="flex flex-row p-5">
+                    {renderLeft()}
+                </div>
+                <div className="bg-lightGray h-80 w-1 rounded"></div>
+                <div className={"w-96"}>
+                    <button onClick={() => {
+                        setCupStates({...(cupStates), 24: true})
+                    }
+                    }>Click
+                    </button>
+                    <button onClick={testApi}>Test Api Call</button>
+                </div>
+                <div className="bg-lightGray h-80 w-1 rounded"></div>
+                <div className="flex flex-row-reverse flex-row p-5">
+                    {renderRight()}
+                </div>
             </div>
-            <div className={"w-96"}>
-                <button onClick={() => {
-                    setCupStates({...(cupStates), 24: true})
-                }
-                }>Click
-                </button>
-                <button onClick={testApi}>Test Api Call</button>
-            </div>
-            <div className="flex flex-row-reverse flex-row">
-                {renderRight()}
             </div>
         </div>
     );