client niceness"

client/src/components/info.component.jsx

@@ -155,7 +155,8 @@ function Info(args) {
 
     function scoreBoard() {
         const players = instance.players.map((p, i) =>
-            <tr key={i} >
+            <tr key={i}
+                className={p.ready ? 'ready' : ''}>
                 <td>{p.name}</td>
                 <td>{p.score.wins} / {p.score.losses}</td>
                 <td>{p.ready ? 'ready' : ''}</td>
@@ -163,7 +164,7 @@ function Info(args) {
         );
 
         return (
-            <table className="vbox-table">
+            <table>
                 <tbody>
                     {players}
                 </tbody>
@@ -171,19 +172,23 @@ function Info(args) {
         );
     }
 
+    const scoreBoardEl = activeCryp || info[0]
+        ? null
+        : scoreBoard();
+
     const infoCryp = activeCryp
         ? infoCrypElement(player.cryps.find(c => c.id === activeCryp.id))
         : null;
 
-    const otherInfo = info.length
+    const otherInfo = !info[0]
         ? infoVar(info)
         : null;
 
-    const instanceInfoClass = `instance-info ${info.length ? '' : 'hidden'}`;
+    const instanceInfoClass = `instance-info ${!info[0] ? '' : 'hidden'}`;
 
     return (
         <div className={instanceInfoClass} >
-            {scoreBoard()}
+            {scoreBoardEl}
             {infoCryp}
             {otherInfo}
         </div>

client/src/components/instance.create.form.jsx

@@ -59,7 +59,7 @@ class InstanceCreateForm extends Component {
                     <input
                         className="login-input"
                         type="text"
-                        value={this.state.value}
+                        value={this.state.name}
                         placeholder="name"
                         onChange={this.nameChange}
                     />

client/src/components/menu.component.jsx

@@ -36,9 +36,8 @@ function Menu(args) {
         const instancePanels = instances.map(instance => {
             const player = instance.players.find(p => p.id === account.id);
             const scoreText = player
-                ? `| ${player.score.wins} : ${player.score.losses}`
+                ? `${player.score.wins} : ${player.score.losses}`
                 : '';
-            const name = `${instance.name} ${scoreText}`;
 
             function instanceClick() {
                 if (!player) return sendInstanceJoin(instance);
@@ -46,12 +45,13 @@ function Menu(args) {
             }
 
             return (
-                <button
-                    className={'menu-instance-btn right'}
-                    key={instance.id}
-                    onClick={instanceClick}>
-                    {name}
-                </button>
+                <tr key={instance.id}
+                    className="right"
+                    onClick={instanceClick} >
+                    <td>{instance.name}</td>
+                    <td>{instance.players.length} / {instance.max_players}</td>
+                    <td>{scoreText}</td>
+                </tr>
             );
         });
 
@@ -68,7 +68,18 @@ function Menu(args) {
 
         return (
             <section className="menu-instance-list" >
-                {instancePanels}
+                <table>
+                    <thead>
+                        <tr>
+                            <th>instance name</th>
+                            <th>players</th>
+                            <th>status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {instancePanels}
+                    </tbody>
+                </table>
                 {mmSet}
                 <InstanceCreateForm />
             </section>

client/src/reducers.jsx

@@ -150,7 +150,7 @@ function wsReducer(state = defaultWs, action) {
     }
 }
 
-const defaultInfo = [];
+const defaultInfo = [null, null];
 function infoReducer(state = defaultInfo, action) {
     switch (action.type) {
         case actions.SET_INFO: