set up menu!

leeandher · Dec 7, 2018 · 093dc33 · 093dc33
1 parent 947a825
commit 093dc33
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 110 deletions.
diff --git a/src/actions/actionCreators.js b/src/actions/actionCreators.js
@@ -1,91 +1,85 @@
+import { makeRandomBoard } from "../helper";
+
 /* BOARD ACTIONS */
 
 // Randomize board
 export const randomizeBoard = (height, width) => {
-  const newBoard = [];
-  for (let i = 0; i < height; i++) {
-    const rowData = [];
-    for (let j = 0; j < width; j++) {
-      rowData.push(Math.round(Math.random()));
-    }
-    newBoard.push(rowData);
-  }
-
   return {
     type: "RANDOMIZE_BOARD",
-    newBoard
+    newBoard: makeRandomBoard(height, width)
   };
 };
 
 // Increment the board by one step
-export const incrementBoard = height => {
-  return {
-    type: "INCREMENT_BOARD",
-    height
-  };
-};
+export const incrementBoard = height => ({
+  type: "INCREMENT_BOARD",
+  height
+});
 
 // Clear the board
-export const clearBoard = () => {
-  return {
-    type: "CLEAR_BOARD"
-  };
-};
+export const clearBoard = () => ({
+  type: "CLEAR_BOARD"
+});
 
 // Load a preset board
-export const loadPreset = preset => {
-  return {
-    type: "LOAD_PRESET",
-    preset
-  };
-};
+export const loadPreset = preset => ({
+  type: "LOAD_PRESET",
+  preset
+});
 
-export const spawnCell = (row, col) => {
-  console.log(`row ${row}, col ${col}`);
-  return {
-    type: "SPAWN_CELL",
-    row,
-    col
-  };
-};
+export const spawnCell = (row, col) => ({
+  type: "SPAWN_CELL",
+  row,
+  col
+});
 
 /* GAME ACTIONS */
 
 // Play the game
-export const playGame = () => {
-  return {
-    type: "PLAY_GAME"
-  };
-};
+export const playGame = () => ({
+  type: "PLAY_GAME"
+});
 
 // Pause the game
-export const pauseGame = () => {
-  return {
-    type: "PAUSE_GAME"
-  };
-};
+export const pauseGame = () => ({
+  type: "PAUSE_GAME"
+});
 
 /* CONFIG ACTIONS */
 
-export const setSpeed = speed => {
-  return {
-    type: "SET_SPEED",
-    speed
-  };
-};
+export const setSpeed = speed => ({
+  type: "SET_SPEED",
+  speed
+});
 
 // Resize the board
 export const setSize = size => {
+  let width, height;
+  switch (size) {
+    case "small":
+      width = 20;
+      height = 15;
+      break;
+    case "medium":
+    default:
+      width = 35;
+      height = 20;
+      break;
+    case "large":
+      width = 50;
+      height = 35;
+      break;
+  }
   return {
     type: "SET_SIZE",
-    size
+    newBoard: makeRandomBoard(height, width),
+    width,
+    height
   };
 };
 
 // Change the theme of the board
