moar styles

html-client/cryps.css

@@ -6,7 +6,7 @@ body {
     font-family: 'Jura';
     color: whitesmoke;
     font-size: 16pt;
-    padding: 1em 2em;
+    padding: 0 2em;
     /*overflow: hidden;*/
     user-select: none;
 }
@@ -18,6 +18,7 @@ button, input {
     border-width: 2px;
     border-color: whitesmoke;
     border-radius: 0;
+    letter-spacing: 0.25em;
 }
 
 /*colour necesary to bash skellington*/
@@ -31,7 +32,7 @@ button:hover {
     MENU
 */
 .header {
-    margin-bottom: 1.5em;
+    margin-bottom: 1em;
 }
 
 .menu-cryps {
@@ -73,6 +74,7 @@ button:hover {
 
 .header-username {
     display: inline;
+    letter-spacing: 0.25em;
 }
 
 .header-status {
@@ -133,6 +135,8 @@ button:hover {
         box-shadow: 0 0 0px black;
     }
     100% {
+        background: whitesmoke;
+        color: black;
         box-shadow: 0 0 -30px black;
     }
 }
@@ -201,6 +205,11 @@ button:hover {
     min-width: 100%;
 }
 
+.cryp-list {
+    display: flex;
+    flex-flow: column;
+}
+
 /* CRYP BOX */
 .cryp-box {
     display: flex;
@@ -210,7 +219,7 @@ button:hover {
         this controls the size of the box
         as it fills the whole container
     */
-    margin: 0 1em 1em 0;
+    margin: 0 0 1em 0;
     border: 1px solid whitesmoke;
 }
 
@@ -270,3 +279,10 @@ button:hover {
     border-top-width: 0;
 }
 
+
+/* GAME */
+
+.cryp-skill-btn.active {
+    animation: whiteblackglow 1s ease 0s 1 normal forwards;
+    animation-iteration-count: 1;
+}

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