feature: Teams page roster information (#84)

* Fixed column sizes on smaller devices

* Added teams rosters player elo's and extra info

* Added option to opt out

* Removed useless setting of className to undefined

src/content/components/elo.js

@@ -2,9 +2,10 @@
 import { h } from 'dom-chef'
 import createIconElement from './icon'
 
-export default ({ elo, alignRight = false, style = {} }) => {
+export default ({ elo, className, alignRight = false, style = {} }) => {
   const eloElement = (
     <span
+      className={className}
       style={{
         display: 'flex',
         'align-items': 'center',

src/content/features/add-match-room-player-stats.js

@@ -65,7 +65,11 @@ export default async parent => {
       if (!stats) {
         return
       }
-      const statsElement = createPlayerStatsElement(stats, !isFaction1)
+
+      const statsElement = createPlayerStatsElement({
+        ...stats,
+        alignRight: !isFaction1
+      })
 
       const memberDetailsElement = select(
         '.match-team-member__details',

src/content/features/add-player-profile-level-progress.js

@@ -80,16 +80,16 @@ export default async parentElement => {
     <section>
       <h2 className="header-text-3 heading-border">Level Progress</h2>
       <div className="row flex flex-stretch">
-        <div className="col-lg-4 flex-column-stretch">
+        <div className="col-sm-4 flex-column-stretch">
           {keyStatElement({
             key: 'Level',
             stat: createSkillLevelElement({ level: currentLevel })
           })}
         </div>
-        <div className="col-lg-4 flex-column-stretch">
+        <div className="col-sm-4 flex-column-stretch">
           {keyStatElement({ key: 'Elo', stat: faceitElo })}
         </div>
-        <div className="col-lg-4 flex-column-stretch">
+        <div className="col-sm-4 flex-column-stretch">
           {currentLevel === 10
             ? keyStatElement({ key: `Maximum level reached`, stat: '🔥' })
             : keyStatElement({

src/content/features/add-team-player-info.js

@@ -0,0 +1,98 @@
+/** @jsx h */
+import { h } from 'dom-chef'
+import select from 'select-dom'
+import {
+  hasFeatureAttribute,
+  setFeatureAttribute
+} from '../helpers/dom-element'
+import { getPlayer, getTeam } from '../helpers/faceit-api'
+import {
+  getTeamMemberPlayerElements,
+  getTeamMemberNicknameElement,
+  getTeamId
+} from '../helpers/team-page'
+import createFlagElement from '../components/flag'
+import { getPlayerBadges } from '../helpers/player-badges'
+import createFeaturedPlayerBadgeElement from '../components/player-badge'
+import createEloElement from '../components/elo'
+import createSkillLevelElement from '../components/skill-level'
+
+const FEATURE_ATTRIBUTE = 'team-player-stats'
+
+export default async parentElement => {
+  const teamId = getTeamId()
+
+  const team = await getTeam(teamId)
+
+  if (!team) {
+    return
+  }
+
+  const memberElements = getTeamMemberPlayerElements(parentElement)
+
+  const badges = await getPlayerBadges(team.members.map(({ guid }) => guid))
+
+  memberElements.forEach(async memberElement => {
+    if (hasFeatureAttribute(FEATURE_ATTRIBUTE, memberElement)) {
+      return
+    }
+
+    setFeatureAttribute(FEATURE_ATTRIBUTE, memberElement)
+
+    const nicknameElement = getTeamMemberNicknameElement(memberElement)
+    const nickname = nicknameElement.textContent
+
+    const player = await getPlayer(nickname)
+
+    if (!player) {
+      return
+    }
+
+    const { country, guid, csgoName, games, csgoSkillLevel } = player
+
+    const memberDetailsElement = select('.users-list__details', memberElement)
+
+    if (badges[guid]) {
+      const featuredPlayerBadgeElement = createFeaturedPlayerBadgeElement(
+        badges[guid]
+      )
+
+      memberDetailsElement.insertAdjacentElement(
+        'afterbegin',
+        <div style={{ 'margin-bottom': 2 }}>{featuredPlayerBadgeElement}</div>
+      )
+    }
+
+    if (csgoName) {
+      memberDetailsElement.appendChild(
+        <span className="text-muted" style={{ display: 'block' }}>
+          {csgoName}
+        </span>
+      )
+    }
+
+    if (games && games.csgo) {
+      const elo = games.csgo.faceitElo || '–'
+
+      memberElement.children[0].appendChild(
+        <div
+          style={{
+            display: 'flex',
+            flexShrink: 0
+          }}
+        >
+          {createEloElement({
+            elo,
+            className: 'text-muted text-md',
+            alignRight: true,
+            style: { 'margin-right': 4 }
+          })}
+          {createSkillLevelElement({ level: csgoSkillLevel || 0 })}
+        </div>
+      )
+    }
+
+    const flagElement = createFlagElement({ country })
+    nicknameElement.prepend(flagElement)
+  })
+}

src/content/helpers/faceit-api.js

@@ -112,6 +112,8 @@ export const getQuickMatch = matchId =>
 export const getMatch = matchId =>
   fetchApiMemoized(`/match/v2/match/${matchId}`)
 
+export const getTeam = teamId => fetchApiMemoized(`/core/v1/teams/${teamId}`)
+
 export const getSelf = () => fetchApiMemoized('/core/v1/sessions/me')
 
 export const getQuickMatchPlayers = async (game, region, matchType) =>

src/content/helpers/pages.js

@@ -9,3 +9,6 @@ export const isPlayerProfileStats = path =>
 
 export const isPlayerProfile = path =>
   /players\/.*$/.test(path || getCurrentPath())
+
+export const isTeamsOverview = path =>
+  /teams\/.+-.+-.+-.+$/.test(path || getCurrentPath())

src/content/helpers/team-page.js

@@ -0,0 +1,16 @@
+import select from 'select-dom'
+import { getCurrentPath } from './location'
+
+export const getTeamId = path => {
+  const match = /teams\/([0-9a-z]+-[0-9a-z]+-[0-9a-z]+-[0-9a-z]+-[0-9a-z]+(?:-[0-9a-z]+)?)/.exec(
+    path || getCurrentPath()
+  )
+
+  return match && match[1]
+}
+
+export const getTeamMemberPlayerElements = parent =>
+  select.all('ul.users-list > li', parent)
+
+export const getTeamMemberNicknameElement = parent =>
+  select('strong[ng-bind="member.nickname"]', parent)

src/content/index.js

@@ -40,6 +40,7 @@ import addMatchRoomEloSelfResult from './features/add-match-room-elo-self-result
 import applyMatchRoomFocusMode from './features/apply-match-room-focus-mode'
 import addMatchRoomPlayerLinks from './features/add-match-room-player-links'
 import addPlayerProfileLinks from './features/add-player-profile-links'
+import addTeamPlayerInfo from './features/add-team-player-info'
 
 let checkedBan = false
 
@@ -180,6 +181,12 @@ function observeBody() {
           addPlayerProfileDownloadDemo(mainContentElement)
           addPlayerProfileExtendedStats(mainContentElement)
         }
+      } else if (pages.isTeamsOverview()) {
+        runFeatureIf(
+          'teamRosterPlayersInfo',
+          addTeamPlayerInfo,
+          mainContentElement
+        )
       }
     }
   })

src/popup/sections/appearance.js

@@ -41,6 +41,12 @@ export default ({ getSwitchProps }) => (
       }
       {...getSwitchProps('matchRoomHidePlayerControls')}
     />
+    <ListSubheader divider>Team page</ListSubheader>
+    <ListItemSwitch
+      primary="Detailed Team Information"
+      secondary="Show detailed roster information about team."
+      {...getSwitchProps('teamRosterPlayersInfo')}
+    />
     <ListSubheader divider>Other page elements</ListSubheader>
     <ListItemSwitch
       primary="Hide FACEIT Client download banner"

src/shared/settings.js

@@ -52,5 +52,6 @@ export const DEFAULTS = {
   notifyMatchRoomAutoVetoLocations: true,
   notifyMatchRoomAutoVetoMaps: true,
   updateNotificationType: 'tab',
-  updateNotifications: []
+  updateNotifications: [],
+  teamRosterPlayersInfo: true
 }