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

Refactor ResourceDisplay component for improved layout and styling. Updated spacing and alignment for better visual presentation of points, click power, and player level. Added tooltips for progress information and adjusted padding in App layout.

Browse Source
This commit is contained in:
billy 2025-03-30 05:23:15 -04:00
parent 77789729d4
commit f300641dd3
3 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -137,7 +137,7 @@ function App() {
cursor="pointer" cursor="pointer"
> >
<ResourceDisplay /> <ResourceDisplay />
<Box pt="180px"> <Box pt="100px">
<Container maxW="container.xl"> <Container maxW="container.xl">
<VStack spacing={8}> <VStack spacing={8}>
<Box textAlign="center" w="full"> <Box textAlign="center" w="full">

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

83
src/components/ResourceDisplay.tsx
View File

@ -1,4 +1,4 @@
import { Box, HStack, Text, Progress, VStack } from '@chakra-ui/react' import { Box, HStack, Text, Progress, Flex, Divider, Tooltip } from '@chakra-ui/react'
import { useGameStore } from '../store/gameStore' import { useGameStore } from '../store/gameStore'
export function ResourceDisplay() { export function ResourceDisplay() {
@ -29,40 +29,63 @@ export function ResourceDisplay() {
right={0} right={0}
zIndex={100} zIndex={100}
bg="gray.900" bg="gray.900"
py={4} py={2}
borderBottom="1px" borderBottom="1px"
borderColor="gray.700" borderColor="gray.700"
shadow="lg" shadow="lg"
> >
<VStack spacing={2}> <Flex
<HStack spacing={8} justify="center"> justify="center"
<Box textAlign="center"> align="center"
<Text fontSize="xl" fontWeight="bold">Points</Text> wrap="nowrap"
<Text fontSize="2xl">{Math.floor(points)}</Text> maxW="1200px"
<Text fontSize="sm" color="green.400">+{pointsPerSecond}/s</Text> mx="auto"
<Text fontSize="sm" color="green.400">Click Power: {actualClickPower}</Text> px={4}
{activeMultipliers.length > 0 && ( gap={4}
<Text fontSize="sm" color="yellow.400">{totalMultiplier}x Active</Text> >
)} {/* Points */}
</Box> <Box textAlign="center" minW="120px">
</HStack> <Text fontSize="sm" fontWeight="bold">Points</Text>
<Box w="full" maxW="600px" px={4}> <Text fontSize="md" fontWeight="bold">{Math.floor(points)}</Text>
<HStack justify="space-between" mb={1}> <Text fontSize="xs" color="green.400">+{pointsPerSecond.toFixed(1)}/s</Text>
<Text fontSize="sm" color="gray.400">Level {playerLevel}</Text>
<Text fontSize="sm" color="gray.400">Level {playerLevel + 1}</Text>
</HStack>
<Progress
value={progress}
colorScheme="green"
size="sm"
borderRadius="full"
bg="gray.700"
/>
<Text fontSize="xs" color="gray.500" mt={1} textAlign="center">
{pointsPerSecond.toFixed(1)}/{nextLevelPPS} PPS
</Text>
</Box> </Box>
</VStack>
<Divider orientation="vertical" h="40px" />
{/* Click Power */}
<Box textAlign="center" minW="120px">
<Text fontSize="sm" fontWeight="bold">Click Power</Text>
<Text fontSize="md">{actualClickPower}</Text>
{activeMultipliers.length > 0 && (
<Text fontSize="xs" color="yellow.400">{totalMultiplier}x Active</Text>
)}
</Box>
<Divider orientation="vertical" h="40px" />
{/* Level */}
<Box textAlign="center" minW="80px">
<Text fontSize="sm" fontWeight="bold">Level</Text>
<Text fontSize="md">{playerLevel}</Text>
</Box>
{/* Progress to next level */}
<Tooltip label={`${pointsPerSecond.toFixed(1)}/${nextLevelPPS} PPS`}>
<Box flex="1" maxW="300px">
<Flex justify="space-between" mb={1}>
<Text fontSize="xs" color="gray.400">Level {playerLevel}</Text>
<Text fontSize="xs" color="gray.400">Level {playerLevel + 1}</Text>
</Flex>
<Progress
value={progress}
colorScheme="green"
size="sm"
borderRadius="full"
bg="gray.700"
/>
</Box>
</Tooltip>
</Flex>
</Box> </Box>
) )
} }