client niceness"

client/cryps.css

@@ -66,6 +66,17 @@ main {
     align-items: flex-start;
 }
 
+tr.right:focus, tr.right:hover {
+    box-shadow: inset -0.5em 0 0 0 whitesmoke;
+}
+
+tr {
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+}
+
 button, input {
     font-family: 'Jura';
     color: whitesmoke;
@@ -320,24 +331,30 @@ header {
     flex: 1 0 25%;
 }
 
-.ready-btn {
-    flex: 1 0 50%;
-}
 
 /* nav hidden on desktop */
 .nav-btn {
     display: none;
 }
 
+.ready-btn {
+    flex: 1 0 50%;
+}
+
 .ready-btn:hover {
     transition-property: all;
-    transition-duration: 2s;
+    transition-duration: 0.5s;
     transition-timing-function: ease;
     color: forestgreen;
     border-color: forestgreen;
     /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
 }
 
+.ready {
+    color: forestgreen;
+    box-shadow: inset -0.5em 0 0 0 forestgreen;
+}
+
 .instance-ui-btn {
     font-size: 100%;
     padding: 0;
@@ -395,32 +412,33 @@ header {
     color: black;
 }
 
-.vbox-table {
+table {
     table-layout: fixed;
     width: 100%;
 }
 
-.vbox-table td {
+table td {
     border: 1px solid whitesmoke;
     padding: 0.2em;
     text-align: center;
     height: 40px;
     cursor: pointer;
     text-transform: uppercase;
+}
 
+.vbox-table td {
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
-
 }
 
-.vbox-table td:active {
+table td:active {
     background-color: whitesmoke;
     color: black;
 }
 
-.vbox-table td svg {
+table td svg {
     stroke-width: 2px;
     height: 96%;
     vertical-align: text-bottom;

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: