From 396e7ba8cc8a37d9866523fc89bc84955265d265 Mon Sep 17 00:00:00 2001
From: craig maher <rako_77@msn.com>
Date: Mon, 7 Jan 2019 13:31:32 -0800
Subject: [PATCH] Made a lock all button, The button only appears when All
 Cards are unlocked. while the Lock all button is displayed the unlock all
 button is not and vice versa.

---
 src/actions/actions.ts             |  2 ++
 src/containers/randomizer.tsx      | 19 +++++++++--
 src/reducers/cards-list.reducer.ts |  5 +++
 src/selectors/undo.selectors.ts    |  3 ++
 src/styles/button.scss             | 52 ++++++++++++++++--------------
 5 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/actions/actions.ts b/src/actions/actions.ts
index 9862643..58126be 100644
--- a/src/actions/actions.ts
+++ b/src/actions/actions.ts
@@ -6,4 +6,6 @@ export const toggleLock = createStandardAction('TOGGLE_LOCK')<number>();
 
 export const unlockAll = createStandardAction('UNLOCK_ALL')();
 
+export const lockAll = createStandardAction('LOCK_ALL')();
+
 export const selectCard = createStandardAction('SELECT_CARD')<number>();
diff --git a/src/containers/randomizer.tsx b/src/containers/randomizer.tsx
index c9355db..317ca41 100644
--- a/src/containers/randomizer.tsx
+++ b/src/containers/randomizer.tsx
@@ -5,7 +5,7 @@ import { AllActions } from 'src/actions';
 import CardInfoPane from 'src/components/card-info-pane';
 import CardsList from 'src/components/cards-list';
 import { IRootState } from 'src/reducers';
-import { canRedo, canUndo } from 'src/selectors/undo.selectors';
+import { canRedo, canUndo, allUnlocked } from 'src/selectors/undo.selectors';
 import '../styles/randomizer.scss';
 import '../styles/button.scss';
 import classNames from 'classnames';
@@ -13,11 +13,13 @@ import classNames from 'classnames';
 interface IRandomizerProps {
     randomize: () => void;
     unlockAll: () => void;
+    lockAll: () => void;
     undo: () => void;
     redo: () => void;
 
     canUndo: boolean;
     canRedo: boolean;
+    allUnlocked: boolean;
 }
 
 const Component: React.SFC<IRandomizerProps> = props => (
@@ -30,11 +32,21 @@ const Component: React.SFC<IRandomizerProps> = props => (
                 <span>Randomize</span>
             </span>
             <span
-                className='btn-container btn btn-one'
+                className={classNames('btn-container btn btn-one', {
+                    hidden: props.allUnlocked
+                })}
                 onClick={props.unlockAll}
             >
                 <span>Unlock All</span>
             </span>
+            <span
+                className={classNames('btn-container btn btn-one', {
+                    hidden: !props.allUnlocked
+                })}
+                onClick={props.lockAll}
+            >
+                <span>Lock All</span>
+            </span>
             <span
                 className={classNames('btn-container btn btn-one', {
                     disabled: !props.canUndo
@@ -62,7 +74,8 @@ const Component: React.SFC<IRandomizerProps> = props => (
 const Randomizer = connect(
     (state: IRootState) => ({
         canUndo: canUndo(state),
-        canRedo: canRedo(state)
+        canRedo: canRedo(state),
+        allUnlocked: allUnlocked(state)
     }),
     dispatch => bindActionCreators({ ...AllActions }, dispatch)
 )(Component);
diff --git a/src/reducers/cards-list.reducer.ts b/src/reducers/cards-list.reducer.ts
index 690f7e6..530b9c2 100644
--- a/src/reducers/cards-list.reducer.ts
+++ b/src/reducers/cards-list.reducer.ts
@@ -40,6 +40,11 @@ export function cardsList(
                     ...state,
                     lockedCards: ImmutableSet()
                 };
+            case getType(AllActions.lockAll):
+                return {
+                    ...state,
+                    lockedCards: ImmutableSet([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+                };
             case getType(AllActions.randomize):
             case getType(AllActions.redo):
             case getType(AllActions.undo):
diff --git a/src/selectors/undo.selectors.ts b/src/selectors/undo.selectors.ts
index 4b575e6..fb968ee 100644
--- a/src/selectors/undo.selectors.ts
+++ b/src/selectors/undo.selectors.ts
@@ -5,3 +5,6 @@ export const canUndo = (state: IRootState) =>
 
 export const canRedo = (state: IRootState) =>
     state.cardsList.currentCards.future.length > 0;
+
+export const allUnlocked = (state: IRootState) =>
+    state.cardsList.lockedCards.size === 0;
diff --git a/src/styles/button.scss b/src/styles/button.scss
index bd5acc1..204a640 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,6 +1,6 @@
 @import './theme';
 
-.btn-container { 
+.btn-container {
     margin-top: 2em;
     margin-bottom: 2em;
     background: $btn-background;
@@ -12,7 +12,7 @@
     width: 100%;
     height: 33%;
     border-radius: 5px;
-    align-items: center; 
+    align-items: center;
 }
 
 .btn {
@@ -23,12 +23,13 @@
     line-height: 64px;
     transition: all 0.3s;
     span {
-      transition: all 0.3s;
-      transform: scale(1, 1);
+        transition: all 0.3s;
+        transform: scale(1, 1);
     }
-  }
-  
-  .btn:not(.disabled)::before, .btn:not(.disabled)::after {
+}
+
+.btn:not(.disabled)::before,
+.btn:not(.disabled)::after {
     content: '';
     position: absolute;
     transition: all 0.3s;
@@ -37,33 +38,36 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-  }
-  
-  .btn-one:not(.disabled)::before {
+}
+
+.btn-one:not(.disabled)::before {
     left: 4px;
     z-index: 1;
     opacity: 0;
     background: rgba(255, 255, 255, 0.1);
     transform: scale(0.1, 1);
-  }
-  
-  .btn-one:not(.disabled):hover::before {
+}
+
+.btn-one:not(.disabled):hover::before {
     opacity: 1;
     transform: scale(1, 1);
-  }
-  
-  .btn-one:not(.disabled)::after {
+}
+
+.btn-one:not(.disabled)::after {
     transition: all 0.3s;
     border: 0px solid rgba(255, 255, 255, 0.5);
-  }
-  
-  .btn-one:not(.disabled):hover::after {
-    transform: scale(1, .1);
+}
+
+.btn-one:not(.disabled):hover::after {
+    transform: scale(1, 0.1);
     opacity: 0;
-  }
+}
 
-  .btn-one.disabled {
+.btn-one.disabled {
     background: #aaa;
     color: #555;
-    
-  }
\ No newline at end of file
+}
+
+.btn-one.hidden {
+    display: none;
+}