instance finished flag in db

client/cryps.css

@@ -646,8 +646,12 @@ table td svg {
 }
 
 /* GAME */
-.game-back-btn {
-    flex: 0 0 20%;
+.game-btn {
+    flex: 0 0 25%;
+}
+
+.game-btn:first-child {
+    margin-right: 0.5em;
 }
 
 .cryp-skill-btn[disabled] {

client/src/components/game.component.jsx

@@ -34,7 +34,7 @@ function GamePanel(props) {
             <main className="game">
                 <div className="instance-hdr">
                     <button
-                        className="game-back-btn instance-btn instance-ui-btn left"
+                        className="game-btn instance-btn instance-ui-btn left"
                         onClick={() => toggleLog(!showLog)}>
                         Game
                     </button>
@@ -57,20 +57,20 @@ function GamePanel(props) {
     const header = (
         <div className="instance-hdr">
             <button
-                className="game-back-btn instance-btn instance-ui-btn left"
+                className="game-btn instance-btn instance-ui-btn left"
                 onClick={backClick}>
                 Back
             </button>
+            <button
+                className="game-btn instance-btn instance-ui-btn left"
+                onClick={() => toggleLog(!showLog)}>
+                Log
+            </button>
             <div className="spacer">
                 <div>&nbsp;</div>
             </div>
             <button
-                className="game-back-btn instance-btn instance-ui-btn left"
-                onClick={() => toggleLog(!showLog)}>
-                Log
-            </button>
-            <button
-                className="game-back-btn instance-btn instance-ui-btn right"
+                className="game-btn instance-btn instance-ui-btn right"
                 onClick={() => sendGameReady()}>
                 Ready
             </button>
@@ -169,7 +169,7 @@ function GamePanel(props) {
     function OpponentTeam(team) {
         const cryps = team.cryps.map(OpponentCryp);
         return (
-            <div className="cryp-list" >
+            <div className="team-opponent cryp-list">
                 {cryps}
             </div>
         );
@@ -194,9 +194,7 @@ function GamePanel(props) {
             <div className="selected-skills">
                 {selectedSkills}
             </div>
-            <div className="team-opponent cryp-list">
-                {otherTeams.map(OpponentTeam)}
-            </div>
+            {otherTeams.map(OpponentTeam)}
         </main>
     );
 }

client/src/components/game.container.jsx

@@ -62,6 +62,7 @@ const addState = connect(
 
         function quit() {
             dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
         }
 
         function toggleLog(v) {