#11 - Rebase, resolve lint and style issues

salsita · Mar 27, 2020 · 5c920b5 · 5c920b5
1 parent 6341e74
commit 5c920b5
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git 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 = ({ player, king, position, points }) => (
   <ListItem>
-    <TextSpan align="left">{
+    <PositionDiv>{
       position > 3 ? (position + '.') : <img src={trophies[position - 1]} />
-    }</TextSpan>
+    }</PositionDiv>
     {king && king.id === player.id
-      ? <KingSpan>King of The Hill<br/>since {king.since.toLocaleDateString()}</KingSpan>
+      ? <KingDiv>King of The Hill<br/>since {king.since.toLocaleDateString()}</KingDiv>
       : ''}
-    <TextDiv>
+    <TextSpan>
       <StyledLink to={createProfilePath(player.id)}>{player.name} ({points})</StyledLink>
-    </TextDiv>
+    </TextSpan>
   </ListItem>
 )
diff --git 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/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
@@ -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
@@ -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,
 }