From f000fecba21268aa7648ecd95c5acb9f2bc73486 Mon Sep 17 00:00:00 2001
From: billy <billy@shuttle>
Date: Sun, 30 Mar 2025 15:45:58 -0400
Subject: [PATCH] Refactor App and component files to streamline imports and
 enhance UI consistency. Removed unused imports and simplified event handlers
 for better performance. Updated BuildingInfo to utilize Chakra UI modal for
 improved user experience, and adjusted MultiplierShop functionality comments
 for clarity.

---
 src/App.tsx                            | 13 ++-----
 src/components/BuildingButton.tsx      |  1 -
 src/components/BuildingInfo.tsx        | 51 ++++++++------------------
 src/components/MultiplierShop.tsx      |  7 ++--
 src/components/NextBuildingPreview.tsx | 13 +------
 src/components/ResourceDisplay.tsx     |  2 +-
 src/components/SoundToggleButton.tsx   |  4 +-
 src/main.tsx                           |  4 +-
 src/utils/soundUtils.ts                |  9 +----
 9 files changed, 29 insertions(+), 75 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4ad94bd..709f81f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,8 @@
 import { ResourceDisplay } from './components/ResourceDisplay'
 import { BuildingButton } from './components/BuildingButton'
 import { NextBuildingPreview } from './components/NextBuildingPreview'
-import { ResetButton } from './components/ResetButton'
 import { useGameStore } from './store/gameStore'
