add FPSDisplay component

Author: 514sid

src/FPSDisplay.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react'
+
+export const FPSDisplay = () => {
+    const [fps, setFps] = useState<number>(0)
+    const frames = useRef<number>(0)
+    const lastTime = useRef<number>(performance.now())
+
+    useEffect(() => {
+        let animationFrameId: number
+
+        const loop = (time: number) => {
+            frames.current += 1
+
+            if (time - lastTime.current >= 1000) {
+                setFps(frames.current)
+                frames.current = 0
+                lastTime.current = time
+            }
+
+            animationFrameId = requestAnimationFrame(loop)
+        }
+
+        animationFrameId = requestAnimationFrame(loop)
+
+        return () => cancelAnimationFrame(animationFrameId)
+    }, [])
+
+    return (
+        <div className="fixed top-2 left-2 bg-black text-green-400 text-sm font-mono px-2 py-1 rounded shadow-md z-50">
+      		FPS: {fps}
+        </div>
+    )
+}

src/Section.tsx

@@ -33,7 +33,7 @@ export const SectionContainer = ({ section }: { section: Section }) => {
     const overlayStyle = useMemo(() => ({
         position: 'absolute' as const,
         left: section.position.x,
-        top: section.position.y,
+        top: section.position.y + 50,
         zIndex: section.position.z_index + 1,
         backgroundColor: 'rgba(0, 0, 0, 0.8)',
         padding: '10px',

src/main.tsx

@@ -2,9 +2,11 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import { App } from './App'
+import { FPSDisplay } from './FPSDisplay'
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <App />
+        <FPSDisplay />
     </StrictMode>,
 )