coloured targeting

WORKLOG.md

@@ -33,9 +33,7 @@
 ## NOW
 
 *CLIENT*
-targeting arrows back?
 reconnect based on time delta
-dont' nav to list on connect
 menu footer
 
 

client/assets/styles/game.css

@@ -74,13 +74,11 @@
 }
 
 .game-construct .targeting {
-    grid-area: target;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: flex-start;
-    width: 100%;
-    white-space: nowrap;
+    grid-area: avatar;
+    position: relative;
+    left: 60%;
+    top: 50%;
+    text-align: center;
 }
 
 .game-construct .img {

client/src/components/game.component.jsx

@@ -81,8 +81,8 @@ function GamePanel(props) {
     );
 
     function PlayerTeam(team) {
-        const constructs = team.constructs.map(c =>
-            <GameConstruct key={c.id} construct={c} player={true} />);
+        const constructs = team.constructs.map((c, i) =>
+            <GameConstruct key={c.id} i={i} construct={c} player={true} />);
         return (
             <div className="team player">
                 {constructs}
@@ -91,8 +91,8 @@ function GamePanel(props) {
     }
 
     function OpponentTeam(team) {
-        const constructs = team.constructs.map(c =>
-            <GameConstruct key={c.id} construct={c} player={false} />);
+        const constructs = team.constructs.map((c, i) =>
+            <GameConstruct key={c.id} i={i} construct={c} player={false} />);
         return (
             <div className="team opponent">
                 {constructs}

client/src/components/game.construct.jsx

@@ -3,12 +3,18 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const actions = require('../actions');
-const { STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
+const { TARGET_COLOURS: COLOURS, STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
 const { animationDivs } = require('../animations');
 const shapes = require('./shapes');
 
 const SkillBtn = require('./skill.btn');
 
+const TARGET_COLOURS = [
+    COLOURS.PINK,
+    COLOURS.LBLUE,
+    COLOURS.GREEN,
+];
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -43,6 +49,7 @@ const addState = connect(
 
 function GameConstruct(props) {
     const {
+        i,
         game,
         account,
         construct,
@@ -53,6 +60,7 @@ function GameConstruct(props) {
         selectSkillTarget,
     } = props;
 
+
     const ko = construct.green_life.value === 0 ? 'ko' : '';
     const classes = eventClasses(resolution, construct);
 
@@ -66,7 +74,7 @@ function GameConstruct(props) {
 
 
     const skills = range(0, 3)
-        .map(i => <SkillBtn key={i} construct={construct} i={i} />);
+        .map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />);
 
     let crypSkills = <div> &nbsp; </div>;
     if (player) crypSkills = (<div className="skills"> {skills} </div>);
@@ -86,7 +94,10 @@ function GameConstruct(props) {
 
     const targeting = game.stack
         .filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id)
-        .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
+        .map((s, i) => {
+            const highlightColour = TARGET_COLOURS[playerTeamIds.indexOf(s.source_construct_id)];
+            return <h3 key={i} style={{ color: highlightColour}} >{`< ${s.skill}`}</h3>
+        });
 
     const anim = (
         <div className="anim-container">
@@ -103,6 +114,7 @@ function GameConstruct(props) {
             <div className="stats"> {stats} </div>
             <ConstructAvatar name={construct.name} id={construct.id} />
             <div className="effects"> {effects} </div>
+            <div className="targeting"> {targeting} </div>
         </div>
     );
 }

client/src/components/skill.btn.jsx

@@ -3,6 +3,15 @@ const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
+const { TARGET_COLOURS } = require('./../utils');
+
+const TC_MAP = [
+    TARGET_COLOURS.PINK,
+    TARGET_COLOURS.LBLUE,
+    TARGET_COLOURS.GREEN,
+];
+
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -31,6 +40,7 @@ function Skill(props) {
         construct,
         game,
         i,
+        j,
         mobile,
         activeSkill,
         setActiveSkill,
@@ -44,14 +54,16 @@ function Skill(props) {
             <button
                 disabled='true'
                 className='construct-skill-btn disabled'>
-                &nbsp;
             </button>
         );
     }
 
-    const side = mobile
-        ? 'top'
-        : '';
+    const skillChosen = game.stack.some(stack => stack.source_construct_id === construct.id);
+    const targeting = game.stack.some(stack => stack.source_construct_id === construct.id && stack.skill === s.skill);
+
+    if (skillChosen && !targeting) {
+        return false;
+    }
 
     const cdText = construct.skills[i].cd > 0
         ? `- ${s.cd}T`
@@ -61,18 +73,19 @@ function Skill(props) {
         ? activeSkill.constructId === construct.id && activeSkill.skill === s.skill
         : false;
 
+    const highlightColour = TC_MAP[j];
+
     function onClick(e) {
         e.stopPropagation();
         return setActiveSkill(construct.id, s.skill);
     }
 
-    const targeting = game.stack.some(stack => stack.source_construct_id === construct.id && stack.skill === s.skill);
-
     return (
         <button
             disabled={cdText || s.disabled || ko}
-            className={`construct-skill-btn ${side} ${(targeting || highlight) ? 'active' : ''}`}
+            className={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`}
             type="submit"
+            style={ targeting ? { color: highlightColour } : false}
             onClick={onClick}>
             {s.skill} {cdText}
         </button>

client/src/utils.jsx

@@ -408,6 +408,19 @@ const COLOURS = [
     '#3498db',
 ];
 
+const TARGET_COLOURS = {
+    BLUE: '#004bfe',
+    CYAN: '#27e7c0',
+    PURPLE: '#61008c',
+    YELLOW: '#fdfe02',
+    ORANGE: '#ff9215',
+    PINK: '#e766b6',
+    GRAY: '#9d9ea0',
+    LBLUE: '#87c6f2',
+    GREEN: '#166c4f',
+    BROWN: '#583108',
+};
+
 module.exports = {
     animateConstruct,
     stringSort,
@@ -423,4 +436,5 @@ module.exports = {
     NULL_UUID,
     STATS,
     COLOURS,
+    TARGET_COLOURS,
 };