From 1e1003758d894b723cf8575963b51310c3dc7402 Mon Sep 17 00:00:00 2001 From: aronmal Date: Mon, 24 Oct 2022 23:56:11 +0200 Subject: [PATCH] Reveal grid effect finished --- frontend/src/components/Homepage.tsx | 7 ++- frontend/src/components/Homepage2.tsx | 44 ++++++++++--------- frontend/src/styles/home.scss | 8 ++-- frontend/src/styles/home2.scss | 61 ++++++++++++++++++++------- 4 files changed, 77 insertions(+), 43 deletions(-) diff --git a/frontend/src/components/Homepage.tsx b/frontend/src/components/Homepage.tsx index a800fff..ea9370d 100644 --- a/frontend/src/components/Homepage.tsx +++ b/frontend/src/components/Homepage.tsx @@ -56,13 +56,12 @@ function Homepage() { 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) + const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)] setTimeout(() => { setActve(false) setCount(e => e + 1) - }, Math.max(...warst) * 1000 + 300) + }, Math.max(...diagonals) * 1000 + 300) } return ( @@ -76,7 +75,7 @@ function Homepage() { } return ( -
+
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
) diff --git a/frontend/src/components/Homepage2.tsx b/frontend/src/components/Homepage2.tsx index aefb23c..c250a34 100644 --- a/frontend/src/components/Homepage2.tsx +++ b/frontend/src/components/Homepage2.tsx @@ -10,6 +10,7 @@ function Homepage2() { 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(() => { @@ -30,13 +31,12 @@ function Homepage2() { 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)' + const sentences = [ + 'Ethem ...', + 'hat ...', + 'lange ...', + 'Hörner 🐂', + 'Grüße von Mallorca 🌊 🦦 ☀️' ] function createTile(index: number) { @@ -48,27 +48,28 @@ function Homepage2() { const pos = (Math.sqrt(xDiff * xDiff + yDiff * yDiff)).toFixed(2) const doEffect = (posX: number, posY: number) => { - if (active) + if (action) return setPosition([posX, posY]) - setActve(true) + setActve(e => !e) + setAction(true) - const xDiff = (x: number) => (x - posX) / 20 - const yDiff = (y: number) => (y - posY) / 20 + 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 warst = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)] - // console.log(warst, params) + const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)] setTimeout(() => { - setActve(false) - setCount(e => e + 1) - }, Math.max(...warst) * 1000 + 1000) + setAction(false) + if (active) + setCount(e => e + 1) + }, Math.max(...diagonals) * 1000 + 1000) } return (
doEffect(x, y)} >
@@ -76,11 +77,14 @@ function Homepage2() { } return ( -
+
+
+

{sentences[count % sentences.length]}

+
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))} -
+
) - }, [params, position, active, count]) + }, [params, position, active, action]) return createTiles } diff --git a/frontend/src/styles/home.scss b/frontend/src/styles/home.scss index f38ed0d..2177422 100644 --- a/frontend/src/styles/home.scss +++ b/frontend/src/styles/home.scss @@ -8,7 +8,7 @@ grid-template-rows: repeat(var(--rows), 1fr); .tile { - background-color: var(--bg-color1); + background-color: var(--bg-color-1); &.active { animation: bright .3s forwards; @@ -19,18 +19,18 @@ @keyframes bright { 0% { - background-color: var(--bg-color1); + background-color: var(--bg-color-1); } 50% { - background-color: var(--bg-color2); + background-color: var(--bg-color-2); filter: brightness(130%); outline: 1px solid white; } 100% { - background-color: var(--bg-color2); + background-color: var(--bg-color-2); } } \ No newline at end of file diff --git a/frontend/src/styles/home2.scss b/frontend/src/styles/home2.scss index 3c5499c..b405784 100644 --- a/frontend/src/styles/home2.scss +++ b/frontend/src/styles/home2.scss @@ -14,7 +14,6 @@ $g2: rgb(236, 64, 122); .tile { position: relative; - background-color: var(--bg-color1); &::before { position: absolute; @@ -24,9 +23,43 @@ $g2: rgb(236, 64, 122); } &.active { - animation: bright 1s forwards; + opacity: 1; + animation: hide .2s forwards; animation-delay: var(--delay); } + + &.inactive { + opacity: 0; + animation: show .2s forwards; + animation-delay: var(--delay); + } + } + + .center-div { + position: absolute; + height: 100vh; + width: 100vw; + display: inherit; + + .headline { + margin: auto; + font-size: 5em; + background-color: rgba(20, 20, 20, 0.2); + padding: .25em .5em; + border-radius: .25em; + + &.active { + opacity: 1; + animation: hide 2s forwards; + // animation-delay: 1s; + } + + &.inactive { + opacity: 0; + animation: show 2s forwards; + // animation-delay: 1s; + } + } } } @@ -40,24 +73,22 @@ $g2: rgb(236, 64, 122); } } -@keyframes bright { +@keyframes hide { 0% { - background-color: var(--bg-color1); - opacity: 0; - } - - 40% { - background-color: var(--bg-color2); - opacity: 1; - } - - 60% { - background-color: var(--bg-color2); opacity: 1; } 100% { - background-color: var(--bg-color2); + opacity: 0; + } +} + +@keyframes show { + 0% { + opacity: 0; + } + + 100% { opacity: 1; } } \ No newline at end of file