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 { borderCN, cornerCN, fieldIndex, isHit } from '../helpers';
import { HitDispatchType, HitType, TargetPreviewType, TargetType } from '../interfaces'; 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: { let tilesProperties: {
key: number, key: number,
isGameTile: boolean, isGameTile: boolean,
@ -11,33 +11,33 @@ function BorderTiles({count, actions: {setTarget, setTargetPreview, hits, Dispat
y: number y: number
}[] = []; }[] = [];
for (let y = 0; y < count+2; y++) { for (let y = 0; y < count + 2; y++) {
for (let x = 0; x < count+2; x++) { for (let x = 0; x < count + 2; x++) {
const key = fieldIndex(count, x, y); const key = fieldIndex(count, x, y);
const cornerReslt = cornerCN(count, x, y); const cornerReslt = cornerCN(count, x, y);
const borderType = cornerReslt ? cornerReslt : borderCN(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']; const classNames = ['border-tile'];
if (borderType) if (borderType)
classNames.push('edge', borderType); classNames.push('edge', borderType);
if (isGameTile) if (isGameTile)
classNames.push('game-tile'); classNames.push('game-tile');
const classNameString = classNames.join(' ') 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 <> return <>
{tilesProperties.map(({key, classNameString, isGameTile, x, y}) => { {tilesProperties.map(({ key, classNameString, isGameTile, x, y }) => {
return <div return <div
key={key} key={key}
className={classNameString} className={classNameString}
style={{'--x': x, '--y': y} as CSSProperties} style={{ '--x': x, '--y': y } as CSSProperties}
onClick={() => { onClick={() => {
if (!isGameTile && !isHit(hits, x, y).length) if (!isGameTile && !isHit(hits, x, y).length)
return; return;
setTarget(t => { setTarget(t => {
if (t.x === x && t.y === y) { 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 }; return { show: false, x, y };
} else { } else {
return { show: true, x, y }; 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> ></div>
})} })}
</> </>