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,
playerLevel,
getAvailableBuildings,
tick
tick,
clickPower
} = useGameStore()
const availableBuildings = getAvailableBuildings()
@ -114,61 +115,80 @@ function App() {
return (
<ChakraProvider theme={theme}>
<Box minH="100vh" bg="gray.900" color="white" py={8}>
<Container maxW="container.xl">
<VStack spacing={8}>
<Box textAlign="center">
<Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading>
<Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
<ResourceDisplay />
</Box>
<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 minH="100vh" bg="gray.900" color="white">
<ResourceDisplay />
<Box pt="180px">
<Container maxW="container.xl">
<VStack spacing={8}>
<Box textAlign="center">
<Heading as="h1" size="2xl" mb={4}>Clicker Clicker 2</Heading>
<Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
</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 bg="gray.800" p={6} borderRadius="lg" w="full">
<Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
<Button
onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
isDisabled={points < 20}
bg="gray.700"
_hover={{ bg: 'gray.600' }}
>
Upgrade Click Power (20 points)
</Button>
</SimpleGrid>
</Box>
<Box h="1px" bg="gray.600" w="full" />
{/* Upgrades Section */}
<Box bg="gray.800" p={6} borderRadius="lg" w="full">
<Heading as="h2" size="xl" mb={6} color="green.400">Upgrades</Heading>
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
<Box
bg="gray.700"
p={4}
borderRadius="lg"
border="1px"
borderColor="gray.600"
>
<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>
<MultiplierShop />
</VStack>
</Container>
</Container>
</Box>
</Box>
</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'
export function ResourceDisplay() {
const { points, techParts, pointsPerSecond, techPartsPerSecond } = useGameStore()
const { points, techParts, pointsPerSecond, techPartsPerSecond, clickMultiplier } = useGameStore()
return (
<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>
</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
position="fixed"
top={0}
left={0}
right={0}
zIndex={100}
bg="gray.900"
py={4}
borderBottom="1px"
borderColor="gray.700"
shadow="lg"
>
<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>
)
}