Mathias Wagner
032ebc2368
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 1m36s
73 lines
3.1 KiB
JavaScript
73 lines
3.1 KiB
JavaScript
import Game from "./pages/Game";
|
|
import {useContext, useEffect, useState} from "react";
|
|
import {StateContext} from "@/common/contexts/StateContext";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faDrum, faGuitar, faHeadphones, faMusic} from "@fortawesome/free-solid-svg-icons";
|
|
import Home from "@/pages/Home";
|
|
import WaitingRoom from "@/pages/WaitingRoom";
|
|
import Ending from "@/pages/Ending";
|
|
|
|
const App = () => {
|
|
const {currentState} = useContext(StateContext);
|
|
|
|
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
|
|
|
|
const musicNotes = [
|
|
{ id: 1, top: "8%", left: "20%", icon: faMusic, scale: 1.2 },
|
|
{ id: 2, top: "75%", left: "85%", icon: faGuitar, scale: 1 },
|
|
{ id: 3, top: "65%", left: "12%", icon: faHeadphones, scale: 1.1 },
|
|
{ id: 4, top: "20%", left: "70%", icon: faDrum, scale: 0.9 }
|
|
];
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e) => {
|
|
if (!handleMouseMove.ticking) {
|
|
handleMouseMove.ticking = true;
|
|
requestAnimationFrame(() => {
|
|
setCursorPos({ x: e.clientX, y: e.clientY });
|
|
handleMouseMove.ticking = false;
|
|
});
|
|
}
|
|
};
|
|
handleMouseMove.ticking = false;
|
|
|
|
window.addEventListener('mousemove', handleMouseMove);
|
|
return () => window.removeEventListener('mousemove', handleMouseMove);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="background-elements">
|
|
<div className="glow-point point-1" style={{
|
|
transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * -20}px, ${(cursorPos.y / window.innerHeight - 0.5) * -20}px)`
|
|
}}></div>
|
|
<div className="glow-point point-2" style={{
|
|
transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * 15}px, ${(cursorPos.y / window.innerHeight - 0.5) * 15}px)`
|
|
}}></div>
|
|
<div className="glow-point point-3" style={{
|
|
transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * -10}px, ${(cursorPos.y / window.innerHeight - 0.5) * -10}px)`
|
|
}}></div>
|
|
|
|
{musicNotes.map((note) => (
|
|
<div key={`note-${note.id}`} className={`music-note note-${note.id}`}
|
|
style={{
|
|
top: note.top,
|
|
left: note.left,
|
|
fontSize: `${note.scale * 60}pt`,
|
|
transform: `translate(${(cursorPos.x / window.innerWidth - 0.5) * -5 * note.scale}px, ${(cursorPos.y / window.innerHeight - 0.5) * -5 * note.scale}px)`
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={note.icon} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
{currentState === "WaitingRoom" && <WaitingRoom />}
|
|
{currentState === "Home" && <Home />}
|
|
{currentState === "Game" && <Game />}
|
|
{currentState === "Ending" && <Ending />}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default App
|