Skip to content

Feat/27 tile details panel #30

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 17 commits into from
Jun 10, 2024
Merged

Feat/27 tile details panel #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d262efb
Tile detail UI elements
Fluffy9 Jun 6, 2024
807c0a8
Fixes
Fluffy9 Jun 7, 2024
029f8f6
stats panel ui
Fluffy9 Jun 6, 2024
e28e4b2
fixes
Fluffy9 Jun 7, 2024
f2a2251
forgot some fixes
Fluffy9 Jun 7, 2024
3ee99de
Spacing and size fixes
Fluffy9 Jun 7, 2024
3b301bf
Text to buttons
Fluffy9 Jun 7, 2024
ee035e9
Tile detail UI elements
Fluffy9 Jun 6, 2024
9838f9a
Spacing and size fixes
Fluffy9 Jun 7, 2024
bd7ba4c
Tile detail UI elements
Fluffy9 Jun 6, 2024
db7b531
stats panel ui
Fluffy9 Jun 6, 2024
a499ad8
Tile detail UI elements
Fluffy9 Jun 6, 2024
500630d
fixes
Fluffy9 Jun 7, 2024
0fff7c6
Merge branch 'feat/26-stats-panel' into feat/27-tile-details-panel
Fluffy9 Jun 7, 2024
f839cce
fix font weights
Fluffy9 Jun 7, 2024
dd70ad8
Addressed fixes
Fluffy9 Jun 10, 2024
7d9857e
Minor grid tweak
ECWireless Jun 10, 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
30 changes: 30 additions & 0 deletions packages/client/src/components/TileDetailsPanel/Monsters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Box, HStack, Spacer, Text } from '@chakra-ui/react';

export const Monsters = (): JSX.Element => {
return (
<Box>
<Text fontWeight="bold" p="10px" size="lg">
Monsters
</Text>
<Box mt={4}>
<HStack p="5px 10px" w="100%">
<Text color="yellow">Kobold</Text>
Comment thread
ECWireless marked this conversation as resolved.
<Spacer />
<Text fontWeight="bold">Level 2</Text>
</HStack>
<Spacer />
<HStack bg="grey300" p="5px 10px">
<Text color="green">Green Slime</Text>
Comment thread
ECWireless marked this conversation as resolved.
<Spacer />
<Text fontWeight="bold">Level 2</Text>
</HStack>
<Spacer />
<HStack p="5px 10px">
<Text color="red">Cave Bandit</Text>
Comment thread
ECWireless marked this conversation as resolved.
<Spacer />
<Text fontWeight="bold">Level 2</Text>
</HStack>
</Box>
</Box>
);
};
18 changes: 18 additions & 0 deletions packages/client/src/components/TileDetailsPanel/Players.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Box, Text, VStack } from '@chakra-ui/react';

export const Players = (): JSX.Element => {
return (
<Box>
<Text fontWeight="bold" p="10px" size="lg">
Players
</Text>
<VStack alignItems="start" mt={4} p="0 10px">
<Text>Mon-o 🧙‍♂️</Text>
<Text>GUATY 🎭</Text>
<Text>Wolf R ※</Text>
<Text>GUATY 🎭</Text>
<Text>Wolf R ※</Text>
</VStack>
</Box>
);
};
34 changes: 34 additions & 0 deletions packages/client/src/components/TileDetailsPanel/SafeZone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Box, HStack, Text, VStack } from '@chakra-ui/react';
import { IoIosArrowForward } from 'react-icons/io';

export const SafeZone = (): JSX.Element => {
return (
<Box>
<Text p="10px" size="sm">
Safe Zone
</Text>
<VStack alignItems="start" mt={4} p="0 10px" gap={4}>
<HStack fontWeight="bold">
<Text size="sm">Level 1</Text>
<IoIosArrowForward />
</HStack>
<HStack fontWeight="bold">
<Text size="sm">Level 2</Text>
<IoIosArrowForward />
</HStack>
<HStack fontWeight="bold">
<Text size="sm">Level 1</Text>
<IoIosArrowForward />
</HStack>
<HStack fontWeight="bold">
<Text size="sm">Level 2</Text>
<IoIosArrowForward />
</HStack>
<HStack fontWeight="bold">
<Text size="sm">Level 1</Text>
<IoIosArrowForward />
</HStack>
</VStack>
</Box>
);
};
21 changes: 21 additions & 0 deletions packages/client/src/components/TileDetailsPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Grid, GridItem } from '@chakra-ui/react';

import { Monsters } from './Monsters';
import { Players } from './Players';
import { SafeZone } from './SafeZone';

export const TileDetailsPanel = (): JSX.Element => {
return (
<Grid h="100%" p={3} templateColumns="repeat(4, 1fr)" gap={5}>
<GridItem colSpan={2}>
<Monsters />
</GridItem>
<GridItem colSpan={1}>
<Players />
</GridItem>
<GridItem colSpan={1}>
<SafeZone />
</GridItem>
</Grid>
);
};
4 changes: 2 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,6 +1,7 @@
import { Grid, GridItem, Heading } from '@chakra-ui/react';

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

export const GameBoard = (): JSX.Element => {
return (
Expand All @@ -21,15 +22,14 @@ export const GameBoard = (): JSX.Element => {
<StatsPanel />
</GridItem>
<GridItem
background="mintcream"
border="solid"
colSpan={{ base: 8, md: 4 }}
colStart={{ base: 0, md: 0 }}
padding="5px"
rowSpan={{ base: 4, md: 6 }}
rowStart={{ base: 0, md: 0 }}
>
<Heading>TileDetailsPanel</Heading>
<TileDetailsPanel />
</GridItem>
<GridItem
background="mintcream"
Expand Down
3 changes: 3 additions & 0 deletions packages/client/src/utils/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,13 @@ export const theme = extendTheme({
},
colors: {
black: '#000',
green: '#0BA789',
grey300: '#E6E6E6',
grey400: '#D1D1D1',
grey500: '#808080',
red: '#F24725',
white: '#fff',
yellow: '#F9C712',
},
components: {
Button,
Expand Down