Refactoring

frontend/src/components/BorderTiles.tsx

@@ -0,0 +1,45 @@
+import { CSSProperties } from 'react';
+import { borderCN, cornerCN, fieldIndex } from '../helpers';
+import { TargetPreviewType, TargetType } from '../interfaces';
+
+function BorderTiles({count, targets: {setTarget, setTargetPreview}}: {count: number, targets: {setTarget: React.Dispatch<React.SetStateAction<TargetType>>, setTargetPreview: React.Dispatch<React.SetStateAction<TargetPreviewType>>}}) {
+    let tilesProperties: {
+        key: number,
+        isGameTile: boolean,
+        classNameString: string,
+        x: number,
+        y: number
+    }[] = [];
+
+    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, y})
+        }
+    }
+    return <>
+        {tilesProperties.map(({key, classNameString, isGameTile, x, y}) => {
+            return <div
+                key={key}
+                className={classNameString}
+                style={{'--x': (x + 1), '--y': (y + 1)} as CSSProperties}
+                onClick={() => {
+                    if (isGameTile)
+                    setTarget({ show: true, x, y });
+                }}
+                onMouseEnter={() => setTargetPreview(e => ({...e, newX: x, newY: y, shouldShow: isGameTile}))}
+            ></div>
+        })}
+    </>
+}
+
+export default BorderTiles;