instance lists

client/src/components/menu.component.jsx

@@ -17,6 +17,7 @@ const COLOURS = [
 
 function Menu(args) {
     const {
+        account,
         cryps,
         selectedCryps,
         setSelectedCryps,
@@ -31,14 +32,12 @@ function Menu(args) {
         if (!instances) return <div>...</div>;
 
         const instancePanels = instances.map(instance => {
-            const globalInstance = instance.instance === NULL_UUID;
-            const name = globalInstance
-                ? 'Global Matchmaking'
-                : `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;
+            const player = instance.players.find(p => p.account === account.id);
+            const name = `${instance.name} | ${player.score.wins} : ${player.score.losses}`;
 
             return (
                 <button
-                    className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
+                    className={'menu-instance-btn right'}
                     key={instance.id}
                     onClick={() => sendInstanceState(instance)}>
                     {name}

client/src/components/menu.container.jsx

@@ -5,7 +5,7 @@ const actions = require('./../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, cryps, selectedCryps, instances } = state;
+        const { ws, cryps, selectedCryps, instances, account } = state;
 
         function sendInstanceJoin() {
             if (selectedCryps.length) {
@@ -26,10 +26,11 @@ const addState = connect(
         }
 
         function sendInstanceState(instance) {
-            return ws.sendInstanceState(instance.instance);
+            return ws.sendInstanceState(instance.id);
         }
 
         return {
+            account,
             cryps,
             selectedCryps,
             sendInstanceJoin,