Skip to content

Feat/26 stats panel #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ECWireless merged 6 commits into from
Jun 8, 2024
Merged

Feat/26 stats panel #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cfc23d7
UI elements
Fluffy9 Jun 6, 2024
20b5a97
stats panel ui
Fluffy9 Jun 6, 2024
b75c274
fixes
Fluffy9 Jun 7, 2024
2b8041c
forgot some fixes
Fluffy9 Jun 7, 2024
4c0ad3d
Spacing and size fixes
Fluffy9 Jun 7, 2024
2701a18
Text to buttons
Fluffy9 Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/client/src/components/StatsPanel/HealthPotion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Box, HStack, Spacer, Text } from '@chakra-ui/react';

export const HealthPotion = (): JSX.Element => {
return (
<Box padding="5px" w="100%">
<HStack alignItems="start" fontWeight="bold">
<Text>Health Potion</Text>
<Spacer />
<Text>3θ</Text>
</HStack>
</Box>
);
};
36 changes: 36 additions & 0 deletions packages/client/src/components/StatsPanel/Inventory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Box, Button, HStack, Spacer, Text, VStack } from '@chakra-ui/react';

export const Inventory = (): JSX.Element => {
return (
<Box padding="5px" w="100%">
<VStack align="stretch" spacing={2}>
<HStack alignItems="start" fontWeight="bold">
<Text>Active Items</Text>
<Spacer />
<Text>1/3</Text>
</HStack>
<HStack alignItems="center" fontSize="xs" fontWeight="bold">
<Text>Rusty Dagger</Text>
<Spacer />
<Button padding="0 2px" size="sm" variant="disabled">
⁂
</Button>
</HStack>
<HStack alignItems="center" fontSize="xs">
<Text>Empty Slot</Text>
<Spacer />
<Button padding="0 2px" size="sm" variant="ghost">
+
</Button>
</HStack>
<HStack alignItems="center" fontSize="xs">
<Text>Empty Slot</Text>
<Spacer />
<Button padding="0 2px" size="sm" variant="ghost">
+
</Button>
</HStack>
</VStack>
</Box>
);
};
32 changes: 32 additions & 0 deletions packages/client/src/components/StatsPanel/Level.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Box, HStack, Progress, Spacer, Text } from '@chakra-ui/react';

export const Level = (): JSX.Element => {
const percent = 50;
return (
<Box
marginTop="20px"
padding="5px"
position="relative"
w="100%"
fontSize="10px"
>
<Text position="absolute" right={100 - percent - 2 + '%'} top="-10px">
{percent}
</Text>
<Text
display={percent > 90 ? 'none' : 'block'}
position="absolute"
right="0%"
top="-10px"
>
100
</Text>
<Progress value={percent} />
<HStack>
<Text>Level 1</Text>
<Spacer />
<Text>Level 2</Text>
</HStack>
</Box>
);
};
11 changes: 11 additions & 0 deletions packages/client/src/components/StatsPanel/Money.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { HStack, Spacer, Text } from '@chakra-ui/react';

export const Money = (): JSX.Element => {
return (
<HStack alignItems="start" padding="5px" w="100%">
<Text fontWeight="bold">2,00 $GOLD</Text>
<Spacer />
<Text>190/345</Text>
</HStack>
);
};
81 changes: 81 additions & 0 deletions packages/client/src/components/StatsPanel/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { Link, VStack } from '@chakra-ui/react';

export const Navigation = (): JSX.Element => {
return (
<VStack align="baseline" padding="5px" w="100%">
<Link
borderBottom="2px solid"
borderColor="grey400"
fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
pb={1}
textAlign="left"
_hover={{
borderColor: 'grey500',
textDecoration: 'none',
}}
>
Auction House
</Link>
<Link
borderBottom="2px solid"
borderColor="grey400"
fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
pb={1}
_hover={{
borderColor: 'grey500',
textDecoration: 'none',
}}
>
Leader Board
</Link>
<Link
borderBottom="2px solid"
borderColor="grey400"
fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
pb={1}
_hover={{
borderColor: 'grey500',
textDecoration: 'none',
}}
>
Guild Info
</Link>
<Link
borderBottom="2px solid"
borderColor="grey400"
fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
pb={1}
_hover={{
borderColor: 'grey500',
textDecoration: 'none',
}}
>
Map Info
</Link>
<Link
borderBottom="2px solid"
borderColor="grey400"
fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
pb={1}
_hover={{
borderColor: 'grey500',
textDecoration: 'none',
}}
>
Create Map
</Link>
<Link
borderBottom="2px solid"
borderColor="grey400"
fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
pb={1}
_hover={{
borderColor: 'grey500',
textDecoration: 'none',
}}
>
About
</Link>
</VStack>
);
};
18 changes: 18 additions & 0 deletions packages/client/src/components/StatsPanel/Socials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Link, Spacer, Stack } from '@chakra-ui/react';
import { FaDiscord, FaTwitter } from 'react-icons/fa';

