ultimate-dominion · ECWireless · May 31, 2024 · May 30, 2024 · May 30, 2024 · May 31, 2024
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -27,10 +27,12 @@
     "@latticexyz/world": "2.0.11",
     "@rainbow-me/rainbowkit": "^2.1.1",
     "@tanstack/react-query": "^5.37.1",
+    "@types/react-router-dom": "^5.3.3",
     "contracts": "workspace:*",
     "framer-motion": "^11.2.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
     "rxjs": "7.5.5",
     "viem": "2.9.20",
     "wagmi": "^2.9.6"

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,5 +1,7 @@
-import { Welcome } from './components/Welcome';
+import AppRoutes from './Routes';
 
-export const App = (): JSX.Element => {
-  return <Welcome />;
+export const App: React.FC = () => {
+  return <AppRoutes />;
 };
+
+export default App;
diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -0,0 +1,19 @@
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+
+import { CharacterCreation } from './components/CharacterCreation';
+import { Welcome } from './pages/Welcome';
+import { World } from './pages/World';
+
+const AppRoutes: React.FC = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Welcome />} />
+        <Route path="/world" element={<World />} />
+        <Route path="/character-creation" element={<CharacterCreation />} />
+      </Routes>
+    </Router>
+  );
+};
+
+export default AppRoutes;
diff --git a/packages/client/src/components/CharacterCreation.tsx b/packages/client/src/components/CharacterCreation.tsx
@@ -0,0 +1,95 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonGroup,
+  Card,
+  CardBody,
+  Center,
+  Container,
+  Flex,
+  Heading,
+  Input,
+  Link,
+  Stack,
+  Text,
+  Textarea,
+  VStack,
+} from '@chakra-ui/react';
+
+export const CharacterCreation = (): JSX.Element => {
+  return (
+    <Box>
+      <Stack direction={['column', 'row']} justifyContent="center">
+        <Container border="2px solid" margin="10px" padding="20px" width="50%">
+          <VStack>
+            <Flex height="100%" width="100%">
+              <Center margin="10px auto" width="40%">
+                <Avatar size="lg"></Avatar>
+              </Center>
+              <Box alignContent="left" margin="10px auto" width="60%">
+                <Stack spacing={3}>
+                  <Input placeholder="Outline" variant="outline" />
+                  <Input placeholder="Outline" variant="outline" />
+                </Stack>
+              </Box>
+            </Flex>
+          </VStack>
+          <VStack>
+            <Box width="100%">
+              <Textarea placeholder="Here is a sample placeholder" />
+            </Box>
+          </VStack>
+        </Container>
+        <Container border="2px solid" margin="10px" padding="20px" width="50%">
+          <VStack textAlign="left">
+            <Heading textAlign="left" width="100%">
+              Choose your Character
+            </Heading>
+            <ButtonGroup spacing="6" variant="outline">
+              <Button>Warrior</Button>
+              <Button>Mage</Button>
+              <Button>Rogue</Button>
+            </ButtonGroup>
+          </VStack>
+          <Stack direction="row" w="full">
+            <Heading textAlign="left">Stats</Heading>
+            <Button size="sm" variant="outline">
+              Roll Stats
+            </Button>
+            <Text>$Gold</Text>
+            <Text>00,00</Text>
+          </Stack>
+          <Stack direction="row">
+            <Stack direction="column">
+              <Stack direction="row">
+                <Text width="50%">HP - Hit</Text>
+                <Text align="right">1</Text>
+              </Stack>
+              <Stack direction="row">
+                <Text width="50%">STR - Strength</Text>
+                <Text align="right">2</Text>
+              </Stack>
+              <Stack direction="row">
+                <Text width="50%">AGI - Agility</Text>
+                <Text align="right">3</Text>
+              </Stack>
+              <Stack direction="row">
+                <Text width="50%">INT - Intelligence</Text>
+                <Text align="right">4</Text>
+              </Stack>
+            </Stack>
+            <Stack direction="column" w="50%">
+              <Text>Items - 1</Text>
+              <Card>
+                <CardBody>A Card</CardBody>
+              </Card>
+              <Link>Auction House ▶</Link>
+            </Stack>
+          </Stack>
+          <Button width="100%">Wake Up</Button>
+        </Container>
+      </Stack>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Welcome.tsx → packages/client/src/pages/Welcome.tsx b/packages/client/src/components/Welcome.tsx → packages/client/src/pages/Welcome.tsx
@@ -7,7 +7,7 @@ import {
   VStack,
 } from '@chakra-ui/react';
 
-import { ConnectWalletModal } from './ConnectWalletModal';
+import { ConnectWalletModal } from '../components/ConnectWalletModal';
 
 export const Welcome = (): JSX.Element => {
   const { isOpen, onOpen, onClose } = useDisclosure();

diff --git a/packages/client/src/pages/World.tsx b/packages/client/src/pages/World.tsx
@@ -0,0 +1,9 @@
+import { Container, Heading } from '@chakra-ui/react';
+
+export const World = (): JSX.Element => {
+  return (
+    <Container>
+      <Heading>World</Heading>
+    </Container>
+  );
+};