delta · ram2091999 · Mar 2, 2020 · Mar 2, 2020
diff --git a/src/app/actions/code/Submission.ts b/src/app/actions/code/Submission.ts
@@ -1,4 +1,5 @@
 import * as SubmissionInterfaces from 'app/types/code/Submission';
+import * as SubmitBarInterfaces from 'app/types/SubmitBar';
 import { action } from 'typesafe-actions';
 
 export namespace SubmissionActions {
@@ -12,6 +13,7 @@ export namespace SubmissionActions {
     HANDLE_EXECUTE_ERROR = 'HANDLE_EXECUTE_ERROR',
     HANDLE_DEBUG_RUN_SUCCESS = 'HANDLE_DEBUG_RUN_SUCCESS',
     HANDLE_DEBUG_RUN_ERROR = 'HANDLE_DEBUG_RUN_ERROR',
+    UPDATE_MAP = 'UPDATE_MAP',
     UPDATE_MAP_ID = 'UPDATE_MAP_ID',
     UPDATE_CURRENT_AI_ID = 'UPDATE_CURRENT_AI_ID',
     UPDATE_DEBUG_RUN_REQUEST = 'UPDATE_DEBUG_RUN_REQUEST',
@@ -58,6 +60,8 @@ export namespace SubmissionActions {
 
   export const handleDebugRunError = () => action(Type.HANDLE_EXECUTE_ERROR);
 
+  export const updateMap = (map: SubmitBarInterfaces.Map) => action(Type.UPDATE_MAP, { map });
+
   export const updateMapId = (mapId: number) => action(Type.UPDATE_MAP_ID, { mapId });
 
   export const updateCurrentAiId = (aiId: number) => action(Type.UPDATE_CURRENT_AI_ID, { aiId });

diff --git a/src/app/components/SubmitBar/index.tsx b/src/app/components/SubmitBar/index.tsx
@@ -4,6 +4,7 @@ import {
   faCodeBranch,
   faCog,
   faLock,
+  faMap,
   faPlay,
   faSave,
   faTrash,
@@ -22,15 +23,37 @@ export class SubmitBar extends React.Component<
   SubmitBarInterfaces.Props,
   SubmitBarInterfaces.State
 > {
+  private faqBodyStyle = {
+    maxHeight: '0',
+  };
   constructor(props: SubmitBarInterfaces.Props) {
     super(props);
     this.state = {
       commitMessage: '',
       isCommitMessageBoxOpen: false,
+      isMapOptionsOpen: false,
       isRunOptionsOpen: false,
     };
   }
 
+  public expandDropDown = () => {
+    const { isMapOptionsOpen } = this.state;
+
+    if (!isMapOptionsOpen) {
+      this.faqBodyStyle = {
+        maxHeight: '168px',
+      };
+    } else {
+      this.faqBodyStyle = {
+        maxHeight: '0px',
+      };
+    }
+
+    this.setState({
+      isMapOptionsOpen: !isMapOptionsOpen,
+    });
+  };
+
   public render() {
     const {
       saveCode,
@@ -42,8 +65,15 @@ export class SubmitBar extends React.Component<
       aiIds,
       clearLogs,
       debugRunAvailable,
+      map,
+      updateMap,
     } = this.props;
-    const { commitMessage, isCommitMessageBoxOpen, isRunOptionsOpen } = this.state;
+    const {
+      commitMessage,
+      isCommitMessageBoxOpen,
+      isMapOptionsOpen,
+      isRunOptionsOpen,
+    } = this.state;
     return (
       <div
         className={classnames(styles.SubmitBar, {
@@ -111,10 +141,27 @@ export class SubmitBar extends React.Component<
             className={classnames(styles.icon)}
             style={{ padding: 0, margin: 0, border: 0 }}
             title={'Clear Renderer Log'}
+            onClick={() => {
+              this.setState({ isMapOptionsOpen: !isMapOptionsOpen });
+            }}
           >
             <FontAwesomeIcon icon={faTrash} />
           </span>
         </button>
+        <button
+          className={classnames(styles.customBtn)}
+          id="map_dropdown"
+          onClick={this.expandDropDown}
+        >
+          <span
+            className={classnames(styles.icon)}
+            style={{ padding: 0, margin: 0, border: 0 }}
+            title={'Show Maps'}
+          >
+            <FontAwesomeIcon icon={faMap} />
+          </span>
+        </button>
+
         <button
           className={classnames(styles.customBtn)}
           id="run_button"
@@ -195,6 +242,59 @@ export class SubmitBar extends React.Component<
             closeOptions={this.closeRunOptions}
           />
         ) : null}
+
+        <div className={classnames(styles.mapDropdown)} style={this.faqBodyStyle}>
+          <div
+            className={
+              map === SubmitBarInterfaces.Map.MAP1
+                ? classnames(styles.mapItem, styles.mapItemActive)
+                : classnames(styles.mapItem)
+            }
+            onClick={() => updateMap(SubmitBarInterfaces.Map.MAP1)}
+          >
+            MAP 1
+          </div>
+          <div
+            className={
+              map === SubmitBarInterfaces.Map.MAP2
+                ? classnames(styles.mapItem, styles.mapItemActive)
+                : classnames(styles.mapItem)
+            }
+            onClick={() => updateMap(SubmitBarInterfaces.Map.MAP2)}
+          >
+            MAP 2
+          </div>
+          <div
+            className={
+              map === SubmitBarInterfaces.Map.MAP3
+                ? classnames(styles.mapItem, styles.mapItemActive)
+                : classnames(styles.mapItem)
+            }
+            onClick={() => updateMap(SubmitBarInterfaces.Map.MAP3)}
+          >
+            MAP 3
+          </div>
+          <div
+            className={
+              map === SubmitBarInterfaces.Map.MAP4
+                ? classnames(styles.mapItem, styles.mapItemActive)
+                : classnames(styles.mapItem)
+            }
+            onClick={() => updateMap(SubmitBarInterfaces.Map.MAP4)}
+          >
+            MAP 4
+          </div>
+          <div
+            className={
+              map === SubmitBarInterfaces.Map.MAP5
+                ? classnames(styles.mapItem, styles.mapItemActive)
+                : classnames(styles.mapItem)
+            }
+            onClick={() => updateMap(SubmitBarInterfaces.Map.MAP5)}
+          >
+            MAP 5
+          </div>
+        </div>
       </div>
     );
   }

diff --git a/src/app/containers/SubmitBar.ts b/src/app/containers/SubmitBar.ts
@@ -10,6 +10,7 @@ const mapStateToProps = (rootState: RootState) => {
   return {
     aiIds: rootState.submission.aiIds,
     debugRunAvailable: rootState.submission.debugRunRequest !== Request.NONE,
+    map: rootState.submission.selectedMap,
     maps: rootState.submission.maps,
   };
 };
@@ -29,6 +30,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
     lockCode: () => dispatch(SubmissionActions.lockCode()),
     saveCode: () => dispatch(CodeActions.save()),
     selfMatch: (mapId: number) => dispatch(SubmissionActions.selfMatch(mapId)),
+    updateMap: (map: SubmitBarInterfaces.Map) => dispatch(SubmissionActions.updateMap(map)),
   };
 };
 

diff --git a/src/app/reducers/code/Submission.ts b/src/app/reducers/code/Submission.ts
@@ -1,5 +1,6 @@
 import { SubmissionActions } from 'app/actions';
 import * as SubmissionInterfaces from 'app/types/code/Submission';
+import * as SubmitBarInterfaces from 'app/types/SubmitBar';
 
 const submissionStoreState: SubmissionInterfaces.SubmissionStoreState = {
   aiIds: [],
@@ -10,6 +11,7 @@ const submissionStoreState: SubmissionInterfaces.SubmissionStoreState = {
   mapId: 1,
   maps: [],
   request: SubmissionInterfaces.Request.NONE,
+  selectedMap: SubmitBarInterfaces.Map.MAP1,
   state: SubmissionInterfaces.RequestState.IDLE,
 };
 
@@ -36,6 +38,12 @@ export const submissionReducer = (
         mapId: action.payload.mapId,
       };
     }
+    case SubmissionActions.Type.UPDATE_MAP: {
+      return {
+        ...state,
+        selectedMap: action.payload.map,
+      };
+    }
     case SubmissionActions.Type.UPDATE_CURRENT_AI_ID: {
       return {
         ...state,

diff --git a/src/app/styles/SubmitBar.module.css b/src/app/styles/SubmitBar.module.css
@@ -6,6 +6,7 @@
   position: fixed;
   box-sizing: border-box;
   z-index: 1;
+  transition: 2s ease-in;
 }
 
 .SubmitBar .customBtn {
@@ -48,3 +49,34 @@
   padding-right: 0px;
   border-right: 0px;
 }
+
+.mapDropdown {
+  width: 100px;
+  height: 168px;
+  background-color: #525252;
+  color: white;
+  margin-left: 90px;
+  margin-top: 5px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: max-height 0.7s ease;
+}
+
+.mapDropdownInactive {
+  display: none;
+}
+
+.mapItem {
+  width: 100%;
+  margin-top: 3px;
+  text-align: center;
+  height: 30px;
+}
+
+.mapItem:hover {
+  background-color: #292929;
+}
+.mapItemActive {
+  background-color: #292929;
+}
diff --git a/src/app/types/SubmitBar.ts b/src/app/types/SubmitBar.ts
@@ -2,13 +2,23 @@ import { SubmissionActions } from 'app/actions';
 import * as SubmissionInterfaces from 'app/types/code/Submission';
 import { SplitPaneState } from 'app/types/Dashboard';
 
+export enum Map {
+  MAP1,
+  MAP2,
+  MAP3,
+  MAP4,
+  MAP5,
+}
+
 export interface State {
   commitMessage: string;
   isCommitMessageBoxOpen: boolean;
   isRunOptionsOpen: boolean;
+  isMapOptionsOpen: boolean;
 }
 
 export interface StateProps {
+  map: Map;
   maps: SubmissionInterfaces.Map[];
   debugRunAvailable: boolean;
   aiIds: number[];
@@ -25,6 +35,7 @@ export interface DispatchProps {
   loadMaps: () => void;
   getAiIds: () => void;
   clearLogs: () => void;
+  updateMap: (map: Map) => void;
 }
 
 export interface RunOptionsOwnState {

diff --git a/src/app/types/code/Submission.ts b/src/app/types/code/Submission.ts
@@ -1,4 +1,5 @@
 import { SubmissionActions } from 'app/actions';
+import * as SubmitBarInterfaces from 'app/types/SubmitBar';
 import { ActionType } from 'typesafe-actions';
 
 const actions = {
@@ -11,6 +12,7 @@ const actions = {
   updateDebugRunCode: SubmissionActions.updateDebugRunCode,
   updateDebugRunCommitHash: SubmissionActions.updateDebugRunCommitHash,
   updateDebugRunRequest: SubmissionActions.updateDebugRunRequest,
+  updateMap: SubmissionActions.updateMap,
   updateMapId: SubmissionActions.updateMapId,
 };
 
@@ -43,6 +45,7 @@ export interface SubmissionStoreState {
   debugRunCommitHash: string;
   mapId: number;
   maps: Map[];
+  selectedMap: SubmitBarInterfaces.Map;
 }
 
 export interface Map {