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.
This commit is contained in:
billy
parent
9af042c2c3
commit
a41208bbfe
@ -3,6 +3,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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" />
|
||||
<title>Clicker Clicker 2</title>
|
||||
</head>
|
||||
|
||||
@ -98,6 +98,10 @@ function App() {
|
||||
<Container maxW="container.xl">
|
||||
<VStack spacing={8}>
|
||||
<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 */}
|
||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
|
||||
{availableBuildings.map((building) => (
|
||||
|
||||
@ -147,7 +147,7 @@ export function BuildingButton({
|
||||
borderBottomRightRadius="md"
|
||||
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>
|
||||
|
||||
{/* Overlay for owned count */}
|
||||
@ -161,7 +161,7 @@ export function BuildingButton({
|
||||
borderBottomRightRadius="md"
|
||||
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>
|
||||
|
||||
{/* Level badge */}
|
||||
@ -182,7 +182,7 @@ export function BuildingButton({
|
||||
<Text fontSize="sm" color="text.secondary">{description}</Text>
|
||||
<Box p={2} bg="background.secondary" borderRadius="md">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -7,7 +7,6 @@ interface BuildingInfoProps {
|
||||
description: string
|
||||
production: {
|
||||
points?: number
|
||||
techParts?: number
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,9 +46,6 @@ export const BuildingInfo = ({ isOpen, onClose, title, description, production }
|
||||
{production.points && (
|
||||
<div className="text-green-400">+{production.points} points/s</div>
|
||||
)}
|
||||
{production.techParts && (
|
||||
<div className="text-blue-400">+{production.techParts} tech parts/s</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
@ -88,7 +88,7 @@ export function ResourceDisplay() {
|
||||
>
|
||||
{/* Points */}
|
||||
<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="xs" color="text.secondary">+{formatNumber(pointsPerSecond)}/s</Text>
|
||||
</Box>
|
||||
@ -97,7 +97,7 @@ export function ResourceDisplay() {
|
||||
|
||||
{/* Click Power with Upgrade Button */}
|
||||
<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}>
|
||||
<Text fontSize="md" color="text.primary">{formatNumber(clickPower)}</Text>
|
||||
<Tooltip label={`Upgrade to level ${clickPower + 1} (${formatNumber(clickPowerUpgradeCost)} points)`}>
|
||||
@ -124,7 +124,7 @@ export function ResourceDisplay() {
|
||||
|
||||
{/* Level */}
|
||||
<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>
|
||||
</Box>
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@ export interface BuildingInfo {
|
||||
description: string
|
||||
production: {
|
||||
points?: number
|
||||
techParts?: number
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,21 +92,21 @@ export const BUILDING_INFO: Record<string, Omit<BuildingInfo, 'id'>> = {
|
||||
},
|
||||
keyboardFactories: {
|
||||
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 },
|
||||
cost: 50,
|
||||
levelRequirement: 1
|
||||
},
|
||||
monitorDisplays: {
|
||||
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 },
|
||||
cost: 100,
|
||||
levelRequirement: 1
|
||||
},
|
||||
serverRooms: {
|
||||
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 },
|
||||
cost: 1000,
|
||||
levelRequirement: 1
|
||||
|
||||
27
src/theme.ts
27
src/theme.ts
@ -38,6 +38,10 @@ const theme = extendTheme({
|
||||
useSystemColorMode: false,
|
||||
},
|
||||
colors,
|
||||
fonts: {
|
||||
heading: `'Press Start 2P', monospace`,
|
||||
body: `system-ui, sans-serif`,
|
||||
},
|
||||
styles: {
|
||||
global: {
|
||||
body: {
|
||||
@ -111,7 +115,26 @@ const theme = extendTheme({
|
||||
Heading: {
|
||||
baseStyle: {
|
||||
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: {
|
||||
variants: {
|
||||
@ -124,6 +147,10 @@ const theme = extendTheme({
|
||||
muted: {
|
||||
color: 'text.muted',
|
||||
},
|
||||
pixel: {
|
||||
fontFamily: `'Press Start 2P', monospace`,
|
||||
letterSpacing: '0.5px',
|
||||
}
|
||||
},
|
||||
},
|
||||
Modal: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user