export const Socials = (): JSX.Element => {
return (
<Stack direction="row" padding="5px" w="100%">
<Link>
<FaDiscord size={20} />
</Link>
<Spacer />
<Link>
<FaTwitter size={20} />
</Link>
<Spacer />
<Link fontWeight="700">T&C</Link>
</Stack>
);
};
47 changes: 47 additions & 0 deletions packages/client/src/components/StatsPanel/Stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { Box, Grid, GridItem, Text } from '@chakra-ui/react';

export const Stats = (): JSX.Element => {
return (
<Box textAlign="left" w="100%">
<Grid
columnGap="5"
padding="5px"
templateColumns="repeat(2, 1fr)"
width="75%"
>
<GridItem>
<Text fontWeight="bold" size="lg">
HP
</Text>
</GridItem>
<GridItem>
<Text>1</Text>
</GridItem>
<GridItem>
<Text fontWeight="bold" size="lg">
STR
</Text>
</GridItem>
<GridItem>
<Text>3</Text>
</GridItem>
<GridItem>
<Text fontWeight="bold" size="lg">
AGI
</Text>
</GridItem>
<GridItem>
<Text>4</Text>
</GridItem>
<GridItem>
<Text fontWeight="bold" size="lg">
INT
</Text>
</GridItem>
<GridItem>
<Text>5</Text>
</GridItem>
</Grid>
</Box>
);
};
18 changes: 18 additions & 0 deletions packages/client/src/components/StatsPanel/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Avatar, Box, Flex, Text } from '@chakra-ui/react';
import { IoIosArrowForward } from 'react-icons/io';

export const TopBar = (): JSX.Element => {
return (
<Flex alignItems="center" padding="5px" textAlign="center" w="100%">
<Box>
<Avatar size="md" />
</Box>
<Box w="100%">
<Text fontWeight="700">0lffaa_08 ※</Text>
</Box>
<Box textAlign="right">
<IoIosArrowForward />
</Box>
</Flex>
);
};
32 changes: 32 additions & 0 deletions packages/client/src/components/StatsPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Spacer, VStack } from '@chakra-ui/react';

import { HealthPotion } from './HealthPotion';
import { Inventory } from './Inventory';
import { Level } from './Level';
import { Money } from './Money';
import { Navigation } from './Navigation';
import { Socials } from './Socials';
import { Stats } from './Stats';
import { TopBar } from './TopBar';

export const StatsPanel = (): JSX.Element => {
return (
<VStack h="100%" p={3}>
<TopBar />
<Spacer />
<Stats />
<Spacer />
<Level />
<Spacer />
<Money />
<Spacer />
<Inventory />
<Spacer />
<HealthPotion />
<Spacer />
<Navigation />
<Spacer />
<Socials />
</VStack>
);
};
5 changes: 3 additions & 2 deletions packages/client/src/pages/GameBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Grid, GridItem, Heading } from '@chakra-ui/react';

import { StatsPanel } from '../components/StatsPanel';

export const GameBoard = (): JSX.Element => {
return (
<Grid
Expand All @@ -10,14 +12,13 @@ export const GameBoard = (): JSX.Element => {
templateRows={{ base: 'repeat(13, 1fr)', md: 'repeat(12, 1fr)' }}
>
<GridItem
background="powderblue"
border="solid"
colSpan={{ base: 2, md: 2 }}
display={{ base: 'none', md: 'block' }}
padding="5px"
rowSpan={{ base: 12, md: 12 }}
>
<Heading>StatsPanel</Heading>
<StatsPanel />
</GridItem>
<GridItem
background="mintcream"
Expand Down
15 changes: 14 additions & 1 deletion packages/client/src/utils/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,16 @@ const Input = {
},
},
};

const Progress = {
baseStyle: {
track: {
borderRadius: 5,
},
filledTrack: {
bg: 'black',
},
},
};
const Text = {
sizes: {
xs: {
Expand All @@ -98,6 +107,9 @@ const Text = {
md: {
fontSize: '16px',
},
lg: {
fontSize: '18px',
},
},
};

Expand Down Expand Up @@ -128,6 +140,7 @@ export const theme = extendTheme({
Button,
Heading,
Input,
Progress,
Text,
Textarea,
},
Expand Down