moar styles

html-client/src/components/game.component.jsx

@@ -25,12 +25,27 @@ function GamePanel(props) {
     const playerTeam = game.teams.find(t => t.id === account.id);
 
     function Cryp(cryp) {
-        const skills = range(0, 4).map((i) => {
+        const skills = range(0, 4).map(i => {
             const s = cryp.skills[i]
                 ? cryp.skills[i].skill
                 : (<span>&nbsp;</span>);
 
-            return <button key={i} className="cryp-skill-btn" type ="submit" onClick={() => setActiveSkill(cryp.id, s)}>{s}</button>;
+            const highlight = activeSkill
+                ? activeSkill.crypId === cryp.id && activeSkill.skill === s
+                : false;
+
+            if (activeSkill) {
+                console.log(cryp.id, s, highlight);
+            }
+
+            return (
+                <button
+                    key={i}
+                    className={`cryp-skill-btn ${highlight ? 'active' : ''}`}
+                    type="submit"
+                    onClick={() => setActiveSkill(cryp.id, s)}>{s}
+                </button>
+            );
         });
 
         const stats = [
@@ -45,7 +60,11 @@ function GamePanel(props) {
         ));
 
         return (
-            <div className="cryp-box">
+            <div
+                key={cryp.id}
+                style={ activeSkill ? { cursor: 'pointer' } : {}}
+                onClick={() => selectIncomingTarget(cryp.id)}
+                className="cryp-box" >
                 <figure className="img">
                     {molecule}
                     <figcaption>{cryp.name}</figcaption>
@@ -60,22 +79,11 @@ function GamePanel(props) {
         );
     }
 
-    function PlayerCryp(cryp) {
-        return (
-            <div
-                key={cryp.id}
-                style={ activeIncoming ? { cursor: 'pointer' } : {}}
-                onClick={() => selectIncomingTarget(cryp.id)}>
-                {Cryp(cryp, setActiveSkill)}
-            </div>
-        );
-    }
-
     function PlayerTeam(team) {
-        const cryps = team.cryps.map(c => PlayerCryp(c, setActiveSkill));
+        const cryps = team.cryps.map(c => Cryp(c));
 
         return (
-            <div>
+            <div className="three columns cryp-list">
                 {cryps}
             </div>
         );
@@ -94,7 +102,11 @@ function GamePanel(props) {
         ));
 
         return (
-            <div key={i} className="cryp-box">
+            <div
+                key={i}
+                className="cryp-box"
+                style={ activeSkill ? { cursor: 'pointer' } : {}}
+                onClick={() => selectSkillTarget(cryp.id)} >
                 <figure className="img">
                     {molecule}
                     <figcaption>{cryp.name}</figcaption>
@@ -116,7 +128,7 @@ function GamePanel(props) {
         );
     }
 
-    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
+    const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
 
     return (
         <section>
@@ -133,10 +145,11 @@ function GamePanel(props) {
                 </div>
             </div>
             <div className="row">
-                <div className="four columns">
-                    {PlayerTeam(playerTeam, setActiveSkill)}
+                {PlayerTeam(playerTeam, setActiveSkill)}
+                <div className="two columns skill-lines-ctr">
+                    <div>&nbsp;</div>
                 </div>
-                <div className="four columns">
+                <div className="three columns">
                     {otherTeams.map(OpponentTeam)}
                 </div>
                 <div className="four columns">

html-client/src/components/instance.component.jsx

@@ -68,12 +68,12 @@ function InstanceComponent(args) {
                         Menu
                     </button>
                 </div>
-                <div className="six columns">
+                <div className="three columns">
                     <div>&nbsp;</div>
                 </div>
-                <div className="three columns">
+                <div className="six columns">
                     <button
-                        className="instance-btn instance-ui-btn green-btn u-pull-right"
+                        className="instance-btn instance-ui-btn green-btn"
                         onClick={() => sendInstanceReady()}>
                         Ready
                     </button>
@@ -81,7 +81,7 @@ function InstanceComponent(args) {
             </div>
             <div className="row">
                 <VboxContainer />
-                <div className="three columns">
+                <div className="three columns instance-cryp-list">
                     {cryps}
                 </div>
             </div>

html-client/src/events.jsx

@@ -29,7 +29,7 @@ function registerEvents(store) {
     }
 
     function setActiveSkill(skill) {
-        console.log('EVENT ->', 'activeSkill', skill);
+        store.dispatch(actions.setActiveSkill(null));
     }
 
     function setMenu() {