import React, { useState, useEffect, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; const GameModal = ({ game, onClose }) => { if (!game) return null; return (

{game.title}

{game.description}

{game.component}

); }; const SpaceExplorerGame = () => { const [position, setPosition] = useState({ x: 50, y: 50 }); const handleKeyPress = useCallback((e) => { const speed = 5; switch(e.key) { case 'ArrowUp': setPosition(prev => ({ ...prev, y: Math.max(0, prev.y - speed) })); break; case 'ArrowDown': setPosition(prev => ({ ...prev, y: Math.min(90, prev.y + speed) })); break; case 'ArrowLeft': setPosition(prev => ({ ...prev, x: Math.max(0, prev.x - speed) })); break; case 'ArrowRight': setPosition(prev => ({ ...prev, x: Math.min(90, prev.x + speed) })); break; default: break; } }, []); useEffect(() => { window.addEventListener('keydown', handleKeyPress); return () => window.removeEventListener('keydown', handleKeyPress); }, [handleKeyPress]); return (

Use arrow keys to move the spaceship

); }; const GameCard = ({ title, color, onClick }) => (

{title}

); const Navbar = ({ currentCategory, setCategory }) => { const categories = ['All Games', 'Action', 'Puzzle', 'Strategy']; return (

GameHub

{categories.map(category => ( ))}

); }; const App = () => { const [currentCategory, setCategory] = useState('All Games'); const [selectedGame, setSelectedGame] = useState(null); const games = [ { title: 'Space Explorer', category: 'Action', color: '#FF4B4B', description: 'Navigate through space using arrow keys. Avoid obstacles and collect power-ups!', component: }, { title: 'Mind Maze', category: 'Puzzle', color: '#4B7BFF', description: 'A challenging puzzle game that tests your problem-solving skills.', component:

Puzzle game implementation here

}, { title: 'Castle Defense', category: 'Strategy', color: '#4CAF50', description: 'Defend your castle against waves of enemies in this strategic tower defense game.', component:

Strategy game implementation here

}, { title: 'Color Match', category: 'Puzzle', color: '#FF4BDE', description: 'Match colors to clear the board in this addictive puzzle game.', component:

Color matching game implementation here

}, { title: 'Robot Wars', category: 'Action', color: '#FFA64B', description: 'Battle robots in an intense action-packed arena.', component:

Robot battle game implementation here

}, { title: 'Empire Builder', category: 'Strategy', color: '#9C4BFF', description: 'Build and manage your own empire in this strategic simulation game.', component:

Empire building game implementation here

} ]; const filteredGames = currentCategory === 'All Games' ? games : games.filter(game => game.category === currentCategory); return (

{currentCategory}

{filteredGames.map((game, index) => ( setSelectedGame(game)} /> ))}

{selectedGame && ( setSelectedGame(null)} /> )}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();