Initial imperative version

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,241 @@
+module.exports = {
+  env: {
+    es2021: true,
+    node: true,
+    react: true,
+  },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "accessor-pairs": "error",
+    "array-bracket-newline": "error",
+    "array-bracket-spacing": "error",
+    "array-callback-return": "error",
+    "array-element-newline": 0,
+    "arrow-body-style": "error",
+    "arrow-parens": "error",
+    "arrow-spacing": "error",
+    "block-scoped-var": "error",
+    "block-spacing": "error",
+    "brace-style": "error",
+    "callback-return": "error",
+    camelcase: 0,
+    "capitalized-comments": 0,
+    "class-methods-use-this": "error",
+    "comma-dangle": 0,
+    "comma-spacing": "error",
+    "comma-style": "error",
+    complexity: "error",
+    "computed-property-spacing": "error",
+    "consistent-return": "error",
+    "consistent-this": "error",
+    curly: "error",
+    "default-case": "error",
+    "default-case-last": "error",
+    "default-param-last": "error",
+    "dot-location": "error",
+    "dot-notation": "error",
+    "eol-last": "error",
+    eqeqeq: "error",
+    "func-call-spacing": "error",
+    "func-name-matching": "error",
+    "func-names": "error",
+    "func-style": "error",
+    "function-call-argument-newline": 0,
+    "function-paren-newline": "error",
+    "generator-star-spacing": "error",
+    "global-require": "error",
+    "grouped-accessor-pairs": "error",
+    "guard-for-in": "error",
+    "handle-callback-err": "error",
+    "id-blacklist": "error",
+    "id-denylist": "error",
+    "id-length": "error",
+    "id-match": "error",
+    "implicit-arrow-linebreak": "error",
+    indent: ["error", 2],
+    "indent-legacy": ["error", 2],
+    "init-declarations": "error",
+    "jsx-quotes": "error",
+    "key-spacing": "error",
+    "keyword-spacing": "error",
+    "line-comment-position": "error",
+    "linebreak-style": "error",
+    "lines-around-comment": "error",
+    "lines-around-directive": "error",
+    "lines-between-class-members": "error",
+    "max-classes-per-file": "error",
+    "max-depth": "error",
+    "max-len": ["error", 180],
+    "max-lines": "error",
+    "max-lines-per-function": "error",
+    "max-nested-callbacks": "error",
+    "max-params": "error",
+    "max-statements": 0,
+    "max-statements-per-line": "error",
+    "multiline-comment-style": 0,
+    "multiline-ternary": "error",
+    "new-cap": 0,
+    "new-parens": "error",
+    "newline-after-var": 0,
+    "newline-before-return": 0,
+    "newline-per-chained-call": 0,
+    "no-alert": "error",
+    "no-array-constructor": "error",
+    "no-await-in-loop": "error",
+    "no-bitwise": "error",
+    "no-buffer-constructor": "error",
+    "no-caller": "error",
+    "no-catch-shadow": "error",
+    "no-confusing-arrow": "error",
+    "no-console": "warn",
+    "no-constructor-return": "error",
+    "no-continue": "error",
+    "no-div-regex": "error",
+    "no-duplicate-imports": "error",
+    "no-else-return": "error",
+    "no-empty-function": "error",
+    "no-eq-null": "error",
+    "no-eval": "error",
+    "no-extend-native": "error",
+    "no-extra-bind": "error",
+    "no-extra-label": "error",
+    "no-extra-parens": "error",
+    "no-floating-decimal": "error",
+    "no-implicit-coercion": "error",
+    "no-implicit-globals": "error",
+    "no-implied-eval": "error",
+    "no-inline-comments": "error",
+    "no-invalid-this": "error",
+    "no-iterator": "error",
+    "no-label-var": "error",
+    "no-labels": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "no-loop-func": "error",
+    "no-loss-of-precision": "error",
+    "no-magic-numbers": 0,
+    "no-mixed-operators": "error",
+    "no-mixed-requires": "error",
+    "no-multi-assign": "error",
+    "no-multi-spaces": "error",
+    "no-multi-str": "error",
+    "no-multiple-empty-lines": "error",
+    "no-native-reassign": "error",
+    "no-negated-condition": "error",
+    "no-negated-in-lhs": "error",
+    "no-nested-ternary": "error",
+    "no-new": "error",
+    "no-new-func": "error",
+    "no-new-object": "error",
+    "no-new-require": "error",
+    "no-new-wrappers": "error",
+    "no-octal-escape": "error",
+    "no-param-reassign": "error",
+    "no-path-concat": "error",
+    "no-plusplus": "error",
+    "no-process-env": "error",
+    "no-process-exit": "error",
+    "no-promise-executor-return": "error",
+    "no-proto": "error",
+    "no-restricted-exports": "error",
+    "no-restricted-globals": "error",
+    "no-restricted-imports": "error",
+    "no-restricted-modules": "error",
+    "no-restricted-properties": "error",
+    "no-restricted-syntax": "error",
+    "no-return-assign": "error",
+    "no-return-await": "error",
+    "no-script-url": "error",
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-shadow": "error",
+    "no-spaced-func": "error",
+    "no-sync": "error",
+    "no-tabs": "error",
+    "no-template-curly-in-string": "error",
+    "no-ternary": "error",
+    "no-throw-literal": "error",
+    "no-trailing-spaces": "error",
+    "no-undef-init": "error",
+    "no-undefined": 0,
+    "no-underscore-dangle": "error",
+    "no-unmodified-loop-condition": "error",
+    "no-unneeded-ternary": "error",
+    "no-unreachable-loop": "error",
+    "no-unused-expressions": "error",
+    "no-use-before-define": "error",
+    "no-useless-backreference": "error",
+    "no-useless-call": "error",
+    "no-useless-computed-key": "error",
+    "no-useless-concat": "error",
+    "no-useless-constructor": "error",
+    "no-useless-rename": "error",
+    "no-useless-return": "error",
+    "no-var": "error",
+    "no-void": "error",
+    "no-warning-comments": "error",
+    "no-whitespace-before-property": "error",
+    "nonblock-statement-body-position": "error",
+    "object-curly-newline": "error",
+    "object-curly-spacing": 0,
+    "object-property-newline": "error",
+    "object-shorthand": "error",
+    "one-var": 0,
+    "one-var-declaration-per-line": 0,
+    "operator-assignment": "error",
+    "operator-linebreak": "error",
+    "padded-blocks": 0,
+    "padding-line-between-statements": "error",
+    "prefer-arrow-callback": "error",
+    "prefer-const": "error",
+    "prefer-destructuring": "error",
+    "prefer-exponentiation-operator": "error",
+    "prefer-named-capture-group": "error",
+    "prefer-numeric-literals": "error",
+    "prefer-object-spread": "error",
+    "prefer-promise-reject-errors": "error",
+    "prefer-reflect": "error",
+    "prefer-regex-literals": "error",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "prefer-template": "error",
+    "quote-props": ["error", "as-needed"],
+    quotes: ["error", "single"],
+    radix: "error",
+    "require-atomic-updates": "error",
+    "require-await": "error",
+    "require-jsdoc": "error",
+    "require-unicode-regexp": "error",
+    "rest-spread-spacing": "error",
+    semi: "error",
+    "semi-spacing": "error",
+    "semi-style": "error",
+    "sort-imports": 0,
+    "sort-keys": 0,
+    "sort-vars": 0,
+    "space-before-blocks": "error",
+    "space-before-function-paren": "error",
+    "space-in-parens": "error",
+    "space-infix-ops": "error",
+    "space-unary-ops": "error",
+    "spaced-comment": "error",
+    strict: "error",
+    "switch-colon-spacing": "error",
+    "symbol-description": "error",
+    "template-curly-spacing": "error",
+    "template-tag-spacing": "error",
+    "unicode-bom": "error",
+    "valid-jsdoc": "error",
+    "vars-on-top": "error",
+    "wrap-iife": "error",
+    "wrap-regex": "error",
+    "yield-star-spacing": "error",
+    yoda: "error",
+  },
+};

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

