Refactor App and ResourceDisplay components for improved layout and user interaction. Updated ResetButton to use a simpler design and repositioned elements for better accessibility. Enhanced visual presentation of available buildings in the shop section.

src/App.tsx

@@ -139,45 +139,33 @@ function App() {
             <VStack spacing={8}>
               <Box textAlign="center" w="full" position="relative">
                 <Flex direction="column" align="center" mb={4}>
-                  <Box maxW="400px" mb={2}>
+                  {points === 0 && (
-                    <Image src={logoImg} alt="Clicker Clicker 2" />
+                    <Text fontSize="xl" color="cyan.400" fontWeight="bold" mt={2}>
-                  </Box>
+                      Click anywhere to start
-                  <Text fontSize="xl" color="cyan.400" fontWeight="bold" mt={2}>
+                    </Text>
-                    Click anywhere to start (and then scroll down)
+                  )}
-                  </Text>
                 </Flex>
-                
-                {/* Reset button positioned in the top right */}
-                <Box position="absolute" top={0} right={0}>
-                  <ResetButton />
-                </Box>
               </Box>
               
               <VStack spacing={8} w="full">
-                {/* Shop Section */}
+                {/* Buildings Grid */}
-                <Box bg="gray.800" p={6} borderRadius="lg" w="full">
+                <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
-                  <Flex justify="space-between" align="center" mb={6}>
+                  {availableBuildings.map((building) => (
-                    <Heading as="h2" size="xl" color="blue.400">Shop</Heading>
+                    <BuildingButton
-                    <Text fontSize="lg" color="yellow.400">Level {playerLevel}</Text>
+                      key={building.id}
-                  </Flex>
+                      title={building.title}
-                  <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={4}>
+                      cost={building.cost}
-                    {availableBuildings.map((building) => (
+                      owned={useGameStore.getState()[building.id as BuildingId]}
-                      <BuildingButton
+                      level={useGameStore.getState()[`${building.id}Level` as BuildingLevelKey] as number}
-                        key={building.id}
+                      onClick={() => useGameStore.getState().buyBuilding(building.id as BuildingId)}
-                        title={building.title}
+                      description={building.description}
-                        cost={building.cost}
+                      production={building.production}
-                        owned={useGameStore.getState()[building.id as BuildingId]}
+                      buildingType={building.id}
-                        level={useGameStore.getState()[`${building.id}Level` as BuildingLevelKey] as number}
+                      levelRequirement={building.levelRequirement}
-                        onClick={() => useGameStore.getState().buyBuilding(building.id as BuildingId)}
+                    />
-                        description={building.description}
+                  ))}
-                        production={building.production}
+                  <NextBuildingPreview />
-                        buildingType={building.id}
+                </SimpleGrid>
-                        levelRequirement={building.levelRequirement}
-                      />
-                    ))}
-                    <NextBuildingPreview />
-                  </SimpleGrid>
-                </Box>
 
                 <Box h="1px" bg="gray.600" w="full" />
 

src/components/ResetButton.tsx

@@ -7,8 +7,6 @@ import {
   AlertDialogContent,
   AlertDialogOverlay,
   useDisclosure,
-  IconButton,
-  Tooltip
 } from '@chakra-ui/react'
 import React, { useRef } from 'react'
 import { useGameStore } from '../store/gameStore'
@@ -25,17 +23,14 @@ export function ResetButton() {
 
   return (
     <>
-      <Tooltip label="Reset Game">
+      <Button
-        <IconButton
+        onClick={onOpen}
-          aria-label="Reset Game"
+        colorScheme="red"
-          icon={<span>🔄</span>}
+        size="sm"
-          onClick={onOpen}
+        variant="ghost"
-          colorScheme="red"
+      >
-          size="md"
+        Reset
-          variant="ghost"
+      </Button>
-          borderRadius="full"
-        />
-      </Tooltip>
 
       <AlertDialog
         isOpen={isOpen}

src/components/ResourceDisplay.tsx

@@ -1,5 +1,7 @@
-import { Box, HStack, Text, Progress, Flex, Divider, Tooltip } from '@chakra-ui/react'
+import { Box, HStack, Text, Progress, Flex, Divider, Tooltip, Image } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
+import logoImg from '../assets/logo.png'
+import { ResetButton } from './ResetButton'
 
 export function ResourceDisplay() {
   const { points, pointsPerSecond, clickPower, getTotalMultiplier, activeMultipliers, playerLevel } = useGameStore()
@@ -35,56 +37,91 @@ export function ResourceDisplay() {
       shadow="lg"
     >
       <Flex 
-        justify="center" 
-        align="center" 
-        wrap="nowrap"
         maxW="1200px"
         mx="auto"
         px={4}
-        gap={4}
+        position="relative"
       >
-        {/* Points */}
+        {/* Logo */}
-        <Box textAlign="center" minW="120px">
+        <Box 
-          <Text fontSize="sm" fontWeight="bold">Points</Text>
+          position="absolute" 
-          <Text fontSize="md" fontWeight="bold">{Math.floor(points)}</Text>
+          left={4} 
-          <Text fontSize="xs" color="green.400">+{pointsPerSecond.toFixed(1)}/s</Text>
+          top="50%" 
+          transform="translateY(-50%)"
+          h="40px"
+          w="auto"
+        >
+          <Image 
+            src={logoImg} 
+            alt="Clicker Clicker 2" 
+            h="100%" 
+            w="auto"
+            objectFit="contain"
+          />
         </Box>
 
-        <Divider orientation="vertical" h="40px" />
+        {/* Reset button */}
-
+        <Box 
-        {/* Click Power */}
+          position="absolute" 
-        <Box textAlign="center" minW="120px">
+          right={4} 
-          <Text fontSize="sm" fontWeight="bold">Click Power</Text>
+          top="50%" 
-          <Text fontSize="md">{actualClickPower}</Text>
+          transform="translateY(-50%)"
-          {activeMultipliers.length > 0 && (
+          zIndex={1}
-            <Text fontSize="xs" color="yellow.400">{totalMultiplier}x Active</Text>
+        >
-          )}
+          <ResetButton />
         </Box>
 
-        <Divider orientation="vertical" h="40px" />
+        {/* Main content - centered */}
-
+        <Flex 
-        {/* Level */}
+          justify="center" 
-        <Box textAlign="center" minW="80px">
+          align="center" 
-          <Text fontSize="sm" fontWeight="bold">Level</Text>
+          wrap="nowrap"
-          <Text fontSize="md">{playerLevel}</Text>
+          gap={4}
-        </Box>
+          w="full"
-
+        >
-        {/* Progress to next level */}
+          {/* Points */}
-        <Tooltip label={`${pointsPerSecond.toFixed(1)}/${nextLevelPPS} PPS`}>
+          <Box textAlign="center" minW="120px">
-          <Box flex="1" maxW="300px">
+            <Text fontSize="sm" fontWeight="bold">Points</Text>
-            <Flex justify="space-between" mb={1}>
+            <Text fontSize="md" fontWeight="bold">{Math.floor(points)}</Text>
-              <Text fontSize="xs" color="gray.400">Level {playerLevel}</Text>
+            <Text fontSize="xs" color="green.400">+{pointsPerSecond.toFixed(1)}/s</Text>
-              <Text fontSize="xs" color="gray.400">Level {playerLevel + 1}</Text>
-            </Flex>
-            <Progress 
-              value={progress} 
-              colorScheme="green"
-              size="sm"
-              borderRadius="full"
-              bg="gray.700"
-            />
           </Box>
-        </Tooltip>
+
+          <Divider orientation="vertical" h="40px" />
+
+          {/* Click Power */}
+          <Box textAlign="center" minW="120px">
+            <Text fontSize="sm" fontWeight="bold">Click Power</Text>
+            <Text fontSize="md">{actualClickPower}</Text>
+            {activeMultipliers.length > 0 && (
+              <Text fontSize="xs" color="yellow.400">{totalMultiplier}x Active</Text>
+            )}
+          </Box>
+
+          <Divider orientation="vertical" h="40px" />
+
+          {/* Level */}
+          <Box textAlign="center" minW="80px">
+            <Text fontSize="sm" fontWeight="bold">Level</Text>
+            <Text fontSize="md">{playerLevel}</Text>
+          </Box>
+
+          {/* Progress to next level */}
+          <Tooltip label={`${pointsPerSecond.toFixed(1)}/${nextLevelPPS} PPS`}>
+            <Box flex="1" maxW="300px">
+              <Flex justify="space-between" mb={1}>
+                <Text fontSize="xs" color="gray.400">Level {playerLevel}</Text>
+                <Text fontSize="xs" color="gray.400">Level {playerLevel + 1}</Text>
+              </Flex>
+              <Progress 
+                value={progress} 
+                colorScheme="green"
+                size="sm"
+                borderRadius="full"
+                bg="gray.700"
+              />
+            </Box>
+          </Tooltip>
+        </Flex>
       </Flex>
     </Box>
   )