-export const setTheme = theme => {
-  return {
-    type: "SET_THEME",
-    theme
-  };
-};
+export const setTheme = theme => ({
+  type: "SET_THEME",
+  theme
+});
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -13,7 +13,10 @@ class Main extends React.Component {
   };
 
   componentDidMount() {
-    // setInterval(() => this.props.incrementBoard(this.props.config.height), 100);
+    // setInterval(
+    //   () => this.props.incrementBoard(this.props.config.height),
+    //   this.props.config.speed
+    // );
   }
 
   render() {
@@ -25,20 +28,31 @@ class Main extends React.Component {
             collapsed={this.state.collapsed}
             onCollapse={collapsed => this.setState({ collapsed })}
           >
-            <Menu theme="dark">
+            <Menu theme={this.props.config.theme}>
               <Menu.Item>
                 <Icon type={this.state.isPlaying ? "pause" : "caret-right"} />
                 <span>{this.state.isPlaying ? "Pause" : "Play"}</span>
               </Menu.Item>
-              <Menu.Item>
+              <Menu.Item
+                onClick={() =>
+                  this.props.incrementBoard(this.props.config.height)
+                }
+              >
                 <Icon type="step-forward" />
                 <span>Increment</span>
               </Menu.Item>
-              <Menu.Item>
+              <Menu.Item onClick={() => this.props.clearBoard()}>
                 <Icon type="close" />
                 <span>Clear</span>
               </Menu.Item>
-              <Menu.Item>
+              <Menu.Item
+                onClick={() =>
+                  this.props.randomizeBoard(
+                    this.props.config.height,
+                    this.props.config.width
+                  )
+                }
+              >
                 <Icon type="redo" />
                 <span>Randomize</span>
               </Menu.Item>
@@ -51,9 +65,15 @@ class Main extends React.Component {
                   </React.Fragment>
                 }
               >
-                <Menu.Item>Slow</Menu.Item>
-                <Menu.Item>Medium</Menu.Item>
-                <Menu.Item>Fast</Menu.Item>
+                <Menu.Item onClick={() => this.props.setSpeed("slow")}>
+                  Slow
+                </Menu.Item>
+                <Menu.Item onClick={() => this.props.setSpeed("moderate")}>
+                  Medium
+                </Menu.Item>
+                <Menu.Item onClick={() => this.props.setSpeed("fast")}>
+                  Fast
+                </Menu.Item>
               </SubMenu>
 
               <SubMenu
@@ -64,9 +84,15 @@ class Main extends React.Component {
                   </React.Fragment>
                 }
               >
-                <Menu.Item>Slow</Menu.Item>
-                <Menu.Item>Medium</Menu.Item>
-                <Menu.Item>Fast</Menu.Item>
+                <Menu.Item onClick={() => this.props.setSize("small")}>
+                  Small (20 &times; 15)
+                </Menu.Item>
+                <Menu.Item onClick={() => this.props.setSize("medium")}>
+                  Medium (35 &times; 20)
+                </Menu.Item>
+                <Menu.Item onClick={() => this.props.setSize("large")}>
+                  Large (50 &times; 35)
+                </Menu.Item>
               </SubMenu>
 
               <SubMenu
@@ -77,9 +103,12 @@ class Main extends React.Component {
                   </React.Fragment>
                 }
               >
-                <Menu.Item>Slow</Menu.Item>
-                <Menu.Item>Medium</Menu.Item>
-                <Menu.Item>Fast</Menu.Item>
+                <Menu.Item onClick={() => this.props.setTheme("light")}>
+                  Light
+                </Menu.Item>
+                <Menu.Item onClick={() => this.props.setTheme("dark")}>
+                  Dark
+                </Menu.Item>
               </SubMenu>
 
               <SubMenu
@@ -90,14 +119,10 @@ class Main extends React.Component {
                   </React.Fragment>
                 }
               >
-                <Menu.Item>Slow</Menu.Item>
+                {/* <Menu.Item>Slow</Menu.Item>
                 <Menu.Item>Medium</Menu.Item>
-                <Menu.Item>Fast</Menu.Item>
+                <Menu.Item>Fast</Menu.Item> */}
               </SubMenu>
-
-              <Menu.Item />
-              <Menu.Item />
-              <Menu.Item />
             </Menu>
           </Sider>
           <Layout>

diff --git a/src/helper.js b/src/helper.js
@@ -0,0 +1,11 @@
+export const makeRandomBoard = (height, width) => {
+  const newBoard = [];
+  for (let i = 0; i < height; i++) {
+    const rowData = [];
+    for (let j = 0; j < width; j++) {
+      rowData.push(Math.round(Math.random()));
+    }
+    newBoard.push(rowData);
+  }
+  return newBoard;
+};
diff --git a/src/reducers/board.js b/src/reducers/board.js
@@ -1,7 +1,11 @@
 const board = (state = [], action) => {
   switch (action.type) {
+    // Generate a new board
     case "RANDOMIZE_BOARD":
+    case "SET_SIZE":
       return action.newBoard;
+
+    // Increment to the next generation of the board
     case "INCREMENT_BOARD":
       const newBoard = state.map(row => [...row]);
       state.forEach((row, i) => {
@@ -43,9 +47,13 @@ const board = (state = [], action) => {
       });
 
       return newBoard;
+
+    // Clear the board completely
     case "CLEAR_BOARD":
       // Kill every cell on the board
       return state.map(row => row.map(cell => 0));
+
+    // Load a given preset onto the board
     case "LOAD_PRESET":
       return state;
     case "SPAWN_CELL":

diff --git a/src/reducers/config.js b/src/reducers/config.js
@@ -1,50 +1,46 @@
 const config = (state = {}, action) => {
   switch (action.type) {
+    // Set the speed of the simulation
     case "SET_SPEED":
       let speed;
       switch (action.speed) {
-        case "fast":
-          speed = 100;
+        case "slow":
+          speed = 750;
           break;
         case "moderate":
         default:
           speed = 300;
           break;
-        case "slow":
-          speed = 750;
+        case "fast":
+          speed = 100;
           break;
       }
       return {
         ...state,
         speed
       };
+
+    // Set the size of the simulation space
     case "SET_SIZE":
-      let height, width;
-      switch (action.size) {
-        case "large":
-          height = 50;
-          width = 60;
-          break;
-        default:
-        case "medium":
-          height = 40;
-          width = 50;
-          break;
-        case "small":
-          height = 25;
-          width = 30;
-          break;
-      }
       return {
         ...state,
-        height,
-        width
+        height: action.height,
+        width: action.width
       };
+
+    // Set the theme of the simulation app
     case "SET_THEME":
       return {
         ...state,
         theme: action.theme
       };
+
+    case "LOAD_PRESET":
+      return {
+        ...state,
+        width: 50,
+        height: 35
+      };
     default:
       return state;
   }

diff --git a/src/reducers/game.js b/src/reducers/game.js
@@ -15,6 +15,13 @@ const game = (state = {}, action) => {
         ...state,
         generation: state.generation + 1
       };
+    case "RANDOMIZE_BOARD":
+    case "CLEAR_BOARD":
+    case "SET_SIZE":
+      return {
+        ...state,
+        generation: 0
+      };
     default:
       return state;
   }