refactoring the gameContainer

src/components/game/GameContainer.jsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+import GameObjects from "./GameObjects";
+import { useGame } from "../../hooks/useGame";
+import { postWordpressStatisticsData, useWordpressCustomData } from "../../services/WordpressFetchData.js";
+import Score from "../../components/game/Score.jsx";
+import Timer from "../../components/game/Timer.jsx";
+import Help from "../../components/game/Help.jsx";
+import SoundControl from "../../components/game/SoundControl.jsx";
+import ExtraControls from "../../components/game/ExtraControls.jsx";
+import { useUser } from "../../hooks/useUser.jsx";
+
+export default function GameContainer({ gameId }) {
+	const gameDatas = useWordpressCustomData(`/screen/play/${gameId}`);
+	console.log(gameDatas);
+
+	const [currentTime, setCurrentTime] = useState(0);
+	const [isDragging, setIsDragging] = useState(false);
+	const [startX, setStartX] = useState(0);
+
+	const { answers, contextGameDatas, setContextGameDatas, isGameComplete, score } = useGame();
+	const { language, country } = useUser();
+
+	useEffect(() => {
+		if (!gameDatas) return;
+		setContextGameDatas(gameDatas);
+	}, [gameDatas]);
+
+	useEffect(() => {
+		if (!isGameComplete) return;
+		// console.log(contextGameDatas);
+		// const datas = {
+		// 	user_locale: language,
+		// 	user_country: country,
+		// 	level_post_id: contextGameDatas.gameId,
+		// 	level_score: score,
+		// 	level_completion_time: currentTime,
+		// };
+		// postWordpressStatisticsData(datas);
+		console.log("##############");
+		// console.log(datas);
+		console.log("##############");
+	}, [isGameComplete]);
+
+	// HANDLE CANVAS DRAGGING INTERACTIONS
+	function handleMouseDown(e) {
+		const container = document.querySelector(".lhoist-blocks-search-and-find");
+		setIsDragging(true);
+		setStartX(e.clientX + container.scrollLeft);
+	}
+
+	function handleMouseMove(e) {
+		if (!isDragging) return;
+		const container = document.querySelector(".lhoist-blocks-search-and-find");
+		const newScrollLeft = startX - e.clientX;
+		container.scrollLeft = newScrollLeft;
+	}
+
+	function handleMouseUp() {
+		setIsDragging(false);
+	}
+
+	if (!contextGameDatas) return;
+
+	const gameBackgroundUrl = contextGameDatas.gameBlockDatas.attrs.coverUrl;
+	const blocks = contextGameDatas.gameBlockDatas.innerBlocks;
+
+	return (
+		<>
+			<ExtraControls />
+			<SoundControl />
+			<Score />
+			<Timer currentTime={currentTime} setCurrentTime={setCurrentTime} />
+			<Help />
+			<div onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+				<section className='wp-block-lhoist-blocks-search-and-find lhoist-blocks-search-and-find'>
+					<div className='lhoist-blocks-search-and-find__objects-container'>
+						<img
+							className='lhoist-blocks-search-and-find__background_picture'
+							src={gameBackgroundUrl}
+							alt={""}
+						/>
+						<GameObjects blocks={blocks} />
+					</div>
+				</section>
+			</div>
+		</>
+	);
+}