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;

frontend/src/components/FogImages.tsx

@@ -0,0 +1,9 @@
+function FogImages() {
+    return <>
+        <img className='fog-left' src={`/fog/fog2.png`} alt={`fog1.png`} />
+        <img className='fog-right' src={`/fog/fog2.png`} alt={`fog1.png`} />
+        <img className='fog-middle' src={`/fog/fog4.png`} alt={`fog4.png`} />
+    </>
+}
+
+export default FogImages;

frontend/src/components/HitElems.tsx

@@ -0,0 +1,17 @@
+import { faBurst, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CSSProperties } from 'react';
+import { HitType } from '../interfaces';
+
+function HitElems({hits}: {hits: HitType[]}) {
+
+    return <>
+        {hits.map(({hit, x, y}, i) => 
+            <div key={i} className='hit-svg' style={{'--x': x, '--y': y} as CSSProperties}>
+                <FontAwesomeIcon icon={hit ? faBurst : faXmark} />
+            </div>
+        )}
+    </>
+}
+
+export default HitElems;

frontend/src/components/Labeling.tsx

@@ -0,0 +1,29 @@
+import { CSSProperties } from 'react'
+import { fieldIndex } from '../helpers';
+import { FieldType } from '../interfaces';
+
+function Labeling({count}: {count: number}) {
+    let elems: (FieldType & {
+        orientation: string
+    })[] = [];
+    for (let x = 0; x < count; x++) {
+        elems.push(
+            // Up
+            {field: String.fromCharCode(65+x), x: x+2, y: 1, orientation: 'up'},
+            // Left
+            {field: (x+1).toString(), x: 1, y: x+2, orientation: 'left'},
+            // Bottom
+            {field: String.fromCharCode(65+x), x: x+2, y: count+2, orientation: 'bottom'},
+            // Right
+            {field: (x+1).toString(), x: count+2, y: x+2, orientation: 'right'}
+        );
+    }
+    elems = elems.sort((a, b) => fieldIndex(count, a.x, a.y)-fieldIndex(count, b.x, b.y));
+    return <>
+        {elems.map(({field, x, y, orientation}, i) =>
+            <span key={i} className={`label ${orientation} ${field}`} style={{'--x': x, '--y': y} as CSSProperties}>{field}</span>
+        )}
+    </>
+}
+
+export default Labeling;

frontend/src/components/Ships.tsx

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react'
+
+function Ships() {
+    let shipIndexes: number[] = [];
+
+    for (let i = 1; i <= 6; i++) {
+      shipIndexes.push(i);
+    }
+
+    return <>
+        {shipIndexes.map(i =>
+            <div key={i} className={`ship s${i}`} style={{'--x': i+3} as CSSProperties}>
+                <img src={`/svgs/${i}.svg`} alt={`${i}.svg`}/>
+            </div>
+        )}
+    </>
+}
+
+export default Ships;