keyboard shortcuts and new battle page

client/src/components/body.component.jsx

@@ -1,34 +1,61 @@
 // eslint-disable-next-line
 const preact = require('preact');
+const { connect } = require('preact-redux');
+const actions = require('../actions');
 
 const ItemListContainer = require('./item.list.container');
 const CrypSpawnContainer = require('./cryp.spawn.container');
 const CrypListContainer = require('./cryp.list.container');
 const GameContainer = require('./game.container');
 
-function renderBody() {
-    return (
-        <section className="columns">
-            <div className="column is-4">
-                <div className="column">
-                    <CrypSpawnContainer />
-                </div>
-                <div className="column">
-                    <div className="columns">
-                        <div className="column is-8">
-                            <CrypListContainer />
-                        </div>
-                        <div className="column">
-                            <ItemListContainer />
+const addState = connect(
+    function receiveState(state) {
+        const {game} = state;
+        return {game};
+    },
+    function receiveDispatch(dispatch) {
+        function setGame(game) {
+            dispatch(actions.setGame(game))
+        }
+        return {setGame}
+    }
+);
+function renderBody(props){
+    const {game, setGame} = props;
+    if(game){
+        return(
+            <div>
+                <GameContainer />
+                <button
+                    className="button is-dark is-fullwidth"
+                    type="submit"
+                    onClick={() => setGame(null)}
+                >
+                Return to Main Menu
+                </button>
+            </div>
+        )
+    }else{
+        return(
+            <section className="columns">
+                <div className="column is-4">
+                    <div className="column">
+                        <CrypSpawnContainer />
+                    </div>
+                    <div className="column">
+                        <div className="columns">
+                            <div className="column is-8">
+                                <CrypListContainer />
+                            </div>
+                            <div className="column">
+                                <ItemListContainer />
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div className="column">
-                <GameContainer />
-            </div>
-        </section>
-    );
+            </section>
+        )
+    }
 }
 
-module.exports = renderBody;
+module.exports = addState(renderBody);

client/src/components/game.jsx

@@ -1,4 +1,5 @@
 const preact = require('preact');
+const key = require('keymaster');
 
 function GamePanel(props) {
     const {
@@ -10,7 +11,7 @@ function GamePanel(props) {
         selectSkillTarget,
         selectIncomingTarget,
         account
-    } = props;
+    } = props;    
 
     if (!game) return <div>...</div>;
 
@@ -19,6 +20,8 @@ function GamePanel(props) {
     const playerTeam = game.teams.find(t => t.id === account.id);
 
     const incoming = playerTeam.incoming.map(inc => {
+        key.unbind('1');
+        key('1', () => setActiveIncoming(inc.id));
         return (
             <div className="tile is-child" key={inc.id}>
                 <div>{JSON.stringify(inc)}</div>
@@ -26,13 +29,15 @@ function GamePanel(props) {
                     className="button is-dark is-fullwidth"
                     type="submit"
                     onClick={() => setActiveIncoming(inc.id)}>
-                    {inc.skill}
+                    (1) Block skill: {inc.skill}
                 </button>
             </div>
         );
     });
 
     function PlayerCrypCard(cryp) {
+        key.unbind('q');
+        key('q', () => setActiveSkill(cryp.id, 'Attack'));
         if (activeIncoming) console.log('should be a pointer');
         return (
             <div
@@ -64,7 +69,7 @@ function GamePanel(props) {
                     type="submit"
                     onClick={() => setActiveSkill(cryp.id, 'Attack')}
                 >
-                    Attack
+                    (Q) Attack 
                 </button>
             </div>
         );
@@ -109,7 +114,6 @@ function GamePanel(props) {
 
     function OpponentTeam(team) {
         const cryps = team.cryps.map(OpponentCrypCard);
-
         return (
             <div
                 className="tile"
@@ -121,23 +125,36 @@ function GamePanel(props) {
     }
 
     // style={{ "min-height": "100%" }}
-
+    function phaseText(phase){
+        switch(phase){
+        case 'Skill':
+            return "Choose abilities"
+        case 'Target':
+            return "Block abilities"
+        case 'Finish':
+            return "Game over"
+        }
+    }
     return (
-        <div className="tile is-ancestor">
-            <div className="tile is-parent is-vertical">
-                <div className="tile is-parent">{otherTeams.map(OpponentTeam)}</div>
-                <div className="tile">
-                    <div className="title is-1">{game.phase}</div>
+        <section className="columns">
+            <div className="column is-2 title is-1">
+                {phaseText(game.phase)}
+            </div>
+            <div className="column is-4">
+                {PlayerTeam(playerTeam, setActiveSkill)}
+            </div>
+            <div className="column is-4">
+                <div>
+                    {otherTeams.map(OpponentTeam)}
                 </div>
-                <div className="tile">
+                <div>
                     {incoming}
                 </div>
-                <div className="tile is-parent footer" >{PlayerTeam(playerTeam, setActiveSkill)}</div>
             </div>
-            <div className="tile is-parent is-4">
-                <div className="tile" >log</div>
+            <div className="column is-2">
+                <div className="title is-4">log</div>
             </div>
-        </div>
+        </section>
     )
 }
 

client/src/keyboard.jsx

@@ -6,9 +6,18 @@ function setupKeys(store) {
         const state = store.getState();
 
         key.unbind('esc');
+
         if (state.activeItem) {
             key('esc', () => store.dispatch(actions.setActiveItem(null)));
         }
+        if (state.activeSkill) {
+            key('esc', () => store.dispatch(actions.setActiveSkill(null)));
+        }
+        if (state.activeIncoming) {
+            key('esc', () => store.dispatch(actions.setActiveIncoming(null)));
+        }
+        
+
     });
 }