65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { Position, MouseCursor } from "../../interfaces/frontend"
|
|
import { borderCN, cornerCN, fieldIndex } from "@lib/utils/helpers"
|
|
import { CSSProperties, Dispatch, SetStateAction } from "react"
|
|
|
|
type TilesType = {
|
|
key: number
|
|
isGameTile: boolean
|
|
classNameString: string
|
|
x: number
|
|
y: number
|
|
}
|
|
|
|
function BorderTiles({
|
|
props: { count, settingTarget, setMouseCursor, setLastLeftTile },
|
|
}: {
|
|
props: {
|
|
count: number
|
|
settingTarget: (isGameTile: boolean, x: number, y: number) => void
|
|
setMouseCursor: Dispatch<SetStateAction<MouseCursor>>
|
|
setLastLeftTile: Dispatch<SetStateAction<Position>>
|
|
}
|
|
}) {
|
|
let tilesProperties: TilesType[] = []
|
|
|
|
for (let y = 0; y < count + 2; y++) {
|
|
for (let x = 0; x < count + 2; x++) {
|
|
const key = fieldIndex(count, x, y)
|
|
const cornerReslt = cornerCN(count, x, y)
|
|
const borderType = cornerReslt ? cornerReslt : borderCN(count, x, y)
|
|
const isGameTile = x > 0 && x < count + 1 && y > 0 && y < count + 1
|
|
const classNames = ["border-tile"]
|
|
if (borderType) classNames.push("edge", borderType)
|
|
if (isGameTile) classNames.push("game-tile")
|
|
const classNameString = classNames.join(" ")
|
|
tilesProperties.push({
|
|
key,
|
|
classNameString,
|
|
isGameTile,
|
|
x: x + 1,
|
|
y: y + 1,
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{tilesProperties.map(({ key, classNameString, isGameTile, x, y }) => {
|
|
return (
|
|
<div
|
|
key={key}
|
|
className={classNameString}
|
|
style={{ "--x": x, "--y": y } as CSSProperties}
|
|
onClick={() => settingTarget(isGameTile, x, y)}
|
|
onMouseEnter={() =>
|
|
setMouseCursor({ x, y, shouldShow: isGameTile })
|
|
}
|
|
onMouseLeave={() => setLastLeftTile({ x, y })}
|
|
></div>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default BorderTiles
|