From b832360224ac34892fa860575d21a0de657ec103 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 1 Apr 2019 11:29:04 +1000 Subject: [PATCH] Added item info --- html-client/src/actions.jsx | 3 + html-client/src/components/constants.jsx | 218 ++++++++++++++++++ html-client/src/components/game.jsx | 169 ++++++++++++++ html-client/src/components/info.component.jsx | 29 +++ html-client/src/components/info.container.jsx | 20 ++ .../src/components/instance.component.jsx | 9 +- .../src/components/instance.container.jsx | 6 +- html-client/src/components/vbox.component.jsx | 8 +- html-client/src/components/vbox.container.jsx | 7 +- html-client/src/events.jsx | 2 +- html-client/src/main.jsx | 1 + html-client/src/reducers.jsx | 11 + 12 files changed, 476 insertions(+), 7 deletions(-) create mode 100644 html-client/src/components/constants.jsx create mode 100644 html-client/src/components/game.jsx create mode 100644 html-client/src/components/info.component.jsx create mode 100644 html-client/src/components/info.container.jsx diff --git a/html-client/src/actions.jsx b/html-client/src/actions.jsx index 7ed080f2..0ea7db27 100644 --- a/html-client/src/actions.jsx +++ b/html-client/src/actions.jsx @@ -25,6 +25,9 @@ export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value }) export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL'; export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null }); +export const SET_INFO = 'SET_INFO'; +export const setInfo = (type, info) => ({ type: SET_INFO, value: type ? { type, info } : null }); + export const SET_RECLAIMING = 'SET_RECLAIMING'; export const setReclaiming = value => ({ type: SET_RECLAIMING, value }); diff --git a/html-client/src/components/constants.jsx b/html-client/src/components/constants.jsx new file mode 100644 index 00000000..0d300ba1 --- /dev/null +++ b/html-client/src/components/constants.jsx @@ -0,0 +1,218 @@ +module.exports = { + ITEMS: { + SKILLS: { + Amplify: { + description: 'increase the magic damage dealt by a cryp', + colours: '1 Green 1 Blue', + }, + + Attack: { + description: 'a fast attack with red damage', + upgrades: 'combine with 2 red / blue / green - red + blue attack not implemented', + }, + + Banish: { + description: 'target cryp is prevented from casting any skills and taking any damage', + colours: '1 Red 1 Green', + + }, + + Blast: { + description: 'blast the target with magic damage', + colours: '2 Blue', + }, + + Block: { + description: 'decreases incoming red damage for 1T', + upgrades: 'combine with 2 red / blue / green', + }, + + Buff: { + description: 'increase target cryp speed', + upgrades: 'combine with 2 red / blue / green', + }, + + Clutch: { + description: '??????', + colours: '1 Red 1 Green', + }, + + Corrupt: { + description: 'Inflicts a dot to attacker while active', + colours: '2 Blue', + }, + + Curse: { + description: 'target cryp takes increased magic damage', + colours: '2 Blue', + }, + + Debuff: { + description: 'reduce target cryp speed', + upgrades: 'combine with 2 red / blue / green', + }, + + Decay: { + description: 'afflict a cryp with a blue damage based damage over time debuff', + colours: '1 Green 1 Blue', + }, + + Empower: { + description: 'increase the red damage dealt by a cryp', + colours: '2 Red', + }, + + Haste: { + description: 'magical skill that increases speed of target cryp', + colours: '1 Red 1 Blue', + }, + + Heal: { + description: 'heal a cryp with blue damage', + colours: '2 Green', + }, + + Hex: { + description: 'magical bsed skill that prevents target cryp from using any skills', + colours: '1 Red 1 Blue', + }, + + Hostility: { + description: 'magical bsed skill that prevents target cryp from using any skills', + colours: '2 Blue', + }, + + Invert: { + description: 'reverse ???', + colours: '1 Red 1 Blue', + }, + + Parry: { + description: 'prevents all red damage for 1T', + colours: '2 Red', + }, + + Purge: { + description: 'remove magical buffs from target cryp', + colours: '2 Green', + }, + + Purify: { + description: 'remove magical debuffs from target cryp', + colours: '1 Red 1 Green', + }, + + Recharge: { + description: 'restore something', + colours: '1 Red 1 Blue', + }, + + Reflect: { + description: 'reflect damage back to attacker', + colours: '2 Green', + }, + + Riposte: { + description: '???', + }, + + Ruin: { + description: 'Stun the entire enemy team', + colours: '2 Blue', + }, + + Shield: { + description: 'grants immunity to magical skills to target cryp', + colours: '1 Green 1 Blue', + }, + + Silence: { + description: 'prevent target cryp from casting magical skills', + colours: '1 Green 1 Blue', + }, + + Siphon: { + description: 'siphon hp from target cryp with a blue damage based debuff', + colours: '1 Green 1 Blue', + }, + + Slay: { + description: '????', + }, + + Slow: { + description: 'magical skill that reduces speed of target cryp', + colours: '1 Red 1 Green', + }, + + Snare: { + description: 'prevents red skills from being used for 2T', + colours: '2 Red', + }, + + Strangle: { + description: 'Stun the enemy and inflict physical damage over 3T', + colours: '2 Red', + }, + + Strike: { + description: 'Fast attacking red skill', + colours: '2 Red', + }, + + Stun: { + description: 'red skill hat prevents target cryp from using any skills', + upgrades: 'combine with 2 red / blue / green', + + }, + + Taunt: { + description: 'Enemy skills will prioritise cryps with this skill active', + colours: '1 Red 1 Green', + }, + + Throw: { + description: 'stuns and makes the target take increased red damage', + colours: '2 Green', + }, + + Triage: { + description: 'grants a blue damage based healing over time buff', + colours: '2 Green', + }, + }, + + SPECS: { + Damage: { + description: 'Increase red / green / blue power stats cryp', + upgrades: 'combine with 2 red / blue / green', + + }, + + Hp: { + description: 'Increases health of cryp', + upgrades: 'combine with 2 red / blue / green', + + }, + + Speed: { + description: 'Increases speed of cryp', + upgrades: 'combine with 2 red / blue / green', + }, + }, + + COLOURS: { + Red: { + description: 'Used to create offensive type combos - fast and chaotic', + }, + + Green: { + description: 'Used to create defensive / healing type combos', + }, + + Blue: { + description: 'Used to create offensive type combos - slow and reliable', + }, + }, + }, +}; diff --git a/html-client/src/components/game.jsx b/html-client/src/components/game.jsx new file mode 100644 index 00000000..83a05744 --- /dev/null +++ b/html-client/src/components/game.jsx @@ -0,0 +1,169 @@ +const preact = require('preact'); +const key = require('keymaster'); +const range = require('lodash/range'); +const molecule = require('./molecule'); +const saw = require('./saw.component'); + +const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R']; + +function GamePanel(props) { + const { + game, + activeSkill, + activeIncoming, + setActiveSkill, + selectSkillTarget, + selectIncomingTarget, + account, + } = props; + + if (!game) return
...
; + + const otherTeams = game.teams.filter(t => t.id !== account.id); + + const playerTeam = game.teams.find(t => t.id === account.id); + + function Cryp(cryp) { + const skills = range(0, 4).map((i) => { + const s = cryp.skills[i] + ? cryp.skills[i].skill + : ( ); + + return ; + }); + + const stats = [ + { stat: 'hp', colour: '#1FF01F' }, + { stat: 'red_shield', colour: '#a52a2a' }, + { stat: 'blue_shield', colour: '#3498db' }, + ].map((s, i) => ( +
+ {saw(s.colour)} +
{cryp[s.stat].value} / {cryp[s.stat].max}
+
+ )); + + return ( +
+
+ {molecule} +
+
+ {skills} +
+
+ {stats} +
+
+ ); + } + + function PlayerCrypCard(cryp) { + const skills = cryp.skills.map((skill, i) => { + const hotkey = SKILL_HOT_KEYS[i]; + key.unbind(hotkey); + key(hotkey, () => setActiveSkill(cryp.id, skill)); + + return ( + + ); + }); + + const effects = cryp.effects.map((effect, i) => ( +
{effect} for {effect.turns}T
+ )); + + return ( +
selectIncomingTarget(cryp.id)} + className="tile is-vertical"> + {Cryp(cryp, setActiveSkill)} +
+ ); + } + + function PlayerTeam(team) { + const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill)); + + return ( +
+ {cryps} +
+ ); + } + + function OpponentCrypCard(cryp) { + const effects = cryp.effects.map((effect, i) => ( +
{effect.effect} for {effect.turns}T
+ )); + + return ( +
selectSkillTarget(cryp.id)} > +
+
+
+
+

{cryp.name}

+
+
+
+ +
+
+ +
+
{cryp.hp.value} / {cryp.hp.value} HP
+ + +
+ {effects} +
+
+ ); + } + + function OpponentTeam(team) { + const cryps = team.cryps.map(OpponentCrypCard); + return ( +
+ {cryps} +
+ ); + } + + const logs = game.log.reverse().map((l, i) => (
{l}
)); + + return ( +
+
+
+ {playerTeam.id} + {PlayerTeam(playerTeam, setActiveSkill)} +
+
+ Round X +
+ +
+ {otherTeams.id} + {otherTeams.map(OpponentTeam)} +
+
+
+
+
+ ); +} + +module.exports = GamePanel; diff --git a/html-client/src/components/info.component.jsx b/html-client/src/components/info.component.jsx new file mode 100644 index 00000000..c108d453 --- /dev/null +++ b/html-client/src/components/info.component.jsx @@ -0,0 +1,29 @@ +const preact = require('preact'); +const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants'); + +function Info(args) { + const { + info, + } = args; + let desc = null; + if (info) { + if (info.type === 'item') { + if (SKILLS[info.info]) { + desc = SKILLS[info.info]; + } else if (SPECS[info.info]) { + desc = SPECS[info.info]; + } else if (COLOURS[info.info]) { + desc = COLOURS[info.info]; + } + } + } + + return ( +
+
{JSON.stringify(info)}
+
{JSON.stringify(desc)}
+
+ ); +} + +module.exports = Info; diff --git a/html-client/src/components/info.container.jsx b/html-client/src/components/info.container.jsx new file mode 100644 index 00000000..a45e921a --- /dev/null +++ b/html-client/src/components/info.container.jsx @@ -0,0 +1,20 @@ +const { connect } = require('preact-redux'); + +// const actions = require('../actions'); + +const Info = require('./info.component'); + +const addState = connect( + function receiveState(state) { + const { info } = state; + return { info }; + } +/* + function receiveDispatch(dispatch) { + + return { }; + } +*/ +); + +module.exports = addState(Info); diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx index 27cd72ab..88dce9a9 100644 --- a/html-client/src/components/instance.component.jsx +++ b/html-client/src/components/instance.component.jsx @@ -3,16 +3,17 @@ const preact = require('preact'); const range = require('lodash/range'); const VboxContainer = require('./vbox.container'); +const InfoContainer = require('./info.container'); const molecule = require('./molecule'); const saw = require('./saw.component'); -function Cryp(cryp, sendVboxApply) { +function Cryp(cryp, sendVboxApply, setInfo) { const skills = range(0, 4).map(i => { const s = cryp.skills[i] ? cryp.skills[i].skill : ( ); - return ; + return ; }); // needed for ondrop to fire @@ -71,11 +72,12 @@ function InstanceComponent(args) { quit, sendInstanceReady, sendVboxApply, + setInfo, } = args; if (!instance) return
...
; - const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply)); + const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo)); return (
@@ -103,6 +105,7 @@ function InstanceComponent(args) {
{cryps}
+
); diff --git a/html-client/src/components/instance.container.jsx b/html-client/src/components/instance.container.jsx index c739de84..0554681d 100644 --- a/html-client/src/components/instance.container.jsx +++ b/html-client/src/components/instance.container.jsx @@ -24,7 +24,11 @@ const addState = connect( dispatch(actions.setInstance(null)); } - return { quit }; + function setInfo(type, info) { + dispatch(actions.setInfo(type, info)); + } + + return { quit, setInfo }; } ); diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx index 2c71de07..22127c8f 100644 --- a/html-client/src/components/vbox.component.jsx +++ b/html-client/src/components/vbox.component.jsx @@ -21,6 +21,7 @@ function Vbox(args) { sendVboxCombine, setCombiner, setReclaiming, + setInfo, } = args; const { vbox } = instance; @@ -54,7 +55,12 @@ function Vbox(args) { const cells = row.map((c, j) => ( c && sendVboxAccept(j, i)} > + onClick={() => { + if (c) { + sendVboxAccept(j, i); + setInfo('item', c); + } + }} > {convertVar(c)} )); diff --git a/html-client/src/components/vbox.container.jsx b/html-client/src/components/vbox.container.jsx index 5e96c70f..cbd9a473 100644 --- a/html-client/src/components/vbox.container.jsx +++ b/html-client/src/components/vbox.container.jsx @@ -44,7 +44,12 @@ const addState = connect( return dispatch(actions.setReclaiming(v)); } - return { setCombiner, setReclaiming }; + function setInfo(type, info) { + return dispatch(actions.setInfo(type, info)); + } + + + return { setCombiner, setReclaiming, setInfo }; } ); diff --git a/html-client/src/events.jsx b/html-client/src/events.jsx index 5b205fec..5c5e0a99 100644 --- a/html-client/src/events.jsx +++ b/html-client/src/events.jsx @@ -29,7 +29,7 @@ function registerEvents(store) { } function setActiveSkill(skill) { - store.dispatch(actions.setActiveSkill(null)); + store.dispatch(actions.setActiveSkill(skill)); } function setMenu() { diff --git a/html-client/src/main.jsx b/html-client/src/main.jsx index 0f429856..6ba2a8e4 100644 --- a/html-client/src/main.jsx +++ b/html-client/src/main.jsx @@ -21,6 +21,7 @@ const store = createStore( combiner: reducers.combinerReducer, cryps: reducers.crypsReducer, game: reducers.gameReducer, + info: reducers.infoReducer, instance: reducers.instanceReducer, instances: reducers.instancesReducer, reclaiming: reducers.reclaimingReducer, diff --git a/html-client/src/reducers.jsx b/html-client/src/reducers.jsx index a87d28d8..7f5c6258 100644 --- a/html-client/src/reducers.jsx +++ b/html-client/src/reducers.jsx @@ -100,6 +100,16 @@ function wsReducer(state = defaultWs, action) { } } +const defaultInfo = null; +function infoReducer(state = defaultInfo, action) { + switch (action.type) { + case actions.SET_INFO: + return action.value; + default: + return state; + } +} + module.exports = { accountReducer, activeSkillReducer, @@ -111,4 +121,5 @@ module.exports = { reclaimingReducer, selectedCrypsReducer, wsReducer, + infoReducer, };