Ready takes you into game

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>
         );

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>
+                    <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.max} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+                    <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>
+                    <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
-                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+                    <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}
@@ -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">
+        <section>
-            <div className="column is-2 title is-1">
+            <div className="row">
-                {phaseText(game.phase)}
+                <div className="three columns">
-            </div>
+                    {playerTeam.id}
-            <div className="column is-4">
                     {PlayerTeam(playerTeam, setActiveSkill)}
                 </div>
-            <div className="column is-4">
+                <div className="six columns" align="center">
-                <div>
+                    Round X
+                </div>
+                <div className="three columns">
+                    {otherTeams.id}
                     {otherTeams.map(OpponentTeam)}
                 </div>
-                <div>
-                    {incoming}
             </div>
-            </div>
+            <div className="row">
-            <div className="column is-2">
                 <div className="title is-4">{logs}</div>
             </div>
         </section>

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) {