Crie Jogo Survival Estilo Diablo 2

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

const App = () => {
  const [player, setPlayer] = useState({ x: 0, y: 0, health: 100, level: 1, inventory: [] });
  const [monsters, setMonsters] = useState([]);
  const [items, setItems] = useState([]);
  const [isInventoryOpen, setIsInventoryOpen] = useState(false);

  useEffect(() => {
    const handleKeyDown = (event) => {
      switch (event.key) {
        case 'ArrowUp':
          setPlayer(prev => ({ ...prev, y: prev.y - 10 }));
          break;
        case 'ArrowDown':
          setPlayer(prev => ({ ...prev, y: prev.y + 10 }));
          break;
        case 'ArrowLeft':
          setPlayer(prev => ({ ...prev, x: prev.x - 10 }));
          break;
        case 'ArrowRight':
          setPlayer(prev => ({ ...prev, x: prev.x + 10 }));
          break;
        default:
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  const attackMonster = (monsterId) => {
    setMonsters(prev => prev.filter(monster => monster.id !== monsterId));
    setPlayer(prev => ({ ...prev, level: prev.level + 1 }));
  };

  const pickUpItem = (itemId) => {
    const item = items.find(item => item.id === itemId);
    setPlayer(prev => ({ ...prev, inventory: [...prev.inventory, item] }));
    setItems(prev => prev.filter(item => item.id !== itemId));
  };

  const dropItem = (itemId) => {
    const item = player.inventory.find(item => item.id === itemId);
    setPlayer(prev => ({ ...prev, inventory: prev.inventory.filter(item => item.id !== itemId) }));
    setItems(prev => [...prev, item]);
  };

  return (
    <div className="app">
      <div className="game-screen" style={{ position: 'relative', width: '800px', height: '600px', backgroundColor: '#333' }}>
        <div className="player" style={{ position: 'absolute', left: player.x, top: player.y, width: '20px', height: '20px', backgroundColor: 'blue' }}></div>
        {monsters.map(monster => (
          <div key={monster.id} className="monster" style={{ position: 'absolute', left: monster.x, top: monster.y, width: '20px', height: '20px', backgroundColor: 'red' }} onClick={() => attackMonster(monster.id)}></div>
        ))}
        {items.map(item => (
          <div key={item.id} className="item" style={{ position: 'absolute', left: item.x, top: item.y, width: '20px', height: '20px', backgroundColor: 'green' }} onClick={() => pickUpItem(item.id)}></div>
        ))}
      </div>
      <button onClick={() => setIsInventoryOpen(!isInventoryOpen)}>Inventory</button>
      {isInventoryOpen && (
        <div className="inventory">
          {player.inventory.map(item => (
            <div key={item.id} onClick={() => dropItem(item.id)}>{item.name}</div>
          ))}
        </div>
      )}
    </div>
  );
};

export default App;