78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import React, { useState, useEffect } 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'
|
|
import { GodModal } from './components/GodModal'
|
|
|
|
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()
|
|
const [isGodModalOpen, setIsGodModalOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleKeyPress = (event: KeyboardEvent) => {
|
|
if (event.key.toLowerCase() === 'g') {
|
|
setIsGodModalOpen(prev => !prev)
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', handleKeyPress)
|
|
return () => window.removeEventListener('keydown', handleKeyPress)
|
|
}, [])
|
|
|
|
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>
|
|
{isGodModalOpen && <GodModal onClose={() => setIsGodModalOpen(false)} />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|