ultimate-dominion · ECWireless · Jul 4, 2024 · Jun 28, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -5,6 +5,7 @@ import { singletonEntity } from '@latticexyz/store-sync/recs';
 import { Route, Routes, useLocation } from 'react-router-dom';
 
 import { useMUD } from './contexts/MUDContext';
+import { CharacterPage } from './pages/Character';
 import { CharacterCreation } from './pages/CharacterCreation';
 import { GameBoard } from './pages/GameBoard';
 import { Welcome } from './pages/Welcome';
@@ -32,6 +33,7 @@ const AppRoutes: React.FC = () => {
       <Route path="/" element={<Welcome />} />
       <Route path="/character-creation" element={<CharacterCreation />} />
       <Route path="/game-board" element={<GameBoard />} />
+      <Route path="/characters/:characterId" element={<CharacterPage />} />
     </Routes>
   );
 };

diff --git a/packages/client/src/components/Character/Card/ItemCard.tsx b/packages/client/src/components/Character/Card/ItemCard.tsx
@@ -0,0 +1,89 @@
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Center,
+  Text,
+} from '@chakra-ui/react';
+import {
+  FaBook,
+  FaBug,
+  FaDatabase,
+  FaDoorClosed,
+  FaFire,
+  FaPizzaSlice,
+  FaRoad,
+  FaScribd,
+  FaSearchLocation,
+  FaShieldAlt,
+  FaSocks,
+  FaStarAndCrescent,
+} from 'react-icons/fa';
+
+export const ItemCard = ({
+  agi,
+  disabled,
+  icon,
+  image,
+  int,
+  name,
+  str,
+}: {
+  agi: number;
+  disabled: boolean;
+  icon: string;
+  image: string;
+  int: number;
+  name: string;
+  str: number;
+}): JSX.Element => {
+  return (
+    <Card
+      border={disabled ? 'solid lightgray' : 'solid'}
+      borderRadius={2}
+      cursor="pointer"
+      direction="row"
+      overflow="hidden"
+      variant={disabled ? 'light' : 'outline'}
+      _active={{
+        bgColor: 'rgba(0, 0, 0, .04)',
+        border: 'solid',
+      }}
+      _hover={{
+        border: 'solid',
+      }}
+    >
+      <CardHeader backgroundColor="grey300">
+        <Center h="100%">
+          {image == 'book' && <FaBook size={24} />}
+          {image == 'bug' && <FaBug size={24} />}
+          {image == 'database' && <FaDatabase size={24} />}
+          {image == 'door-closed' && <FaDoorClosed size={24} />}
+          {image == 'pizza-slice' && <FaPizzaSlice size={24} />}
+          {image == 'scribd' && <FaScribd size={24} />}
+          {image == 'search' && <FaSearchLocation size={24} />}
+          {image == 'socks' && <FaSocks size={24} />}
+          {image == 'star-crescent' && <FaStarAndCrescent size={24} />}
+        </Center>
+      </CardHeader>
+      <CardBody>
+        <Text fontWeight="bold" size={{ base: 'xs', sm: 'md' }}>
+          {name}
+        </Text>
+
+        <Text size={{ base: '2xs', sm: 'sm' }}>
+          STR+{str} AGI+{agi} INT+{int}
+        </Text>
+      </CardBody>
+
+      <CardFooter>
+        <Center>
+          {icon == 'fire' && <FaFire size={20} />}
+          {icon == 'road' && <FaRoad size={20} />}
+          {icon == 'shield' && <FaShieldAlt size={20} />}
+        </Center>
+      </CardFooter>
+    </Card>
+  );
+};
diff --git a/packages/client/src/components/Character/Card/ItemEquipModal.tsx b/packages/client/src/components/Character/Card/ItemEquipModal.tsx
@@ -0,0 +1,76 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+
+import { ItemCard } from './ItemCard';
+
+export const ItemEquipModal = ({
+  agi,
+  disabled,
+  icon,
+  image,
+  int,
+  isOwner,
+  name,
+  str,
+}: {
+  agi: number;
+  disabled: boolean;
+  icon: string;
+  image: string;
+  int: number;
+  isOwner: boolean;
+  name: string;
+  str: number;
+}): JSX.Element => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  return (
+    <Box>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{isOwner ? 'Equip' : 'Make an offer'}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody padding={4}>
+            <ItemCard
+              agi={agi}
+              disabled={disabled}
+              icon={icon}
+              image={image}
+              int={int}
+              name={name}
+              str={str}
+            ></ItemCard>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Yes
+            </Button>
+            <Button variant="ghost">No</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      <Box onClick={onOpen}>
+        <ItemCard
+          agi={agi}
+          disabled={disabled}
+          icon={icon}
+          image={image}
+          int={int}
+          name={name}
+          str={str}
+        ></ItemCard>
+      </Box>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Character/Misc.tsx b/packages/client/src/components/Character/Misc.tsx
@@ -0,0 +1,51 @@
+import { Box, Button, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
+import { useMemo } from 'react';
+
+import { Level } from '../Level';
+
+export const Misc = ({
+  experience,
+  isPlayer,
+  max,
+  goldBalance,
+}: {
+  experience: string;
+  isPlayer: boolean;
+  max: string;
+  goldBalance: string;
+}): JSX.Element => {
+  const levelPercent = useMemo(() => {
+    return (100 * Number(experience)) / Number(max);
+  }, [experience, max]);
+
+  return (
+    <VStack h="100%">
+      <Box w="100%">
+        <HStack alignItems="start">
+          <Box>
+            <Text fontWeight="bold">
+              {Number(goldBalance).toLocaleString('en', { useGrouping: true })}{' '}
+              $GOLD
+            </Text>
+            <Text>
+              {experience}/{max}
+            </Text>
+          </Box>
+          <Spacer />
+          <Text fontWeight="bold">Level 1</Text>
+        </HStack>
+        <Level levelPercent={levelPercent} />
+      </Box>
+
+      <Spacer />
+      <Box alignSelf="start" w="100%">
+        <Button m={'5px 0'} w="100%">
+          {isPlayer ? 'Auction House' : 'Chat'}
+        </Button>
+        <Button m={'5px 0'} w="100%">
+          Leader Board
+        </Button>
+      </Box>
+    </VStack>
+  );
+};
diff --git a/packages/client/src/components/Character/Profile.tsx b/packages/client/src/components/Character/Profile.tsx
@@ -0,0 +1,60 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Heading,
+  HStack,
+  Spacer,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { FaStarAndCrescent } from 'react-icons/fa';
+
+export const Profile = ({
+  description,
+  image,
+  isOwner,
+  name,
+}: {
+  description: string;
+  image: string;
+  isOwner: boolean;
+  name: string;
+}): JSX.Element => {
+  return (
+    <Box h="100%" position="relative">
+      <VStack>
+        <HStack w="100%">
+          <Center>
+            <Avatar size="lg" src={image} />
+            <Heading margin="0px 20px" size="lg">
+              {name}
+            </Heading>
+          </Center>
+          <Spacer />
+          <Center>
+            <FaStarAndCrescent size={40} />
+          </Center>
+        </HStack>
+        <Spacer />
+        <Box mt={3} w="100%">
+          <Text overflow="hidden" size="sm" textAlign="left">
+            {description}
+          </Text>
+          {isOwner && (
+            <Button
+              bottom="0"
+              position="absolute"
+              right="0"
+              size="sm"
+              variant="ghost"
+            >
+              Edit Character
+            </Button>
+          )}
+        </Box>
+      </VStack>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Character/Stats.tsx b/packages/client/src/components/Character/Stats.tsx
@@ -0,0 +1,50 @@
+import { HStack, Text, VStack } from '@chakra-ui/react';
+
+export const Stats = ({
+  agility,
+  hitPoints,
+  intelligence,
+  strength,
+}: {
+  agility: string;
+  hitPoints: string;
+  intelligence: string;
+  strength: string;
+}): JSX.Element => {
+  return (
+    <VStack>
+      <HStack justify="space-between" w="100%">
+        <Text alignSelf="start" fontWeight="bold">
+          My Stats
+        </Text>
+        <Text alignSelf="start" fontWeight="bold">
+          Ability Points: 3
+        </Text>
+      </HStack>
+      <Text alignSelf="end" mt={4} size="xs">
+        Base
+      </Text>
+      <VStack w="100%">
+        <HStack justify="space-between" w="100%">
+          <Text size="lg">HP - Hit</Text>
+          <Text size="lg">{hitPoints}</Text>
+        </HStack>
+
+        <HStack justify="space-between" w="100%">
+          <Text size="lg">STR - Strength</Text>
+          <Text size="lg">{strength}</Text>
+        </HStack>
+
+        <HStack justify="space-between" w="100%">
+          <Text size="lg">AGI - Agility</Text>
+          <Text size="lg">{agility}</Text>
+        </HStack>
+
+        <HStack justify="space-between" w="100%">
+          <Text size="lg">INT - Intelligence</Text>
+          <Text size="lg">{intelligence}</Text>
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+};
diff --git a/packages/client/src/components/Level.tsx b/packages/client/src/components/Level.tsx
@@ -0,0 +1,35 @@
+import { Box, HStack, Progress, Spacer, Text } from '@chakra-ui/react';
+
+const CURRENT_LEVEL = 1;
+
+export const Level = ({
+  levelPercent,
+}: {
+  levelPercent: number;
+}): JSX.Element => {
+  return (
+    <Box fontSize="10px" mt={8} position="relative" w="100%">
+      <Text
+        position="absolute"
+        right={100 - levelPercent - 2 + '%'}
+        top="-15px"
+      >
+        {levelPercent}%
+      </Text>
+      <Text
+        display={levelPercent > 90 ? 'none' : 'block'}
+        position="absolute"
+        right="0%"
+        top="-15px"
+      >
+        100%
+      </Text>
+      <Progress h={2} value={levelPercent} />
+      <HStack mt={1}>
+        <Text>Level {CURRENT_LEVEL}</Text>
+        <Spacer />
+        <Text>Level {CURRENT_LEVEL + 1}</Text>
+      </HStack>
+    </Box>
+  );
+};