Rename stuff

leaky-ships/components/Grid2.tsx

@@ -0,0 +1,92 @@
+import classNames from 'classnames'
+import { CSSProperties, useEffect, useMemo, useState } from 'react'
+
+function Grid2() {
+
+    const floorClient = (number: number) => Math.floor(number / 50)
+
+    const [columns, setColumns] = useState(0)
+    const [rows, setRows] = useState(0)
+    const [params, setParams] = useState({ columns, rows, quantity: columns * rows })
+    const [position, setPosition] = useState([0, 0])
+    const [active, setActve] = useState(false)
+    const [action, setAction] = useState(false)
+    const [count, setCount] = useState(0)
+
+    useEffect(() => {
+        function handleResize() {
+            setColumns(floorClient(document.body.clientWidth))
+            setRows(floorClient(document.body.clientHeight))
+        }
+        handleResize()
+        window.addEventListener('resize', handleResize)
+    }, [])
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setParams({ columns, rows, quantity: columns * rows })
+        }, 500)
+        return () => clearTimeout(timeout)
+    }, [columns, rows])
+
+    const createTiles = useMemo(() => {
+
+        const sentences = [
+            'Ethem ...',
+            'hat ...',
+            'lange ...',
+            'Hörner 🐂',
+            'Grüße von Mallorca 🌊 🦦 ☀️'
+        ]
+
+        function createTile(index: number) {
+
+            const x = index % params.columns
+            const y = Math.floor(index / params.columns)
+            const xDiff = (x - position[0]) / 20
+            const yDiff = (y - position[1]) / 20
+            const pos = (Math.sqrt(xDiff * xDiff + yDiff * yDiff)).toFixed(2)
+
+            const doEffect = (posX: number, posY: number) => {
+                if (action)
+                    return
+                setPosition([posX, posY])
+                setActve(e => !e)
+                setAction(true)
+
+                const xDiff = (x: number) => (x - posX) / 50
+                const yDiff = (y: number) => (y - posY) / 50
+                const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y))
+                const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
+
+                setTimeout(() => {
+                    setAction(false)
+                    if (active)
+                        setCount(e => e + 1)
+                }, Math.max(...diagonals) * 1000 + 1000)
+            }
+
+            return (
+                <div
+                    key={index}
+                    className={classNames('tile', (active ? 'active' : 'inactive'))}
+                    style={{ '--delay': pos + 's' } as CSSProperties}
+                    onClick={() => doEffect(x, y)}
+                ></div>
+            )
+        }
+
+        return (
+            <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows } as CSSProperties}>
+                <div className="center-div">
+                    <h1 className={classNames('headline', (!active ? 'active' : 'inactive'))}>{sentences[count % sentences.length]}</h1>
+                </div>
+                {Array.from(Array(params.quantity), (_tile, index) => createTile(index))}
+            </div >
+        )
+    }, [params, position, active, action, count])
+
+    return createTiles
+}
+
+export default Grid2