played/gen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

- improve styling
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- change fonts
This commit is contained in:
Enrico Bühler 2022-05-16 03:08:55 +02:00
parent 71fa0133e3
commit 1cf978c85d
58 changed files with 658 additions and 726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules node_modules
.DS_Store .DS_Store
dist

392
dist/assets/index.3030d437.js vendored
View File

File diff suppressed because one or more lines are too long

9
dist/index.html vendored
View File

@ -3,16 +3,19 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>played - Random Team Generator</title> <title>gen.played - Random Team Generator for CS:GO, Valorant and other Games</title>
<script type="module" crossorigin src="/assets/index.3030d437.js"></script> <meta name="description"
content="gen.played is a random team generator. Simply enter the names of the players, press generate and you've got as many random teams as you like. Not happy with the result? Just press generate again!" />
<script type="module" crossorigin src="/assets/index.5d5789f0.js"></script>
<link rel="stylesheet" href="/assets/index.87f7909d.css"> <link rel="stylesheet" href="/assets/index.87f7909d.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script defer data-domain="gen.played.party" src="https://analytics.unom.io/js/plausible.js"></script>
</body> </body>
</html> </html>

30
package.json
View File

@ -22,15 +22,13 @@
"@chakra-ui/react": "^1.8.8", "@chakra-ui/react": "^1.8.8",
"@emotion/react": "^11.9.0", "@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"@fontsource/inter": "^4.5.7",
"@fontsource/raleway": "^4.5.5",
"@unom/style": "^0.2.14", "@unom/style": "^0.2.14",
"chakra-ui-markdown-renderer": "^4.0.0", "chakra-ui-markdown-renderer": "^4.0.0",
"framer-motion": "^6.3.1", "framer-motion": "^6.3.3",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-helmet": "^6.1.0", "react-helmet-async": "^1.3.0",
"react-hook-form": "^7.30.0", "react-hook-form": "^7.31.1",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-markdown": "^8.0.3", "react-markdown": "^8.0.3",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
@ -38,22 +36,22 @@
"zustand": "^4.0.0-rc.1" "zustand": "^4.0.0-rc.1"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/config-conventional": "^16.2.1", "@commitlint/config-conventional": "^16.2.4",
"@types/node": "^17.0.23", "@types/node": "^17.0.33",
"@types/react": "^17.0.44", "@types/react": "^17.0.44",
"@types/react-dom": "^17.0.15", "@types/react-dom": "^17.0.15",
"@types/react-helmet": "^6.1.5", "@types/react-helmet": "^6.1.5",
"@vitejs/plugin-react": "^1.3.0", "@vitejs/plugin-react": "^1.3.2",
"commitlint": "^16.2.3", "commitlint": "^16.3.0",
"eslint": "^8.13.0", "eslint": "^8.15.0",
"eslint-config-sznm": "^0.2.1", "eslint-config-sznm": "^0.2.1",
"husky": "^7.0.4", "husky": "^8.0.1",
"lint-staged": "^12.3.7", "lint-staged": "^12.4.1",
"netlify-cli": "^10.0.0", "netlify-cli": "^10.3.1",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"standard-version": "^9.3.2", "standard-version": "^9.5.0",
"typescript": "^4.6.3", "typescript": "^4.6.4",
"vite": "^2.9.1", "vite": "^2.9.9",
"vite-tsconfig-paths": "^3.4.1" "vite-tsconfig-paths": "^3.4.1"
} }
} }

37
src/App.tsx
View File

