47 lines
No EOL
1.3 KiB
TypeScript
47 lines
No EOL
1.3 KiB
TypeScript
import { CSSProperties } from 'react'
|
|
// import Bluetooth from './Bluetooth'
|
|
import BorderTiles from './BorderTiles'
|
|
import EventBar from './EventBar'
|
|
// import FogImages from './FogImages'
|
|
import HitElems from './HitElems'
|
|
import Labeling from './Labeling'
|
|
import Ships from './Ships'
|
|
import useGameEvent from '../lib/hooks/useGameEvent'
|
|
import Targets from './Targets'
|
|
|
|
function Gamefield() {
|
|
|
|
const count = 12
|
|
const {
|
|
pointersProps,
|
|
targetsProps,
|
|
tilesProps,
|
|
hits
|
|
} = useGameEvent(count)
|
|
|
|
return (
|
|
<div id='gamefield'>
|
|
{/* <Bluetooth /> */}
|
|
<div id="game-frame" style={{ '--i': count } as CSSProperties}>
|
|
{/* Bordes */}
|
|
<BorderTiles props={tilesProps} />
|
|
|
|
{/* Collumn lettes and row numbers */}
|
|
<Labeling count={count} />
|
|
|
|
{/* Ships */}
|
|
<Ships />
|
|
|
|
<HitElems hits={hits} />
|
|
|
|
{/* Fog images */}
|
|
{/* <FogImages /> */}
|
|
<Targets props={pointersProps} />
|
|
{/* <span id='dev-debug' style={{gridArea: '1 / 12 / 1 / 15', backgroundColor: 'red', zIndex: 3} as CSSProperties}>Debug</span> */}
|
|
</div>
|
|
<EventBar props={targetsProps} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Gamefield |