From 0380617849435191a8bf7c395997501ffe24d194 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Fri, 29 Mar 2019 12:39:51 +1000
Subject: [PATCH 1/2] Ready takes you into game

---
 html-client/src/components/body.component.jsx |  2 +-
 html-client/src/components/cryp.list.jsx      |  0
 html-client/src/components/game.jsx           | 54 ++++++-------------
 .../src/components/login.component.jsx        |  0
 .../src/components/login.container.jsx        |  0
 html-client/src/events.jsx                    |  3 +-
 html-client/src/keyboard.jsx                  |  0
 html-client/src/main.jsx                      |  0
 html-client/src/socket.jsx                    |  0
 9 files changed, 20 insertions(+), 39 deletions(-)
 mode change 100755 => 100644 html-client/src/components/body.component.jsx
 mode change 100755 => 100644 html-client/src/components/cryp.list.jsx
 mode change 100755 => 100644 html-client/src/components/game.jsx
 mode change 100755 => 100644 html-client/src/components/login.component.jsx
 mode change 100755 => 100644 html-client/src/components/login.container.jsx
 mode change 100755 => 100644 html-client/src/keyboard.jsx
 mode change 100755 => 100644 html-client/src/main.jsx
 mode change 100755 => 100644 html-client/src/socket.jsx

diff --git a/html-client/src/components/body.component.jsx b/html-client/src/components/body.component.jsx
old mode 100755
new mode 100644
index fcb6abcf..7c1b3b8f
--- a/html-client/src/components/body.component.jsx
+++ b/html-client/src/components/body.component.jsx
@@ -39,7 +39,7 @@ function renderBody(props) {
                     type="submit"
                     onClick={() => setGame(null)}
                 >
-                Return to Main Menu
+                Back to instance
                 </button>
             </div>
         );
