ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added item info

Browse Source
This commit is contained in:
Mashy 2019-04-01 11:29:04 +10:00
parent 414e8a927b
commit b832360224
12 changed files with 476 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
html-client/src/actions.jsx
View File

@ -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 });

218
html-client/src/components/constants.jsx Normal file
View File

@ -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',
},
},
},
};

169
html-client/src/components/game.jsx Normal file
View File

@ -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 <div>...</div>;
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
: (<span>&nbsp;</span>);
return <button key={i} className="cryp-skill-btn" type ="submit" onClick={() => setActiveSkill(cryp.id, s)}>{s}</button>;
});
const stats = [
{ stat: 'hp', colour: '#1FF01F' },
{ stat: 'red_shield', colour: '#a52a2a' },
{ stat: 'blue_shield', colour: '#3498db' },
].map((s, i) => (
<figure key={i} alt={s.stat}>
{saw(s.colour)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
</figure>
));
return (
<div className="cryp-box">
<figure className="img">
{molecule}
</figure>
<div className="skills">
{skills}
</div>
<div className="stats">
{stats}
</div>
</div>
);
}
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 (
<button
key={i}
className="button is-dark"
type="submit"
onClick={() => setActiveSkill(cryp.id, skill)}
>
({hotkey}) {skill.skill} {skill.cd && `(${skill.cd}T)`}
</button>
);
});
const effects = cryp.effects.map((effect, i) => (
<div key={i}>{effect} for {effect.turns}T</div>
));
return (
<div
key={cryp.id}
style={ activeIncoming ? { cursor: 'pointer' } : {}}
onClick={() => selectIncomingTarget(cryp.id)}
className="tile is-vertical">
{Cryp(cryp, setActiveSkill)}
</div>
);
}
function PlayerTeam(team) {
const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));
return (
<div className="tile">
{cryps}
</div>
);
}
function OpponentCrypCard(cryp) {
const effects = cryp.effects.map((effect, i) => (
<div key={i}>{effect.effect} for {effect.turns}T</div>
));
return (
<div className="tile"
style={activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(cryp.id)} >
<div key={cryp.id} className="tile is-vertical">
<div className="tile is-child">
<div className="columns" >
<div className="column is-10">
<p className="title">{cryp.name}</p>
</div>
<div className="column">
<figure className="image">
<svg width="40" height="40" data-jdenticon-value={cryp.name} />
</figure>
</div>
</div>
<div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
</div>
{effects}
</div>
</div>
);
}
function OpponentTeam(team) {
const cryps = team.cryps.map(OpponentCrypCard);
return (
<div>
{cryps}
</div>
);
}
const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
return (
<section>
<div className="row">
<div className="three columns">
{playerTeam.id}
{PlayerTeam(playerTeam, setActiveSkill)}
</div>
<div className="six columns" align="center">
Round X
</div>
<div className="three columns">
{otherTeams.id}
{otherTeams.map(OpponentTeam)}
</div>
</div>
<div className="row">
</div>
</section>
);
}
module.exports = GamePanel;

29
html-client/src/components/info.component.jsx Normal file
View File

@ -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 (
<div className="six columns">
<div> {JSON.stringify(info)} </div>
<div> {JSON.stringify(desc)} </div>
</div>
);
}
module.exports = Info;

20
html-client/src/components/info.container.jsx Normal file
View File

@ -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);

9
html-client/src/components/instance.component.jsx
View File

@ -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
: (<span>&nbsp;</span>);
return <button key={i} className="cryp-skill-btn" >{s}</button>;
return <button key={i} className="cryp-skill-btn" onClick={() => setInfo('item', s)}>{s}</button>;
});
// needed for ondrop to fire
@ -71,11 +72,12 @@ function InstanceComponent(args) {
quit,
sendInstanceReady,
sendVboxApply,
setInfo,
} = args;
if (!instance) return <div>...</div>;
const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply));
const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));
return (
<section className="instance" >
@ -103,6 +105,7 @@ function InstanceComponent(args) {
<div className="three columns instance-cryp-list">
{cryps}
</div>
<InfoContainer />
</div>
</section>
);

6
html-client/src/components/instance.container.jsx
View File

@ -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 };
}
);

8
html-client/src/components/vbox.component.jsx
View File

@ -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) => (
<td
key={j}
onClick={() => c && sendVboxAccept(j, i)} >
onClick={() => {
if (c) {
sendVboxAccept(j, i);
setInfo('item', c);
}
}} >
{convertVar(c)}
</td>
));

7
html-client/src/components/vbox.container.jsx
View File

@ -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 };
}
);

2
html-client/src/events.jsx
View File

@ -29,7 +29,7 @@ function registerEvents(store) {
}
function setActiveSkill(skill) {
store.dispatch(actions.setActiveSkill(null));
store.dispatch(actions.setActiveSkill(skill));
}
function setMenu() {

1
html-client/src/main.jsx
View File

@ -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,

11
html-client/src/reducers.jsx
View File

@ -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,
};