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

Add Google Fonts integration and update theme with 'Press Start 2P' font. Enhance UI with game title in App and adjust font sizes in BuildingButton and ResourceDisplay for improved readability. Remove techParts from BuildingInfo and gameStore descriptions for clarity.

Browse Source
This commit is contained in:
billy 2025-03-30 15:28:57 -04:00
parent 9af042c2c3
commit a41208bbfe
7 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -3,6 +3,9 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clicker Clicker 2</title> <title>Clicker Clicker 2</title>
</head> </head>

4
src/App.tsx
View File

@ -98,6 +98,10 @@ function App() {
<Container maxW="container.xl"> <Container maxW="container.xl">
<VStack spacing={8}> <VStack spacing={8}>
<VStack spacing={8} w="full"> <VStack spacing={8} w="full">
{/* Game Title */}
<Box textAlign="center" mt={10} mb={5}>
<Heading as="h1" size="lg" color="brand.300">Clicker Clicker 2</Heading>
</Box>
{/* Buildings Grid */} {/* Buildings Grid */}
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}> <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
{availableBuildings.map((building) => ( {availableBuildings.map((building) => (

6
src/components/BuildingButton.tsx
View File

@ -147,7 +147,7 @@ export function BuildingButton({
borderBottomRightRadius="md" borderBottomRightRadius="md"
boxShadow="0 1px 3px rgba(0,0,0,0.5)" boxShadow="0 1px 3px rgba(0,0,0,0.5)"
> >
<Text fontWeight="bold" fontSize="md" color="brand.200">{title}</Text> <Text fontWeight="bold" fontSize="sm" color="brand.200" variant="pixel">{title}</Text>
</Box> </Box>
{/* Overlay for owned count */} {/* Overlay for owned count */}
@ -161,7 +161,7 @@ export function BuildingButton({
borderBottomRightRadius="md" borderBottomRightRadius="md"
boxShadow="0 1px 3px rgba(0,0,0,0.5)" boxShadow="0 1px 3px rgba(0,0,0,0.5)"
> >
<Text fontSize="sm" color="brand.100">Owned: {formatNumber(owned)}</Text> <Text fontSize="xs" color="brand.100">Owned: {formatNumber(owned)}</Text>
</Box> </Box>
{/* Level badge */} {/* Level badge */}
@ -182,7 +182,7 @@ export function BuildingButton({
<Text fontSize="sm" color="text.secondary">{description}</Text> <Text fontSize="sm" color="text.secondary">{description}</Text>
<Box p={2} bg="background.secondary" borderRadius="md"> <Box p={2} bg="background.secondary" borderRadius="md">
<Flex justifyContent="space-between" alignItems="center" mb={1}> <Flex justifyContent="space-between" alignItems="center" mb={1}>
<Text fontSize="sm" fontWeight="bold" color="brand.300">Production:</Text> <Text fontSize="sm" fontWeight="bold" color="brand.300" variant="pixel">Production:</Text>
</Flex> </Flex>
<Text fontSize="sm" color="text.primary">Points: {formatNumber(pointsPerSecond * level)}/s per building</Text> <Text fontSize="sm" color="text.primary">Points: {formatNumber(pointsPerSecond * level)}/s per building</Text>
<Text fontSize="sm" color="text.primary">Total: {formatNumber(pointsPerSecond * level * owned)}/s</Text> <Text fontSize="sm" color="text.primary">Total: {formatNumber(pointsPerSecond * level * owned)}/s</Text>

4
src/components/BuildingInfo.tsx
View File

@ -7,7 +7,6 @@ interface BuildingInfoProps {
description: string description: string
production: { production: {
points?: number points?: number
techParts?: number
} }
} }
@ -47,9 +46,6 @@ export const BuildingInfo = ({ isOpen, onClose, title, description, production }
{production.points && ( {production.points && (
<div className="text-green-400">+{production.points} points/s</div> <div className="text-green-400">+{production.points} points/s</div>
)} )}
{production.techParts && (
<div className="text-blue-400">+{production.techParts} tech parts/s</div>
)}
</div> </div>
</motion.div> </motion.div>
</motion.div> </motion.div>

6
src/components/ResourceDisplay.tsx
View File

@ -88,7 +88,7 @@ export function ResourceDisplay() {
> >
{/* Points */} {/* Points */}
<Box textAlign="center" minW="120px"> <Box textAlign="center" minW="120px">
<Text fontSize="sm" fontWeight="bold" color="brand.300">Points</Text> <Text fontSize="sm" fontWeight="bold" color="brand.300" variant="pixel">Points</Text>
<Text fontSize="md" fontWeight="bold" color="text.primary">{formatNumber(Math.floor(points))}</Text> <Text fontSize="md" fontWeight="bold" color="text.primary">{formatNumber(Math.floor(points))}</Text>
<Text fontSize="xs" color="text.secondary">+{formatNumber(pointsPerSecond)}/s</Text> <Text fontSize="xs" color="text.secondary">+{formatNumber(pointsPerSecond)}/s</Text>
</Box> </Box>
@ -97,7 +97,7 @@ export function ResourceDisplay() {
{/* Click Power with Upgrade Button */} {/* Click Power with Upgrade Button */}
<Box textAlign="center" minW="120px"> <Box textAlign="center" minW="120px">
<Text fontSize="sm" fontWeight="bold" color="brand.300">Click Power</Text> <Text fontSize="sm" fontWeight="bold" color="brand.300" variant="pixel">Click Power</Text>
<Flex justify="center" align="center" gap={1}> <Flex justify="center" align="center" gap={1}>
<Text fontSize="md" color="text.primary">{formatNumber(clickPower)}</Text> <Text fontSize="md" color="text.primary">{formatNumber(clickPower)}</Text>
<Tooltip label={`Upgrade to level ${clickPower + 1} (${formatNumber(clickPowerUpgradeCost)} points)`}> <Tooltip label={`Upgrade to level ${clickPower + 1} (${formatNumber(clickPowerUpgradeCost)} points)`}>
@ -124,7 +124,7 @@ export function ResourceDisplay() {
{/* Level */} {/* Level */}
<Box textAlign="center" minW="80px"> <Box textAlign="center" minW="80px">
<Text fontSize="sm" fontWeight="bold" color="brand.300">Level</Text> <Text fontSize="sm" fontWeight="bold" color="brand.300" variant="pixel">Level</Text>
<Text fontSize="md" color="text.primary">{playerLevel}</Text> <Text fontSize="md" color="text.primary">{playerLevel}</Text>
</Box> </Box>

7
src/store/gameStore.ts
View File

@ -11,7 +11,6 @@ export interface BuildingInfo {
description: string description: string
production: { production: {
points?: number points?: number
techParts?: number
} }
} }
@ -93,21 +92,21 @@ export const BUILDING_INFO: Record<string, Omit<BuildingInfo, 'id'>> = {
}, },
keyboardFactories: { keyboardFactories: {
title: 'Keyboard Factory', title: 'Keyboard Factory',
description: 'Manufactures mechanical keyboards and generates tech parts. Essential for advanced upgrades.', description: 'Manufactures mechanical keyboards. Essential for advanced upgrades.',
production: { points: 0.2 }, production: { points: 0.2 },
cost: 50, cost: 50,
levelRequirement: 1 levelRequirement: 1
}, },
monitorDisplays: { monitorDisplays: {
title: 'Monitor Display', title: 'Monitor Display',
description: 'High-resolution displays that generate both points and tech parts. A balanced production facility.', description: 'High-resolution displays that generate points. A balanced production facility.',
production: { points: 0.2 }, production: { points: 0.2 },
cost: 100, cost: 100,
levelRequirement: 1 levelRequirement: 1
}, },
serverRooms: { serverRooms: {
title: 'Server Room', title: 'Server Room',
description: 'A powerful facility that generates significant amounts of both resources. Requires proper cooling.', description: 'A powerful facility that generates significant amounts of resources. Requires proper cooling.',
production: { points: 5 }, production: { points: 5 },
cost: 1000, cost: 1000,
levelRequirement: 1 levelRequirement: 1

27
src/theme.ts
View File

@ -38,6 +38,10 @@ const theme = extendTheme({
useSystemColorMode: false, useSystemColorMode: false,
}, },
colors, colors,
fonts: {
heading: `'Press Start 2P', monospace`,
body: `system-ui, sans-serif`,
},
styles: { styles: {
global: { global: {
body: { body: {
@ -111,7 +115,26 @@ const theme = extendTheme({
Heading: { Heading: {
baseStyle: { baseStyle: {
color: 'text.secondary', color: 'text.secondary',
letterSpacing: '0.5px',
}, },
sizes: {
xl: {
fontSize: '1.5rem',
lineHeight: '1.4',
},
lg: {
fontSize: '1.2rem',
lineHeight: '1.4',
},
md: {
fontSize: '1rem',
lineHeight: '1.4',
},
sm: {
fontSize: '0.8rem',
lineHeight: '1.4',
},
}
}, },
Text: { Text: {
variants: { variants: {
@ -124,6 +147,10 @@ const theme = extendTheme({
muted: { muted: {
color: 'text.muted', color: 'text.muted',
}, },
pixel: {
fontFamily: `'Press Start 2P', monospace`,
letterSpacing: '0.5px',
}
}, },
}, },
Modal: { Modal: {