Refactoring

leaky-ships/components/Gamefield/BorderTiles.tsx

@@ -0,0 +1,65 @@
+import { CSSProperties, Dispatch, SetStateAction } from "react"
+import { borderCN, cornerCN, fieldIndex } from "../../lib/utils/helpers"
+import { Position, MouseCursor } from "../../interfaces/frontend"
+
+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