Create grid component and test the render results

src/components/grid/grid.module.scss

@@ -0,0 +1,5 @@
+.containerWrapper {
+  display: grid;
+  width: max-content;
+  padding: 1vw;
+}

src/components/grid/grid.module.scss.d.ts

@@ -0,0 +1,14 @@
+// autogenerated by typings-for-css-modules-loader.
+// Please do not change this file!
+declare namespace GridModuleScssNamespace {
+  export interface IGridModuleScss {
+    containerWrapper: string;
+  }
+}
+
+declare const GridModuleScssModule: GridModuleScssNamespace.IGridModuleScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: GridModuleScssNamespace.IGridModuleScss;
+};
+
+export = GridModuleScssModule;

src/components/grid/grid.test.tsx

@@ -0,0 +1,32 @@
+import { GridComponent } from "@components/grid/grid";
+import { Field } from "@helpers/field";
+import { render } from "@testing-library/react";
+import React from "react";
+
+const MockFieldData: Field = [
+  [9, 2, 9, 1, 0, 0, 1, 1, 1, 1, 1, 1],
+  [1, 2, 2, 2, 1, 0, 1, 9, 1, 1, 9, 1],
+  [0, 0, 1, 9, 10, 0, 2, 2, 2, 1, 1, 1],
+  [0, 0, 10, 10, 1, 0, 1, 9, 1, 2, 2, 2],
+  [0, 1, 1, 2, 2, 9, 1, 1, 1, 0, 0, 0],
+  [0, 1, 9, 3, 9, 2, 10, 0, 0, 2, 1, 1],
+  [0, 2, 2, 4, 9, 2, 10, 1, 1, 1, 9, 1],
+  [0, 1, 9, 2, 1, 1, 1, 9, 1, 2, 2, 2],
+  [0, 1, 10, 10, 0, 0, 1, 1, 1, 1, 9, 1],
+  [0, 1, 10, 10, 0, 0, 1, 1, 1, 1, 9, 1],
+  [0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 9, 1],
+  [0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 9, 1],
+];
+
+describe("Grid Component rendering test", function () {
+  it("should render the grid correctly", function () {
+    const internalProps = {
+      onClick: jest.fn(),
+      onContextMenu: jest.fn(),
+    };
+
+    const { asFragment } = render(<GridComponent children={MockFieldData} {...internalProps} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/grid/grid.tsx

@@ -0,0 +1,48 @@
+import { CellComponent } from "@components/grid/cell/cell";
+import { Coordinates, Field } from "@helpers/field";
+import React, { FunctionComponent, PropsWithChildren } from "react";
+
+import styles from "./grid.module.scss";
+
+export interface GridProps {
+  /**
+   * Field data
+   */
+  children: Field;
+  /**
+   * onClick handler
+   */
+  onClick: (coords: Coordinates) => void;
+  /**
+   * onContextMenu handler
+   */
+  onContextMenu: (coords: Coordinates) => void;
+}
+
+export const GridComponent: FunctionComponent<GridProps> = ({ children, ...restProps }) => {
+  return (
+    <WrapperContainer size={children.length} role="grid">
+      {children.map((row, y) =>
+        row.map((cell, x) => {
+          return <CellComponent key={`${y}_${x}_${cell}`} children={cell} coords={[y, x]} {...restProps} />;
+        })
+      )}
+    </WrapperContainer>
+  );
+};
+
+const WrapperContainer: FunctionComponent<PropsWithChildren<{ size: number; role: string }>> = ({
+  children,
+  size,
+  role,
+}) => (
+  <div
+    className={styles.containerWrapper}
+    style={{
+      gridTemplateColumns: `repeat(${size}, auto)`,
+    }}
+    role={role}
+  >
+    {children}
+  </div>
+);

src/components/grid/index.ts

@@ -0,0 +1,2 @@
+export * from "./cell/cell";
+export * from "./grid";

src/hooks/useMouseDown/index.tsx

@@ -6,6 +6,8 @@ export type SetMouseUpStatus = () => void;
 export const useMouseDown = (): [boolean, SetMouseDownStatus, SetMouseUpStatus] => {
   const [mouseDown, setMouseDown] = useState(false);
 
+  // useDebugValue(`mouseDown: ${mouseDown}`, (str) => `${str} ${new Date().toDateString()}`);
+
   const onMouseDown = useCallback(
     () => setMouseDown(true),
     // Stryker disable next-line ArrayDeclaration

src/index.tsx

@@ -1,19 +1,36 @@
 import "@styles/styles.scss";
 import "normalize.css/normalize.css";
 
-import { CellComponent } from "@components/grid/cell/cell";
-import { ScoreBoard } from "@components/scoreboard";
-// import { App } from "@components/app";
-import { Top } from "@components/top-section";
+import { GridComponent } from "@components/grid";
+import { Field } from "@helpers/field";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
+// import { CellComponent } from "@components/grid/cell/cell";
+// import { ScoreBoard } from "@components/scoreboard";
+// import { App } from "@components/app";
+// import { Top } from "@components/top-section";
+
 // import Segment from "react-segment-analytics";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
 
-// @ts-ignore
+const MockFieldData: Field = [
+  [9, 2, 9, 1, 0, 0, 1, 1, 1, 1, 1, 1],
+  [1, 2, 2, 2, 1, 0, 1, 9, 1, 1, 9, 1],
+  [0, 0, 1, 9, 10, 0, 2, 2, 2, 1, 1, 1],
+  [0, 0, 10, 10, 1, 0, 1, 9, 1, 2, 2, 2],
+  [0, 1, 1, 2, 2, 9, 1, 1, 1, 0, 0, 0],
+  [0, 1, 9, 3, 9, 2, 10, 0, 0, 2, 1, 1],
+  [0, 2, 2, 4, 9, 2, 10, 1, 1, 1, 9, 1],
+  [0, 1, 9, 2, 1, 1, 1, 9, 1, 2, 2, 2],
+  [0, 1, 10, 10, 0, 0, 1, 1, 1, 1, 9, 1],
+  [0, 1, 10, 10, 0, 0, 1, 1, 1, 1, 9, 1],
+  [0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 9, 1],
+  [0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 9, 1],
+];
+
 root.render(
   <React.StrictMode>
     {/*<Segment writeKey={process.env.SEGMENT_WRITE_KEY as string}>*/}
@@ -23,7 +40,8 @@ root.render(
       {/*  Minesweeper*/}
       {/*</Top>*/}
       {/*<ScoreBoard time="000" onReset={() => null} levels={["beginner", "intermediate", "expert"]} mines="010" />*/}
-      <CellComponent coords={[1, 1]} children={10} onContextMenu={() => null} onClick={() => null} />
+      {/*<CellComponent coords={[1, 1]} children={10} onContextMenu={() => null} onClick={() => null} />*/}
+      <GridComponent children={MockFieldData} onContextMenu={() => null} onClick={() => null} />
     </>
     {/*</Segment>*/}
   </React.StrictMode>