From 2e7e9d465d8a653a809d24ec1a439cda80fe77e1 Mon Sep 17 00:00:00 2001 From: ntr Date: Sat, 13 Apr 2019 14:39:24 +1000 Subject: [PATCH] combat text --- client/cryps.css | 18 +++ client/src/components/game.component.jsx | 106 ++----------- client/src/components/game.cryp.jsx | 150 +++++++++++++++++++ client/src/components/instance.component.jsx | 2 +- client/src/components/menu.component.jsx | 2 +- client/src/components/molecule.jsx | 18 ++- client/src/events.jsx | 2 +- client/src/utils.jsx | 72 ++++++++- 8 files changed, 262 insertions(+), 108 deletions(-) create mode 100644 client/src/components/game.cryp.jsx diff --git a/client/cryps.css b/client/cryps.css index e523e82d..efbe85e0 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -596,6 +596,12 @@ header { filter: blur(5px); } +text.combat-text { + fill: whitesmoke; + font-size: 5em; + font-family: 'Jura'; +} + .team-player { padding: 0; } @@ -654,6 +660,10 @@ CRYP DAMAGE color: red; } +.red-damage text { + fill: red; +} + .red-damage .stats { border-top: 3px solid red; } @@ -670,6 +680,10 @@ CRYP DAMAGE color: blue; } +.blue-damage text { + fill: blue; +} + .blue-damage .stats { border-top: 3px solid blue; } @@ -686,6 +700,10 @@ CRYP DAMAGE color: green; } +.green-damage text { + fill: green; +} + .green-damage .stats { border-top: 3px solid green; } diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index c8f28286..496c867f 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -3,7 +3,9 @@ const range = require('lodash/range'); const molecule = require('./molecule'); -const { STATS, eventClasses } = require('../utils'); +const { STATS, eventClasses, getCombatText } = require('../utils'); + +const GameCryp = require('./game.cryp'); // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R']; @@ -94,95 +96,8 @@ function GamePanel(props) { ); } - function Skill(cryp, i, mobile) { - const ko = cryp.green_life.value === 0 ? 'ko' : ''; - - const s = cryp.skills[i]; - if (!s) { - return ( - - ); - } - - const side = mobile - ? 'top' - : 'right'; - - const cdText = cryp.skills[i].cd > 0 - ? `- ${s.cd}` - : ''; - - const highlight = activeSkill - ? activeSkill.crypId === cryp.id && activeSkill.skill === s - : false; - - function onClick(e) { - e.stopPropagation(); - return setActiveSkill(cryp.id, s.skill); - } - - return ( - - ); - } - - function Cryp(cryp) { - const ko = cryp.green_life.value === 0 ? 'ko' : ''; - const classes = eventClasses(resolution, cryp); - - const skills = range(0, 3).map(i => Skill(cryp, i)); - - const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => ( -
- {s.svg(`stat-icon ${s.colour}`)} -
{cryp[s.stat].value} / {cryp[s.stat].max}
-
- )); - - - function onClick(e) { - e.stopPropagation(); - return setActiveCryp(cryp); - } - - return ( -
-
-
selectSkillTarget(cryp.id)} > - {molecule} -
{cryp.name}
-
-
- {skills} -
-
-
- {stats} -
-
- ); - } - function PlayerTeam(team) { - const cryps = team.cryps.map(c => Cryp(c)); + const cryps = team.cryps.map((c, i) => ); return (
@@ -195,8 +110,6 @@ function GamePanel(props) { const ko = cryp.green_life.value === 0 ? 'ko' : ''; const classes = eventClasses(resolution, cryp); - console.log(cryp.name, classes); - const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
{s.svg(`stat-icon ${s.colour}`)} @@ -204,6 +117,8 @@ function GamePanel(props) {
)); + const combatText = getCombatText(cryp, resolution); + return (
selectSkillTarget(cryp.id)} >
- {molecule} + {molecule(combatText)}
{cryp.name}
@@ -241,16 +156,15 @@ function GamePanel(props) { ? resolutionEl(resolution) : playerTeam.cryps.map((c, i) => stackElement(c, i)); - const mobileSkills = activeCryp - ? range(0, 3).map(i => Skill(activeCryp, i, true)) - : (
); + // const mobileSkills = activeCryp + // ? range(0, 3).map(i => Skill(activeCryp, i, true)) + // : (
); return (
setActiveCryp(null)} > {header} {PlayerTeam(playerTeam, setActiveSkill)}
- {mobileSkills}
{selectedSkills} diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx new file mode 100644 index 00000000..ad864488 --- /dev/null +++ b/client/src/components/game.cryp.jsx @@ -0,0 +1,150 @@ +const { connect } = require('preact-redux'); +const preact = require('preact'); +const range = require('lodash/range'); + +const molecule = require('./molecule'); +const actions = require('../actions'); +const { STATS, eventClasses, getCombatText } = require('../utils'); + +const addState = connect( + function receiveState(state) { + const { + ws, + game, + resolution, + activeSkill, + activeCryp, + } = state; + + function selectSkillTarget(targetCrypId) { + if (activeSkill) { + return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill); + } + return false; + } + + // intercept self casting skills + if (activeSkill && activeSkill.skill.self_targeting) { + ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill); + } + + return { + resolution, + activeSkill, + activeCryp, + selectSkillTarget, + }; + }, + + function receiveDispatch(dispatch) { + function setActiveSkill(crypId, skill) { + dispatch(actions.setActiveSkill(crypId, skill)); + } + + function setActiveCryp(cryp) { + dispatch(actions.setActiveCryp(cryp)); + } + + return { setActiveSkill, setActiveCryp }; + } +); + + +function GameCryp(props) { + const { + cryp, + resolution, + + activeSkill, + setActiveSkill, + setActiveCryp, + selectSkillTarget, + } = props; + + const ko = cryp.green_life.value === 0 ? 'ko' : ''; + + function Skill(i, mobile) { + const s = cryp.skills[i]; + if (!s) { + return ( + + ); + } + + const side = mobile + ? 'top' + : 'right'; + + const cdText = cryp.skills[i].cd > 0 + ? `- ${s.cd}` + : ''; + + const highlight = activeSkill + ? activeSkill.crypId === cryp.id && activeSkill.skill === s + : false; + + function onClick(e) { + e.stopPropagation(); + return setActiveSkill(cryp.id, s.skill); + } + + return ( + + ); + } + + const classes = eventClasses(resolution, cryp); + + const skills = range(0, 3).map(i => Skill(i)); + + const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => ( +
+ {s.svg(`stat-icon ${s.colour}`)} +
{cryp[s.stat].value} / {cryp[s.stat].max}
+
+ )); + + + function onClick(e) { + e.stopPropagation(); + return setActiveCryp(cryp); + } + + const combatText = getCombatText(cryp, resolution); + + return ( +
+
+
selectSkillTarget(cryp.id)} > + {molecule(combatText)} +
{cryp.name}
+
+
+ {skills} +
+
+
+ {stats} +
+
+ ); +} + +module.exports = addState(GameCryp); diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 3a75cda9..58ab814c 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -92,7 +92,7 @@ function Cryp(props) { >
- {molecule} + {molecule()}
{cryp.name}
diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx index bf9ff3c0..c469d042 100644 --- a/client/src/components/menu.component.jsx +++ b/client/src/components/menu.component.jsx @@ -109,7 +109,7 @@ function Menu(args) { style={ { 'border-color': borderColour || 'whitesmoke' } } onClick={() => selectCryp(cryp.id)} >
- {molecule} + {molecule()}

{cryp.name}

diff --git a/client/src/components/molecule.jsx b/client/src/components/molecule.jsx index 30960e83..28d2ae8e 100644 --- a/client/src/components/molecule.jsx +++ b/client/src/components/molecule.jsx @@ -1,4 +1,18 @@ const preact = require('preact'); -module.exports = ( - ); +module.exports = function molecule(combatText) { + const text = combatText + ? + {combatText} + + + + : ''; + + return ( + + + + {text} + ); +}; diff --git a/client/src/events.jsx b/client/src/events.jsx index 7b8f11e6..32927d6e 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -23,7 +23,7 @@ function registerEvents(store) { if (game.resolved.length !== currentGame.resolved.length) { const newRes = game.resolved.slice(currentGame.resolved.length); return eachSeries(newRes, (r, cb) => { - if (r.event[0] === 'Disable') return cb(); + if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); store.dispatch(actions.setResolution(r)); return setTimeout(cb, TIMES.RESOLUTION_TIME_MS); }, err => { diff --git a/client/src/utils.jsx b/client/src/utils.jsx index c7a6a858..647c9ff2 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -81,13 +81,13 @@ const SPECS = { GBDI: { colour: 'cyan', caption: 'DamageI', svg: shapes.circle }, RBDI: { colour: 'purple', caption: 'DamageI', svg: shapes.circle }, - Speed: { colour: 'white', caption: 'Speed', svg: shapes.diamond }, - RedSpeed: { colour: 'red', caption: 'Speed', svg: shapes.diamond }, - BlueSpeedI: { colour: 'blue', caption: 'Speed', svg: shapes.diamond }, - GreenSpeedI: { colour: 'green', caption: 'Speed', svg: shapes.diamond }, - GRSpeedI: { colour: 'yellow', caption: 'Speed', svg: shapes.diamond }, - GBSpeedI: { colour: 'cyan', caption: 'Speed', svg: shapes.diamond }, - RBSpeedI: { colour: 'purple', caption: 'Speed', svg: shapes.diamond }, + Speed: { colour: 'white', caption: 'Speed', svg: shapes.triangle }, + RedSpeed: { colour: 'red', caption: 'Speed', svg: shapes.triangle }, + BlueSpeedI: { colour: 'blue', caption: 'Speed', svg: shapes.triangle }, + GreenSpeedI: { colour: 'green', caption: 'Speed', svg: shapes.triangle }, + GRSpeedI: { colour: 'yellow', caption: 'Speed', svg: shapes.triangle }, + GBSpeedI: { colour: 'cyan', caption: 'Speed', svg: shapes.triangle }, + RBSpeedI: { colour: 'purple', caption: 'Speed', svg: shapes.triangle }, }; @@ -163,12 +163,70 @@ function eventClasses(resolution, cryp) { return ''; } +function getCombatText(cryp, resolution) { + if (!resolution) return ''; + if (cryp.id !== resolution.target.id) return ''; + + const [type, event] = resolution.event; + + if (type === 'Ko') { + return 'KO!'; + } + + if (type === 'Disable') { + const { skill, disable } = event; + } + + if (type === 'Immunity') { + const { skill, immunity } = event; + return 'IMMUNE'; + } + + if (type === 'TargetKo') { + const { skill } = event; + } + + if (type === 'Damage') { + const { skill, amount, mitigation, colour } = event; + return amount; + } + + if (type === 'Healing') { + const { skill, amount, overhealing } = event; + return `${amount} (${overhealing}OH)`; + } + + if (type === 'Inversion') { + const { skill } = event; + return 'INVERT'; + } + + if (type === 'Reflection') { + const { skill } = event; + return 'REFLECT'; + } + + if (type === 'Effect') { + const { skill, effect, duration } = event; + return `+ ${effect} ${duration}T`; + } + + if (type === 'Removal') { + const { effect } = event; + return `- ${effect}`; + } + + + return ''; +} + module.exports = { stringSort, numSort, genAvatar, requestAvatar, eventClasses, + getCombatText, NULL_UUID, STATS, SPECS,