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

Refactor App layout and enhance ResourceDisplay with click multiplier. Updated UI structure for better organization and added click multiplier display in ResourceDisplay.

Browse Source
This commit is contained in:
billy 2025-03-30 03:09:18 -04:00
parent 9fdcc2d99e
commit 55edd3b349
2 changed files with 101 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/App.tsx
View File

@ -101,7 +101,8 @@ function App() {
points, points,
playerLevel, playerLevel,
getAvailableBuildings, getAvailableBuildings,
tick tick,
clickPower
} = useGameStore() } = useGameStore()
const availableBuildings = getAvailableBuildings() const availableBuildings = getAvailableBuildings()
@ -114,61 +115,80 @@ function App() {
return ( return (
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<Box minH="100vh" bg="gray.900" color="white" py={8}> <Box minH="100vh" bg="gray.900" color="white">
<Container maxW="container.xl"> <ResourceDisplay />
<VStack spacing={8}> <Box pt="180px">
<Box textAlign="center"> <Container maxW="container.xl">
<Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading> <VStack spacing={8}>
<Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text> <Box textAlign="center">
<ResourceDisplay /> <Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading>
</Box> <Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
<Mouse />
<VStack spacing={8} w="full">
{/* Shop Section */}
<Box bg="gray.800" p={6} borderRadius="lg" w="full">
<Heading as="h2" size="xl" mb={6} color="blue.400">Shop</Heading>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
{availableBuildings.map((building) => (
<BuildingButton
key={building.id}
title={building.title}
cost={building.cost}
owned={useGameStore.getState()[building.id as BuildingId]}
level={useGameStore.getState()[`${building.id}Level` as BuildingLevelKey] as number}
onClick={() => useGameStore.getState().buyBuilding(building.id as BuildingId)}
description={building.description}
production={building.production}
buildingType={building.id}
levelRequirement={building.levelRequirement}
/>
))}
<NextBuildingPreview />
</SimpleGrid>
</Box> </Box>
<Box h="1px" bg="gray.600" w="full" /> <Mouse />
<VStack spacing={8} w="full">
{/* Shop Section */}
<Box bg="gray.800" p={6} borderRadius="lg" w="full">
<Heading as="h2" size="xl" mb={6} color="blue.400">Shop</Heading>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
{availableBuildings.map((building) => (
<BuildingButton
key={building.id}
title={building.title}
cost={building.cost}
owned={useGameStore.getState()[building.id as BuildingId]}
level={useGameStore.getState()[`${building.id}Level` as BuildingLevelKey] as number}
onClick={() => useGameStore.getState().buyBuilding(building.id as BuildingId)}
description={building.description}
production={building.production}
buildingType={building.id}
levelRequirement={building.levelRequirement}
/>
))}
<NextBuildingPreview />
</SimpleGrid>
</Box>
{/* Upgrades Section */} <Box h="1px" bg="gray.600" w="full" />
<Box bg="gray.800" p={6} borderRadius="lg" w="full">
<Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading> {/* Upgrades Section */}
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}> <Box bg="gray.800" p={6} borderRadius="lg" w="full">
<Button <Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading>
onClick={() => useGameStore.getState().buyUpgrade('clickPower')} <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
isDisabled={points < 20} <Box
bg="gray.700" bg="gray.700"
_hover={{ bg: 'gray.600' }} p={4}
> borderRadius="lg"
Upgrade Click Power (20 points) border="1px"
</Button> borderColor="gray.600"
</SimpleGrid> >
</Box> <VStack align="stretch" spacing={2}>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Text fontWeight="bold">Click Power</Text>
<Text>Level {clickPower}</Text>
</Box>
<Text fontSize="sm" color="gray.400">
Each click generates {clickPower} points
</Text>
<Button
onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
isDisabled={points < 20}
bg="gray.600"
_hover={{ bg: 'gray.500' }}
>
Upgrade (20 points)
</Button>
</VStack>
</Box>
</SimpleGrid>
</Box>
</VStack>
<MultiplierShop />
</VStack> </VStack>
</Container>
<MultiplierShop /> </Box>
</VStack>
</Container>
</Box> </Box>
</ChakraProvider> </ChakraProvider>
) )

42
src/components/ResourceDisplay.tsx
View File

@ -2,20 +2,36 @@ import { Box, HStack, Text } from '@chakra-ui/react'
import { useGameStore } from '../store/gameStore' import { useGameStore } from '../store/gameStore'
export function ResourceDisplay() { export function ResourceDisplay() {
const { points, techParts, pointsPerSecond, techPartsPerSecond } = useGameStore() const { points, techParts, pointsPerSecond, techPartsPerSecond, clickMultiplier } = useGameStore()
return ( return (
<HStack spacing={8} justify="center"> <Box
<Box textAlign="center"> position="fixed"
<Text fontSize="xl" fontWeight="bold">Points</Text> top={0}
<Text fontSize="2xl">{Math.floor(points)}</Text> left={0}
<Text fontSize="sm" color="green.400">+{pointsPerSecond}/s</Text> right={0}
</Box> zIndex={100}
<Box textAlign="center"> bg="gray.900"
<Text fontSize="xl" fontWeight="bold">Tech Parts</Text> py={4}
<Text fontSize="2xl">{Math.floor(techParts)}</Text> borderBottom="1px"
<Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text> borderColor="gray.700"
</Box> shadow="lg"
</HStack> >
<HStack spacing={8} justify="center">
<Box textAlign="center">
<Text fontSize="xl" fontWeight="bold">Points</Text>
<Text fontSize="2xl">{Math.floor(points)}</Text>
<Text fontSize="sm" color="green.400">+{pointsPerSecond}/s</Text>
{clickMultiplier > 1 && (
<Text fontSize="sm" color="yellow.400">{clickMultiplier}x Click Power</Text>
)}
</Box>
<Box textAlign="center">
<Text fontSize="xl" fontWeight="bold">Tech Parts</Text>
<Text fontSize="2xl">{Math.floor(techParts)}</Text>
<Text fontSize="sm" color="blue.400">+{techPartsPerSecond}/s</Text>
</Box>
</HStack>
</Box>
) )
} }