diff --git a/html-client/src/components/cryp.list.jsx b/html-client/src/components/cryp.list.jsx
old mode 100755
new mode 100644
diff --git a/html-client/src/components/game.jsx b/html-client/src/components/game.jsx
old mode 100755
new mode 100644
index 0a81b6a7..4327a515
--- a/html-client/src/components/game.jsx
+++ b/html-client/src/components/game.jsx
@@ -69,7 +69,6 @@ function GamePanel(props) {
                     <div className="columns" >
                         <div className="column is-10">
                             <p className="title">{cryp.name}</p>
-                            <p className="subtitle">Level {cryp.lvl}</p>
                         </div>
                         <div className="column">
                             <figure className="image">
@@ -78,11 +77,9 @@ function GamePanel(props) {
                         </div>
 
                     </div>
-                    <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+                    <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.max} HP </div>
+                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
 
-                    <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
-                    <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
                 </div>
                 {effects}
                 {skills}
@@ -111,7 +108,6 @@ function GamePanel(props) {
                     <div className="columns" >
                         <div className="column is-10">
                             <p className="title">{cryp.name}</p>
-                            <p className="subtitle">Level {cryp.lvl}</p>
                         </div>
                         <div className="column">
                             <figure className="image">
@@ -120,11 +116,8 @@ function GamePanel(props) {
                         </div>
 
                     </div>
-                    <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
-
-                    <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
-                    <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
+                    <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
+                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
 
                 </div>
                 {effects}
@@ -138,43 +131,30 @@ function GamePanel(props) {
             <div
                 className="tile"
                 style={activeSkill ? { cursor: 'pointer' } : {}}
-                onClick={() => selectSkillTarget(team.id)} >
+                onClick={() => console.log(activeSkill)} >
                 {cryps}
             </div>
         );
     }
 
-    // style={{ "min-height": "100%" }}
-    function phaseText(phase) {
-        switch (phase) {
-            case 'Skill':
-                return 'Choose abilities';
-            case 'Target':
-                return 'Block abilities';
-            case 'Finish':
-                return 'Game over';
-        }
-    }
-
     const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
 
     return (
-        <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>
+        <section>
+            <div className="row">
+                <div className="three columns">
+                    {playerTeam.id}
+                    {PlayerTeam(playerTeam, setActiveSkill)}
+                </div>
+                <div className="six columns" align="center">
+                    Round X
+                </div>
+                <div className="three columns">
+                    {otherTeams.id}
                     {otherTeams.map(OpponentTeam)}
                 </div>
-                <div>
-                    {incoming}
-                </div>
             </div>
-            <div className="column is-2">
+            <div className="row">
                 <div className="title is-4">{logs}</div>
             </div>
         </section>
diff --git a/html-client/src/components/login.component.jsx b/html-client/src/components/login.component.jsx
old mode 100755
new mode 100644
diff --git a/html-client/src/components/login.container.jsx b/html-client/src/components/login.container.jsx
old mode 100755
new mode 100644
diff --git a/html-client/src/events.jsx b/html-client/src/events.jsx
index 3eae6e4d..515c535e 100644
--- a/html-client/src/events.jsx
+++ b/html-client/src/events.jsx
@@ -16,7 +16,8 @@ function registerEvents(store) {
     }
 
     function setGame(game) {
-        return console.log('EVENT ->', 'game', game);
+        store.dispatch(actions.setGame(game));
+        // return console.log('EVENT ->', 'game', game);
     }
 
     function setAccount(account) {
diff --git a/html-client/src/keyboard.jsx b/html-client/src/keyboard.jsx
old mode 100755
new mode 100644
diff --git a/html-client/src/main.jsx b/html-client/src/main.jsx
old mode 100755
new mode 100644
diff --git a/html-client/src/socket.jsx b/html-client/src/socket.jsx
old mode 100755
new mode 100644

From 383330ddada9d93b333fbd666b0717c9a4647a23 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Fri, 29 Mar 2019 13:33:44 +1000
Subject: [PATCH 2/2] Battles are back on the menu

---
 html-client/src/components/game.container.js |  4 +--
 html-client/src/components/game.jsx          | 37 ++++++++++----------
 html-client/src/main.jsx                     |  1 +
 html-client/src/reducers.jsx                 | 11 ++++++
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/html-client/src/components/game.container.js b/html-client/src/components/game.container.js
index 8adac3fd..17a41dba 100644
--- a/html-client/src/components/game.container.js
+++ b/html-client/src/components/game.container.js
@@ -8,9 +8,9 @@ const addState = connect(
     function receiveState(state) {
         const { ws, game, account, activeSkill, activeIncoming } = state;
 
-        function selectSkillTarget(targetTeamId) {
+        function selectSkillTarget(targetCrypId) {
             if (activeSkill) {
-                return ws.sendGameSkill(game.id, activeSkill.crypId, targetTeamId, activeSkill.skill.skill);
+                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill.skill);
             }
             return false;
         }
diff --git a/html-client/src/components/game.jsx b/html-client/src/components/game.jsx
index 4327a515..f1a2f004 100644
--- a/html-client/src/components/game.jsx
+++ b/html-client/src/components/game.jsx
@@ -103,24 +103,28 @@ function GamePanel(props) {
         ));
 
         return (
-            <div key={cryp.id} className="tile is-vertical">
-                <div className="tile is-child">
-                    <div className="columns" >
-                        <div className="column is-10">
-                            <p className="title">{cryp.name}</p>
-                        </div>
-                        <div className="column">
-                            <figure className="image">
-                                <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                            </figure>
+            <div className="tile"
+                style={activeSkill ? { cursor: 'pointer' } : {}}
+                onClick={() => selectSkillTarget(cryp.id)} >
+                <div key={cryp.id} className="tile is-vertical">
+                    <div className="tile is-child">
+                        <div className="columns" >
+                            <div className="column is-10">
+                                <p className="title">{cryp.name}</p>
+                            </div>
+                            <div className="column">
+                                <figure className="image">
+                                    <svg width="40" height="40" data-jdenticon-value={cryp.name} />
+                                </figure>
+                            </div>
+
                         </div>
+                        <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
+                        <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
 
                     </div>
-                    <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
-
+                    {effects}
                 </div>
-                {effects}
             </div>
         );
     }
@@ -128,10 +132,7 @@ function GamePanel(props) {
     function OpponentTeam(team) {
         const cryps = team.cryps.map(OpponentCrypCard);
         return (
-            <div
-                className="tile"
-                style={activeSkill ? { cursor: 'pointer' } : {}}
-                onClick={() => console.log(activeSkill)} >
+            <div>
                 {cryps}
             </div>
         );
diff --git a/html-client/src/main.jsx b/html-client/src/main.jsx
index 026fcc79..5b414a0c 100644
--- a/html-client/src/main.jsx
+++ b/html-client/src/main.jsx
@@ -17,6 +17,7 @@ const Body = require('./components/body.component');
 const store = createStore(
     combineReducers({
         account: reducers.accountReducer,
+        activeSkill: reducers.activeSkillReducer,
         combiner: reducers.combinerReducer,
         game: reducers.gameReducer,
         cryps: reducers.crypsReducer,
diff --git a/html-client/src/reducers.jsx b/html-client/src/reducers.jsx
index 2da78ba3..1e44c353 100644
--- a/html-client/src/reducers.jsx
+++ b/html-client/src/reducers.jsx
@@ -10,6 +10,16 @@ function accountReducer(state = defaultAccount, action) {
     }
 }
 
+const defaultActiveSkill = null;
+function activeSkillReducer(state = defaultActiveSkill, action) {
+    switch (action.type) {
+        case actions.SET_ACTIVE_SKILL:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultCryps = null;
 function crypsReducer(state = defaultCryps, action) {
     switch (action.type) {
@@ -72,6 +82,7 @@ function wsReducer(state = defaultWs, action) {
 
 module.exports = {
     accountReducer,
+    activeSkillReducer,
     combinerReducer,
     crypsReducer,
     gameReducer,