Add new streaks to players profile page

frontend/src/app/modules/matches/matches-computations.js

@@ -41,27 +41,37 @@ export const plotRatingHistory = (userMatches, userId, initialRating) => {
     ))
 }
 
-export const computeLongestWinStreak = (userId, userMatches) => {
+export const computeStreaks = (userId, userMatches) => {
   const initialState = {
-    longest: 0,
-    current: 0,
+    longestWinStreak: 0,
+    currentWinStreak: 0,
+    highestEloGainStreak: 0,
+    currentEloGainStreak: 0,
   }
 
-  return userMatches.reduce((state, match) => {
+  const reversedMatches = [...userMatches].reverse()
+
+  return reversedMatches.reduce((state, match) => {
     if (didUserWin(userId, match)) {
-      const current = state.current + 1
-      const longest = Math.max(current, state.longest)
+      const currentWinStreak = state.currentWinStreak + 1
+      const longestWinStreak = Math.max(currentWinStreak, state.longestWinStreak)
+      const currentEloGainStreak = state.currentEloGainStreak + match.winningTeamRatingChange
+      const highestEloGainStreak = Math.max(currentEloGainStreak, state.highestEloGainStreak)
       return {
-        current,
-        longest,
+        currentWinStreak,
+        longestWinStreak,
+        currentEloGainStreak,
+        highestEloGainStreak,
       }
     } else {
       return {
-        longest: state.longest,
-        current: 0,
+        longestWinStreak: state.longestWinStreak,
+        currentWinStreak: 0,
+        highestEloGainStreak: state.highestEloGainStreak,
+        currentEloGainStreak: 0,
       }
     }
-  }, initialState).longest
+  }, initialState)
 }
 
 export const computeWinRatio = (userId, userMatches) => {

frontend/src/app/modules/matches/matches-selectors.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect'
 import {
-  computeLongestWinStreak,
+  computeStreaks,
   computeWinRatio,
   generateMatchRatingChanges,
   plotRatingHistory,
@@ -39,7 +39,7 @@ const getLastMatchesForUser = createSelector(
 
 const generateStatisticsForUser = (userId, userMatches) => ({
   matchChanges: generateMatchRatingChanges(userId, userMatches),
-  longestStreak: computeLongestWinStreak(userId, userMatches),
+  streaks: computeStreaks(userId, userMatches),
   winRatio: computeWinRatio(userId, userMatches),
   totalMatches: userMatches.length,
 })

frontend/src/app/modules/root/root-reducer.js

@@ -18,7 +18,7 @@ const initialState = {
 
 const usersLoaded = (state, { users }) => ({
   ...state,
-  users
+  users,
 })
 
 const updateUsersStatus = (state, { status }) => ({

frontend/src/app/pages/Profile/index.js

@@ -18,7 +18,17 @@ class ProfileComponent extends Component {
 
     const {
       user: { name, rating, id },
-      statistics: { totalMatches, winRatio, longestStreak, matchChanges },
+      statistics: {
+        totalMatches,
+        winRatio,
+        matchChanges,
+        streaks: {
+          currentWinStreak,
+          longestWinStreak,
+          currentEloGainStreak,
+          highestEloGainStreak,
+        },
+      },
     } = this.props
 
     return (
@@ -28,7 +38,10 @@ class ProfileComponent extends Component {
         <ProfileDetail>
           <Subtitle>Matches: {totalMatches}</Subtitle>
           <Subtitle>Win Rate: {(winRatio * 100).toFixed(2)}%</Subtitle>
-          <Subtitle>Win Streak: {longestStreak}</Subtitle>
+          <Subtitle>Longest Win Streak: {longestWinStreak}</Subtitle>
+          <Subtitle>Current Win Streak: {currentWinStreak}</Subtitle>
+          <Subtitle>Highest Elo Gain Streak: {highestEloGainStreak}</Subtitle>
+          <Subtitle>Current Elo Gain Streak: {currentEloGainStreak}</Subtitle>
         </ProfileDetail>
         <ProfileRatingGraph userId={id} />
         <ProfileBattleHistory matches={matchChanges} />