rewrite all this code for me and make sure it works as indented, right now the platforms are all over the place and you don't follow the player as you move left and right:


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;
const PLATFORM_WIDTH = 400;
const PLATFORM_HEIGHT = 20;
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;

// 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 [platforms, setPlatforms] = useState([
    { width: PLATFORM_WIDTH, height: PLATFORM_HEIGHT, top: 450, left: VIEW_WIDTH / 2 - PLATFORM_WIDTH / 2 },
  ]);
  const backgroundXRef = useRef(0); // Horizontal offset for parallax background
  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,
      };

          // Platform creation and removal
    const firstPlatform = platforms[0];
    const lastPlatform = platforms[platforms.length - 1];

    // Remove off-screen platforms
    const visiblePlatforms = platforms.filter(platform => {
      const platformRightEdge = platform.left + platform.width - backgroundXRef.current;
      return platformRightEdge >= 0 && platform.left - backgroundXRef.current <= VIEW_WIDTH;
    });

    // Add a new platform if needed
    if (newPosition.x > lastPlatform.left - 200) { // Generate new platform on the right
      visiblePlatforms.push(createNewPlatform(newPosition, "right"));
    } else if (newPosition.x < firstPlatform.left + 200) { // Generate new platform on the left
      visiblePlatforms.unshift(createNewPlatform(newPosition, "left"));
    }

    setPlatforms(visiblePlatforms);

    // Update background position for parallax effect
    if (keysPressed.current.left && backgroundXRef.current < 0) {
      backgroundXRef.current += MOVE_SPEED * deltaTime;
    } else if (keysPressed.current.right) {
      backgroundXRef.current -= MOVE_SPEED * deltaTime;
    }

   
      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);
   };
  
   const createNewPlatform = (playerPosition, direction) => {
    const newTop = Math.random() * (VIEW_HEIGHT - PLATFORM_HEIGHT);
    return direction === "right"
      ? { width: PLATFORM_WIDTH, height: PLATFORM_HEIGHT, top: newTop, left: playerPosition.x + 300 }
      : { width: PLATFORM_WIDTH, height: PLATFORM_HEIGHT, top: newTop, left: playerPosition.x - 300 - PLATFORM_WIDTH };
  };

  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: `${VIEW_HEIGHT}px`, overflow: "hidden" }}>
      <Player position={{ ...playerPosition, x: playerPosition.x - backgroundXRef.current }} />
      {platforms.map((platform, index) => (
        <Platform key={index} {...platform} left={platform.left - backgroundXRef.current} />
      ))}
    </div>
  );
}

export default GameMain;