// import Bluetooth from './Bluetooth'
// import FogImages from './FogImages'
import Labeling from "./Labeling"
import Ships from "./Ships"
import useGameEvent from "@lib/hooks/useGameEvent"
import { CSSProperties } from "react"

function Gamefield() {
  const count = 12
  const { BorderTiles, HitElems, Targets, EventBar } = useGameEvent(count)

  return (
    <div id="gamefield">
      {/* <Bluetooth /> */}
      <div id="game-frame" style={{ "--i": count } as CSSProperties}>
        {/* Bordes */}
        <BorderTiles />

        {/* Collumn lettes and row numbers */}
        <Labeling count={count} />

        {/* Ships */}
        <Ships />

        <HitElems />

        {/* Fog images */}
        {/* <FogImages /> */}
        <Targets />
        {/* <span id='dev-debug' style={{gridArea: '1 / 12 / 1 / 15', backgroundColor: 'red', zIndex: 3} as CSSProperties}>Debug</span> */}
      </div>
      <EventBar />
    </div>
  )
}

export default Gamefield
