From ae1e0a23dad34ff81de3c65909171eb69f9926c3 Mon Sep 17 00:00:00 2001 From: Filip Date: Thu, 19 Mar 2020 18:50:02 +0100 Subject: [PATCH] #11 - Rebase, resolve lint and style issues --- .../components/Leaderboard/LeaderboardRow.js | 12 ++++---- .../modules/matches/matches-computations.js | 12 ++++---- .../app/modules/matches/matches-selectors.js | 2 +- frontend/src/styles/blocks/index.js | 4 +-- frontend/src/styles/blocks/list.js | 1 + frontend/src/styles/blocks/typo.js | 28 ++++++++++--------- 6 files changed, 31 insertions(+), 28 deletions(-) diff --git a/frontend/src/app/components/Leaderboard/LeaderboardRow.js b/frontend/src/app/components/Leaderboard/LeaderboardRow.js index 62dea966..0915cc6c 100644 --- a/frontend/src/app/components/Leaderboard/LeaderboardRow.js +++ b/frontend/src/app/components/Leaderboard/LeaderboardRow.js @@ -1,5 +1,5 @@ import React from 'react' -import { TextSpan, KingSpan, TextDiv, ListItem, StyledLink } from '../../../styles/blocks' +import { PositionDiv, KingDiv, TextSpan, ListItem, StyledLink } from '../../../styles/blocks' import { createProfilePath } from '../../const/routes' const trophies = [ @@ -10,14 +10,14 @@ const trophies = [ export const LeaderboardRow = ({ user, king, position, points }) => ( - { + { position > 3 ? (position + '.') : - } + } {king && king.id === user.id - ? King of The Hill
since {king.since.toLocaleDateString()} + ? King of The Hill
since {king.since.toLocaleDateString()} : ''} - + {user.name} ({points}) - + ) diff --git a/frontend/src/app/modules/matches/matches-computations.js b/frontend/src/app/modules/matches/matches-computations.js index 092de1a3..1803f8e2 100644 --- a/frontend/src/app/modules/matches/matches-computations.js +++ b/frontend/src/app/modules/matches/matches-computations.js @@ -80,27 +80,27 @@ export const computeKingStreakDuration = (matchesLast, usersLast) => { }, new Map()) const kingId = usersLast[0].id - let matchFound = false; - for (let match of matchesLast) { + let matchFound = false + for (const match of matchesLast) { const players = [...match.team1, ...match.team2] - + // #1 recomptute king's rating before in case he played the match const kingPlayer = players.find(player => player.id === kingId) - const kingWon = false; + let kingWon = false if (kingPlayer) { kingWon = usersMap[kingId] > kingPlayer.matchRating usersMap[kingId] = kingPlayer.matchRating } // #2 check whether none of the other players beat the king - for (let player of players) { + for (const player of players) { usersMap[player.id] = player.matchRating matchFound |= (player.id !== kingId && player.matchRating > usersMap[kingId]) } // #3 check if king was first before winning if (kingPlayer && kingWon && !matchFound) { - for (let key in usersMap) { + for (const key in usersMap) { matchFound |= (usersMap[key] > usersMap[kingId]) } } diff --git a/frontend/src/app/modules/matches/matches-selectors.js b/frontend/src/app/modules/matches/matches-selectors.js index 81c7a63d..58a829db 100644 --- a/frontend/src/app/modules/matches/matches-selectors.js +++ b/frontend/src/app/modules/matches/matches-selectors.js @@ -48,7 +48,7 @@ const generateStatisticsForUser = (userId, userMatches) => ({ export const getKing = createSelector( getLastMatches, getTopRatedUsers, - (userMatches, users) => computeKingStreakDuration(userMatches, users) + (userMatches, users) => computeKingStreakDuration(userMatches, users), ) export const getStatisticsForUser = createSelector( diff --git a/frontend/src/styles/blocks/index.js b/frontend/src/styles/blocks/index.js index ca00f694..ea0f905c 100644 --- a/frontend/src/styles/blocks/index.js +++ b/frontend/src/styles/blocks/index.js @@ -1,5 +1,5 @@ import { - Title, Subtitle, TextSpan, KingSpan, TextDiv, WinnerSpan, BattleLabel, + Title, Subtitle, TextSpan, KingDiv, PositionDiv, WinnerSpan, BattleLabel, FiltersBlock, FiltersSpan, StyledHyperLink, } from './typo' import { Nav, Container, GridContainer, Box, ProfileDetail } from './layout' @@ -10,7 +10,7 @@ import { SelectBox, Label, Input } from './inputs' import { Logo } from './logo' export { - Title, Subtitle, TextSpan, KingSpan, TextDiv, WinnerSpan, BattleLabel, + Title, Subtitle, TextSpan, KingDiv, PositionDiv, WinnerSpan, BattleLabel, FiltersBlock, FiltersSpan, StyledHyperLink, Nav, Container, GridContainer, Box, ProfileDetail, ListCon, ListItem, diff --git a/frontend/src/styles/blocks/list.js b/frontend/src/styles/blocks/list.js index 8e63a759..602a0bd2 100644 --- a/frontend/src/styles/blocks/list.js +++ b/frontend/src/styles/blocks/list.js @@ -54,6 +54,7 @@ const ListItem = styled.li` list-style: none; border: 1px solid var(--cBorder); align-items: center; + position: relative; &:nth-child(even) { background: var(--bgColorListSec); diff --git a/frontend/src/styles/blocks/typo.js b/frontend/src/styles/blocks/typo.js index bf7afa27..c28644ac 100644 --- a/frontend/src/styles/blocks/typo.js +++ b/frontend/src/styles/blocks/typo.js @@ -21,20 +21,22 @@ const TextSpan = styled.span` padding: 0 5px; ` -const KingSpan = styled.span` -font-size: 14px; -font-style: italic; -float: right; -color: var(--cFont); -padding: 0 5px; +const PositionDiv = styled.div` + font-weight: 400; + padding: 0 5px; + z-index: 1; + position: absolute; + left: 15px; ` -const TextDiv = styled.div` - text-align: ${props => props.textAlign}; - float: ${props => props.align || 'none'}; - font-weight: 400; - padding: 0 5px - width: calc(100% - 41px) +const KingDiv = styled.div` + font-size: 14px; + font-style: italic; + color: var(--cFont); + padding: 0 5px; + z-index: 1; + position: absolute; + right: 15px; ` const FiltersSpan = styled.span` @@ -79,6 +81,6 @@ const StyledHyperLink = styled.a` ` export { - Title, Subtitle, TextSpan, KingSpan, TextDiv, WinnerSpan, BattleLabel, + Title, Subtitle, TextSpan, KingDiv, PositionDiv, WinnerSpan, BattleLabel, FiltersBlock, FiltersSpan, StyledHyperLink, }