a

src/components/BuildingButton.tsx

@@ -6,7 +6,9 @@ import {
   Badge,
   Tooltip,
   HStack,
-  Image
+  Image,
+  Flex,
+  AspectRatio
 } from '@chakra-ui/react'
 import { useGameStore } from '../store/gameStore'
 
@@ -92,30 +94,51 @@ export function BuildingButton({
       borderColor="gray.600"
     >
       <VStack align="stretch" spacing={2}>
-        <Box display="flex" justifyContent="space-between" alignItems="center">
+        {/* Image with overlapping title and stats */}
-          <Text fontWeight="bold">{title}</Text>
+        <Box position="relative">
-          <HStack>
+          <AspectRatio ratio={1} w="100%">
-            <Text>Owned: {owned}</Text>
+            <Box 
-            <Text>Level: {level}</Text>
+              borderRadius="md" 
-          </HStack>
+              overflow="hidden"
-        </Box>
+            >
-        
+              <Image 
-        {/* Add the building image */}
+                src={buildingImages[buildingType as keyof typeof buildingImages]} 
-        <Box 
+                alt={title}
-          display="flex" 
+                objectFit="cover"
-          justifyContent="center" 
+                w="100%"
-          bg="gray.800" 
+                h="100%"
-          borderRadius="md" 
+              />
-          p={2}
+            </Box>
-          height="120px"
+          </AspectRatio>
-          overflow="hidden"
+          
-        >
+          {/* Overlay for title */}
-          <Image 
+          <Box 
-            src={buildingImages[buildingType as keyof typeof buildingImages]} 
+            position="absolute" 
-            alt={title}
+            top="0" 
-            objectFit="contain"
+            left="0" 
-            maxHeight="100%"
+            p={2} 
-          />
+            bg="blackAlpha.700"
+            borderTopLeftRadius="md"
+            borderBottomRightRadius="md"
+          >
+            <Text fontWeight="bold" fontSize="md">{title}</Text>
+          </Box>
+          
+          {/* Overlay for owned and level */}
+          <Box 
+            position="absolute" 
+            bottom="0" 
+            right="0" 
+            p={2} 
+            bg="blackAlpha.700"
+            borderTopLeftRadius="md"
+            borderBottomRightRadius="md"
+          >
+            <HStack spacing={3}>
+              <Text fontSize="sm">Owned: {owned}</Text>
+              <Text fontSize="sm">Level: {level}</Text>
+            </HStack>
+          </Box>
         </Box>
         
         <Text fontSize="sm" color="gray.400">{description}</Text>