Merge pull request #3697 from borisflagell/#3669

STANEK: FIX #3669 Clearing stanek grid using API could crash the page.

src/CotMG/ui/ActiveFragmentSummary.tsx

@@ -66,7 +66,7 @@ export function ActiveFragmentSummary(props: IProps): React.ReactElement {
           </TableRow>
           {summary.map((entry) => {
             return (
-              <TableRow>
+              <TableRow key={entry.type}>
                 <TableCell sx={{ borderBottom: "none", p: 0, m: 0 }}>
                   <Typography>
                     {entry.coordinate.map((coord) => {

src/CotMG/ui/DummyGrid.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { ActiveFragment } from "../ActiveFragment";
 import { DummyGift } from "../DummyGift";
 import { Grid } from "./Grid";
-import { calculateGrid, zeros } from "../Helper";
+import { zeros } from "../Helper";
 
 interface IProps {
   width: number;
@@ -13,7 +13,6 @@ interface IProps {
 
 export function DummyGrid(props: IProps): React.ReactElement {
   const gift = new DummyGift(props.width, props.height, props.fragments);
-  const activeGrid = calculateGrid(gift);
   const ghostGrid = zeros([props.width, props.height]);
   return (
     <Box>
@@ -21,7 +20,6 @@ export function DummyGrid(props: IProps): React.ReactElement {
         <Grid
           width={props.width}
           height={props.height}
-          activeGrid={activeGrid}
           ghostGrid={ghostGrid}
           gift={gift}
           enter={() => undefined}

src/CotMG/ui/Grid.tsx

@@ -1,13 +1,13 @@
 import { TableBody, TableRow } from "@mui/material";
 import * as React from "react";
 import { ActiveFragment } from "../ActiveFragment";
+import { calculateGrid } from "../Helper";
 import { IStaneksGift } from "../IStaneksGift";
 import { Cell } from "./Cell";
 
 interface IProps {
   width: number;
   height: number;
-  activeGrid: number[][];
   ghostGrid: number[][];
   gift: IStaneksGift;
   enter(i: number, j: number): void;
@@ -32,11 +32,13 @@ function randomColor(fragment: ActiveFragment): string {
 }
 
 export function Grid(props: IProps): React.ReactElement {
+  const activeGrid = calculateGrid(props.gift);
+
   function color(worldX: number, worldY: number): string {
-    if (props.ghostGrid[worldX][worldY] && props.activeGrid[worldX][worldY]) return "red";
+    if (props.ghostGrid[worldX][worldY] && activeGrid[worldX][worldY]) return "red";
     if (props.ghostGrid[worldX][worldY]) return "white";
 
-    if (props.activeGrid[worldX][worldY]) {
+    if (activeGrid[worldX][worldY]) {
       const fragment = props.gift.fragmentAt(worldX, worldY);
       if (!fragment) throw new Error("ActiveFragment should not be null");
       return randomColor(fragment);

src/CotMG/ui/MainBoard.tsx

@@ -8,7 +8,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import { Table } from "../../ui/React/Table";
 import { Grid } from "./Grid";
-import { zeros, calculateGrid } from "../Helper";
+import { zeros } from "../Helper";
 import { ActiveFragmentSummary } from "./ActiveFragmentSummary";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
@@ -18,7 +18,6 @@ interface IProps {
 }
 
 export function MainBoard(props: IProps): React.ReactElement {
-  const [grid, setGrid] = React.useState(calculateGrid(props.gift));
   const [ghostGrid, setGhostGrid] = React.useState(zeros([props.gift.width(), props.gift.height()]));
   const [pos, setPos] = React.useState([0, 0]);
   const [rotation, setRotation] = React.useState(0);
@@ -54,12 +53,10 @@ export function MainBoard(props: IProps): React.ReactElement {
       if (!props.gift.canPlace(worldX, worldY, rotation, selectedFragment)) return;
       props.gift.place(worldX, worldY, rotation, selectedFragment);
     }
-    setGrid(calculateGrid(props.gift));
   }
 
   function clear(): void {
     props.gift.clear();
-    setGrid(zeros([props.gift.width(), props.gift.height()]));
   }
 
   function updateSelectedFragment(fragment: Fragment): void {
@@ -92,7 +89,6 @@ export function MainBoard(props: IProps): React.ReactElement {
           <Grid
             width={props.gift.width()}
             height={props.gift.height()}
-            activeGrid={grid}
             ghostGrid={ghostGrid}
             gift={props.gift}
             enter={(i, j) => moveGhost(i, j, rotation)}