From e183af7deac915630a0417e59ce95171f79cd8da Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Mon, 24 Oct 2022 18:24:39 +0200
Subject: [PATCH] Adding copy of files for grid outline effect

---
 frontend/src/App.tsx                  |  6 +-
 frontend/src/components/Homepage2.tsx | 88 +++++++++++++++++++++++++++
 frontend/src/styles/home2.scss        | 36 +++++++++++
 3 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Homepage2.tsx
 create mode 100644 frontend/src/styles/home2.scss

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b4a9414..8368444 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 // import Gamefield from './components/Gamefield';
-import Homepage from './components/Homepage';
+// import Homepage from './components/Homepage';
+import Homepage2 from './components/Homepage2';
 import './styles/App.scss';
 
 function App() {
@@ -8,8 +9,9 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <Homepage/>
         {/* <Gamefield/> */}
+        {/* <Homepage/> */}
+        <Homepage2/>
       </header>
     </div>
   );
diff --git a/frontend/src/components/Homepage2.tsx b/frontend/src/components/Homepage2.tsx
new file mode 100644
index 0000000..8f90fc2
--- /dev/null
+++ b/frontend/src/components/Homepage2.tsx
@@ -0,0 +1,88 @@
+import { CSSProperties, useEffect, useMemo, useState } from 'react'
+import '../styles/home2.scss'
+
+function Homepage2() {
+
+    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 [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() {
+            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 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 % 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' : '')}
+                    style={{ '--delay': pos + 's' } as CSSProperties}
+                    onClick={() => doEffect(x, y)}
+                ></div>
+            )
+        }
+
+        return (
+            <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>
+        )
+    }, [params, position, active, count])
+
+    return createTiles
+}
+
+export default Homepage2
\ No newline at end of file
diff --git a/frontend/src/styles/home2.scss b/frontend/src/styles/home2.scss
new file mode 100644
index 0000000..f38ed0d
--- /dev/null
+++ b/frontend/src/styles/home2.scss
@@ -0,0 +1,36 @@
+@use './mixins/effects' as *;
+
+#tiles {
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    grid-template-rows: repeat(var(--rows), 1fr);
+
+    .tile {
+        background-color: var(--bg-color1);
+
+        &.active {
+            animation: bright .3s forwards;
+            animation-delay: var(--delay);
+        }
+    }
+}
+
+@keyframes bright {
+    0% {
+        background-color: var(--bg-color1);
+    }
+
+    50% {
+
+        background-color: var(--bg-color2);
+        filter: brightness(130%);
+        outline: 1px solid white;
+    }
+
+    100% {
+
+        background-color: var(--bg-color2);
+    }
+}
\ No newline at end of file