64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from './components/CustomTabs'
|
|
import { useGameTick } from './hooks/useGameTick'
|
|
import Field from './components/Field'
|
|
import Warehouse from './components/Warehouse'
|
|
import Market from './components/Market'
|
|
import Temple from './components/Temple'
|
|
import { ActionCooldown } from './components/ActionCooldown'
|
|
import { useSaveSystem } from './store/useSaveSystem'
|
|
import { Console } from './components/Console'
|
|
|
|
const appContainerStyle: React.CSSProperties = {
|
|
maxWidth: '1200px',
|
|
margin: '0 auto',
|
|
padding: '2rem',
|
|
}
|
|
|
|
const tabsListStyles: React.CSSProperties = {
|
|
display: 'grid',
|
|
width: '100%',
|
|
gridTemplateColumns: 'repeat(4, 1fr)',
|
|
}
|
|
|
|
function App() {
|
|
useGameTick()
|
|
useSaveSystem()
|
|
|
|
return (
|
|
<div>
|
|
<ActionCooldown />
|
|
<div style={appContainerStyle}>
|
|
<Tabs defaultValue="fields">
|
|
<TabsList style={tabsListStyles}>
|
|
<TabsTrigger value="fields">Fields</TabsTrigger>
|
|
<TabsTrigger value="warehouse">Warehouse</TabsTrigger>
|
|
<TabsTrigger value="market">Market</TabsTrigger>
|
|
<TabsTrigger value="temple">Temple</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="fields">
|
|
<Field />
|
|
</TabsContent>
|
|
<TabsContent value="warehouse">
|
|
<Warehouse />
|
|
</TabsContent>
|
|
<TabsContent value="market">
|
|
<Market />
|
|
</TabsContent>
|
|
<TabsContent value="temple">
|
|
<Temple />
|
|
</TabsContent>
|
|
</Tabs>
|
|
<Console />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|