add jump to this:

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

// Constants
const GRAVITY = 980;  // Pixels per second squared
const JUMP_STRENGTH = -600; // Pixels per second
const MOVE_SPEED = 500; // Pixels per second
const PLAYER_WIDTH = 50;
const PLAYER_HEIGHT = 50;
const PLATFORM_WIDTH = 300; // Reduced width to make the game more challenging
const PLATFORM_HEIGHT = 120;
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600; // Increased height for more vertical space

// 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: `${VIEW_WIDTH / 2 - PLAYER_WIDTH / 2}px`,
      top: `${position.y}px`,
      zIndex: 2,
    }}
  />
);
function GameMain() {
    const [playerPosition, setPlayerPosition] = useState({
      x: VIEW_WIDTH / 2, // Start player in the center of the view
      y: VIEW_HEIGHT - PLATFORM_HEIGHT - PLAYER_HEIGHT, // Start player on top of initial platform
    });
    const [playerVelocity, setPlayerVelocity] = useState({ x: 0, y: 0 });
    const [isGrounded, setIsGrounded] = useState(true); // Start player as grounded
    const [platforms, setPlatforms] = useState([
      // Initial platform to cover the bottom of the screen
      { width: VIEW_WIDTH, height: PLATFORM_HEIGHT, top: VIEW_HEIGHT - PLATFORM_HEIGHT, left: 0 },
    ]);
  
    const lastTimeRef = useRef(performance.now());
    const keysPressed = useRef({ left: false, right: false, jump: false });
  
    // Create new platform to the right of the last platform
    const createNewPlatform = () => ({
      width: PLATFORM_WIDTH,
      height: PLATFORM_HEIGHT,
      top: Math.max(PLATFORM_HEIGHT, Math.random() * (VIEW_HEIGHT - PLATFORM_HEIGHT - 10)),
      left: platforms[platforms.length - 1].left + PLATFORM_WIDTH + Math.random() * 400 + 200,
    });
  
    // Check collision between player and platforms
    const checkCollisionWithPlatforms = () => {
      const playerRect = {
        left: playerPosition.x - PLAYER_WIDTH / 2,
        top: playerPosition.y,
        right: playerPosition.x + PLAYER_WIDTH / 2,
        bottom: playerPosition.y + PLAYER_HEIGHT,
      };
  
      return platforms.some((platform) => {
        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
        );
      });
    };
  
    // Game loop
    const gameLoop = () => {
      const now = performance.now();
      const deltaTime = (now - lastTimeRef.current) / 1000.0;
      lastTimeRef.current = now;
  
      // Update player velocity and position
      const newVelocity = { ...playerVelocity };
  
      if (keysPressed.current.left) {
        playerPosition.x -= MOVE_SPEED * deltaTime;
      }
      if (keysPressed.current.right) {
        playerPosition.x += MOVE_SPEED * deltaTime;
      }
      if (!isGrounded) {
        newVelocity.y += GRAVITY * deltaTime; // Gravity
      } else {
        newVelocity.y = 0;
      }
      if (keysPressed.current.jump && isGrounded) {
        newVelocity.y = JUMP_STRENGTH; // Jump
        setIsGrounded(false);
        keysPressed.current.jump = false; // Prevent multi-jumping
      }
      const newPosition = { x: playerPosition.x, y: playerPosition.y + newVelocity.y * deltaTime };
  
      // Check for collisions
      const collided = checkCollisionWithPlatforms();
      if (collided) {
        setIsGrounded(true);
        newPosition.y = VIEW_HEIGHT - PLATFORM_HEIGHT - PLAYER_HEIGHT; // Snap player to the top of the platform
      } else {
        setIsGrounded(false);
      }
  
      // Create new platform if the last platform is at a certain distance to the left
      if (platforms[platforms.length - 1].left < playerPosition.x + VIEW_WIDTH) {
        setPlatforms([...platforms, createNewPlatform()]);
      }
  
      // Remove platforms that have gone offscreen to the left
      const visiblePlatforms = platforms.filter((platform) => platform.left > playerPosition.x - VIEW_WIDTH);
  
      setPlayerPosition(newPosition);
      setPlayerVelocity(newVelocity);
      setPlatforms(visiblePlatforms);
  
      requestAnimationFrame(gameLoop);
    };
  
    useEffect(() => {
      function handleKeyDown({ key }) {
        if (key === "ArrowLeft") keysPressed.current.left = true;
        if (key === "ArrowRight") keysPressed.current.right = true;
        if (key === "ArrowUp") keysPressed.current.jump = true;
      }
  
      function handleKeyUp({ key }) {
        if (key === "ArrowLeft") keysPressed.current.left = false;
        if (key === "ArrowRight") keysPressed.current.right = false;
        if (key === "ArrowUp") keysPressed.current.jump = false; // Handle Space key for jumping on key up
      }
  
      window.addEventListener("keydown", handleKeyDown);
      window.addEventListener("keyup", handleKeyUp);
  
      requestAnimationFrame(gameLoop);
  
      return () => {
        window.removeEventListener("keydown", handleKeyDown);
        window.removeEventListener("keyup", handleKeyUp);
      };
    }, []);
  
    return (
      <div
        style={{
          position: "relative",
          width: `${VIEW_WIDTH}px`,
          height: `${VIEW_HEIGHT}px`,
          overflow: "hidden",
          backgroundColor: "lightblue",
        }}
      >
        {/* Update Player component prop */}
        <Player position={playerPosition} />
        {platforms.map((platform, index) => (
          <Platform
            key={index}
            {...platform}
            left={platform.left - playerPosition.x + VIEW_WIDTH / 2}
            top={platform.top}
          />
        ))}
      </div>
    );
  }
  
  export default GameMain;