cleaning and reorganising
This commit is contained in:
parent
e6118b4df0
commit
0561fe3ab9
|
|
@ -1,21 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import Modal from "../../components/ui/Modal.jsx";
|
|
||||||
import { useGame } from "../../hooks/useGame.jsx";
|
|
||||||
import TestAnimation from "../../components/animations/test.jsx";
|
|
||||||
|
|
||||||
export default function Tutorial() {
|
|
||||||
const { hasCheckedTutorial, setHasCheckedTutorial, setIsTimeRuning } = useGame();
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Modal
|
|
||||||
open={!hasCheckedTutorial}
|
|
||||||
onClose={() => {
|
|
||||||
setHasCheckedTutorial(true);
|
|
||||||
setIsTimeRuning(true);
|
|
||||||
}}>
|
|
||||||
Tutorial
|
|
||||||
<TestAnimation />
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
import { useEffect } from "react";
|
|
||||||
import { useWordpressData } from "../hooks/WordpressFetchData";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
import Menu from "../components/Menu";
|
|
||||||
import Modal from "../components/Modal";
|
|
||||||
|
|
||||||
export default function Game() {
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
||||||
|
|
||||||
const screenData = useWordpressData("/search-and-find");
|
|
||||||
const [isDragging, setIsDragging] = useState(false);
|
|
||||||
const [startX, setStartX] = useState(0);
|
|
||||||
|
|
||||||
// HANDLE DRAGGING
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
function handleObjectClick() {
|
|
||||||
console.log("object clicked");
|
|
||||||
}
|
|
||||||
|
|
||||||
function initGame(container) {
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const objects = container.querySelectorAll(".lhoist-blocks-focus-object");
|
|
||||||
|
|
||||||
objects.forEach((object) => {
|
|
||||||
object.addEventListener("click", () => {
|
|
||||||
handleObjectClick();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function cleanGame(container) {
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const objects = container.querySelectorAll(".lhoist-blocks-focus-object");
|
|
||||||
objects.forEach((object) => {
|
|
||||||
object.removeEventListener("click", () => {
|
|
||||||
handleObjectClick();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!screenData) return;
|
|
||||||
const container = document.querySelector(".lhoist-blocks-search-and-find");
|
|
||||||
|
|
||||||
initGame(container);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
cleanGame(container);
|
|
||||||
};
|
|
||||||
}, [screenData]);
|
|
||||||
|
|
||||||
if (!screenData) return;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button onClick={() => setIsModalOpen(true)}>show modal</button>
|
|
||||||
<Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
|
|
||||||
<p>salut</p>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<div className='page-container page-container--play'>
|
|
||||||
<div className='screen'>
|
|
||||||
<Menu />
|
|
||||||
{screenData && (
|
|
||||||
<div
|
|
||||||
onMouseDown={handleMouseDown}
|
|
||||||
onMouseMove={handleMouseMove}
|
|
||||||
onMouseUp={handleMouseUp}
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: screenData[0].content.rendered,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user