πŸ¦„ Capitlised words on splash screen and fixed rainbow route for remix v2 main

Browse Source
This commit is contained in:
Nikolaj Frey 2024-03-24 21:37:28 +11:00
parent baf0e57f07
commit 29a7a0feb2
5 changed files with 106 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/Login/Login.tsx
View File

@ -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}
/>

75
app/src/components/textAnimation1.tsx
View File

@ -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 <RainbowText ce={props?.ce}>{titleText}</RainbowText>
}
return () => {
// cleanup
clearTimeout(timeout);
};
}, [titleText]);
return <RainbowText ce={props?.ce}>{titleText}</RainbowText>;
};

0
app/src/routes/index.tsx β†’ app/src/routes/_index.tsx
View File

61
app/src/routes/rainbow.$.tsx Normal file
View File

@ -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 (
<Flex
sx={{
'::selection': {
background: 'transparent'
},
'::-moz-selection': {
background: 'transparent'
},
'*': {
'::selection': {
background: 'transparent'
},
'::-moz-selection': {
background: 'transparent'
}
},
'* grammarly-extension': {
display: 'none !important'
}
}}
alignItems="center"
justifyContent="center"
flexDirection="column"
maxWidth="100%"
>
<Splash texts={texts} ce={true}></Splash>
</Flex>
);
}

59
app/src/routes/rainbow/$.tsx
View File

@ -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 (
<Flex
sx={{
"::selection": {
background: "transparent",
},
"::-moz-selection": {
background: "transparent",
},
"*": {
"::selection": {
background: "transparent",
},
"::-moz-selection": {
background: "transparent",
},
},
"* grammarly-extension": {
display: "none !important",
},
}}
alignItems="center"
justifyContent="center"
flexDirection="column"
maxWidth="100%"
>
<Splash texts={texts} ce={true}></Splash>
</Flex>
)
}