Enhance App layout with logo and updated click handling. Introduced logo image and improved text prompts for user interaction. Refactored BuildingButton to streamline disabled state styling and added tooltip for ResetButton with icon representation.
This commit is contained in:
billy
parent
5c04d3da51
commit
8c76523f12
41
src/App.tsx
41
src/App.tsx
@ -13,10 +13,13 @@ import {
|
||||
VStack,
|
||||
SimpleGrid,
|
||||
Button,
|
||||
Flex
|
||||
Flex,
|
||||
Image,
|
||||
Center
|
||||
} from '@chakra-ui/react'
|
||||
import theme from './theme'
|
||||
import { useEffect } from 'react'
|
||||
import logoImg from './assets/logo.png'
|
||||
|
||||
type BuildingId = 'mouseFarms' | 'keyboardFactories' | 'monitorDisplays' | 'officeSpace' | 'serverRooms' | 'dataCenters' |
|
||||
'dataCities' | 'dataCountries' | 'dataContinents' | 'dataWorlds' | 'dataMoons' |
|
||||
@ -117,13 +120,7 @@ function App() {
|
||||
|
||||
// Handle clicks anywhere in the game
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
// Don't count clicks on buttons or interactive elements
|
||||
if (e.target instanceof HTMLElement &&
|
||||
(e.target.tagName === 'BUTTON' ||
|
||||
e.target.closest('button') ||
|
||||
e.target.closest('[role="button"]'))) {
|
||||
return
|
||||
}
|
||||
// All clicks count now!
|
||||
click()
|
||||
}
|
||||
|
||||
@ -140,18 +137,29 @@ function App() {
|
||||
<Box pt="100px">
|
||||
<Container maxW="container.xl">
|
||||
<VStack spacing={8}>
|
||||
<Box textAlign="center" w="full">
|
||||
<Flex justify="space-between" align="center" mb={4}>
|
||||
<Heading as="h1" size="2xl">Clicker Clicker 2</Heading>
|
||||
<ResetButton />
|
||||
<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>
|
||||
</Flex>
|
||||
<Text fontSize="xl" color="yellow.400" mb={4}>Level {playerLevel}</Text>
|
||||
|
||||
{/* 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">
|
||||
<Heading as="h2" size="xl" mb={6} color="blue.400">Shop</Heading>
|
||||
<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
|
||||
@ -194,9 +202,10 @@ function App() {
|
||||
</Text>
|
||||
<Button
|
||||
onClick={() => useGameStore.getState().buyUpgrade('clickPower')}
|
||||
isDisabled={points < 20}
|
||||
opacity={points < 20 ? 0.4 : 1}
|
||||
_hover={{ bg: 'gray.500', opacity: points < 20 ? 0.4 : 1 }}
|
||||
bg="gray.600"
|
||||
_hover={{ bg: 'gray.500' }}
|
||||
cursor={points < 20 ? 'not-allowed' : 'pointer'}
|
||||
>
|
||||
Upgrade (20 points)
|
||||
</Button>
|
||||
|
||||
@ -74,7 +74,7 @@ export function BuildingButton({
|
||||
const { points, playerLevel, upgradeBuilding } = useGameStore()
|
||||
const canAfford = points >= cost
|
||||
const meetsLevelRequirement = playerLevel >= levelRequirement
|
||||
const isDisabled = !canAfford || !meetsLevelRequirement
|
||||
const isDisabledStyle = !canAfford || !meetsLevelRequirement
|
||||
|
||||
// Calculate upgrade cost
|
||||
const calculateUpgradeCost = (currentLevel: number): number => {
|
||||
@ -124,7 +124,7 @@ export function BuildingButton({
|
||||
<Text fontWeight="bold" fontSize="md">{title}</Text>
|
||||
</Box>
|
||||
|
||||
{/* Overlay for owned and level */}
|
||||
{/* Overlay for owned count */}
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom="0"
|
||||
@ -134,10 +134,7 @@ export function BuildingButton({
|
||||
borderTopLeftRadius="md"
|
||||
borderBottomRightRadius="md"
|
||||
>
|
||||
<HStack spacing={3}>
|
||||
<Text fontSize="sm">Owned: {owned}</Text>
|
||||
<Text fontSize="sm">Level: {level}</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -150,7 +147,9 @@ export function BuildingButton({
|
||||
<HStack spacing={2}>
|
||||
<Button
|
||||
onClick={onClick}
|
||||
isDisabled={points < cost || playerLevel < levelRequirement}
|
||||
opacity={isDisabledStyle ? 0.4 : 1}
|
||||
_hover={{ bg: 'blue.600', opacity: isDisabledStyle ? 0.4 : 1 }}
|
||||
cursor={isDisabledStyle ? 'not-allowed' : 'pointer'}
|
||||
colorScheme="blue"
|
||||
size="sm"
|
||||
flexGrow={1}
|
||||
@ -160,7 +159,9 @@ export function BuildingButton({
|
||||
<Tooltip label={owned === 0 ? "You need to own this building first" : ""}>
|
||||
<Button
|
||||
onClick={() => upgradeBuilding(buildingType as any)}
|
||||
isDisabled={!canUpgrade}
|
||||
opacity={!canUpgrade ? 0.4 : 1}
|
||||
_hover={{ bg: 'green.600', opacity: !canUpgrade ? 0.4 : 1 }}
|
||||
cursor={!canUpgrade ? 'not-allowed' : 'pointer'}
|
||||
colorScheme="green"
|
||||
size="sm"
|
||||
flexGrow={1}
|
||||
|
||||
@ -6,7 +6,9 @@ import {
|
||||
AlertDialogHeader,
|
||||
AlertDialogContent,
|
||||
AlertDialogOverlay,
|
||||
useDisclosure
|
||||
useDisclosure,
|
||||
IconButton,
|
||||
Tooltip
|
||||
} from '@chakra-ui/react'
|
||||
import React, { useRef } from 'react'
|
||||
import { useGameStore } from '../store/gameStore'
|
||||
@ -23,14 +25,17 @@ export function ResetButton() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
<Tooltip label="Reset Game">
|
||||
<IconButton
|
||||
aria-label="Reset Game"
|
||||
icon={<span>🔄</span>}
|
||||
onClick={onOpen}
|
||||
colorScheme="red"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
Reset Game
|
||||
</Button>
|
||||
size="md"
|
||||
variant="ghost"
|
||||
borderRadius="full"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<AlertDialog
|
||||
isOpen={isOpen}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user