Better functioning grid effect with rainbow colors

frontend/src/components/Homepage.tsx

@@ -3,11 +3,14 @@ import '../styles/home.scss'
 
 function Homepage() {
 
+    const floorClient = (number: number) => Math.floor(number / 50)
+
     const [columns, setColumns] = useState(floorClient(document.body.clientWidth))
     const [rows, setRows] = useState(floorClient(document.body.clientHeight))
-    const [quantity, setQuantity] = useState(columns * rows)
+    const [params, setParams] = useState({ columns, rows, quantity: columns * rows })
     const [position, setPosition] = useState([0, 0])
     const [active, setActve] = useState(false)
+    const [count, setCount] = useState(0)
 
     useEffect(() => {
         function handleResize() {
@@ -19,45 +22,65 @@ function Homepage() {
     }, [])
 
     useEffect(() => {
-        const timeout = setTimeout(() => setQuantity(columns * rows), 500)
+        const timeout = setTimeout(() => {
+            setParams({ columns, rows, quantity: columns * rows })
+        }, 500)
         return () => clearTimeout(timeout)
     }, [columns, rows])
 
+    const createTiles = useMemo(() => {
 
-    function floorClient(number: number) {
-        return Math.floor(number / 50)
-    }
+        const colors = [
+            'rgb(229, 57, 53)',
+            'rgb(253, 216, 53)',
+            'rgb(244, 81, 30)',
+            'rgb(76, 175, 80)',
+            'rgb(33, 150, 243)',
+            'rgb(156, 39, 176)'
+        ]
 
         function createTile(index: number) {
-        const x = index % columns
-        const y = Math.floor(index / columns)
-        const xDiff = (x - position[0]) / 10
-        const yDiff = (y - position[1]) / 10
+
+            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 (active)
+                    return
+                setPosition([posX, posY])
+                setActve(true)
+
+                const xDiff = (x: number) => (x - posX) / 20
+                const yDiff = (y: number) => (y - posY) / 20
+                const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y))
+                const warst = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
+                // console.log(warst, params)
+
+                setTimeout(() => {
+                    setActve(false)
+                    setCount(e => e + 1)
+                }, Math.max(...warst) * 1000 + 300)
+            }
+
             return (
                 <div
                     key={index}
-                className={"tile " + (active ? 'active' : '')}
+                    className={'tile ' + (active ? 'active' : '')}
                     style={{ '--delay': pos + 's' } as CSSProperties}
-                onClick={() => {
-                    setPosition([x, y])
-                    setActve(e => !e)
-                }}
-            >
-                {/* {pos} */}
-            </div>
+                    onClick={() => doEffect(x, y)}
+                ></div>
             )
         }
 
-    const createTiles = useMemo(() => {
-        console.log(3, columns, rows, quantity)
-        // return <p>{quantity}</p>
         return (
-            <div id='tiles' style={{ '--columns': columns, '--rows': rows } as CSSProperties}>
-                {Array.from(Array(quantity)).map((tile, index) => createTile(index))}
+            <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color1': colors[count % (colors.length - 1)], '--bg-color2': colors[(count + 1) % (colors.length - 1)] } as CSSProperties}>
+                {Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
             </div>
         )
-    }, [quantity, position])
+    }, [params, position, active, count])
 
     return createTiles
 }

frontend/src/styles/home.scss

@@ -8,12 +8,10 @@
     grid-template-rows: repeat(var(--rows), 1fr);
 
     .tile {
-        @include transition(1s);
-        outline: 1px solid white;
-        background-color: black;
+        background-color: var(--bg-color1);
 
         &.active {
-            animation: bright .5s forwards;
+            animation: bright .3s forwards;
             animation-delay: var(--delay);
         }
     }
@@ -21,16 +19,18 @@
 
 @keyframes bright {
     0% {
-        background-color: black;
+        background-color: var(--bg-color1);
     }
 
     50% {
 
-        background-color: white;
+        background-color: var(--bg-color2);
+        filter: brightness(130%);
+        outline: 1px solid white;
     }
 
     100% {
 
-        background-color: gray;
+        background-color: var(--bg-color2);
     }
 }