abandon rpc

client/src/components/game.ctrl.jsx

@@ -27,8 +27,13 @@ const addState = connect(
             return ws.sendGameSkillClear(game.id);
         }
 
+        function sendAbandon() {
+            return ws.sendInstanceAbandon(game.instance);
+        }
+
         return {
             game,
+            sendAbandon,
             sendGameSkillClear,
             sendReady,
             account,
@@ -51,6 +56,7 @@ const addState = connect(
 function Controls(args) {
     const {
         account,
+        sendAbandon,
         game,
         animating,
         sendGameSkillClear,
@@ -104,7 +110,7 @@ function Controls(args) {
             <div class="controls">
                 <PlayerBox player={opponent}/>
                 {game.phase === 'Finish' ? quitBtn : readyBtn}
-                <PlayerBox player={player} isPlayer={true} isGame={true} clear={sendGameSkillClear}/>
+                <PlayerBox player={player} isPlayer={true} isGame={true} clear={sendGameSkillClear} abandon={sendAbandon}/>
             </div>
         </aside>
     );

client/src/components/instance.ctrl.jsx

@@ -20,7 +20,12 @@ const addState = connect(
             return false;
         }
 
+        function sendAbandon() {
+            return ws.sendInstanceAbandon(instance.id);
+        }
+
         return {
+            sendAbandon,
             instance,
             sendReady,
             account,
@@ -41,6 +46,7 @@ const addState = connect(
 function Controls(args) {
     const {
         account,
+        sendAbandon,
         instance,
         sendReady,
         leave,
@@ -77,13 +83,18 @@ function Controls(args) {
         </div>
     );
 
+    const ready = instance.phase !== 'Finished'
+        ? <button class="ready" onClick={() => sendReady()}>Ready</button>
+        : <button class="ready" onClick={leave}>Leave</button>
+
+
     return (
         <aside>
             {timer}
             <div class="controls">
                 <PlayerBox player={opponent} />
-                <button class="ready" onClick={() => sendReady()}>Ready</button>
-                <PlayerBox player={player} isPlayer={true} leave={leave}/>
+                {ready}
+                <PlayerBox player={player} isPlayer={true} abandon={sendAbandon}/>
             </div>
         </aside>
     );

client/src/components/player.box.jsx

@@ -2,11 +2,11 @@ const preact = require('preact');
 
 function Scoreboard(args) {
     const {
+        abandon,
         isPlayer,
         player,
         isGame,
         clear,
-        leave,
     } = args;
 
     let scoreText = () => {
@@ -41,7 +41,7 @@ function Scoreboard(args) {
                 {(isPlayer && isGame) ? <button onClick={clear}>Clear</button> : null}
             </div>
             <div>
-                {leave ? <button onClick={leave}>Leave</button> : null}
+                {abandon ? <button onClick={abandon}>Abandon</button> : null}
             </div>
         </div>
     );