-import { playClickSound, initAudio } from './utils/soundUtils'
-import { formatNumber } from './utils/numberUtils'
+import { initAudio } from './utils/soundUtils'
 import { 
   ChakraProvider, 
   Box, 
@@ -14,9 +12,6 @@ import {
   VStack,
   SimpleGrid,
   Button,
-  Flex,
-  Image,
-  Center,
   Modal,
   ModalOverlay,
   ModalContent,
@@ -28,7 +23,6 @@ import {
 } from '@chakra-ui/react'
 import theme from './theme'
 import { useEffect, useState } from 'react'
-import logoImg from './assets/logo.png'
 
 type BuildingId = 'mouseFarms' | 'keyboardFactories' | 'monitorDisplays' | 'officeSpace' | 'serverRooms' | 'dataCenters' | 
                   'dataCities' | 'dataCountries' | 'dataContinents' | 'dataWorlds' | 'dataMoons' | 
@@ -39,7 +33,6 @@ type BuildingLevelKey = `${BuildingId}Level`
 function App() {
   const { 
     points,
-    playerLevel,
     getAvailableBuildings,
     tick,
     click,
@@ -47,7 +40,7 @@ function App() {
 
   const [agreedToTerms, setAgreedToTerms] = useState(false)
   const [hasStarted, setHasStarted] = useState(false)
-  const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+  const { onClose } = useDisclosure({ defaultIsOpen: true })
   const availableBuildings = getAvailableBuildings()
 
   // Set up game tick interval
@@ -66,7 +59,7 @@ function App() {
 
   // This is now handled globally, but we'll keep a simpler version
   // for UI feedback only (cursor change, etc)
-  const handleClick = (e: React.MouseEvent) => {
+  const handleClick = () => {
     // Don't call click() here as it's now handled globally
     // Just for visual feedback
     if (hasStarted) {
diff --git a/src/components/BuildingButton.tsx b/src/components/BuildingButton.tsx
index aa52cb8..ee253bc 100644
--- a/src/components/BuildingButton.tsx
+++ b/src/components/BuildingButton.tsx
@@ -3,7 +3,6 @@ import {
   Button, 
   VStack,
   Text, 
-  Badge,
   Tooltip,
   HStack,
   Image,
diff --git a/src/components/BuildingInfo.tsx b/src/components/BuildingInfo.tsx
index 432a43c..f7bba03 100644
--- a/src/components/BuildingInfo.tsx
+++ b/src/components/BuildingInfo.tsx
@@ -1,4 +1,4 @@
-import { motion, AnimatePresence } from 'framer-motion'
+import { Box, Heading, Text, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from '@chakra-ui/react'
 
 interface BuildingInfoProps {
   isOpen: boolean
@@ -11,44 +11,23 @@ interface BuildingInfoProps {
 }
 
 export const BuildingInfo = ({ isOpen, onClose, title, description, production }: BuildingInfoProps) => {
-  if (!isOpen) return null
-
   return (
-    <AnimatePresence>
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-        onClick={onClose}
-      >
-        <motion.div
-          initial={{ scale: 0.9, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0.9, opacity: 0 }}
-          className="bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4"
-          onClick={e => e.stopPropagation()}
-        >
-          <div className="flex justify-between items-start mb-4">
-            <h3 className="text-xl font-bold">{title}</h3>
-            <button
-              onClick={onClose}
-              className="text-gray-400 hover:text-white"
-            >
-              ✕
-            </button>
-          </div>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay bg="blackAlpha.700" />
+      <ModalContent bg="background.secondary" maxW="md" mx={4}>
+        <ModalHeader color="text.secondary">{title}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody pb={6}>
+          <Text color="text.primary" mb={4}>{description}</Text>
           
-          <p className="text-gray-300 mb-4">{description}</p>
-          
-          <div className="bg-gray-700 p-4 rounded-lg">
-            <h4 className="font-semibold mb-2">Production:</h4>
+          <Box p={4} bg="background.card" borderRadius="md">
+            <Heading as="h4" size="sm" mb={2} color="brand.300">Production:</Heading>
             {production.points && (
-              <div className="text-green-400">+{production.points} points/s</div>
+              <Text color="text.accent">+{production.points} points/s</Text>
             )}
-          </div>
-        </motion.div>
-      </motion.div>
-    </AnimatePresence>
+          </Box>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
   )
 } 
\ No newline at end of file
diff --git a/src/components/MultiplierShop.tsx b/src/components/MultiplierShop.tsx
index 852e9d7..2be946e 100644
--- a/src/components/MultiplierShop.tsx
+++ b/src/components/MultiplierShop.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, VStack, HStack, Text, SimpleGrid } from '@chakra-ui/react'
+import { Box, Button, VStack, Text, SimpleGrid } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
 
 const MULTIPLIER_PURCHASES = [
@@ -11,7 +11,7 @@ const MULTIPLIER_PURCHASES = [
 ]
 
 export function MultiplierShop() {
-  const { points, buyMultiplier } = useGameStore()
+  const { points } = useGameStore()
 
   return (
     <Box bg="gray.800" p={6} borderRadius="lg">
@@ -26,7 +26,8 @@ export function MultiplierShop() {
           {MULTIPLIER_PURCHASES.map((purchase) => (
             <Button
               key={`${purchase.duration}-${purchase.multiplier}`}
-              onClick={() => buyMultiplier(purchase.duration, purchase.multiplier)}
+              // Multiplier shop functionality is not yet implemented in the game state
+              // onClick={() => buyMultiplier(purchase.duration, purchase.multiplier)}
               isDisabled={points < purchase.cost}
               bg="gray.700"
               _hover={{ bg: 'gray.600' }}
diff --git a/src/components/NextBuildingPreview.tsx b/src/components/NextBuildingPreview.tsx
index 4c2b08f..767c33e 100644
--- a/src/components/NextBuildingPreview.tsx
+++ b/src/components/NextBuildingPreview.tsx
@@ -9,17 +9,6 @@ import { useGameStore } from '../store/gameStore'
 import { BUILDING_INFO } from '../store/gameStore'
 import { formatNumber } from '../utils/numberUtils'
 
-interface BuildingInfo {
-  cost: number
-  levelRequirement: number
-  title: string
-  description: string
-  production: {
-    points?: number
-    techParts?: number
-  }
-}
-
 export function NextBuildingPreview() {
   const { playerLevel } = useGameStore()
   
@@ -29,7 +18,7 @@ export function NextBuildingPreview() {
 
   if (!nextBuilding) return null
 
-  const [id, info] = nextBuilding
+  const [, info] = nextBuilding
 
   return (
     <Tooltip label={`Requires level ${info.levelRequirement}`}>
diff --git a/src/components/ResourceDisplay.tsx b/src/components/ResourceDisplay.tsx
index 232ae06..42c9108 100644
--- a/src/components/ResourceDisplay.tsx
+++ b/src/components/ResourceDisplay.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack, Text, Progress, Flex, Divider, Tooltip, Image, Button, Icon } from '@chakra-ui/react'
+import { Box, Text, Progress, Flex, Divider, Tooltip, Image, Button } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
 import logoImg from '../assets/logo.png'
 import { ResetButton } from './ResetButton'
diff --git a/src/components/SoundToggleButton.tsx b/src/components/SoundToggleButton.tsx
index 99087d5..773b7fb 100644
--- a/src/components/SoundToggleButton.tsx
+++ b/src/components/SoundToggleButton.tsx
@@ -1,6 +1,6 @@
-import { IconButton, Tooltip, useBoolean } from '@chakra-ui/react'
+import { IconButton, Tooltip } from '@chakra-ui/react'
 import { toggleSound, isSoundEnabled, initAudio } from '../utils/soundUtils'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 export function SoundToggleButton() {
   // Initialize the state with the current sound enabled state
diff --git a/src/main.tsx b/src/main.tsx
index 347d65b..2dc7666 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -28,7 +28,7 @@ function AppWithGlobalHandlers() {
   }, [gameStarted]);
 
   useEffect(() => {
-    const handleGlobalClick = (e: MouseEvent) => {
+    const handleGlobalClick = () => {
       // Only trigger if game has started
       const gameState = useGameStore.getState();
       if ((gameStarted || gameState.points > 0) && gameState.playerLevel >= 1) {
@@ -37,7 +37,7 @@ function AppWithGlobalHandlers() {
       }
     };
 
-    const handleGlobalKeyPress = (e: KeyboardEvent) => {
+    const handleGlobalKeyPress = () => {
       // Only trigger if game has started
       const gameState = useGameStore.getState();
       if ((gameStarted || gameState.points > 0) && gameState.playerLevel >= 1) {
diff --git a/src/utils/soundUtils.ts b/src/utils/soundUtils.ts
index de49462..4bf2eef 100644
--- a/src/utils/soundUtils.ts
+++ b/src/utils/soundUtils.ts
@@ -9,7 +9,6 @@ const SOUND_FILES = {
 // AudioManager singleton for handling all game audio
 class AudioManager {
   private soundEnabled: boolean = true;
-  private audioContext: AudioContext | null = null;
   private sounds: Map<string, HTMLAudioElement> = new Map();
   private lastClickIndex: number = -1;
   private initialized: boolean = false;
@@ -36,12 +35,6 @@ class AudioManager {
     }
     
     try {
-      // Create AudioContext if possible (will only work after user interaction)
-      if (window.AudioContext || (window as any).webkitAudioContext) {
-        const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext;
-        this.audioContext = new AudioContextClass();
-      }
-      
       // Play a silent sound to unlock audio on iOS/Safari
       const silentSound = new Audio();
       silentSound.play().catch(e => console.log('Silent sound failed to play:', e));
@@ -189,4 +182,4 @@ export const playPurchaseSound = () => audioManager.playPurchaseSound();
 export const playLevelUpSound = () => audioManager.playLevelUpSound();
 export const playUpgradeSound = () => audioManager.playUpgradeSound();
 export const toggleSound = (state?: boolean) => audioManager.toggleSound(state);
-export const isSoundEnabled = () => audioManager.isSoundEnabled(); 
\ No newline at end of file
+export const isSoundEnabled = () => audioManager.isSoundEnabled();
\ No newline at end of file