diff --git a/backend/src/index.ts b/backend/src/index.ts index a1206d8..bd70dd0 100644 --- 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 new file mode 100644 index 0000000..2150882 --- /dev/null +++ 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 = ({rows, setRows}) => { + const [selectedRows, setSelectedRows]= useState(rows); + + + const handleRowChange = (event: React.ChangeEvent)=> { + const selectedValue = parseInt(event.target.value); + setSelectedRows(selectedValue); + setRows(selectedValue); + }; + + return ( +
+
+ +
+ +
+
+
+ +
+ ); +}; diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 527ae86..e5cb0e4 100644 --- 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 index de49019..19aa4fc 100644 --- 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 index 10272ac..618cd2f 100644 --- 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 index 5af70c5..b078aaa 100644 --- 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 index 42f6914..ff9f133 100644 --- 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(); + const [rows, setRows] = useState(18) const canvasRef = useRef(); 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 (
+
+
+ +
+