45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
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;
|