make so it generate platforms as you go either directions as a pralax:

import React, { useState, useEffect, useRef } from "react";

// Constants for gravity, jumping, and movement
const GRAVITY = 150;
const JUMP_STRENGTH = -25;
const MOVE_SPEED = 700;
const PLAYER_WIDTH = 50;
const PLAYER_HEIGHT = 50;

// Platform component
const Platform = ({ width, height, top, left }) => (
  <div
    style={{
      position: "absolute",
      width: `${width}px`,
      height: `${height}px`,
      backgroundColor: "brown",
      left: `${left}px`,
      top: `${top}px`,
    }}
  />
);

// Player component
const Player = ({ position }) => (
  <div
    style={{
      position: "absolute",
      width: `${PLAYER_WIDTH}px`,
      height: `${PLAYER_HEIGHT}px`,
      backgroundColor: "blue",
      left: `${position.x}px`,
      top: `${position.y}px`,
    }}
  />
);

function GameMain() {
  const [playerPosition, setPlayerPosition] = useState({ x: 100, y: 300 });
  const [isGrounded, setIsGrounded] = useState(false);
  const [doubleJumped, setDoubleJumped] = useState(false);
  const playerVelocityRef = useRef({ x: 0, y: 0 });
  const requestIdRef = useRef(null);
  const lastTimeRef = useRef(null);

  const keysPressed = useRef({ left: false, right: false, up: false, jump: false });

  const platform = { width: 400, height: 20, top: 450, left: 100 };

  const checkCollisionWithPlatform = (position, width, height) => {
    const playerRect = {
      left: position.x,
      top: position.y,
      right: position.x + width,
      bottom: position.y + height,
    };

    const platformRect = {
      left: platform.left,
      top: platform.top,
      right: platform.left + platform.width,
      bottom: platform.top + platform.height,
    };

    return (
      playerRect.right > platformRect.left &&
      playerRect.left < platformRect.right &&
      playerRect.bottom > platformRect.top &&
      playerRect.top < platformRect.bottom
    );
  };

   
   const updateGame = (time) => {
    const deltaTime = (time - (lastTimeRef.current || time)) / 1000;
    lastTimeRef.current = time;
    
    // Calculate new velocity
    let velocity = {
        x: keysPressed.current.left ? -MOVE_SPEED * deltaTime : 
           keysPressed.current.right ? MOVE_SPEED * deltaTime : 0,
        y: playerVelocityRef.current.y + GRAVITY * deltaTime,
      };
   
    // Store the x velocity
    playerVelocityRef.current.x = velocity.x;

    if (keysPressed.current.jump && isGrounded || keysPressed.current.jump && !doubleJumped) {
        if(!isGrounded){
        setDoubleJumped(true)
        }
        velocity.y = JUMP_STRENGTH;
        keysPressed.current.jump = false;

      }

    // Calculate new position
    let newPosition = {
        x: playerPosition.x + velocity.x,
        y: playerPosition.y + velocity.y,
      };
   
      if (checkCollisionWithPlatform(newPosition, PLAYER_WIDTH, PLAYER_HEIGHT)) {
        newPosition.y = platform.top - PLAYER_HEIGHT;
        velocity.y = 0;
        setIsGrounded(true);
        setDoubleJumped(false);
       } else {
        setIsGrounded(false);
       }
   
      setPlayerPosition(prevPosition => ({
        x: prevPosition.x + velocity.x,
        y: prevPosition.y + velocity.y,
       }));
       playerVelocityRef.current = velocity;
   
    // Request the next animation frame
    requestIdRef.current = requestAnimationFrame(updateGame);
   };
  
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === "ArrowLeft") keysPressed.current.left = true;
      if (event.key === "ArrowRight") keysPressed.current.right = true;
      if (event.key === "ArrowUp" && isGrounded || event.key === "ArrowUp" && !doubleJumped) keysPressed.current.jump = true;
    };
    
    const handleKeyUp = (event) => {
      if (event.key === "ArrowLeft") keysPressed.current.left = false;
      if (event.key === "ArrowRight") keysPressed.current.right = false;
    };
  
    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);
  
    requestIdRef.current = requestAnimationFrame(updateGame);
  
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
      cancelAnimationFrame(requestIdRef.current);
    };
  }, [playerPosition,isGrounded, doubleJumped]); // add isGrounded to the dependency array

  
  return (
    <div style={{ position: "relative", width: "100%", height: "500px" }}>
      <Player position={playerPosition} />
      <Platform {...platform} />
    </div>
  );
}

export default GameMain;