From 6ece2c03cdeac91f769ad93193062c8b03c39a0c Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 3 Jun 2019 15:46:14 +1000 Subject: [PATCH] coloured targeting --- WORKLOG.md | 2 -- client/assets/styles/game.css | 12 +++++------ client/src/components/game.component.jsx | 8 +++---- client/src/components/game.construct.jsx | 18 +++++++++++++--- client/src/components/skill.btn.jsx | 27 ++++++++++++++++++------ client/src/utils.jsx | 14 ++++++++++++ 6 files changed, 58 insertions(+), 23 deletions(-) diff --git a/WORKLOG.md b/WORKLOG.md index 2b63b924..23d9bfdb 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -33,9 +33,7 @@ ## NOW *CLIENT* -targeting arrows back? reconnect based on time delta -dont' nav to list on connect menu footer diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 82144be3..72f6282c 100644 --- a/client/assets/styles/game.css +++ b/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 { diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 85d4a795..a59c621a 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -81,8 +81,8 @@ function GamePanel(props) { ); function PlayerTeam(team) { - const constructs = team.constructs.map(c => - ); + const constructs = team.constructs.map((c, i) => + ); return (
{constructs} @@ -91,8 +91,8 @@ function GamePanel(props) { } function OpponentTeam(team) { - const constructs = team.constructs.map(c => - ); + const constructs = team.constructs.map((c, i) => + ); return (
{constructs} diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index b60bb1c1..8989a75f 100644 --- a/client/src/components/game.construct.jsx +++ b/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 => ); + .map(j => ); let crypSkills =
 
; if (player) crypSkills = (
{skills}
); @@ -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) =>

{`< ${s.skill}`}

); + .map((s, i) => { + const highlightColour = TARGET_COLOURS[playerTeamIds.indexOf(s.source_construct_id)]; + return

{`< ${s.skill}`}

+ }); const anim = (
@@ -103,6 +114,7 @@ function GameConstruct(props) {
{stats}
{effects}
+
{targeting}
); } diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx index 35e88aca..0655ceb2 100644 --- a/client/src/components/skill.btn.jsx +++ b/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) { ); } - 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 ( diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 2e780b42..f5c2e5d8 100644 --- a/client/src/utils.jsx +++ b/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, };