refactoring cascading components

src/pages/Game.jsx

@@ -1,28 +1,29 @@
-import Menu from "../components/Menu";
-import { useWordpressData } from "../hooks/WordpressFetchData";
+import { useWordpressCustomData } from "../services/WordpressFetchData.js";
+import { useState } from "react";
+
+import { GameContextProvider } from "../context/GameContext.js";
+
+import Menu from "../components/ui/Menu.jsx";
+import GameContainer from "../components/game/GameContainer.jsx";
+
+import Tutorial from "../components/game/Tutorial.jsx";
+import Logo from "../components/ui/Logo.jsx";
+import GameModal from "../components/game/GameModal.jsx";
 
 export default function Game() {
-	const screenData = useWordpressData("/search-and-find");
-	if (!screenData) return;
-	console.log(screenData[0]);
-
 	return (
+		<>
 			<div className='page-container page-container--play'>
+				<GameContextProvider>
 					<div className='screen'>
-				<Menu />
-				<div className='salut'>helloo</div>
-				<section className='screen__game'>
-					<h1>{screenData[0].title.rendered}</h1>
-					{screenData && <h2>{screenData[0].title.rendered}</h2>}
-					{screenData && (
-						<div
-							dangerouslySetInnerHTML={{
-								__html: screenData[0].content.rendered,
-							}}
-						/>
-					)}
-				</section>
+						<Logo />
+						{/* <Menu /> */}
+						<GameModal />
+						<Tutorial />
+						<GameContainer gameId={"latest"} />
 					</div>
+				</GameContextProvider>
 			</div>
+		</>
 	);
 }