code100x · Bhharatth · May 23, 2024
diff --git a/backend/src/index.ts b/backend/src/index.ts
@@ -30,6 +30,7 @@ const MULTIPLIERS: {[ key: number ]: number} = {
 
 app.post("/game", (req, res) => {
     let outcome = 0;
+
     const pattern = []
     for (let i = 0; i < TOTAL_DROPS; i++) {
         if (Math.random() > 0.5) {

diff --git a/frontend/src/components/GameBalancer.tsx b/frontend/src/components/GameBalancer.tsx
@@ -0,0 +1,49 @@
+import {  useState } from "react";
+
+type GameBalancerProps = {
+  rows: number;
+  setRows: (rows: number) => void;
+};
+
+export const GameBalancer:React.FC<GameBalancerProps> = ({rows, setRows}) => {
+  const [selectedRows, setSelectedRows]= useState(rows);
+
+
+  const handleRowChange = (event: React.ChangeEvent<HTMLSelectElement>)=> {
+    const selectedValue = parseInt(event.target.value);
+    setSelectedRows(selectedValue);
+    setRows(selectedValue);
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-center w-full min-h-screen bg-slate-700">
+      <div className="w-full ml-10 h-full">
+        <label className="block text-lg font-semibold text-gray-300 ">
+          Select Number of Rows
+        </label>
+        <div className="mt-1 relative w-24">
+          <select
+            id="number"
+            name="number"
+            value={selectedRows}
+            onChange={handleRowChange}
+            className="block w-24 pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+          >
+            <option value="9">9</option>
+            <option value="10">10</option>
+            <option value="11">11</option>
+            <option value="12">12</option>
+            <option value="13">13</option>
+            <option value="14">14</option>
+            <option value="15">15</option>
+            <option value="16">16</option>
+            <option value="17">17</option>
+            <option value="18">18</option>
+          </select>
+        </div>
+        <div id="selected-number" className="mt-4 text-lg text-gray-700"></div>
+      </div>
+
+    </div>
+  );
+};
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -3,3 +3,4 @@ export * from "./Quotes";
 export * from "./Simulate";
 export * from "./Footer";
 export * from "./FoundIssue";
+export * from "./GameBalancer";
diff --git a/frontend/src/game/classes/BallManager.ts b/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,rows:number, onFinish?: (index: number,startX?: number) => void) {
         this.balls = [];
         this.canvasRef = canvasRef;
         this.ctx = this.canvasRef.getContext("2d")!;
-        this.obstacles = createObstacles();
-        this.sinks = createSinks();
+        this.obstacles = createObstacles(rows);
+        this.sinks = createSinks(rows);
         this.update();
         this.onFinish = onFinish;
     }

diff --git a/frontend/src/game/constants.ts b/frontend/src/game/constants.ts
@@ -10,4 +10,4 @@ export const horizontalFriction = 0.4;
 export const verticalFriction = 0.8;
 
 export const sinkWidth = 36;
-export const NUM_SINKS = 17;
+// export const NUM_SINKS = 17;
diff --git a/frontend/src/game/objects.ts b/frontend/src/game/objects.ts
@@ -1,5 +1,6 @@
-import { HEIGHT, NUM_SINKS, WIDTH, obstacleRadius, sinkWidth } from "./constants";
+import { HEIGHT, WIDTH, obstacleRadius, sinkWidth } from "./constants";
 import { pad } from "./padding";
+import { MULTIPLIERS_18, MULTIPLIERS_17,MULTIPLIERS_16,MULTIPLIERS_15,MULTIPLIERS_14, MULTIPLIERS_13 } from "../utils/customMultiplers";
 
 export interface Obstacle {
     x: number;
@@ -15,29 +16,10 @@ export interface Sink {
     multiplier?: number;
 }
 
-const MULTIPLIERS: {[ key: number ]: number} = {
-    1: 16,
-    2: 9,
-    3: 2,
-    4: 1.4,
-    5: 1.4,
-    6: 1.2,
-    7: 1.1,
-    8: 1,
-    9: 0.5,
-    10: 1,
-    11: 1.1,
-    12: 1.2,
-    13: 1.4,
-    14: 1.4,
-    15: 2,
-    16: 9,
-    17: 16
-}
 
-export const createObstacles = (): Obstacle[] => {
+export const createObstacles = (rows: number): Obstacle[] => {
     const obstacles: Obstacle[] = [];
-    const rows = 18;
+    // const rows = 18;
     for (let row = 2; row < rows; row++) {
         const numObstacles = row + 1;
         const y = 0 + row * 35;
@@ -50,16 +32,39 @@ export const createObstacles = (): Obstacle[] => {
     return obstacles;
 }
 
-export const createSinks = (): Sink[] => {
+export const createSinks = (rows:number): Sink[] => {
     const sinks = [];
     const SPACING = obstacleRadius * 2;
 
-    for (let i = 0; i < NUM_SINKS; i++) {
-      const x = WIDTH / 2 + sinkWidth * (i - Math.floor(NUM_SINKS/2)) - SPACING * 1.5;
-      const y = HEIGHT - 170;
+    let num_sinks = rows - 1;
+
+
+    for (let i = 0; i < num_sinks; i++) {
+      const x = WIDTH / 2 + sinkWidth * (i - Math.floor(num_sinks/2)) - SPACING * 1.5;
+      const y = (HEIGHT - 170);
       const width = sinkWidth;
       const height = width;
-      sinks.push({ x, y, width, height, multiplier: MULTIPLIERS[i+1] });
+      if(rows = 18){
+          sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_18[i+1] });
+      }else if (rows = 17){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_17[i+1] });
+      }else if(rows =16){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_16[i+1] });
+      }else if(rows = 15){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_15[i+1] });
+      }else if(rows = 14){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_14[i+1] });
+      }else if (rows = 13){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_13[i+1] });
+      }else if (rows = 12){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_14[i+1] });
+      }else if(rows = 11){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_14[i+1] });
+      }else if(rows =10){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_14[i+1] });
+      }else if(rows  = 9){
+        sinks.push({ x, y, width, height, multiplier: MULTIPLIERS_14[i+1] });
+      }
     }
 
     return sinks;

diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
@@ -3,23 +3,33 @@ import { BallManager } from "../game/classes/BallManager";
 import axios from "axios";
 import { Button } from "../components/ui";
 import { baseURL } from "../utils";
+import { GameBalancer} from "../components";
 
 export function Game() {
   const [ballManager, setBallManager] = useState<BallManager>();
+  const [rows, setRows] = useState(18)
   const canvasRef = useRef<any>();
 
   useEffect(() => {
     if (canvasRef.current) {
       const ballManager = new BallManager(
-        canvasRef.current as unknown as HTMLCanvasElement
+        canvasRef.current as unknown as HTMLCanvasElement,
+        rows
       );
       setBallManager(ballManager);
     }
-  }, [canvasRef]);
+  }, [canvasRef, rows]);
+
+
 
   return (
     <div className="flex flex-col lg:flex-row items-center justify-center">
+      <div className="flex flex-row bg-slate-800 h-5/9">
+      <div className="bg-white w-60 flex items-center justify-center h-full">
+      <GameBalancer setRows={setRows}rows={rows}/>
+    </div>
       <canvas ref={canvasRef} width="800" height="800"></canvas>
+      </div>
       <Button
         className="px-10 mb-4"
         onClick={async () => {

diff --git a/frontend/src/utils/customMultiplers.ts b/frontend/src/utils/customMultiplers.ts
@@ -0,0 +1,152 @@
+export const MULTIPLIERS_18: {[ key: number ]: number} = {
+    1: 16,
+    2: 9,
+    3: 2,
+    4: 1.4,
+    5: 1.4,
+    6: 1.2,
+    7: 1.1,
+    8: 1,
+    9: 0.5,
+    10: 1,
+    11: 1.1,
+    12: 1.2,
+    13: 1.4,
+    14: 1.4,
+    15: 2,
+    16: 9,
+    17: 16
+};
+export const MULTIPLIERS_17: {[ key: number ]: number} = {
+    1: 16,
+    2: 9,
+    3: 4.5,
+    4: 2.4,
+    5: 1.2,
+    6: 1.2,
+    7: 1.1,
+    8: 0.5,
+    9: 0.5,
+    10: 1,
+    11: 1.1,
+    12: 1.2,
+    13: 2.4,
+    14: 4.5,
+    15: 9,
+    16: 16,
+};
+export const MULTIPLIERS_16: {[ key: number ]: number} = {
+    1: 16,
+    2: 9,
+    3: 2,
+    4: 1.4,
+    5: 1.4,
+    6: 1.2,
+    7: 1.1,
+    8: 1,
+    9: 0.5,
+    10: 1,
+    11: 1.1,
+    12: 1.2,
+    13: 1.4,
+    14: 1.4,
+    15: 2,
+}
+export const MULTIPLIERS_15: {[ key: number ]: number} = {
+    1: 14,
+    2: 8.4,
+    3: 8,
+    4: 4.2,
+    5: 2.1,
+    6: 1.2,
+    7: 0.5,
+    8:0.5,
+    9: 1.2,
+    10: 2.1,
+    11: 4.2,
+    12: 8,
+    13: 8.4,
+    14: 14,
+}
+ export const MULTIPLIERS_14: {[ key: number ]: number} = {
+    1: 15,
+    2: 8,
+    3: 4.2,
+    4: 2.4,
+    5: 1.2,
+    6: 1,
+    7: 0.5,
+    8: 1,
+    9: 1.2,
+    10: 2.4,
+    11: 4.2,
+    12: 8,
+    13: 15,
+}
+export const MULTIPLIERS_13: {[ key: number ]: number} = {
+    1: 8.4,
+    2: 3,
+    3: 1.9,
+    4: 1.3,
+    5: 1,
+    6: 0.7,
+    7: 0.7,
+    8: 1,
+    9: 1.3,
+    10: 1.9,
+    11: 3,
+    12: 8.4,
+}
+
+export const MULTIPLIERS_12: {[ key: number ]: number} = {
+    1: 8.9,
+    2: 3,
+    3: 1.4,
+    4: 1.1,
+    5: 1,
+    6: .5,
+    7: 1,
+    8: 1.1,
+    9: 1.4,
+    10: 3,
+    11: 8.9,
+}
+
+export const MULTIPLIERS_11: {[ key: number ]: number} = {
+    1: 5.6,
+    2: 2,
+    3: 1.6,
+    4: 1,
+    5: 0.7,
+    6: 0.7,
+    7: 1,
+    8: 1.6,
+    9: 2,
+    10: 5.6,
+}
+
+export const MULTIPLIERS_10: {[ key: number ]: number} = {
+    1: 5.6,
+    2: 2.1,
+    3: 1.1,
+    4: 1,
+    5: 0.5,
+    6: 1,
+    7: 1.1,
+    8: 2.1,
+    9: 5.6,
+}
+
+export const MULTIPLIERS_9: {[ key: number ]: number} = {
+    1: 2.4,
+    2: 2,
+    3: 1.4,
+    4: 1,
+    5: 0.5,
+    6: 1,
+    7: 1.4,
+    8: 2,
+    9: 2.4,
+}
+
+