Remove inter-fragment borders in Stanek's gift ()

This commit is contained in:
Kelenius 2023-12-03 12:55:13 +03:00 committed by GitHub
parent 3b4cac5584
commit 76f0f3d6d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 2 deletions
src/CotMG/ui

@ -27,12 +27,22 @@ interface IProps {
onMouseEnter?: () => void;
onClick?: () => void;
color: string;
borderBottom?: number;
borderRight?: number;
borderTop?: number;
borderLeft?: number;
}
export function Cell(cellProps: IProps): React.ReactElement {
return (
<TableCell
style={{ backgroundColor: cellProps.color }}
style={{
backgroundColor: cellProps.color,
borderBottomWidth: cellProps.borderBottom,
borderRightWidth: cellProps.borderRight,
borderTopWidth: cellProps.borderTop,
borderLeftWidth: cellProps.borderLeft,
}}
onMouseEnter={cellProps.onMouseEnter}
onClick={cellProps.onClick}
></TableCell>

@ -46,13 +46,30 @@ export function Grid(props: IProps): React.ReactElement {
return "";
}
function borderWidth(worldX1: number, worldY1: number, worldX2: number, worldY2: number): number {
const fragment1 = props.gift.fragmentAt(worldX1, worldY1);
const fragment2 = props.gift.fragmentAt(worldX2, worldY2);
if (fragment1 === undefined) return 1;
if (fragment1 === fragment2) return 0;
return 1;
}
// switch the width/length to make axis consistent.
const elems = [];
for (let j = 0; j < props.height; j++) {
const cells = [];
for (let i = 0; i < props.width; i++) {
cells.push(
<Cell key={i} onMouseEnter={() => props.enter(i, j)} onClick={() => props.click(i, j)} color={color(i, j)} />,
<Cell
key={i}
onMouseEnter={() => props.enter(i, j)}
onClick={() => props.click(i, j)}
color={color(i, j)}
borderBottom={borderWidth(i, j, i, j + 1)}
borderRight={borderWidth(i, j, i + 1, j)}
borderTop={borderWidth(i, j, i, j - 1)}
borderLeft={borderWidth(i, j, i - 1, j)}
/>,
);
}
elems.push(<TableRow key={j}>{cells}</TableRow>);