billy/clicker-clicker2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update App layout and enhance BuildingButton styles for improved UI. Adjusted spacing and column count in SimpleGrid for better building display, and refined text size and button properties in BuildingButton for enhanced readability and usability.

Browse Source
This commit is contained in:
billy 2025-03-30 15:36:54 -04:00
parent a41208bbfe
commit 8245b7b3b2
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -94,8 +94,8 @@ function App() {
cursor={hasStarted ? "pointer" : "default"} cursor={hasStarted ? "pointer" : "default"}
> >
<ResourceDisplay /> <ResourceDisplay />
<Box pt="100px"> <Box pt="100px flex flex-col w-full">
<Container maxW="container.xl"> <Container maxW="container.xl m-auto">
<VStack spacing={8}> <VStack spacing={8}>
<VStack spacing={8} w="full"> <VStack spacing={8} w="full">
{/* Game Title */} {/* Game Title */}
@ -103,7 +103,7 @@ function App() {
<Heading as="h1" size="lg" color="brand.300">Clicker Clicker 2</Heading> <Heading as="h1" size="lg" color="brand.300">Clicker Clicker 2</Heading>
</Box> </Box>
{/* Buildings Grid */} {/* Buildings Grid */}
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}> <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={4}>
{availableBuildings.map((building) => ( {availableBuildings.map((building) => (
<BuildingButton <BuildingButton
key={building.id} key={building.id}

16
src/components/BuildingButton.tsx
View File

@ -147,7 +147,7 @@ export function BuildingButton({
borderBottomRightRadius="md" borderBottomRightRadius="md"
boxShadow="0 1px 3px rgba(0,0,0,0.5)" boxShadow="0 1px 3px rgba(0,0,0,0.5)"
> >
<Text fontWeight="bold" fontSize="sm" color="brand.200" variant="pixel">{title}</Text> <Text fontWeight="bold" fontSize="xs" color="brand.200" variant="pixel">{title}</Text>
</Box> </Box>
{/* Overlay for owned count */} {/* Overlay for owned count */}
@ -198,6 +198,13 @@ export function BuildingButton({
color="text.dark" color="text.dark"
size="sm" size="sm"
flexGrow={1} flexGrow={1}
px={1}
height="auto"
minH="2rem"
whiteSpace="normal"
textAlign="center"
lineHeight="1.2"
fontSize="xs"
> >
Buy ({formatNumber(cost)} points) Buy ({formatNumber(cost)} points)
</Button> </Button>
@ -211,6 +218,13 @@ export function BuildingButton({
size="sm" size="sm"
flexGrow={1} flexGrow={1}
variant="outline" variant="outline"
px={1}
height="auto"
minH="2rem"
whiteSpace="normal"
textAlign="center"
lineHeight="1.2"
fontSize="xs"
> >
Upgrade ({formatNumber(upgradeCost)} points) Upgrade ({formatNumber(upgradeCost)} points)
</Button> </Button>