package.json

@@ -0,0 +1,23 @@
+{
+  "scripts": {
+    "start": "parcel serve src/index.htm"
+  },
+  "devDependencies": {
+    "typescript": "^4.0.5",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
+    "@types/react-redux": "^7.1.14",
+    "eslint": "^7.13.0"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.5.0",
+    "assets": "^3.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "redux-devtools-extension": "^2.13.8",
+    "styled-components": "^5.2.1",
+    "tslib": "^2.0.3"
+  }
+}

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);

src/game.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from "react";
+import { connect } from "react-redux";
+import Board from "./components/Board";
+import StartGame from "./components/StartGame";
+import { AppState } from "./store";
+
+interface StateProps {
+  started: boolean;
+}
+
+type Props = StateProps;
+
+const Game: FC<Props> = ({ started }) => {
+  return (
+    <>
+      <h1>Minesweeper</h1>
+      {!started && <StartGame />}
+      {started && <Board />}
+    </>
+  );
+};
+
+const mapStateToProps = (state: AppState): StateProps => ({
+  started: state.started,
+});
+
+export default connect(mapStateToProps)(Game);

src/index.htm

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Minesweeper</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="index.tsx" ></script>
+</body>
+</html>

src/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { store } from "./store";
+import Game from "./game";
+import GlobalStyle from "./styling/GlobalStyle";
+
+ReactDOM.render(
+  <Provider store={store}>
+    <GlobalStyle />
+    <Game />
+  </Provider>,
+  document.getElementById("root")
+);

