Fixes wall selecting functionality

Author: Shawn Toubeau

src/actions/mazeActions.ts

@@ -0,0 +1,16 @@
+export const MAKE_WALL = 'MAKE_WALL';
+export const MAKE_EMPTY = 'MAKE_EMPTY';
+
+export const makeWall = (coord: { x: number; y: number }) => {
+  return {
+    type: MAKE_WALL,
+    payload: coord
+  };
+};
+
+export const makeEmpty = (coord: { x: number; y: number }) => {
+  return {
+    type: MAKE_EMPTY,
+    payload: coord
+  };
+};

src/components/Maze/Maze.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import {Canvas, useThree} from 'react-three-fiber';
+import { Canvas, useThree } from 'react-three-fiber';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 // Components
@@ -10,51 +10,50 @@ import { MazeState } from '../../models/maze';
 import { SpaceState } from '../../models/space';
 
 import './Maze.scss';
-import { makeWall, makeEmpty } from '../../actions/mazeActions';
 
 const CameraController = () => {
   const { camera, gl } = useThree();
-  useEffect(
-    () => {
-      const controls = new OrbitControls(camera, gl.domElement);
-  
-      controls.minDistance = 5;
-      controls.maxDistance = 30;
-      controls.keyPanSpeed = 10;
-
-      //uncomment to limit orbit rotation
-      // controls.maxAzimuthAngle = (Math.PI / 360) * angle;
-      // controls.minAzimuthAngle = (Math.PI / 360) * -angle;
-
-      controls.maxPolarAngle = (Math.PI / 360) * 180 ;
-      
-      return () => {
-        controls.dispose();
-      };
-    },
-    [camera, gl]
-  );
+  useEffect(() => {
+    const controls = new OrbitControls(camera, gl.domElement);
+
+    controls.minDistance = 5;
+    controls.maxDistance = 30;
+    controls.keyPanSpeed = 10;
+
+    //uncomment to limit orbit rotation
+    // controls.maxAzimuthAngle = (Math.PI / 360) * angle;
+    // controls.minAzimuthAngle = (Math.PI / 360) * -angle;
+
+    controls.maxPolarAngle = (Math.PI / 360) * 180;
+
+    return () => {
+      controls.dispose();
+    };
+  }, [camera, gl]);
   return null;
 };
 
 const populateMaze = (
   mazeSize: { x: number; y: number },
   mazeInfo: { [key: number]: SpaceState[] },
-  makeWall: (data: {x: number; y: number}, type: string) => void,
-  makeEmpty: (data: {x: number; y: number}, type: string) => void
+  makeWall: (coord: { x: number; y: number }) => void,
+  makeEmpty: (coord: { x: number; y: number }) => void
 ) => {
-  console.log(mazeInfo);
   let list = [];
   let key = 0;
 
-  for (let j = 0; j < mazeSize.y; j++) {
-    for (let i = 0; i < mazeSize.x; i++) {
+  for (let y = 0; y < mazeSize.y; y++) {
+    for (let x = 0; x < mazeSize.x; x++) {
       key++;
-      console.log('visited: ' + mazeInfo[j][i].visited);
       list.push(
-        <Space type={mazeInfo[j][i].type} visited={mazeInfo[j][i].visited} path={mazeInfo[i][j].path} position={[i, 0, j]} key={key} 
-        onSetWall={() => makeWall( {x:i, y:j}, "empty" )}
-        onSetEmpty={() => makeEmpty( {x:i, y:j}, "wall" )}
+        <Space
+          type={mazeInfo[y][x].type}
+          visited={mazeInfo[y][x].visited}
+          path={mazeInfo[y][x].path}
+          position={[x, 0, y]}
+          key={key}
+          onSetWall={() => makeWall({ x, y })}
+          onSetEmpty={() => makeEmpty({ x, y })}
         />
       );
     }
@@ -63,24 +62,25 @@ const populateMaze = (
   return list;
 };
 
-interface Props extends MazeState {
-  makeWall: any;
-  makeEmpty: any;
+interface Props {
+  makeWall: (coord: { x: number; y: number }) => void;
+  makeEmpty: (coord: { x: number; y: number }) => void;
+  maze: MazeState;
 }
 
 const Maze: React.FC<Props> = props => {
-  const { mazeInfo } = props;
+  const { mazeInfo } = props.maze;
+
   const mazeSize = {
     x: mazeInfo[0].length,
     y: Object.keys(mazeInfo).length
   };
 
-
   return (
     <Canvas
       className="Maze"
       //uncomment for isomentric mode ;)
-      // orthographic 
+      // orthographic
       // camera = {{
       //   position: new Vector3(0,0,0),
       //   left: 100,
@@ -93,9 +93,9 @@ const Maze: React.FC<Props> = props => {
       <ambientLight />
 
       {/* background grid */}
-      <mesh rotation={[(Math.PI/2),0,0]} position={[0.5,-0.5,0.5]}>
-        <planeBufferGeometry attach="geometry" args={[100, 100, 100, 100]}/>
-        <meshPhongMaterial attach="material" wireframe={true} color={'grey'}/>
+      <mesh rotation={[Math.PI / 2, 0, 0]} position={[0.5, -0.5, 0.5]}>
+        <planeBufferGeometry attach="geometry" args={[100, 100, 100, 100]} />
+        <meshPhongMaterial attach="material" wireframe={true} color={'grey'} />
       </mesh>
       {populateMaze(mazeSize, mazeInfo, props.makeWall, props.makeEmpty)}
     </Canvas>

src/components/Space/Space.tsx

@@ -1,85 +1,87 @@
 import * as THREE from 'three';
-import React, { useRef, useState, MutableRefObject, Suspense, useEffect } from 'react';
+import React, {
+  useRef,
+  useState,
+  MutableRefObject,
+  Suspense,
+  useEffect
+} from 'react';
 import { useLoader, useFrame, stateContext } from 'react-three-fiber';
 import { Mesh, Vector3 } from 'three';
 
-// Interfaces
-import { SpaceState } from '../../models/space';
-
 const Wall: React.FC<BoxProps> = props => {
-
-    const texture = useLoader(
+  const texture = useLoader(
     THREE.TextureLoader,
     `${process.env.PUBLIC_URL}${props.type}.png`
   );
 
-  return(
+  return (
     <mesh>
       <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
       <meshPhongMaterial attach="material" map={texture} />
     </mesh>
   );
-}
+};
 
 const Empty: React.FC<BoxProps> = props => {
-
-  return(
-       <mesh position={new Vector3(0,-0.5,0)} rotation={[-(Math.PI/2),0,0]} >
-          <planeBufferGeometry attach="geometry" args={[1, 1, 1, 1]}/>
-          <meshPhongMaterial attach="material"color={ props.visited ? props.path ? 'red': 'yellow' : 'blue' }/>
-      </mesh>
+  return (
+    <mesh position={new Vector3(0, -0.5, 0)} rotation={[-(Math.PI / 2), 0, 0]}>
+      <planeBufferGeometry attach="geometry" args={[1, 1, 1, 1]} />
+      <meshPhongMaterial
+        attach="material"
+        color={props.visited ? (props.path ? 'red' : 'yellow') : 'blue'}
+      />
+    </mesh>
   );
-}
+};
 
 const GenericSpace: React.FC<BoxProps> = props => {
-
   const mesh: MutableRefObject<Mesh | undefined> = useRef();
 
   if (props.type === 'empty') {
-    return(
-      <Empty visited={props.visited} path={props.path}/>
-    );
-  }
-  else{
+    return <Empty visited={props.visited} path={props.path} />;
+  } else {
     return (
-      <Suspense fallback="none"> 
-        <Wall type={props.type}/>
+      <Suspense fallback="none">
+        <Wall type={props.type} />
       </Suspense>
     );
   }
 };
 
 const Space: React.FC<SpaceProps> = props => {
-
   const [hovered, setHover] = useState(false);
 
   const spaceClicked = () => {
-    if (props.type === "wall") {
-      console.log('wall space clicked');
-      props.onSetEmpty()
+    if (props.type === 'wall') {
+      props.onSetEmpty();
     }
-    if (props.type === "empty") {
-      console.log('empty space clicked');
-      props.onSetWall()
+    if (props.type === 'empty') {
+      props.onSetWall();
     }
-   
   };
-  
+
   return (
     <mesh
       position={props.position}
       onClick={e => spaceClicked()}
       onPointerOver={e => setHover(true)}
       onPointerOut={e => setHover(false)}
     >
-        <GenericSpace type={props.type} visited={props.visited} path={props.path}/>
-        {
-          hovered && 
-          <mesh>
-            <boxBufferGeometry attach="geometry" args={[1.0001, 1.0001, 1.0001]} />
-            <meshPhongMaterial attach="material" wireframe={true}/>
-          </mesh>
-        }
+      <GenericSpace
+        type={props.type}
+        visited={props.visited}
+        path={props.path}
+      />
+      {hovered && (
+        <mesh>
+          <boxBufferGeometry
+            attach="geometry"
+            args={[1.0001, 1.0001, 1.0001]}
+          />
+          <meshPhongMaterial attach="material" wireframe={true} />
+        </mesh>
+      )}
     </mesh>
   );
 };
@@ -91,9 +93,9 @@ export interface BoxProps {
   path?: Boolean;
 }
 
-export interface SpaceProps extends BoxProps{
-  onSetWall: () => void,
-  onSetEmpty: () => void
+export interface SpaceProps extends BoxProps {
+  onSetWall: () => void;
+  onSetEmpty: () => void;
 }
 
 export default Space;

src/containers/MazeContainer/MazeContainer.tsx

@@ -1,15 +1,15 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import {makeWall, makeEmpty} from  '../../actions/mazeActions';
-import {Dispatch} from 'redux';
-import Grid from '../../components/Maze/Maze';
+import { makeWall, makeEmpty } from '../../actions/mazeActions';
+import { Dispatch } from 'redux';
+import Maze from '../../components/Maze/Maze';
 
 const mapStateToProps = (state: any) => ({
-  mazeInfo: state.maze.mazeInfo
+  maze: state.maze
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => {
   return bindActionCreators({ makeWall, makeEmpty }, dispatch);
 };
 
-export default connect(mapStateToProps, mapDispatchToProps) (Grid); 
+export default connect(mapStateToProps, mapDispatchToProps)(Maze);

src/index.tsx

@@ -1,19 +1,19 @@
-import * as serviceWorker from "./serviceWorker";
-import { Provider } from "react-redux";
-import ReactDOM from "react-dom";
-import * as React from "react";
+import * as serviceWorker from './serviceWorker';
+import { Provider } from 'react-redux';
+import ReactDOM from 'react-dom';
+import * as React from 'react';
 
-import { configureStore } from "./store";
-import "./assets/sass/main.scss";
-import App from "./views";
+import { configureStore } from './store';
+import './assets/sass/main.scss';
+import App from './views';
 
 export const store = configureStore();
 
 ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.querySelector("#root")
+  document.querySelector('#root')
 );
 
 serviceWorker.register();

src/models/maze/index.ts

@@ -4,4 +4,7 @@ export interface MazeState {
   mazeInfo: {
     [key: number]: SpaceState[];
   };
+  clearMaze: {
+    [key: number]: SpaceState[];
+  };
 }