@ -14,25 +14,28 @@ import Layout from "Components/Layout";
import Page404 from "Sites/404"; import Page404 from "Sites/404";
import { routes } from "Sites"; import { routes } from "Sites";
import { SWRConfig } from "swr"; import { SWRConfig } from "swr";
import { HelmetProvider } from "react-helmet-async";
const App = () => ( const App = () => (
<Router> <HelmetProvider>
<SWRConfig <Router>
value={{ <SWRConfig
fetcher: (resource, init) => value={{
fetch(resource, init).then((res) => res.json()), fetcher: (resource, init) =>
}} fetch(resource, init).then((res) => res.json()),
> }}
<Layout> >
<Routes> <Layout>
{routes.map((routeProps) => ( <Routes>
<Route {...routeProps} key={routeProps.path as string} /> {routes.map((routeProps) => (
))} <Route {...routeProps} key={routeProps.path as string} />
<Route path="*" element={<Page404 />} /> ))}
</Routes> <Route path="*" element={<Page404 />} />
</Layout> </Routes>
</SWRConfig> </Layout>
</Router> </SWRConfig>
</Router>
</HelmetProvider>
); );
export default App; export default App;

30
src/Components/Cards/Team/index.tsx
View File

@ -1,6 +1,13 @@
import { Box, Text, Heading, useStyleConfig, chakra } from "@chakra-ui/react"; import {
Box,
Text,
Heading,
useStyleConfig,
chakra,
useColorModeValue,
} from "@chakra-ui/react";
import { ease } from "@unom/style"; import { ease } from "@unom/style";
import { motion, isValidMotionProp } from "framer-motion"; import { m, isValidMotionProp, motion } from "framer-motion";
import { VFC } from "react"; import { VFC } from "react";
type CardTeamProps = { type CardTeamProps = {
@ -8,11 +15,13 @@ type CardTeamProps = {
index: number; index: number;
}; };
const Container = chakra(motion.div, { const Container = chakra(m.div, {
shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children", shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
}); });
const CardTeam: VFC<CardTeamProps> = ({ players, index }) => { const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
const headingColor = useColorModeValue("purple.600", "purple.100");
const styles = useStyleConfig("Card", { variant: "smooth" }); const styles = useStyleConfig("Card", { variant: "smooth" });
return ( return (
<Container <Container
@ -20,17 +29,26 @@ const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
enter: { enter: {
y: 0, y: 0,
opacity: 1, opacity: 1,
transition: ease.quint(0.8).out, transition: { ...ease.quint(0.8).out, staggerChildren: 0.1 },
}, },
from: { y: 100, opacity: 0 }, from: { y: 100, opacity: 0 },
}} }}
__css={styles} __css={styles}
> >
<Heading size="md" as="h3"> <Heading fontFamily="Gilroy" color={headingColor} size="md" as="h4">
Team {index + 1} Team {index + 1}
</Heading> </Heading>
{players.map((player, index) => ( {players.map((player, index) => (
<Text fontWeight={500} key={index}> <Text
as={motion.p}
variants={{
enter: { y: 0, opacity: 1, transition: ease.quint(0.8).out },
from: { y: 30, opacity: 0 },
}}
fontSize="lg"
fontWeight={500}
key={index}
>
{player} {player}
</Text> </Text>
))} ))}

2
src/Components/Layout/Meta.tsx
View File

