Allow pressing 1-4 to select a tab.

src/App.tsx

@@ -31,12 +31,24 @@ function App() {
   useGameTick()
   useSaveSystem()
   const [isGodModalOpen, setIsGodModalOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState('fields')
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
       if (event.key.toLowerCase() === 'g') {
         setIsGodModalOpen(prev => !prev)
       }
+      // Handle number keys 1-4 for tab selection
+      const tabMap: { [key: string]: string } = {
+        '1': 'fields',
+        '2': 'warehouse',
+        '3': 'market',
+        '4': 'temple'
+      }
+      const tabValue = tabMap[event.key]
+      if (tabValue) {
+        setActiveTab(tabValue)
+      }
     }
 
     window.addEventListener('keydown', handleKeyPress)
@@ -47,12 +59,12 @@ function App() {
     <div>
       <ActionCooldown />
       <div style={appContainerStyle}>
-        <Tabs defaultValue="fields">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
           <TabsList style={tabsListStyles}>
-            <TabsTrigger value="fields">Fields</TabsTrigger>
-            <TabsTrigger value="warehouse">Warehouse</TabsTrigger>
-            <TabsTrigger value="market">Market</TabsTrigger>
-            <TabsTrigger value="temple">Temple</TabsTrigger>
+            <TabsTrigger value="fields">Fields (1)</TabsTrigger>
+            <TabsTrigger value="warehouse">Warehouse (2)</TabsTrigger>
+            <TabsTrigger value="market">Market (3)</TabsTrigger>
+            <TabsTrigger value="temple">Temple (4)</TabsTrigger>
           </TabsList>
           <TabsContent value="fields">
             <Field />

src/components/CustomTabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 export interface TabProps {
   value: string
@@ -6,7 +6,8 @@ export interface TabProps {
 }
 
 export interface TabsProps {
-  defaultValue: string
+  value: string
+  onValueChange: (value: string) => void
   children: React.ReactNode
 }
 
@@ -76,11 +77,9 @@ const TabsContext = React.createContext<{
   setValue: () => {},
 })
 
-export const Tabs: React.FC<TabsProps> = ({ defaultValue, children }) => {
-  const [value, setValue] = useState(defaultValue)
-
+export const Tabs: React.FC<TabsProps> = ({ value, onValueChange, children }) => {
   return (
-    <TabsContext.Provider value={{ value, setValue }}>
+    <TabsContext.Provider value={{ value, setValue: onValueChange }}>
       <div style={tabsContainerStyle}>{children}</div>
     </TabsContext.Provider>
   )