Player sorting is correct -- disconnects with removePeer are not

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/MediaControl.js

@@ -221,7 +221,7 @@ const MediaAgent = ({setPeers}) => {
       console.log(`media-agent - removePeer - Signaling server said to remove peer ${peer_id}`);
       if (peer_id in peers) {
         if (peers[peer_id].connection) {
-          peers[peer_id].connnection.close();
+          peers[peer_id].connection.close();
         }
       }
     

client/src/PlayerList.js

@@ -90,32 +90,60 @@ const PlayerList = () => {
   for (let key in players) {
     sortedPlayers.push(players[key]);
   }
-  sortedPlayers.sort((A, B) => {
-    if (A.color === color) {
+
+  const sortPlayers = (A, B) => {
+    /* active player first */
+    if (A.name === name) {
       return -1;
     }
-    if (B.color === color) {
+    if (B.name === name) {
       return +1;
     }
+    
+    /* Sort active players first */
+    if (A.name && !B.name) {
+      return -1;
+    }
+    if (B.name && !A.name) {
+      return +1;
+    }
+    
+    /* Ohterwise, sort by color */
     return A.color.localeCompare(B.color);
+  };
+
+  sortedPlayers.sort(sortPlayers);
+
+  /* Array of just names... */
+  unselected.sort((A, B) => {
+    /* active player first */
+    if (A === name) {
+      return -1;
+    }
+    if (B === name) {
+      return +1;
+    }
+    /* Then sort alphabetically */
+    return A.localeCompare(B);
   });
 
-  sortedPlayers.forEach(item => {
-    const name = item.name;
-    const selectable = inLobby && (item.status === 'Not active' || color === item.color);
+  sortedPlayers.forEach(player => {
+    const name = player.name;
+    const selectable = inLobby && (player.status === 'Not active' || color === player.color);
     playerElements.push(
       <div
         data-selectable={selectable}
-        data-selected={item.color === color}
+        data-selected={player.color === color}
         className="PlayerEntry"
-        onClick={() => { inLobby && selectable && toggleSelected(item.color) }} 
-        key={`player-${item.color}`}>
+        onClick={() => { inLobby && selectable && toggleSelected(player.color) }} 
+        key={`player-${player.color}`}>
         <div>
-          <PlayerColor color={item.color}/>
+          <PlayerColor color={player.color}/>
           <div className="Name">{name ? name : 'Available' }</div>
-        { name && !item.live && <div className="NoNetwork"></div> }
+        { name && !player.live && <div className="NoNetwork"></div> }
         </div>
-        { name && item.live && <MediaControl peer={peers[name]} isSelf={item.color === color}/> }
+        { name && player.live && <MediaControl peer={peers[name]} 
+          isSelf={player.color === color}/> }
         { !name && <div></div> }
       </div>
     );
@@ -124,7 +152,7 @@ const PlayerList = () => {
   const waiting = unselected.map((player) => {
     return <div className={player === name ? 'Self' : ''} key={player}>
       <div>{ player }</div>
-      <MediaControl peer={peers[name]} isSelf={name === player}/>
+      <MediaControl peer={peers[player]} isSelf={name === player}/>
     </div>
   });
 

server/routes/games.js

@@ -834,12 +834,12 @@ const setPlayerName = (game, session, name) => {
       if (session.ws && (game.id in audio) 
       && session.name in audio[game.id]) {
         hasAudio = true;
-        part(audio[game.id], session, game.id);
+        part(audio[game.id], session);
       }
     } else {
       message = `${session.name} has changed their name to ${name}.`;
       if (session.ws && game.id in audio) {
-        part(audio[game.id], session, game.id);
+        part(audio[game.id], session);
       }
     }
   }
@@ -856,7 +856,7 @@ const setPlayerName = (game, session, name) => {
   }
   
   if (session.ws && hasAudio) {
-    join(audio[game.id], session, game.id);
+    join(audio[game.id], session);
   }
   console.log(`${info}: ${message}`);
   addChatMessage(game, null, message);
@@ -2945,7 +2945,7 @@ const resetDisconnectCheck = (game, req) => {
   //req.disconnectCheck = setTimeout(() => { wsInactive(game, req) }, 20000);
 }
 
-const join = (peers, session, id) => {
+const join = (peers, session) => {
   const ws = session.ws;
 
   if (!session.name) {
@@ -2977,7 +2977,7 @@ const join = (peers, session, id) => {
   peers[session.name] = ws;
 };
 
-const part = (peers, session, id) => {
+const part = (peers, session) => {
   const ws = session.ws;
 
   if (!session.name) {
@@ -3000,11 +3000,11 @@ const part = (peers, session, id) => {
   for (let peer in peers) {
     peers[peer].send(JSON.stringify({
       type: 'removePeer',
-      data: {'peer_id': peer}
+      data: {'peer_id': session.name}
     }));
     ws.send(JSON.stringify({
       type: 'removePeer', 
-      data: {'peer_id': peer}
+      data: {'peer_id': session.name}
     }));
   }
 };
@@ -3074,6 +3074,7 @@ const departLobby = (game, session, color) => {
   
   sendUpdateToPlayers(game, update);
 }
+
 const all  = `[   all  ]`;
 const info = `[  info  ]`;
 const todo = `[  todo  ]`;
@@ -3421,7 +3422,7 @@ router.ws("/ws/:id", async (ws, req) => {
     if (session.ws) {
         /* Cleanup any voice channels */
       if (id in audio) {
-        part(audio[id], session, id);
+        part(audio[id], session);
       }
       session.ws.close();
       session.ws = undefined;
@@ -3456,11 +3457,11 @@ router.ws("/ws/:id", async (ws, req) => {
 
     switch (data.type) {
     case 'join':
-      join(audio[id], session, id);
+      join(audio[id], session);
       break;
 
     case 'part':
-      part(audio[id], session, id);
+      part(audio[id], session);
       break;
 
     case 'relayICECandidate': {