126 lines
3.6 KiB
TypeScript
126 lines
3.6 KiB
TypeScript
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'
|
|
import { SoundToggleButton } from './SoundToggleButton'
|
|
|
|
export function ResourceDisplay() {
|
|
const { points, pointsPerSecond, clickPower, playerLevel } = useGameStore()
|
|
|
|
// Calculate progress to next level
|
|
const currentLevelPPS = Math.pow(10, playerLevel - 1)
|
|
const nextLevelPPS = Math.pow(10, playerLevel)
|
|
|
|
// Handle progress calculation properly
|
|
let progress = 0;
|
|
if (playerLevel === 1) {
|
|
// For level 1, show progress from 0 to 10 PPS
|
|
progress = Math.min(Math.max((pointsPerSecond / nextLevelPPS) * 100, 0), 100);
|
|
} else {
|
|
// For levels > 1, show progress from currentLevelPPS to nextLevelPPS
|
|
progress = Math.min(Math.max(((pointsPerSecond - currentLevelPPS) / (nextLevelPPS - currentLevelPPS)) * 100, 0), 100);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
position="fixed"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
zIndex={100}
|
|
bg="gray.900"
|
|
py={2}
|
|
borderBottom="1px"
|
|
borderColor="gray.700"
|
|
shadow="lg"
|
|
>
|
|
<Flex
|
|
maxW="1200px"
|
|
mx="auto"
|
|
px={4}
|
|
position="relative"
|
|
>
|
|
{/* 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>
|
|
|
|
{/* Control buttons */}
|
|
<Flex
|
|
position="absolute"
|
|
right={4}
|
|
top="50%"
|
|
transform="translateY(-50%)"
|
|
zIndex={1}
|
|
gap={2}
|
|
align="center"
|
|
>
|
|
<SoundToggleButton />
|
|
<ResetButton />
|
|
</Flex>
|
|
|
|
{/* 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>
|
|
|
|
<Divider orientation="vertical" h="40px" />
|
|
|
|
{/* Click Power */}
|
|
<Box textAlign="center" minW="120px">
|
|
<Text fontSize="sm" fontWeight="bold">Click Power</Text>
|
|
<Text fontSize="md">{clickPower}</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>
|
|
)
|
|
}
|