Initial imperative version

2020-12-29 15:20:27 +01:00
commit 3da220c0cf
12 changed files with 595 additions and 0 deletions
@@ -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);
@@ -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);
@@ -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);
@@ -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>
@@ -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")
+);
@@ -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;
@@ -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;