37 lines
911 B
TypeScript
37 lines
911 B
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { GravityEngine } from "@/lib/gravity-engine";
|
|
import { Magnet } from "lucide-react";
|
|
|
|
export default function GravityToggle() {
|
|
const [isActive, setIsActive] = useState(false);
|
|
const engineRef = useRef<GravityEngine | null>(null);
|
|
|
|
useEffect(() => {
|
|
engineRef.current = new GravityEngine();
|
|
return () => engineRef.current?.stop();
|
|
}, []);
|
|
|
|
const toggleGravity = () => {
|
|
if (!engineRef.current) return;
|
|
|
|
if (isActive) {
|
|
engineRef.current.stop();
|
|
} else {
|
|
engineRef.current.start();
|
|
}
|
|
setIsActive(!isActive);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleGravity}
|
|
className="fixed bottom-4 right-4 p-3 bg-yellow-400 text-black rounded-full shadow-lg z-50 hover:bg-yellow-500 transition-colors"
|
|
title="Toggle Gravity"
|
|
>
|
|
<Magnet size={24} />
|
|
</button>
|
|
);
|
|
}
|