From a41208bbfed9e0ac54c08d9d7209ff021e1dc3c3 Mon Sep 17 00:00:00 2001 From: billy Date: Sun, 30 Mar 2025 15:28:57 -0400 Subject: [PATCH] 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. --- index.html | 3 +++ src/App.tsx | 4 ++++ src/components/BuildingButton.tsx | 6 +++--- src/components/BuildingInfo.tsx | 4 ---- src/components/ResourceDisplay.tsx | 6 +++--- src/store/gameStore.ts | 7 +++---- src/theme.ts | 27 +++++++++++++++++++++++++++ 7 files changed, 43 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index f166c89..800bf60 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,9 @@ + + + Clicker Clicker 2 diff --git a/src/App.tsx b/src/App.tsx index 9476bf6..11c9533 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -98,6 +98,10 @@ function App() { + {/* Game Title */} + + Clicker Clicker 2 + {/* Buildings Grid */} {availableBuildings.map((building) => ( diff --git a/src/components/BuildingButton.tsx b/src/components/BuildingButton.tsx index e523812..03d66c4 100644 --- a/src/components/BuildingButton.tsx +++ b/src/components/BuildingButton.tsx @@ -147,7 +147,7 @@ export function BuildingButton({ borderBottomRightRadius="md" boxShadow="0 1px 3px rgba(0,0,0,0.5)" > - {title} + {title} {/* Overlay for owned count */} @@ -161,7 +161,7 @@ export function BuildingButton({ borderBottomRightRadius="md" boxShadow="0 1px 3px rgba(0,0,0,0.5)" > - Owned: {formatNumber(owned)} + Owned: {formatNumber(owned)} {/* Level badge */} @@ -182,7 +182,7 @@ export function BuildingButton({ {description} - Production: + Production: Points: {formatNumber(pointsPerSecond * level)}/s per building Total: {formatNumber(pointsPerSecond * level * owned)}/s diff --git a/src/components/BuildingInfo.tsx b/src/components/BuildingInfo.tsx index 6a4a858..432a43c 100644 --- a/src/components/BuildingInfo.tsx +++ b/src/components/BuildingInfo.tsx @@ -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 && (
+{production.points} points/s
)} - {production.techParts && ( -
+{production.techParts} tech parts/s
- )} diff --git a/src/components/ResourceDisplay.tsx b/src/components/ResourceDisplay.tsx index 0278f19..232ae06 100644 --- a/src/components/ResourceDisplay.tsx +++ b/src/components/ResourceDisplay.tsx @@ -88,7 +88,7 @@ export function ResourceDisplay() { > {/* Points */} - Points + Points {formatNumber(Math.floor(points))} +{formatNumber(pointsPerSecond)}/s @@ -97,7 +97,7 @@ export function ResourceDisplay() { {/* Click Power with Upgrade Button */} - Click Power + Click Power {formatNumber(clickPower)} @@ -124,7 +124,7 @@ export function ResourceDisplay() { {/* Level */} - Level + Level {playerLevel} diff --git a/src/store/gameStore.ts b/src/store/gameStore.ts index 8b01087..e3b56eb 100644 --- a/src/store/gameStore.ts +++ b/src/store/gameStore.ts @@ -11,7 +11,6 @@ export interface BuildingInfo { description: string production: { points?: number - techParts?: number } } @@ -93,21 +92,21 @@ export const BUILDING_INFO: Record> = { }, 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 diff --git a/src/theme.ts b/src/theme.ts index e9a29b7..b487639 100644 --- a/src/theme.ts +++ b/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: {