Place current player always at the bottom

1 files changed, 14 insertions, 6 deletions

diff --git a/frontend/src/components/lobby/RadialPlayerList.jsx b/frontend/src/components/lobby/RadialPlayerList.jsx
index c3dd988e..0a148c78 100644
--- a/frontend/src/components/lobby/RadialPlayerList.jsx
+++ b/frontend/src/components/lobby/RadialPlayerList.jsx
@@ -21,7 +21,7 @@ const PlayerItem = ({player, isOwner, isUser}) => (
 );
 
 const PlayerPlaceholder = () => (
-  <Flex column align='center' style={{opacity: 0.4}}>
+  <Flex column align='center' style={{opacity: 0.3}}>
     <UserIcon isOwner={false} isUser={false}/>
     <h5 style={{margin: 0}}>?</h5>
   </Flex>
@@ -35,12 +35,13 @@ const UserIcon = ({isUser, isOwner}) => {
 };
 
 export const RadialPlayerList = ({players, owner, currentPlayer}: RadialPlayerListProps) => {
-  const playerItems = players.map(player => <PlayerItem key={player.username}
-                                                        player={player}
-                                                        isOwner={player.username === owner}
-                                                        isUser={player.username === currentPlayer.username}/>);
+  const orderedPlayers = placeFirst(players.toArray(), currentPlayer.username);
+  const playerItems = orderedPlayers.map(player => <PlayerItem key={player.username}
+                                                               player={player}
+                                                               isOwner={player.username === owner}
+                                                               isUser={player.username === currentPlayer.username}/>);
   const tableImg = <img src={roundTable} alt='Round table' style={{width: 200, height: 200}}/>;
-  return <RadialList items={completeWithPlaceholders(playerItems.toArray())}
+  return <RadialList items={completeWithPlaceholders(playerItems)}
                      centerElement={tableImg}
                      diameter={350}
                      offsetDegrees={180}
@@ -48,6 +49,13 @@ export const RadialPlayerList = ({players, owner, currentPlayer}: RadialPlayerLi
                      itemHeight={100}/>;
 };
 
+function placeFirst(players: Array<Player>, targetFirstUsername: string): Array<Player> {
+  while (players[0].username !== targetFirstUsername) {
+    players.push(players.shift());
+  }
+  return players;
+}
+
 function completeWithPlaceholders(playerItems: Array<React.Node>): Array<React.Node> {
   while (playerItems.length < 3) {
     playerItems.push(<PlayerPlaceholder/>);