risk functionality like stake

frontend/src/components/Risk.tsx

@@ -0,0 +1,32 @@
+import React, { ChangeEvent } from 'react';
+
+// Define the possible options
+type Option = 'Low' | 'Medium' | 'High';
+
+// Define the props for the Selector component
+interface SelectorProps {
+    selectedOption: Option;
+    setSelectedOption: (option: Option) => void;
+}
+
+const Selector: React.FC<SelectorProps> = ({ selectedOption, setSelectedOption }) => {
+    const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+        setSelectedOption(event.target.value as Option);
+    };
+
+    return (
+        <div className='mt-2'>
+            <label>
+
+                <select className='w-full border-gray-700 border-2 bg-zinc-800 text-lg font-semibold' value={selectedOption} onChange={handleChange}>
+                    <option value="Low">Low</option>
+                    <option value="Medium">Medium</option>
+                    <option value="High">High</option>
+                </select>
+            </label>
+
+        </div>
+    );
+};
+
+export default Selector;

frontend/src/game/classes/BallManager.ts

@@ -12,12 +12,12 @@ export class BallManager {
     private requestId?: number;
     private onFinish?: (index: number,startX?: number) => void;
 
-    constructor(canvasRef: HTMLCanvasElement, onFinish?: (index: number,startX?: number) => void) {
+    constructor(canvasRef: HTMLCanvasElement,riskType : string, onFinish?: (index: number,startX?: number) => void) {
         this.balls = [];
         this.canvasRef = canvasRef;
         this.ctx = this.canvasRef.getContext("2d")!;
         this.obstacles = createObstacles();
-        this.sinks = createSinks();
+        this.sinks = createSinks(riskType);
         this.update();
         this.onFinish = onFinish;
     }

frontend/src/game/objects.ts

@@ -15,7 +15,7 @@ export interface Sink {
     multiplier?: number;
 }
 
-const MULTIPLIERS: {[ key: number ]: number} = {
+const LOW_MULTIPLIERS: {[ key: number ]: number} = {
     1: 16,
     2: 9,
     3: 2,
@@ -34,6 +34,44 @@ const MULTIPLIERS: {[ key: number ]: number} = {
     16: 9,
     17: 16
 }
+const MED_MULTIPLIERS: {[ key: number ]: number} = {
+    1: 110,
+    2: 41,
+    3: 10,
+    4: 5,
+    5: 3,
+    6: 1.5,
+    7: 1,
+    8: 0.5,
+    9: 0.3,
+    10: 0.5,
+    11: 1,
+    12: 1.5,
+    13: 3,
+    14: 5,
+    15: 10,
+    16: 41,
+    17: 110
+}
+const HIGH_MULTIPLIERS: {[ key: number ]: number} = {
+    1: 1000,
+    2: 130,
+    3: 26,
+    4: 9,
+    5: 4,
+    6: 2,
+    7: 0.2,
+    8: 0.2,
+    9: 0.2,
+    10: 0.2,
+    11: 0.2,
+    12: 2,
+    13: 4,
+    14: 9,
+    15: 26,
+    16: 130,
+    17: 1000
+}
 
 export const createObstacles = (): Obstacle[] => {
     const obstacles: Obstacle[] = [];
@@ -50,7 +88,7 @@ export const createObstacles = (): Obstacle[] => {
     return obstacles;
 }
 
-export const createSinks = (): Sink[] => {
+export const createSinks = (type:string): Sink[] => {
     const sinks = [];
     const SPACING = obstacleRadius * 2;
 
@@ -59,7 +97,13 @@ export const createSinks = (): Sink[] => {
       const y = HEIGHT - 170;
       const width = sinkWidth;
       const height = width;
-      sinks.push({ x, y, width, height, multiplier: MULTIPLIERS[i+1] });
+      if(type == "Low")sinks.push({ x, y, width, height, multiplier: LOW_MULTIPLIERS[i+1] });
+      else if(type == "Medium"){
+        sinks.push({ x, y, width, height, multiplier: MED_MULTIPLIERS[i+1] })
+      }
+      else{
+        sinks.push({ x, y, width, height, multiplier: HIGH_MULTIPLIERS[i+1] })
+      }
     }
 
     return sinks;

frontend/src/pages/Game.tsx

@@ -3,23 +3,30 @@ import { BallManager } from "../game/classes/BallManager";
 import axios from "axios";
 import { Button } from "../components/ui";
 import { baseURL } from "../utils";
-
+import Selector from "../components/Risk";
+type Option = 'Low' | 'Medium' | 'High';
 export function Game() {
   const [ballManager, setBallManager] = useState<BallManager>();
   const canvasRef = useRef<any>();
-
+  const [selectedOption, setSelectedOption] = useState<Option>('Low');
   useEffect(() => {
     if (canvasRef.current) {
       const ballManager = new BallManager(
-        canvasRef.current as unknown as HTMLCanvasElement
+        canvasRef.current as unknown as HTMLCanvasElement,selectedOption
       );
       setBallManager(ballManager);
     }
-  }, [canvasRef]);
+  }, [canvasRef,selectedOption]);
 
   return (
     <div className="flex flex-col lg:flex-row items-center justify-center">
       <canvas ref={canvasRef} width="800" height="800"></canvas>
+      <div className=" border-black border-2 bg-zinc-800 shadow-2xl w-80 ml-10">
+      <div>
+        <h1 className="ml-1 text-lg font-thin">Risk</h1>
+        <Selector selectedOption={selectedOption} setSelectedOption={setSelectedOption} />
+      </div>
+      <div className="flex justify-center">
       <Button
         className="px-10 mb-4"
         onClick={async () => {
@@ -33,6 +40,8 @@ export function Game() {
       >
         Add ball
       </Button>
+      </div>
+     </div>
     </div>
   );
 }