aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Format document

Browse source
This commit is contained in:
aronmal 2023-01-07 13:53:39 +01:00
parent 0cc0c69d7e
commit f2fd6ca268
Signed by: aronmal
GPG key ID: 816B7707426FC612
1 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
leaky-ships/components/BorderTiles.tsx
View file

@ -2,7 +2,7 @@ import { CSSProperties, Dispatch, SetStateAction } from 'react';
import { borderCN, cornerCN, fieldIndex, isHit } from '../helpers';
import { HitDispatchType, HitType, TargetPreviewType, TargetType } from '../interfaces';
function BorderTiles({count, actions: {setTarget, setTargetPreview, hits, DispatchHits}}: {count: number, actions: {setTarget: Dispatch<SetStateAction<TargetType>>, setTargetPreview: Dispatch<SetStateAction<TargetPreviewType>>, hits: HitType[], DispatchHits: Dispatch<HitDispatchType>}}) {
function BorderTiles({ count, actions: { setTarget, setTargetPreview, hits, DispatchHits } }: { count: number, actions: { setTarget: Dispatch<SetStateAction<TargetType>>, setTargetPreview: Dispatch<SetStateAction<TargetPreviewType>>, hits: HitType[], DispatchHits: Dispatch<HitDispatchType> } }) {
let tilesProperties: {
key: number,
isGameTile: boolean,
@ -11,33 +11,33 @@ function BorderTiles({count, actions: {setTarget, setTargetPreview, hits, Dispat
y: number
}[] = [];
for (let y = 0; y < count+2; y++) {
for (let x = 0; x < count+2; x++) {
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 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})
tilesProperties.push({ key, classNameString, isGameTile, x: x + 1, y: y + 1 })
}
}
return <>
{tilesProperties.map(({key, classNameString, isGameTile, x, y}) => {
{tilesProperties.map(({ key, classNameString, isGameTile, x, y }) => {
return <div
key={key}
className={classNameString}
style={{'--x': x, '--y': y} as CSSProperties}
style={{ '--x': x, '--y': y } as CSSProperties}
onClick={() => {
if (!isGameTile && !isHit(hits, x, y).length)
return;
setTarget(t => {
if (t.x === x && t.y === y) {
DispatchHits({type: 'fireMissle', payload: {hit: (x+y)%2 !== 0, x, y}});
DispatchHits({ type: 'fireMissle', payload: { hit: (x + y) % 2 !== 0, x, y } });
return { show: false, x, y };
} else {
return { show: true, x, y };
@ -45,7 +45,7 @@ function BorderTiles({count, actions: {setTarget, setTargetPreview, hits, Dispat
});
}}
onMouseEnter={() => setTargetPreview(e => ({...e, newX: x, newY: y, shouldShow: isGameTile}))}
onMouseEnter={() => setTargetPreview(e => ({ ...e, newX: x, newY: y, shouldShow: isGameTile }))}
></div>
})}
</>