aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reveal grid effect finished

Browse source
This commit is contained in:
aronmal 2022-10-24 23:56:11 +02:00
parent a04a608718
commit 49f4975516
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 77 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/Homepage.tsx
View file

@ -56,13 +56,12 @@ function Homepage() {
const xDiff = (x: number) => (x - posX) / 20 const xDiff = (x: number) => (x - posX) / 20
const yDiff = (y: number) => (y - posY) / 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 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)] const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
// console.log(warst, params)
setTimeout(() => { setTimeout(() => {
setActve(false) setActve(false)
setCount(e => e + 1) setCount(e => e + 1)
}, Math.max(...warst) * 1000 + 300) }, Math.max(...diagonals) * 1000 + 300)
} }
return ( return (
@ -76,7 +75,7 @@ function Homepage() {
} }
return ( 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}> <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color-1': colors[count % colors.length], '--bg-color-2': colors[(count + 1) % colors.length] } as CSSProperties}>
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))} {Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
</div> </div>
) )

44
frontend/src/components/Homepage2.tsx
View file

@ -10,6 +10,7 @@ function Homepage2() {
const [params, setParams] = useState({ columns, rows, quantity: columns * rows }) const [params, setParams] = useState({ columns, rows, quantity: columns * rows })
const [position, setPosition] = useState([0, 0]) const [position, setPosition] = useState([0, 0])
const [active, setActve] = useState(false) const [active, setActve] = useState(false)
const [action, setAction] = useState(false)
const [count, setCount] = useState(0) const [count, setCount] = useState(0)
useEffect(() => { useEffect(() => {
@ -30,13 +31,12 @@ function Homepage2() {
const createTiles = useMemo(() => { const createTiles = useMemo(() => {
const colors = [ const sentences = [
'rgb(229, 57, 53)', 'Ethem ...',
'rgb(253, 216, 53)', 'hat ...',
'rgb(244, 81, 30)', 'lange ...',
'rgb(76, 175, 80)', 'Hörner 🐂',
'rgb(33, 150, 243)', 'Grüße von Mallorca 🌊 🦦 ☀️'
'rgb(156, 39, 176)'
] ]
function createTile(index: number) { function createTile(index: number) {
@ -48,27 +48,28 @@ function Homepage2() {
const pos = (Math.sqrt(xDiff * xDiff + yDiff * yDiff)).toFixed(2) const pos = (Math.sqrt(xDiff * xDiff + yDiff * yDiff)).toFixed(2)
const doEffect = (posX: number, posY: number) => { const doEffect = (posX: number, posY: number) => {
if (active) if (action)
return return
setPosition([posX, posY]) setPosition([posX, posY])
setActve(true) setActve(e => !e)
setAction(true)
const xDiff = (x: number) => (x - posX) / 20 const xDiff = (x: number) => (x - posX) / 50
const yDiff = (y: number) => (y - posY) / 20 const yDiff = (y: number) => (y - posY) / 50
const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y)) 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)] const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
// console.log(warst, params)
setTimeout(() => { setTimeout(() => {
setActve(false) setAction(false)
setCount(e => e + 1) if (active)
}, Math.max(...warst) * 1000 + 1000) setCount(e => e + 1)
}, Math.max(...diagonals) * 1000 + 1000)
} }
return ( return (
<div <div
key={index} key={index}
className={'tile ' + (active ? 'active' : '')} className={'tile ' + (active ? 'active' : 'inactive')}
style={{ '--delay': pos + 's' } as CSSProperties} style={{ '--delay': pos + 's' } as CSSProperties}
onClick={() => doEffect(x, y)} onClick={() => doEffect(x, y)}
></div> ></div>
@ -76,11 +77,14 @@ function Homepage2() {
} }
return ( 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}> <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows } as CSSProperties}>
<div className="center-div">
<h1 className={'headline ' + (!active ? 'active' : 'inactive')}>{sentences[count % sentences.length]}</h1>
</div>
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))} {Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
</div> </div >
) )
}, [params, position, active, count]) }, [params, position, active, action])
return createTiles return createTiles
} }

8
frontend/src/styles/home.scss
View file

@ -8,7 +8,7 @@
grid-template-rows: repeat(var(--rows), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
.tile { .tile {
background-color: var(--bg-color1); background-color: var(--bg-color-1);
&.active { &.active {
animation: bright .3s forwards; animation: bright .3s forwards;
@ -19,18 +19,18 @@
@keyframes bright { @keyframes bright {
0% { 0% {
background-color: var(--bg-color1); background-color: var(--bg-color-1);
} }
50% { 50% {
background-color: var(--bg-color2); background-color: var(--bg-color-2);
filter: brightness(130%); filter: brightness(130%);
outline: 1px solid white; outline: 1px solid white;
} }
100% { 100% {
background-color: var(--bg-color2); background-color: var(--bg-color-2);
} }
} }

61
frontend/src/styles/home2.scss
View file

@ -14,7 +14,6 @@ $g2: rgb(236, 64, 122);
.tile { .tile {
position: relative; position: relative;
background-color: var(--bg-color1);
&::before { &::before {
position: absolute; position: absolute;
@ -24,9 +23,43 @@ $g2: rgb(236, 64, 122);
} }
&.active { &.active {
animation: bright 1s forwards; opacity: 1;
animation: hide .2s forwards;
animation-delay: var(--delay); 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% { 0% {
background-color: var(--bg-color1);
opacity: 0;
}
40% {
background-color: var(--bg-color2);
opacity: 1;
}
60% {
background-color: var(--bg-color2);
opacity: 1; opacity: 1;
} }
100% { 100% {
background-color: var(--bg-color2); opacity: 0;
}
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1; opacity: 1;
} }
} }