skip and footer stuff

WORKLOG.md

@@ -36,7 +36,6 @@
 
 purge green disable
 rework scatter
-change strangle
 hatred maybe
 
 reconnect based on time delta

client/assets/styles/styles.css

@@ -482,6 +482,11 @@ main .top button {
     width: 100%;
 }
 
+
+.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
+    color: forestgreen;
+}
+
 .ready {
     background: forestgreen;
     color: black;

client/src/components/game.footer.jsx

@@ -75,26 +75,34 @@ function GameFooter(props) {
 
     const playerTeam = game.players.find(t => t.id === account.id);
 
-    function actionClick() {
-        if (game.phase === 'Finish') {
-            sendInstanceState(game.instance);
-            quit();
-            return true;
-        }
-
-        if (resolution) {
-            return skip();
-        }
-
-        return sendGameReady();
+    function quitClick() {
+        sendInstanceState(game.instance);
+        quit();
+        return true;
     }
 
-    let actionText = 'Ready';
-    if (game.phase === 'Finish') actionText = 'Done';
-    if (resolution) actionText = 'Skip';
-    const ready = (actionText === 'Ready' && playerTeam.ready)
-        ? 'ready'
-        : '';
+    const quitBtn = (
+        <button
+            onClick={quitClick}>
+            Back
+        </button>
+    );
+
+    const skipBtn = (
+        <button
+            onClick={skip}>
+            Skip
+        </button>
+    );
+
+
+    const readyBtn = (
+        <button
+            className={`${playerTeam.ready ? 'ready' : ''} ready-btn`}
+            onClick={sendGameReady}>
+            Ready
+        </button>
+    );
 
     const zero = Date.parse(game.phase_start);
     const now = Date.now();
@@ -125,11 +133,9 @@ function GameFooter(props) {
         <footer>
             {timer}
             <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
-            <button
-                className={ready}
-                onClick={() => actionClick()}>
-                {actionText}
-            </button>
+            {resolution && skipBtn}
+            {game.phase === 'Finish' && quitBtn }
+            {!resolution && game.phase === 'Skill' && readyBtn }
         </footer>
     );
 }

client/src/components/instance.footer.jsx

@@ -62,7 +62,7 @@ function Instance(args) {
         return setInfo(info);
     }
 
-    const rdyClasses = `${player.ready ? 'ready' : ''}`;
+    const rdyClasses = `${player.ready ? 'ready ready-btn' : 'ready-btn'}`;
     const readyInfo = instance.phase === 'Lobby'
         ? 'lobbyReady'
         : 'ready';

client/src/events.jsx

@@ -61,14 +61,14 @@ function registerEvents(store) {
                     const sequence = getCombatSequence(r);
                     return eachSeries(sequence, (stage, sCb) => {
                         const { skip } = store.getState();
-                        if (skip) return sCb();
+                        if (skip) return sCb('skip');
                         const stagedR = Object.create(r);
                         stagedR.stage = stage;
                         store.dispatch(actions.setResolution(stagedR));
 
                         return setTimeout(sCb, TIMES[stage]);
                     }, err => {
-                        if (err) return console.error(err);
+                        if (err) console.error(err);
                         // Finished this resolution
                         return cb();
                     });