@ -1,4 +1,4 @@
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet-async";
const Meta = () => { const Meta = () => {
return ( return (

4
src/Components/Layout/index.tsx
View File

@ -1,5 +1,5 @@
import { Box, chakra, Flex } from "@chakra-ui/react"; import { Box, chakra, Flex } from "@chakra-ui/react";
import { isValidMotionProp, motion } from "framer-motion"; import { isValidMotionProp, m } from "framer-motion";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import Footer from "./Footer"; import Footer from "./Footer";
@ -10,7 +10,7 @@ type LayoutProps = {
children: ReactNode; children: ReactNode;
}; };
const ContentContainer = chakra(motion.main, { const ContentContainer = chakra(m.main, {
shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children", shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
}); });

30
src/Components/Logo/index.tsx
View File

@ -1,11 +1,11 @@
import { Box, chakra } from "@chakra-ui/react"; import { Box, chakra } from "@chakra-ui/react";
import React from "react"; import React from "react";
import { useToken } from "@chakra-ui/react"; import { useToken } from "@chakra-ui/react";
import { motion } from "framer-motion"; import { m } from "framer-motion";
const Logo = () => { const Logo = () => {
return ( return (
<Box maxW="200px"> <Box maxW="200px">
<motion.svg <m.svg
style={{ width: "100%" }} style={{ width: "100%" }}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 798.92 453.49" viewBox="0 0 798.92 453.49"
@ -40,50 +40,50 @@ const Logo = () => {
</style> </style>
</defs> </defs>
<motion.g <m.g
style={{ zIndex: 0 }} style={{ zIndex: 0 }}
transition={{ type: "tween", ease: "circOut", duration: 0.5 }} transition={{ type: "tween", ease: "circOut", duration: 0.5 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
initial={{ scale: 0 }} initial={{ scale: 0 }}
> >
<motion.path <m.path
transition={{ delay: 1, opacity: { duration: 0.1 } }} transition={{ delay: 1, opacity: { duration: 0.1 } }}
animate={{ pathLength: 1, opacity: 1 }} animate={{ pathLength: 1, opacity: 1 }}
initial={{ pathLength: 0, opacity: 0 }} initial={{ pathLength: 0, opacity: 0 }}
d="M759.76 308.57L714.51 378.92 637.05 333.59" d="M759.76 308.57L714.51 378.92 637.05 333.59"
className="c" className="c"
></motion.path> ></m.path>
<motion.path <m.path
transition={{ delay: 0.1, opacity: { duration: 0.1 } }} transition={{ delay: 0.1, opacity: { duration: 0.1 } }}
animate={{ pathLength: 1, opacity: 1 }} animate={{ pathLength: 1, opacity: 1 }}
initial={{ pathLength: 0, opacity: 0 }} initial={{ pathLength: 0, opacity: 0 }}
d="M108.52 155.94L38.17 110.7 83.5 33.23" d="M108.52 155.94L38.17 110.7 83.5 33.23"
className="c" className="c"
></motion.path> ></m.path>
<motion.path <m.path
transition={{ type: "tween", duration: 1, ease: "circOut" }} transition={{ type: "tween", duration: 1, ease: "circOut" }}
animate={{ pathLength: 1 }} animate={{ pathLength: 1 }}
initial={{ pathLength: 0 }} initial={{ pathLength: 0 }}
style={{ pathOffset: 34 }} style={{ pathOffset: 34 }}
d="M56.19 101.61c266.27-71.11 171.63 434.9 399.46-31.49 61.99-126.9-79.84 503.13 12.99 302.97C531.18 238.26 682 186.15 706.22 356.36" d="M56.19 101.61c266.27-71.11 171.63 434.9 399.46-31.49 61.99-126.9-79.84 503.13 12.99 302.97C531.18 238.26 682 186.15 706.22 356.36"
className="b" className="b"
></motion.path> ></m.path>
</motion.g> </m.g>
<motion.path <m.path
animate={{ scale: 1 }} animate={{ scale: 1 }}
initial={{ scale: 0 }} initial={{ scale: 0 }}
transition={{ type: "spring" }} transition={{ type: "spring" }}
d="M315.73 169.2l.75 20.36c1.08 29.53-7.23 56.08-25.21 80.02-17.7 23.57-41.19 39.88-70.75 48.73-31.28 9.37-57.48 7.07-78.59-6.89-20.83-14.05-31.77-35.7-32.86-65.23s8.06-57.2 27.4-83.57c19.34-26.37 43.94-43.89 73.5-52.74 18.65-5.59 36.03-6.45 51.83-2.77 16.09 3.59 28.55 11.16 37.97 22.54l-42.71 38.01c-8.5-10.21-25.16-13.62-44.68-7.78-15.78 4.73-28.8 13.84-38.46 27.17-9.67 13.33-14.35 28.07-13.76 44.12s5.93 27.21 16.36 34.81c10.43 7.6 24.98 8.75 43.06 3.33 23.25-6.96 38.42-20.49 45.24-40.22l-48.79 14.61-1.62-44.15 101.31-30.35zM391.34 304.36l78.16 35.59v48.46l-129.79-59.1v-201.9l128.35 58.44v48.17l-76.72-34.93v27.98l69.51 31.65v47.59l-69.51-31.65v29.71zM606.36 52.68l51.34-24.49v201.9l-39.8 18.99-71.24-67.54v101.53l-51.63 24.63V105.79l40.09-19.13 71.24 67.54V52.68z" d="M315.73 169.2l.75 20.36c1.08 29.53-7.23 56.08-25.21 80.02-17.7 23.57-41.19 39.88-70.75 48.73-31.28 9.37-57.48 7.07-78.59-6.89-20.83-14.05-31.77-35.7-32.86-65.23s8.06-57.2 27.4-83.57c19.34-26.37 43.94-43.89 73.5-52.74 18.65-5.59 36.03-6.45 51.83-2.77 16.09 3.59 28.55 11.16 37.97 22.54l-42.71 38.01c-8.5-10.21-25.16-13.62-44.68-7.78-15.78 4.73-28.8 13.84-38.46 27.17-9.67 13.33-14.35 28.07-13.76 44.12s5.93 27.21 16.36 34.81c10.43 7.6 24.98 8.75 43.06 3.33 23.25-6.96 38.42-20.49 45.24-40.22l-48.79 14.61-1.62-44.15 101.31-30.35zM391.34 304.36l78.16 35.59v48.46l-129.79-59.1v-201.9l128.35 58.44v48.17l-76.72-34.93v27.98l69.51 31.65v47.59l-69.51-31.65v29.71zM606.36 52.68l51.34-24.49v201.9l-39.8 18.99-71.24-67.54v101.53l-51.63 24.63V105.79l40.09-19.13 71.24 67.54V52.68z"
className="e" className="e"
></motion.path> ></m.path>
<motion.path <m.path
animate={{ scale: 1 }} animate={{ scale: 1 }}
initial={{ scale: 2 }} initial={{ scale: 2 }}
transition={{ type: "tween", duration: 0.3 }} transition={{ type: "tween", duration: 0.3 }}
d="M256.3 210.31l1.47 5.29.18-.05c3.57-6.6 7.64-8.91 13.21-10.46 12.95-3.6 25.16.37 28.95 13.96 3.48 12.5-3.97 23.51-16.56 27.02-7.39 2.06-13.52 1.21-17.04-1.55l-.18.05 5.51 19.79-13.13 3.66-15.08-54.18 12.68-3.53zm20.89 27.4c6.66-1.85 11.34-7.28 9.28-14.67-2.06-7.39-8.87-9.62-15.53-7.77-6.57 1.83-11.25 7.26-9.19 14.65 2.06 7.39 8.87 9.62 15.44 7.79zM329.61 193.54l-11.34 53.25-13.33-2.84 11.34-53.25 13.33 2.84zM353.23 248.28c-10.77 1.62-18.81-.91-20.2-10.18-1.45-9.64 7.04-13.03 15.2-14.83l14.18-3.09c4.08-.9 5.37-1.86 4.89-5.04s-3.42-4.27-11.28-3.09c-5.71.86-8.65 1.68-9.79 7.5l-13.01 1.96c-.25-12.5 11.24-15.67 22.29-17.33 19.29-2.9 24.32 2.57 25.43 9.96l4.18 27.81-12.83 1.93-.63-4.21c-4.02 5.1-12.34 7.7-18.43 8.61zm8.26-20.87l-7.77 1.84c-4.72 1.09-6.86 2.76-6.33 6.31s4.29 5 9.35 4.24c6.83-1.03 13.94-5.35 12.94-12l-.49-3.28c-2.34 1.6-5.11 2.3-7.71 2.88zM410.7 262.01c-4.03 6.47-7.99 7.61-15.5 6.7-3.2-.39-6.37-.97-9.54-1.54l1.14-9.4c1.95.43 3.91.76 5.89 1 3.29.4 4.95-.73 6.89-3.36l1.67-2.75-14.58-41.64 14.66 1.79 8.57 28.32 14.65-25.5 14.47 1.76-28.33 44.62zM470.33 259.52c-16.19 3.07-28.18-1.2-31-16.09-2.84-14.98 6.75-23.35 22.93-26.42 17.67-3.36 27.87 3.67 30.7 18.55l.23 1.21-39.35 7.47.02.09c.72 3.81 5.82 8.82 14.93 7.09 5.4-1.02 8.87-3.52 10.17-7.33l14.33-2.72c-2.12 10.14-10.68 15.81-22.96 18.14zm7.52-27.93c-.41-2.14-4.56-8.29-14.33-6.44-10.6 2.01-11.35 10.25-11.16 11.27l.02.09 25.49-4.84-.02-.09zM512.39 236.55c-12.59-3.13-20.78-12.58-17.4-26.18 3.15-12.68 15.04-18.51 27.72-15.36 7.44 1.85 12.39 5.52 14.09 9.65l.09.02 4.61-18.56 13.32 3.31-13.13 52.84-12.86-3.2 1.21-4.87-.09-.02c-5.55 3.89-11.5 3.87-17.56 2.37zm6.03-8.55c6.62 1.64 13.36-.78 15.21-8.22 1.85-7.44-2.98-12.74-9.6-14.38-6.71-1.67-13.46.75-15.3 8.2-1.85 7.44 2.98 12.74 9.69 14.41z" d="M256.3 210.31l1.47 5.29.18-.05c3.57-6.6 7.64-8.91 13.21-10.46 12.95-3.6 25.16.37 28.95 13.96 3.48 12.5-3.97 23.51-16.56 27.02-7.39 2.06-13.52 1.21-17.04-1.55l-.18.05 5.51 19.79-13.13 3.66-15.08-54.18 12.68-3.53zm20.89 27.4c6.66-1.85 11.34-7.28 9.28-14.67-2.06-7.39-8.87-9.62-15.53-7.77-6.57 1.83-11.25 7.26-9.19 14.65 2.06 7.39 8.87 9.62 15.44 7.79zM329.61 193.54l-11.34 53.25-13.33-2.84 11.34-53.25 13.33 2.84zM353.23 248.28c-10.77 1.62-18.81-.91-20.2-10.18-1.45-9.64 7.04-13.03 15.2-14.83l14.18-3.09c4.08-.9 5.37-1.86 4.89-5.04s-3.42-4.27-11.28-3.09c-5.71.86-8.65 1.68-9.79 7.5l-13.01 1.96c-.25-12.5 11.24-15.67 22.29-17.33 19.29-2.9 24.32 2.57 25.43 9.96l4.18 27.81-12.83 1.93-.63-4.21c-4.02 5.1-12.34 7.7-18.43 8.61zm8.26-20.87l-7.77 1.84c-4.72 1.09-6.86 2.76-6.33 6.31s4.29 5 9.35 4.24c6.83-1.03 13.94-5.35 12.94-12l-.49-3.28c-2.34 1.6-5.11 2.3-7.71 2.88zM410.7 262.01c-4.03 6.47-7.99 7.61-15.5 6.7-3.2-.39-6.37-.97-9.54-1.54l1.14-9.4c1.95.43 3.91.76 5.89 1 3.29.4 4.95-.73 6.89-3.36l1.67-2.75-14.58-41.64 14.66 1.79 8.57 28.32 14.65-25.5 14.47 1.76-28.33 44.62zM470.33 259.52c-16.19 3.07-28.18-1.2-31-16.09-2.84-14.98 6.75-23.35 22.93-26.42 17.67-3.36 27.87 3.67 30.7 18.55l.23 1.21-39.35 7.47.02.09c.72 3.81 5.82 8.82 14.93 7.09 5.4-1.02 8.87-3.52 10.17-7.33l14.33-2.72c-2.12 10.14-10.68 15.81-22.96 18.14zm7.52-27.93c-.41-2.14-4.56-8.29-14.33-6.44-10.6 2.01-11.35 10.25-11.16 11.27l.02.09 25.49-4.84-.02-.09zM512.39 236.55c-12.59-3.13-20.78-12.58-17.4-26.18 3.15-12.68 15.04-18.51 27.72-15.36 7.44 1.85 12.39 5.52 14.09 9.65l.09.02 4.61-18.56 13.32 3.31-13.13 52.84-12.86-3.2 1.21-4.87-.09-.02c-5.55 3.89-11.5 3.87-17.56 2.37zm6.03-8.55c6.62 1.64 13.36-.78 15.21-8.22 1.85-7.44-2.98-12.74-9.6-14.38-6.71-1.67-13.46.75-15.3 8.2-1.85 7.44 2.98 12.74 9.69 14.41z"
className="played" className="played"
></motion.path> ></m.path>
</motion.svg> </m.svg>
</Box> </Box>
); );
}; };

4
src/Sections/TeamGenerator/Input.tsx
View File

@ -1,7 +1,7 @@
import { CloseIcon } from "@chakra-ui/icons"; import { CloseIcon } from "@chakra-ui/icons";
import { Button, Input, InputGroup, InputRightElement } from "@chakra-ui/react"; import { Button, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
import { ease } from "@unom/style"; import { ease } from "@unom/style";
import { motion } from "framer-motion"; import { m } from "framer-motion";
import { VFC } from "react"; import { VFC } from "react";
import type { UseFormGetValues, UseFormRegister } from "react-hook-form"; import type { UseFormGetValues, UseFormRegister } from "react-hook-form";
@ -15,7 +15,7 @@ const PlayerNameInput: VFC<{
}> = ({ index, onRemove, onAppend, register, fieldsLength, getValues }) => { }> = ({ index, onRemove, onAppend, register, fieldsLength, getValues }) => {
return ( return (
<InputGroup <InputGroup
as={motion.div} as={m.div}
exit="exit" exit="exit"
animate="enter" animate="enter"
initial="from" initial="from"

26
src/Sections/TeamGenerator/index.tsx
View File

@ -9,20 +9,16 @@ import {
Switch, Switch,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import CardTeam from "Components/Cards/Team"; import CardTeam from "Components/Cards/Team";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, m } from "framer-motion";
import useTeamGenerator from "lib/Hooks/useTeamGenerator"; import useTeamGenerator from "lib/Hooks/useTeamGenerator";
import { useEffect } from "react"; import { useEffect } from "react";
import { useFieldArray, useForm } from "react-hook-form"; import { useFieldArray, useForm } from "react-hook-form";
import PlayerNameInput from "./Input"; import PlayerNameInput from "./Input";
const SectionTeamGenerator = () => { const SectionTeamGenerator = () => {
const { const { handleSubmit, register, control, getValues } = useForm({
handleSubmit, defaultValues: { players: [{ value: "" }], teamCount: 2 },
register, });
control,
getValues,
formState: { errors, isSubmitting },
} = useForm({ defaultValues: { players: [{ value: "" }], teamCount: 2 } });
const { fields, append, remove } = useFieldArray({ const { fields, append, remove } = useFieldArray({
control, control,
@ -43,9 +39,11 @@ const SectionTeamGenerator = () => {
<Box> <Box>
<form <form
onSubmit={handleSubmit((values) => { onSubmit={handleSubmit((values) => {
setConfig({ teamCount: values.teamCount }); if (values.players.length > 1) {
setPlayers(values.players.map((player) => player.value)); setConfig({ teamCount: values.teamCount });
generate(); setPlayers(values.players.map((player) => player.value));
generate();
}
})} })}
> >
<Stack mb={6} spacing={3}> <Stack mb={6} spacing={3}>
@ -89,8 +87,10 @@ const SectionTeamGenerator = () => {
}} }}
/> />
</FormControl> </FormControl>
<Button type="submit">Generate</Button>
</Stack> </Stack>
<Button width="100%" mt="4rem" type="submit">
Generate
</Button>
</form> </form>
{teams.length > 0 && ( {teams.length > 0 && (
@ -99,7 +99,7 @@ const SectionTeamGenerator = () => {
enter: { transition: { staggerChildren: 0.2 } }, enter: { transition: { staggerChildren: 0.2 } },
from: {}, from: {},
}} }}
as={motion.div} as={m.div}
columns={2} columns={2}
animate="enter" animate="enter"
initial="from" initial="from"

6
src/Sites/404/index.tsx
View File

@ -8,7 +8,7 @@ import {
Link, Link,
Text, Text,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { motion } from "framer-motion"; import { m } from "framer-motion";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const Page404 = () => { const Page404 = () => {
@ -21,14 +21,14 @@ const Page404 = () => {
<Heading>Page not Found</Heading> <Heading>Page not Found</Heading>
<Box maxWidth={[280, 400]} marginX="auto"> <Box maxWidth={[280, 400]} marginX="auto">
<motion.h1 <m.h1
transition={{ type: "tween", ease: "circOut", duration: 1 }} transition={{ type: "tween", ease: "circOut", duration: 1 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
initial={{ scale: 0 }} initial={{ scale: 0 }}
style={{ fontSize: "8rem" }} style={{ fontSize: "8rem" }}
> >
404 404
</motion.h1> </m.h1>
</Box> </Box>
<Center flexDirection="column"> <Center flexDirection="column">

27
src/Sites/Start/index.tsx
View File

@ -1,9 +1,34 @@
import { Grid, Text } from "@chakra-ui/react"; import {
Grid,
Heading,
Text,
useColorModeValue,
useToken,
} from "@chakra-ui/react";
import { motion } from "framer-motion";
import SectionTeamGenerator from "Sections/TeamGenerator"; import SectionTeamGenerator from "Sections/TeamGenerator";
const Home = () => { const Home = () => {
const colorMain = useToken("colors", "main");
return ( return (
<Grid gap={4}> <Grid gap={4}>
<Heading
color="transparent"
lineHeight="1"
style={
{
TextStroke: `1px ${colorMain}`,
WebkitTextStroke: `1px ${colorMain}`,
} as any
}
opacity="0.5"
mb="2rem"
fontSize="5xl"
as={motion.h1}
>
Random Team Generator
</Heading>
<SectionTeamGenerator /> <SectionTeamGenerator />
</Grid> </Grid>
); );

25
src/Styles/customTheme.ts
View File

@ -11,9 +11,10 @@ const Card = {
background: "neutral", background: "neutral",
transition: "background-color 0.1s linear", transition: "background-color 0.1s linear",
alignItems: "center", alignItems: "center",
borderWidth: "2px", borderWidth: "1px",
borderStyle: "solid", borderStyle: "solid",
borderColor: props.colorMode === "dark" ? "gray.800" : "gray.100", borderColor:
props.colorMode === "dark" ? "whiteAlpha.500" : "blackAlpha.200",
gap: 6, gap: 6,
}), }),
// Two variants: rounded and smooth // Two variants: rounded and smooth
@ -113,8 +114,8 @@ export const theme = extendTheme(
}, },
{ {
fonts: { fonts: {
heading: "Raleway, sans-serif", heading: "Fluro, sans-serif",
body: "Inter, sans-serif", body: "Gilroy, sans-serif",
}, },
config: { config: {
initialColorMode: "dark", initialColorMode: "dark",
@ -140,21 +141,7 @@ export const theme = extendTheme(
background: props.colorMode === "dark" ? "black" : "white", background: props.colorMode === "dark" ? "black" : "white",
lineHeight: "tall", lineHeight: "tall",
}, },
"h1.chakra-heading": {
fontSize: "var(--chakra-fontSizes-5xl)",
},
"h2.chakra-heading": {
fontSize: "var(--chakra-fontSizes-3xl)",
},
"h3.chakra-heading": {
fontSize: "var(--chakra-fontSizes-2xl)",
},
"h4.chakra-heading": {
fontSize: "var(--chakra-fontSizes-lg)",
},
"h5.chakra-heading": {
fontSize: "var(--chakra-fontSizes-md)",
},
a: { a: {
color: props.colorMode === "dark" ? "teal.300" : "teal.500", color: props.colorMode === "dark" ? "teal.300" : "teal.500",
}, },

BIN
src/Styles/fonts/FLUROBold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/FLUROBold.woff2 Normal file
View File

Binary file not shown.

9
src/Styles/fonts/fluro.css Normal file
View File

@ -0,0 +1,9 @@
@font-face {
font-family: 'FLURO';
src: url('FLUROBold.woff2') format('woff2'),
url('FLUROBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

BIN
src/Styles/fonts/gilroy/Gilroy-Black.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Black.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BlackItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BlackItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Bold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BoldItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Extrabold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Extrabold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Heavy.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Heavy.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-HeavyItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-HeavyItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Light.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Light.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-LightItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Medium.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-MediumItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-MediumItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Regular.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-RegularItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-RegularItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Semibold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Semibold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-SemiboldItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-SemiboldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Thin.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Thin.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-ThinItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-ThinItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLight.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLight.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLightItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLightItalic.woff2 Normal file
View File

Binary file not shown.

152
src/Styles/fonts/gilroy/stylesheet.css Normal file
View File

@ -0,0 +1,152 @@
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-UltraLightItalic.woff2') format('woff2'),
url('Gilroy-UltraLightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-BoldItalic.woff2') format('woff2'),
url('Gilroy-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Regular.woff2') format('woff2'),
url('Gilroy-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Semibold.woff2') format('woff2'),
url('Gilroy-Semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-MediumItalic.woff2') format('woff2'),
url('Gilroy-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-BlackItalic.woff2') format('woff2'),
url('Gilroy-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Heavy.woff2') format('woff2'),
url('Gilroy-Heavy.woff') format('woff');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Thin.woff2') format('woff2'),
url('Gilroy-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-LightItalic.woff2') format('woff2'),
url('Gilroy-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-HeavyItalic.woff2') format('woff2'),
url('Gilroy-HeavyItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-RegularItalic.woff2') format('woff2'),
url('Gilroy-RegularItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-UltraLight.woff2') format('woff2'),
url('Gilroy-UltraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-ThinItalic.woff2') format('woff2'),
url('Gilroy-ThinItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Extrabold.woff2') format('woff2'),
url('Gilroy-Extrabold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Medium.woff2') format('woff2'),
url('Gilroy-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-SemiboldItalic.woff2') format('woff2'),
url('Gilroy-SemiboldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Bold.woff2') format('woff2'),
url('Gilroy-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Black.woff2') format('woff2'),
url('Gilroy-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Light.woff2') format('woff2'),
url('Gilroy-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

9
src/index.tsx
View File

@ -3,17 +3,20 @@ import { StrictMode } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
// fonts // fonts
import "@fontsource/raleway/latin.css"; import "Styles/fonts/gilroy/stylesheet.css";
import "@fontsource/inter/latin.css"; import "Styles/fonts/fluro.css";
import App from "./App"; import App from "./App";
import { theme } from "Styles/customTheme"; import { theme } from "Styles/customTheme";
import { domAnimation, LazyMotion } from "framer-motion";
ReactDOM.render( ReactDOM.render(
<StrictMode> <StrictMode>
<ColorModeScript initialColorMode={theme.config.initialColorMode} /> <ColorModeScript initialColorMode={theme.config.initialColorMode} />
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<App /> <LazyMotion strict features={domAnimation}>
<App />
</LazyMotion>
</ChakraProvider> </ChakraProvider>
</StrictMode>, </StrictMode>,
document.getElementById("root") document.getElementById("root")

589
yarn.lock
View File

File diff suppressed because it is too large Load Diff