Criar Jogo Survival Diablo 2

import React, { useState, useEffect } from 'react';

const App = () => {
  const [playerLevel, setPlayerLevel] = useState(1);
  const [inventory, setInventory] = useState([]);
  const [monsters, setMonsters] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      setMonsters(prevMonsters => [...prevMonsters, { id: Date.now(), health: 100 }]);
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  const handleAttack = (monsterId) => {
    setMonsters(prevMonsters => prevMonsters.filter(monster => monster.id !== monsterId));
    setPlayerLevel(prevLevel => prevLevel + 1);
  };

  const handlePickupItem = (item) => {
    setInventory(prevInventory => [...prevInventory, item]);
  };

  const handleDropItem = (itemIndex) => {
    setInventory(prevInventory => prevInventory.filter((_, index) => index !== itemIndex));
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <div className="container mx-auto p-4">
        <h1 className="text-4xl font-bold mb-4">Survival Diablo 2</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="bg-gray-800 p-4 rounded-lg">
            <h2 className="text-2xl font-semibold mb-2">Player Level: {playerLevel}</h2>
            <div className="grid grid-cols-3 gap-2">
              {monsters.map(monster => (
                <div key={monster.id} className="bg-red-600 p-2 rounded-lg text-center cursor-pointer" onClick={() => handleAttack(monster.id)}>
                  Monster
                </div>
              ))}
            </div>
          </div>
          <div className="bg-gray-800 p-4 rounded-lg">
            <h2 className="text-2xl font-semibold mb-2">Inventory</h2>
            <div className="grid grid-cols-3 gap-2">
              {inventory.map((item, index) => (
                <div key={index} className="bg-green-600 p-2 rounded-lg text-center cursor-pointer" onClick={() => handleDropItem(index)}>
                  Item {index + 1}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;