Initial imperative version

src/components/Board.tsx

@@ -0,0 +1,81 @@
+import React, { FC } from "react";
+import { connect } from "react-redux";
+import styled from "styled-components";
+import { AppDispatch, AppState, CellValue, Coordinate, dig } from "../store";
+
+interface StateProps {
+  size: number;
+  board: CellValue[];
+  digs: Record<number, number[]>;
+}
+
+interface ActionProps {
+  dig(coordinate: Coordinate): void;
+}
+
+type Props = ActionProps & StateProps;
+
+const Cell = styled.div`
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  ${Cell} {
+    border-left: 1px solid silver;
+    border-top: 1px solid silver;
+
+    &:nth-last-child(1) {
+      border-right: 1px solid silver;
+    }
+  }
+  &:nth-last-child(1) {
+    ${Cell} {
+      border-bottom: 1px solid silver;
+    }
+  }
+`;
+
+const Board: FC<Props> = ({ dig, digs, board, size }) => {
+  return (
+    <>
+      {[...Array(size).keys()].map((row) => (
+        <Row key={`row-${row}`} id={`row-${row}`}>
+          {[...Array(size).keys()].map((col) => (
+            <Cell
+              id={`row-${row}-col-${col}`}
+              key={`row-${row}-col-${col}`}
+              onClick={() => {
+                dig({ row, col });
+              }}
+            >
+              {/*digs[row]?.includes(col) && board[row * size + col][0] */}
+              {digs[row]?.includes(col)
+                ? "D"
+                : board[row * size + col].toString()}
+            </Cell>
+          ))}
+        </Row>
+      ))}
+    </>
+  );
+};
+
+const mapStateToProps = (state: AppState): StateProps => ({
+  size: state.size,
+  board: state.board,
+  digs: state.digs,
+});
+
+const mapDispatchToProps = (dispatch: AppDispatch): ActionProps => ({
+  dig: (coordinate: Coordinate) => dispatch(dig(coordinate)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Board);

src/components/StartGame.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useState } from "react";
+import { connect } from "react-redux";
+import { AppDispatch, AppState, startGame } from "../store";
+
+interface StateProps {
+  size: number;
+}
+
+interface ActionProps {
+  startGame(size: number): void;
+}
+
+type Props = ActionProps & StateProps;
+
+const StartGame: FC<Props> = ({ startGame, size }) => {
+  const [userSize, setUserSize] = useState(size);
+  return (
+    <>
+      <label htmlFor="size">Size:</label>
+      <input
+        type="number"
+        name="size"
+        value={userSize}
+        onChange={(e) => setUserSize(parseInt(e.target.value, 10))}
+      />
+      <button onClick={() => startGame(userSize)}>Start</button>
+    </>
+  );
+};
+
+const mapStateToProps = (state: AppState): StateProps => ({
+  size: state.size,
+});
+
+const mapDispatchToProps = (dispatch: AppDispatch): ActionProps => ({
+  startGame: (size: number) => dispatch(startGame(size)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(StartGame);