- {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 (
+
- {molecule}
+ {molecule()}
{cryp.name}
+ {combatText}
+
+ : '';
+
+ return ();
+};
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,
+
+ );
+}
+
+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) {
>
+ selectSkillTarget(cryp.id)} >
+ {molecule(combatText)}
+ {cryp.name}
+
+
+
+ {skills}
+
+
+ {stats}
+
+
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()}
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
+ ?