From 29a7a0feb207e54ffa2706f55846d26cb279aa6a Mon Sep 17 00:00:00 2001 From: Nikolaj Frey Date: Sun, 24 Mar 2024 21:37:28 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20Capitlised=20words=20on=20splash?= =?UTF-8?q?=20screen=20and=20fixed=20rainbow=20route=20for=20remix=20v2=20?= =?UTF-8?q?main?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/components/Login/Login.tsx | 6 +- app/src/components/textAnimation1.tsx | 75 +++++++++++++----------- app/src/routes/{index.tsx => _index.tsx} | 0 app/src/routes/rainbow.$.tsx | 61 +++++++++++++++++++ app/src/routes/rainbow/$.tsx | 59 ------------------- 5 files changed, 106 insertions(+), 95 deletions(-) rename app/src/routes/{index.tsx => _index.tsx} (100%) create mode 100644 app/src/routes/rainbow.$.tsx delete mode 100644 app/src/routes/rainbow/$.tsx diff --git a/app/src/components/Login/Login.tsx b/app/src/components/Login/Login.tsx index ab85bf0..3c47f9d 100644 --- a/app/src/components/Login/Login.tsx +++ b/app/src/components/Login/Login.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Flex, Button, FormControl, Input, Spinner } from '@chakra-ui/react'; +import { Flex, Button, FormControl, Input, Spinner, Link } from '@chakra-ui/react'; import { useFetcher } from '@remix-run/react'; export const Login = (props) => { @@ -65,7 +65,7 @@ export const Login = (props) => { borderRadius="5px" outline="none" onChange={(e) => setUsername(e?.target?.value)} - placeholder="💌 Email" + placeholder="Email 💌" type="email" value={username} /> @@ -84,7 +84,7 @@ export const Login = (props) => { borderRadius="5px" outline="none" onChange={(e) => setPassword(e?.target?.value)} - placeholder="🔑 Password" + placeholder="Password 🔑" type="password" value={password} /> diff --git a/app/src/components/textAnimation1.tsx b/app/src/components/textAnimation1.tsx index afdfb50..a07f742 100644 --- a/app/src/components/textAnimation1.tsx +++ b/app/src/components/textAnimation1.tsx @@ -1,56 +1,65 @@ -import React from "react" -import { Box } from "@chakra-ui/react" +import React from 'react'; +import { Box } from '@chakra-ui/react'; -import { RainbowText } from "./rainbowText" +import { RainbowText } from './rainbowText'; export const TextAnimation1 = (props) => { const texts = React.useMemo(() => { if (props?.texts?.length) { - return props?.texts + return props?.texts; } return [ - "thingtime", - "vibrant", - "infinite", - "creative", - "powerful", - "magical", - "inspiring", - "love", + 'Thingtime', + 'Vibrant', + 'Infinite', + 'Creative', + 'Powerful', + 'Magical', + 'Inspiring', + 'Love' // 'tt' - ] - }, [props?.texts]) + ]; + }, [props?.texts]); - const [titleText, setTitleText] = React.useState(texts[0]) + const [titleText, setTitleText] = React.useState(texts[0]); - const [usedTexts, setUsedTexts] = React.useState(["thingtime"]) + const [usedTexts, setUsedTexts] = React.useState(['Thingtime']); - const state = React.useRef({}) + const state: any = React.useRef({}); React.useEffect(() => { - state.current = { titleText, texts, usedTexts } - }, [titleText, texts, usedTexts]) + state.current = { titleText, texts, usedTexts }; + }, [titleText, texts, usedTexts]); React.useEffect(() => { - const newTimeout = - Math.random() * 1500 + 2500 + (titleText === "thingtime" ? 750 : 0) + const newTimeout = Math.random() * 1500 + 2500 + (titleText === 'thingtime' ? 750 : 0); - setTimeout(() => { + const timeout = setTimeout(() => { // choose an unused text or pick texts[0] - const usedTexts = state.current.usedTexts - const unusedTexts = texts.filter((text) => !usedTexts.includes(text)) + const usedTexts = state.current?.usedTexts; + const unusedTexts = texts.filter((text) => !usedTexts.includes(text)); // pick a random unused text - const randomIdx = Math.floor(Math.random() * unusedTexts.length) - const newText = unusedTexts.length > 0 ? unusedTexts[randomIdx] : texts[0] + const randomIdx = Math.floor(Math.random() * unusedTexts.length); + const wasThingtime = false && titleText === 'Thingtime'; + const newText = wasThingtime ? 'is' : unusedTexts.length > 0 ? unusedTexts[randomIdx] : texts[0]; + console.log('nik newText', newText); + console.log('nik wasThingtime', wasThingtime); + console.log('nik usedTexts', usedTexts); if (!unusedTexts.length) { - setUsedTexts(["thingtime"]) + setUsedTexts(['Thingtime']); } else { - setUsedTexts([...usedTexts, newText]) + setUsedTexts([...usedTexts, newText]); } - setTitleText(newText) - }, newTimeout) - }, [titleText]) + setTitleText(newText); + }, newTimeout); - return {titleText} -} + return () => { + // cleanup + + clearTimeout(timeout); + }; + }, [titleText]); + + return {titleText}; +}; diff --git a/app/src/routes/index.tsx b/app/src/routes/_index.tsx similarity index 100% rename from app/src/routes/index.tsx rename to app/src/routes/_index.tsx diff --git a/app/src/routes/rainbow.$.tsx b/app/src/routes/rainbow.$.tsx new file mode 100644 index 0000000..5800415 --- /dev/null +++ b/app/src/routes/rainbow.$.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Flex } from '@chakra-ui/react'; +import { useLocation } from '@remix-run/react'; + +import { Splash } from '~/components/Splash/Splash'; +import { useThingtime } from '~/components/Thingtime/useThingtime'; + +export default function Index() { + const location = useLocation(); + const { pathname } = location; + + const strippedPathname = React.useMemo(() => { + // modify /rainbow/* to just * + + const ret = pathname.split('/')[2]; + + if (ret) { + return decodeURI(ret); + } + + return 'rainbow'; + }, [pathname]); + + const texts = React.useMemo(() => { + const ret = [strippedPathname]; + + return ret; + }, [strippedPathname]); + + console.log('texts', texts); + + return ( + + + + ); +} diff --git a/app/src/routes/rainbow/$.tsx b/app/src/routes/rainbow/$.tsx deleted file mode 100644 index 0ea6dd9..0000000 --- a/app/src/routes/rainbow/$.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from "react" -import { Flex } from "@chakra-ui/react" -import { useLocation } from "@remix-run/react" - -import { Splash } from "~/components/Splash/Splash" -import { useThingtime } from "~/components/Thingtime/useThingtime" - -export default function Index() { - const location = useLocation() - const { pathname } = location - - const strippedPathname = React.useMemo(() => { - // modify /rainbow/* to just * - - const ret = pathname.split("/")[2] - - if (ret) { - return decodeURI(ret) - } - - return "rainbow" - }, [pathname]) - - const texts = React.useMemo(() => { - const ret = [strippedPathname] - - return ret - }, [strippedPathname]) - - return ( - - - - ) -}