import React from 'react'
import PlayerListRow from './PlayerListRow'
import './PlayerList.css'

/*const colors = [
  'firebrick',
  'hotpink',
  'tomato',
  'peachpuff',
  'thistle',
  'darkorchid',
  'plategreen',
  'mediumaquamarine',
  'plateturquoise',
  'lightsteelblue',
  'wheat',
  'mistyrose'
]*/

const PlayerList = ({ userIds }) => (
  <div className="PlayerList">
    <div className="title">Current Players</div>
    <ul className="PlayerList-list">
      {userIds && userIds.length > 0
        ? userIds.map(userId =>
          <PlayerListRow userId={userId}/>)
        : <div className="PlayerList-empty">Game currently has no players. Share the game code with your friends!</div>
      }
    </ul>
  </div>
)

export default PlayerList

import React from 'react'
import PlayerListRow from './PlayerListRow'
import UserColor from './UserColor'
import UserName from './Username'
import './PlayerList.css'

const colors = [
  'firebrick',
  'hotpink',
  'tomato',
  'peachpuff',
  'thistle',
  'darkorchid',
  'plategreen',
  'mediumaquamarine',
  'plateturquoise',
  'lightsteelblue',
  'wheat',
  'mistyrose'
]

const PlayerList = ({ userIds }) => (
  <div className="PlayerList">
    <div className="title">Current Players</div>
    <ul className="PlayerList-list">
      {userIds && userIds.length > 0
        ? userIds.map(userId =>
          <li
            className="PlayerList-player"
          >
            <UserColor userId={userId} />
            <UserName userId={userId} />
          </li>)
        : <div className="PlayerList-empty">Game currently has no players. Share the game code with your friends!</div>
      }
    </ul>
  </div>
)

export default PlayerList

--- 
+++ 
@@ -1,10 +1,8 @@
 import React from 'react'
 import PlayerListRow from './PlayerListRow'
-import UserColor from './UserColor'
-import UserName from './Username'
 import './PlayerList.css'
 
-const colors = [
+/*const colors = [
   'firebrick',
   'hotpink',
   'tomato',
@@ -17,7 +15,7 @@
   'lightsteelblue',
   'wheat',
   'mistyrose'
-]
+]*/
 
 const PlayerList = ({ userIds }) => (
   <div className="PlayerList">
@@ -25,12 +23,7 @@
     <ul className="PlayerList-list">
       {userIds && userIds.length > 0
         ? userIds.map(userId =>
-          <li
-            className="PlayerList-player"
-          >
-            <UserColor userId={userId} />
-            <UserName userId={userId} />
-          </li>)
+          <PlayerListRow userId={userId}/>)
         : <div className="PlayerList-empty">Game currently has no players. Share the game code with your friends!</div>
       }
     </ul>
Fix some warnings about playerlist