src/store.ts

@@ -0,0 +1,105 @@
+import { configureStore, createAction, createReducer } from "@reduxjs/toolkit";
+
+export type CellValue = "E" | "B" | number;
+export interface Coordinate {
+  row: number;
+  col: number;
+}
+
+export interface AppState {
+  started: boolean;
+  size: number;
+  board: CellValue[];
+  digs: Record<number, number[]>;
+}
+
+const initialBoardSize = 10;
+
+const random = (min: number, max: number): number =>
+  min + Math.floor(Math.random() * (max - min));
+
+const createBoard = (size: number, bombs: number = 5): CellValue[] => {
+  const board: CellValue[] = Array.from(new Array(size * size), () => "E");
+
+  let bombsLeft = bombs;
+  while (bombsLeft) {
+    const row = random(0, size);
+    const cell = random(0, size);
+    if (board[row * size + cell] === "B") {
+      continue;
+    }
+    board[row * size + cell] = "B";
+    bombsLeft -= 1;
+  }
+  board.forEach((cell, index) => {
+    if (cell === "B") {
+      return;
+    }
+    const row = Math.floor(index / size);
+    const col = index - row * size;
+    let bombCount = 0;
+    for (let y = Math.max(0, row - 1); y <= Math.min(row + 1, size); y += 1) {
+      for (let x = Math.max(0, col - 1); x <= Math.min(col + 1, size); x += 1) {
+        if (board[y * size + x] === "B") {
+          bombCount += 1;
+        }
+      }
+    }
+    board[index] = bombCount;
+  });
+
+  return board;
+};
+
+const sameCoordinate = (c1: Coordinate, c2: Coordinate): boolean =>
+  c1.col === c2.col && c1.row === c2.row;
+
+const dig = (
+  board: CellValue[],
+  digs: Record<number, number[]>,
+  { row, col }: Coordinate
+) => {
+  const size = Math.sqrt(board.length);
+  for (let y = Math.max(0, row - 1); y <= Math.min(row + 1, size); y += 1) {
+    for (let x = Math.max(0, col - 1); x <= Math.min(col + 1, size); x += 1) {
+      if (board[y * size + x] === "B") {
+      }
+    }
+  }
+};
+
+const defaultAppState: AppState = {
+  started: true,
+  size: initialBoardSize,
+  board: createBoard(initialBoardSize),
+  digs: [],
+};
+
+export const startGame = createAction<number>("START_GAME");
+export const dig = createAction<Coordinate>("DIG");
+
+const game = createReducer(defaultAppState, (builder) => {
+  builder
+    .addCase(startGame, (state, action) => ({
+      ...state,
+      started: true,
+      board: createBoard(action.payload),
+      size: action.payload,
+      digs: [],
+    }))
+    .addCase(dig, (state, { payload: { row, col } }) => {
+      return {
+        ...state,
+        digs: state.digs[row]?.includes(col)
+          ? state.digs
+          : { ...state.digs, [row]: [...(state.digs[row] || []), col] },
+      };
+    });
+});
+
+export const store = configureStore({
+  reducer: game,
+  devTools: true,
+});
+
+export type AppDispatch = typeof store.dispatch;

src/styling/GlobalStyle.ts

@@ -0,0 +1,11 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  html, body {
+    background: black;
+    color: white;
+    font-family: sans-serif;
+  }
+`;
+
+export default GlobalStyle;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["DOM", "ES2017"],
+    "jsx": "react",
+    "module": "esnext",
+    "sourceMap": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    // "baseUrl": "./src",
+    "importHelpers": true,
+    "typeRoots": ["./src/types", "./types", "./node_modules/@types"]
+  },
+  // "paths": {
+  //   "~/*": ["./src/*"]
+  // },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}