feat: main Updated text animation

Browse Source
This commit is contained in:
Nikolaj Frey 2023-06-28 17:53:34 +10:00
parent fa1c09c9c4
commit 4023d6ff87
1 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
remix/app/components/textAnimation1.tsx
View File

@ -13,25 +13,40 @@ export const TextAnimation1 = props => {
'magical', 'magical',
'inspiring', 'inspiring',
'love', 'love',
'tt' // 'tt'
] ]
}, []) }, [])
const [titleText, setTitleText] = React.useState(texts[0]) const [titleText, setTitleText] = React.useState(texts[0])
const [usedTexts, setUsedTexts] = React.useState(["thingtime"])
const state = React.useRef({})
React.useEffect(() => { React.useEffect(() => {
const newTimeout = Math.random() * 1500 + 2500 state.current = { titleText, texts, usedTexts }
}, [titleText, texts, usedTexts])
React.useEffect(() => {
const newTimeout = Math.random() * 1500 + 2500 + (titleText === "thingtime" ? 750 : 0)
setTimeout(() => { setTimeout(() => {
// let newTextIdx = Math.round(Math.random() * (texts.length - 1)) // choose an unused text or pick texts[0]
let newTextIdx = texts?.indexOf(titleText) + 1 const usedTexts = state.current.usedTexts
// if (newTextIdx === texts.indexOf(titleText)) { const unusedTexts = texts.filter(text => !usedTexts.includes(text))
// newTextIdx = newTextIdx + 1 // pick a random unused text
// } const randomIdx = Math.floor(Math.random() * unusedTexts.length)
const newText = texts[newTextIdx] || texts[0] const newText = unusedTexts.length > 0 ? unusedTexts[randomIdx] : texts[0]
if (!unusedTexts.length) {
setUsedTexts(["thingtime"])
} else {
setUsedTexts([...usedTexts, newText])
}
setTitleText(newText) setTitleText(newText)
}, newTimeout) }, newTimeout)
}, [titleText, texts])
}, [titleText])
return <RainbowText>{titleText}</RainbowText> return <RainbowText>{titleText}</RainbowText>
} }