Track best streak

astralarya · Oct 26, 2018 · fad5125 · fad5125
1 parent 435869e
commit fad5125
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/src/app/components/game.scss b/src/app/components/game.scss
@@ -11,6 +11,10 @@
 .scoreboard {
   margin-right: 2rem;
   margin-bottom: 0.5rem;
+  p {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+  }
 }
 
 .faceContainer {

diff --git a/src/app/components/game.tsx b/src/app/components/game.tsx
@@ -17,7 +17,8 @@ const mapStateToProps = (state: AppState) => {
     featured: state.featured,
     overlay: state.overlay,
 
-    streak: state.streak,
+    bestStreak: state.bestStreak,
+    currStreak: state.currStreak,
   };
 };
 
@@ -36,7 +37,8 @@ const Game = ({
   currReveal,
   featured,
   overlay,
-  streak,
+  bestStreak,
+  currStreak,
   answerIncorrect_,
   beginRound_,
   endRound_,
@@ -47,7 +49,8 @@ currIdx: number,
 currReveal: boolean[],
 featured: boolean,
 overlay: boolean,
-streak: number,
+bestStreak: number,
+currStreak: number,
 answerIncorrect_: (slug: string) => AppAction,
 beginRound_: () => Promise<AppAction>,
 endRound_: () => Promise<AppAction>,
@@ -87,7 +90,8 @@ endRound_: () => Promise<AppAction>,
         <div className={styles.header}>
           <h1 className={styles.title}>{title}</h1>
           <div className={styles.scoreboard}>
-            <p>Streak: {streak}</p>
+            <p>Best Streak: {bestStreak}</p>
+            <p>Current Streak: {currStreak}</p>
           </div>
         </div>
         <div className={styles.faceContainer}>

diff --git a/src/app/reducers/index.tsx b/src/app/reducers/index.tsx
@@ -10,7 +10,8 @@ const initialState: AppState = {
   featured: false,
   overlay: true,
 
-  streak: 0,
+  bestStreak: 0,
+  currStreak: 0,
 };
 
 const FACE_ARRAY_LENGTH = 5;
@@ -50,14 +51,16 @@ const rootReducer = (state: AppState = initialState, action: AppAction) => {
     case "ANSWER_CORRECT":
       return {...state,
         featured: true,
-        streak: state.streak + 1,
+
+        bestStreak: state.currStreak === state.bestStreak ? state.currStreak + 1 : state.bestStreak,
+        currStreak: state.currStreak + 1,
       };
     case "ANSWER_INCORRECT":
       return {...state,
         currReveal: state.currFaces.map((teamMember: TeamMember, idx: number) => {
           return teamMember.slug === action.slug || state.currReveal[idx];
         }),
-        streak: 0,
+        currStreak: 0,
       };
     default:
       return state;

diff --git a/src/app/types/redux.d.ts b/src/app/types/redux.d.ts
@@ -8,7 +8,8 @@ export type AppState = {
   featured: boolean;
   overlay: boolean;
 
-  streak: number;
+  bestStreak: number;
+  currStreak: number;
 };