clear skills

client/src/components/game.ctrl.jsx

@@ -23,8 +23,13 @@ const addState = connect(
             return ws.sendInstanceState(game.instance);
         }
 
+        function sendGameSkillClear() {
+            return ws.sendGameSkillClear(game.id);
+        }
+
         return {
             game,
+            sendGameSkillClear,
             sendReady,
             account,
             getInstanceState,
@@ -48,9 +53,10 @@ function Controls(args) {
         account,
         game,
         animating,
+        sendGameSkillClear,
         sendReady,
-        quit,
         getInstanceState,
+        quit,
     } = args;
 
     if (!game) return false;
@@ -98,7 +104,7 @@ function Controls(args) {
             <div class="controls">
                 <PlayerBox player={opponent}/>
                 {game.phase === 'Finish' ? quitBtn : readyBtn}
-                <PlayerBox player={player} isPlayer={true}/>
+                <PlayerBox player={player} isPlayer={true} isGame={true} clear={sendGameSkillClear}/>
             </div>
         </aside>
     );

client/src/components/player.box.jsx

@@ -3,9 +3,9 @@ const preact = require('preact');
 function Scoreboard(args) {
     const {
         isPlayer,
-        ready,
         player,
-
+        isGame,
+        clear,
         leave,
     } = args;
 
@@ -37,7 +37,10 @@ function Scoreboard(args) {
             <div class="img">
                 <div>{player.name}</div>
             </div>
-            <div class="ctrl">
+            <div>
+                {(isPlayer && isGame) ? <button onClick={clear}>Clear</button> : null}
+            </div>
+            <div>
                 {leave ? <button onClick={leave}>Leave</button> : null}
             </div>
         </div>

client/src/socket.jsx

@@ -108,6 +108,11 @@ function createSocket(events) {
         events.setActiveSkill(null);
     }
 
+    function sendGameSkillClear(gameId) {
+        send(['GameSkillClear', { game_id: gameId }]);
+        events.setActiveSkill(null);
+    }
+
     function sendGameTarget(gameId, constructId, skillId) {
         send(['GameTarget', { game_id: gameId, construct_id: constructId, skill_id: skillId }]);
         events.setActiveSkill(null);
@@ -316,6 +321,7 @@ function createSocket(events) {
         sendGameState,
         sendGameReady,
         sendGameSkill,
+        sendGameSkillClear,
         sendGameTarget,
 
         sendInstanceReady,