Refactor App and ResourceDisplay components for improved layout and user interaction. Updated ResetButton to use a simpler design and repositioned elements for better accessibility. Enhanced visual presentation of available buildings in the shop section.
This commit is contained in:
billy
parent
8c76523f12
commit
4bc43c54ae
58
src/App.tsx
58
src/App.tsx
@ -139,45 +139,33 @@ function App() {
|
||||
<VStack spacing={8}>
|
||||
<Box textAlign="center" w="full" position="relative">
|
||||
<Flex direction="column" align="center" mb={4}>
|
||||
<Box maxW="400px" mb={2}>
|
||||
<Image src={logoImg} alt="Clicker Clicker 2" />
|
||||
</Box>
|
||||
<Text fontSize="xl" color="cyan.400" fontWeight="bold" mt={2}>
|
||||
Click anywhere to start (and then scroll down)
|
||||
</Text>
|
||||
{points === 0 && (
|
||||
<Text fontSize="xl" color="cyan.400" fontWeight="bold" mt={2}>
|
||||
Click anywhere to start
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{/* Reset button positioned in the top right */}
|
||||
<Box position="absolute" top={0} right={0}>
|
||||
<ResetButton />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<VStack spacing={8} w="full">
|
||||
{/* Shop Section */}
|
||||
<Box bg="gray.800" p={6} borderRadius="lg" w="full">
|
||||
<Flex justify="space-between" align="center" mb={6}>
|
||||
<Heading as="h2" size="xl" color="blue.400">Shop</Heading>
|
||||
<Text fontSize="lg" color="yellow.400">Level {playerLevel}</Text>
|
||||
</Flex>
|
||||
<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>
|
||||
{/* Buildings Grid */}
|
||||
<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 h="1px" bg="gray.600" w="full" />
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 702 KiB |
@ -7,8 +7,6 @@ import {
|
||||
AlertDialogContent,
|
||||
AlertDialogOverlay,
|
||||
useDisclosure,
|
||||
IconButton,
|
||||
Tooltip
|
||||
} from '@chakra-ui/react'
|
||||
import React, { useRef } from 'react'
|
||||
import { useGameStore } from '../store/gameStore'
|
||||
@ -25,17 +23,14 @@ export function ResetButton() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip label="Reset Game">
|
||||
<IconButton
|
||||
aria-label="Reset Game"
|
||||
icon={<span>🔄</span>}
|
||||
onClick={onOpen}
|
||||
colorScheme="red"
|
||||
size="md"
|
||||
variant="ghost"
|
||||
borderRadius="full"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Button
|
||||
onClick={onOpen}
|
||||
colorScheme="red"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { Box, HStack, Text, Progress, Flex, Divider, Tooltip } from '@chakra-ui/react'
|
||||
import { Box, HStack, Text, Progress, Flex, Divider, Tooltip, Image } from '@chakra-ui/react'
|
||||
import { useGameStore } from '../store/gameStore'
|
||||
import logoImg from '../assets/logo.png'
|
||||
import { ResetButton } from './ResetButton'
|
||||
|
||||
export function ResourceDisplay() {
|
||||
const { points, pointsPerSecond, clickPower, getTotalMultiplier, activeMultipliers, playerLevel } = useGameStore()
|
||||
@ -35,56 +37,91 @@ export function ResourceDisplay() {
|
||||
shadow="lg"
|
||||
>
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
wrap="nowrap"
|
||||
maxW="1200px"
|
||||
mx="auto"
|
||||
px={4}
|
||||
gap={4}
|
||||
position="relative"
|
||||
>
|
||||
{/* Points */}
|
||||
<Box textAlign="center" minW="120px">
|
||||
<Text fontSize="sm" fontWeight="bold">Points</Text>
|
||||
<Text fontSize="md" fontWeight="bold">{Math.floor(points)}</Text>
|
||||
<Text fontSize="xs" color="green.400">+{pointsPerSecond.toFixed(1)}/s</Text>
|
||||
{/* Logo */}
|
||||
<Box
|
||||
position="absolute"
|
||||
left={4}
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
h="40px"
|
||||
w="auto"
|
||||
>
|
||||
<Image
|
||||
src={logoImg}
|
||||
alt="Clicker Clicker 2"
|
||||
h="100%"
|
||||
w="auto"
|
||||
objectFit="contain"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<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>
|
||||
)}
|
||||
{/* Reset button */}
|
||||
<Box
|
||||
position="absolute"
|
||||
right={4}
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
zIndex={1}
|
||||
>
|
||||
<ResetButton />
|
||||
</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"
|
||||
/>
|
||||
{/* Main content - centered */}
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
wrap="nowrap"
|
||||
gap={4}
|
||||
w="full"
|
||||
>
|
||||
{/* Points */}
|
||||
<Box textAlign="center" minW="120px">
|
||||
<Text fontSize="sm" fontWeight="bold">Points</Text>
|
||||
<Text fontSize="md" fontWeight="bold">{Math.floor(points)}</Text>
|
||||
<Text fontSize="xs" color="green.400">+{pointsPerSecond.toFixed(1)}/s</Text>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
|
||||
<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>
|
||||
</Flex>
|
||||
</Box>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user