menu fix and improved minesweeper

package.json

@@ -7,7 +7,7 @@
     "nanoid": "^2.0.1",
     "node-sass": "^4.11.0",
     "packard-belle": "github:padraigfl/packard-belle#0.3.3",
-    "pb-minesweeper": "1.0.1",
+    "pb-minesweeper": "1.0.3",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-rnd": "^9.1.2",

src/components/Minesweeper/Minesweeper.js

@@ -4,20 +4,39 @@ import { WindowProgram } from "packard-belle";
 import Minesweeper95 from "pb-minesweeper";
 
 import { minesweeper16 } from "../../icons";
-import buildMenu from "../../helpers/menuBuilder";
+import { helpOptions } from "../../helpers/menuBuilder";
 
 import Window from "../tools/Window";
 
 import "./_styles.scss";
 
+const difficulty = {
+  beginner: {
+    gridSize: [9, 9],
+    mines: 11
+  },
+  intermediate: {
+    gridSize: [15, 15],
+    mines: 30
+  },
+  expert: {
+    gridSize: [30, 15],
+    mines: 40
+  }
+};
+
 class Minesweeper extends Component {
   static defaultProps = {
     data: {}
   };
   state = {
-    gameId: Date.now()
+    gameId: Date.now(),
+    difficulty: "beginner"
   };
 
+  updateDifficulty = difficulty => () =>
+    this.setState({ difficulty, gameId: Date.now() });
+
   render() {
     const { props, state } = this;
     return (
@@ -29,16 +48,28 @@ class Minesweeper extends Component {
             { text: "needs 100% width height" },
             { text: "overflow control" }
           ]}
-          menuOptions={buildMenu({
-            ...props,
-            fileOptions: [
-              {
-                title: "Restart Game",
-                onClick: () => this.setState({ gameId: Date.now() })
-              }
-            ],
-            multiInstance: true
-          })}
+          menuOptions={[
+            {
+              title: "File",
+              options: [
+                {
+                  title: "New",
+                  onClick: () => this.setState({ gameId: Date.now() })
+                },
+                [
+                  ...Object.keys(difficulty).map(level => ({
+                    title: level[0].toUpperCase() + level.slice(1),
+                    onClick: this.updateDifficulty(level),
+                    className:
+                      this.state.difficulty === level ? "checked" : undefined
+                  })),
+                  { title: "Custom", isDisabled: true }
+                ],
+                { title: "Close", onClick: () => props.onClose(props) }
+              ]
+            },
+            helpOptions(props)
+          ]}
           className={cx("Minesweeper", props.className, {
             "Minesweeper--wrap": state.wrap,
             "Window--blocked": state.saveScreen
@@ -47,12 +78,15 @@ class Minesweeper extends Component {
           Component={WindowProgram}
           minHeight={150}
           minWidth={150}
-          initialHeight={200}
-          initialWidth={200}
+          initialHeight={150}
+          initialWidth={150}
           resizable={false}
           onMaximize={null}
         >
-          <Minesweeper95 key={this.state.gameId} />
+          <Minesweeper95
+            key={this.state.gameId}
+            {...difficulty[this.state.difficulty]}
+          />
         </Window>
       </>
     );

src/helpers/menuBuilder.js

@@ -10,6 +10,14 @@ const buildCustomOptions = rows =>
     []
   );
 
+export const helpOptions = props => ({
+  title: "Help",
+  options: [
+    [{ title: "Help Topics", isDisabled: true }],
+    { title: `About ${props.title}`, isDisabled: true }
+  ]
+});
+
 export const buildMenu = (props, customOptions = {}) => {
   const fileOptions = props.fileOptions || [];
   const onClose = [{ title: "Close", onClick: () => props.onClose(props) }];
@@ -26,15 +34,15 @@ export const buildMenu = (props, customOptions = {}) => {
       : [];
   const multiInstance = props.multiInstance
     ? [
-        {
-          title: "Open",
-          isDisabled: !props.onOpenSearch,
-          onClick: props.onOpenSearch
-        },
         {
           title: "New",
           onClick: () => props.onOpen(props, { new: true }),
           isDisabled: props.singleInstance
+        },
+        {
+          title: "Open...",
+          isDisabled: !props.onOpenSearch,
+          onClick: props.onOpenSearch
         }
       ]
     : [];
@@ -45,16 +53,10 @@ export const buildMenu = (props, customOptions = {}) => {
   return [
     {
       title: "File",
-      options: [...multiInstance, ...saveOptions, ...fileOptions, ...onClose]
+      options: [...multiInstance, saveOptions, ...fileOptions, onClose]
     },
     ...customElements,
-    {
-      title: "Help",
-      options: [
-        [{ title: "Help Topics", isDisabled: true }],
-        { title: `About ${props.title}`, isDisabled: true }
-      ]
-    }
+    helpOptions(props)
   ];
 };