Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop
This commit is contained in:
ntr
commit
daa1b6214b
@ -2,6 +2,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## [1.5.7] - 2019-10-18
|
||||
### Changed
|
||||
- Made available skill / effect information during the combat phase.
|
||||
- Highlighting a skill replace the effect area with the skill description including speed multiplier.
|
||||
- Highlighting an effect with replace the targetting arrow / anim skill text with effect info.
|
||||
- You can now preview combinations before you create them
|
||||
- After selecting the three items for a combo hover over the combine button for info
|
||||
|
||||
## [1.5.6] - 2019-10-17
|
||||
We've updated the UI during the vbox / buy phase to give a better indication of valid actions.
|
||||
|
||||
|
||||
@ -3,10 +3,7 @@
|
||||
|
||||
*PRODUCTION*
|
||||
|
||||
* border colours for skills e.g. strike red border, slay half red half green
|
||||
* rename vbox to shop
|
||||
* combat phase info system
|
||||
* drag and drop buy / equip / unequip items
|
||||
|
||||
* mobile styles
|
||||
* mobile info page
|
||||
@ -19,6 +16,8 @@
|
||||
* serde serialize privatise
|
||||
* chat
|
||||
|
||||
* Convert spec 'Plus' -> '+' when it appears as combo text in combiner and in info text
|
||||
|
||||
## SOON
|
||||
|
||||
* equip from shop (buy and equip without putting in your inventory) for bases
|
||||
@ -73,6 +72,7 @@ $$$
|
||||
* Highlight (dota) colour
|
||||
* fx colours + styles
|
||||
|
||||
* ??? (PROBS NOT) drag and drop buy / equip / unequip items ???
|
||||
* modules
|
||||
* troll life -> dmg
|
||||
* prince of peace
|
||||
|
||||
@ -204,6 +204,7 @@
|
||||
|
||||
.resolving-skill {
|
||||
grid-area: target;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
height: auto;
|
||||
svg {
|
||||
@ -213,6 +214,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.skill-description {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
text-align: center;
|
||||
svg {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
margin-right: 0.1em
|
||||
}
|
||||
}
|
||||
|
||||
/* some stupid bug in chrome makes it fill the entire screen */
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
#targeting {
|
||||
@ -396,6 +408,10 @@
|
||||
.skills button {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.skill-description {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
.player {
|
||||
|
||||
@ -21,8 +21,12 @@ export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(v
|
||||
export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value });
|
||||
export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
|
||||
export const setConstructRename = value => ({ type: 'SET_CONSTRUCT_RENAME', value });
|
||||
|
||||
export const setGame = value => ({ type: 'SET_GAME', value });
|
||||
export const setGameSkillInfo = value => ({ type: 'SET_GAME_SKILL_INFO', value });
|
||||
export const setGameEffectInfo = value => ({ type: 'SET_GAME_EFFECT_INFO', value });
|
||||
export const setInfo = value => ({ type: 'SET_INFO', value });
|
||||
|
||||
export const setEmail = value => ({ type: 'SET_EMAIL', value });
|
||||
export const setInvite = value => ({ type: 'SET_INVITE', value });
|
||||
export const setInstance = value => ({ type: 'SET_INSTANCE', value });
|
||||
|
||||
@ -2,10 +2,13 @@ const { connect } = require('preact-redux');
|
||||
const { Component } = require('preact');
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
const reactStringReplace = require('react-string-replace');
|
||||
|
||||
const { STATS } = require('../utils');
|
||||
const { ConstructAvatar, ConstructText } = require('./construct');
|
||||
const shapes = require('./shapes');
|
||||
const { INFO } = require('./../constants');
|
||||
const actions = require('../actions');
|
||||
|
||||
const SkillBtn = require('./skill.btn');
|
||||
|
||||
@ -19,6 +22,8 @@ const addState = connect(
|
||||
animFocus,
|
||||
animating,
|
||||
animText,
|
||||
gameSkillInfo,
|
||||
itemInfo,
|
||||
} = state;
|
||||
|
||||
function selectSkillTarget(targetConstructId) {
|
||||
@ -40,8 +45,19 @@ const addState = connect(
|
||||
animText,
|
||||
activeSkill,
|
||||
selectSkillTarget,
|
||||
gameSkillInfo,
|
||||
itemInfo,
|
||||
};
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch) {
|
||||
function setGameEffectInfo(info) {
|
||||
dispatch(actions.setGameEffectInfo(info));
|
||||
}
|
||||
|
||||
return { setGameEffectInfo };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
const eventClasses = (animating, animFocus, construct, postSkill) => {
|
||||
@ -77,6 +93,10 @@ class GameConstruct extends Component {
|
||||
selectSkillTarget,
|
||||
animFocus,
|
||||
animText,
|
||||
|
||||
setGameEffectInfo,
|
||||
gameSkillInfo,
|
||||
itemInfo,
|
||||
} = this.props;
|
||||
|
||||
const ko = construct.green_life.value === 0 ? 'ko' : '';
|
||||
@ -96,9 +116,33 @@ class GameConstruct extends Component {
|
||||
let crypSkills = <div></div>;
|
||||
if (player) crypSkills = (<div class="skills"> {skills} </div>);
|
||||
|
||||
function hoverInfo(e, info) {
|
||||
e.stopPropagation();
|
||||
return setGameEffectInfo(info);
|
||||
}
|
||||
const effectBox = () => {
|
||||
if (gameSkillInfo && gameSkillInfo.constructId === construct.id) {
|
||||
const fullInfo = itemInfo.items.find(k => k.item === gameSkillInfo.skill) || INFO[gameSkillInfo.skill];
|
||||
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
|
||||
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
|
||||
const speed = <div> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </div>;
|
||||
return (
|
||||
<div class="skill-description">
|
||||
<h2> {gameSkillInfo.skill} </h2>
|
||||
<div> {infoDescription} </div>
|
||||
{speed}
|
||||
</div>);
|
||||
}
|
||||
const effects = construct.effects.length
|
||||
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
|
||||
? construct.effects.map(c =>
|
||||
<div
|
||||
key={c.effect}
|
||||
onMouseOver={e => hoverInfo(e, c)}
|
||||
onMouseOut={e => hoverInfo(e, null)}
|
||||
> {c.effect} - {c.duration}T</div>)
|
||||
: null;
|
||||
return (<div class="effects"> {effects} </div>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -107,7 +151,7 @@ class GameConstruct extends Component {
|
||||
class={`game-construct ${ko} ${classes}`} >
|
||||
<div class="left">
|
||||
{crypSkills}
|
||||
<div class="effects"> {effects} </div>
|
||||
{effectBox()}
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="stats"> {stats} </div>
|
||||
|
||||
@ -23,18 +23,24 @@ const addState = connect(
|
||||
dispatch(actions.setActiveSkill(constructId, skill));
|
||||
}
|
||||
|
||||
return { setActiveSkill };
|
||||
function setGameSkillInfo(info) {
|
||||
dispatch(actions.setGameSkillInfo(info));
|
||||
}
|
||||
|
||||
return { setActiveSkill, setGameSkillInfo };
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
function Skill(props) {
|
||||
const {
|
||||
animating,
|
||||
construct,
|
||||
game,
|
||||
i,
|
||||
activeSkill,
|
||||
setActiveSkill,
|
||||
setGameSkillInfo,
|
||||
} = props;
|
||||
|
||||
if (!game) return false;
|
||||
@ -42,6 +48,11 @@ function Skill(props) {
|
||||
const s = construct.skills[i];
|
||||
const ko = construct.green_life.value === 0 ? 'ko' : '';
|
||||
|
||||
function hoverInfo(e, info) {
|
||||
e.stopPropagation();
|
||||
if (animating) return false;
|
||||
return setGameSkillInfo(info);
|
||||
}
|
||||
if (!s || !game) {
|
||||
return (
|
||||
<button
|
||||
@ -76,6 +87,8 @@ function Skill(props) {
|
||||
<button
|
||||
disabled={cdText || s.disabled || ko}
|
||||
class={`${(targeting || highlight) ? 'active' : ''} ${border}`}
|
||||
onMouseOver={e => hoverInfo(e, { skill: s.skill, constructId: construct.id })}
|
||||
onMouseOut={e => hoverInfo(e, null)}
|
||||
type="submit"
|
||||
onClick={onClick}>
|
||||
{s.skill} {cdText}
|
||||
|
||||
@ -6,11 +6,11 @@ const reactStringReplace = require('react-string-replace');
|
||||
const throttle = require('lodash/throttle');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
const { removeTier } = require('../utils');
|
||||
const { effectInfo, removeTier } = require('../utils');
|
||||
|
||||
const addState = connect(
|
||||
({ game, account, animSkill, animating, itemInfo }) =>
|
||||
({ game, account, animSkill, animating, itemInfo })
|
||||
({ game, account, animSkill, animating, itemInfo, gameEffectInfo }) =>
|
||||
({ game, account, animSkill, animating, itemInfo, gameEffectInfo })
|
||||
);
|
||||
|
||||
class TargetSvg extends Component {
|
||||
@ -28,10 +28,24 @@ class TargetSvg extends Component {
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
const { game, account, animating, animSkill, itemInfo } = props;
|
||||
const { game, account, animating, animSkill, itemInfo, gameEffectInfo } = props;
|
||||
const { width, height } = state;
|
||||
if (!game) return false; // game will be null when battle ends
|
||||
|
||||
// Whenever someones looking at effects throw it up here
|
||||
if (gameEffectInfo) {
|
||||
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
|
||||
const infoString = effectInfo(gameEffectInfo);
|
||||
const infoDescription = reactStringReplace(infoString, regEx, match => shapes[match]());
|
||||
|
||||
return (
|
||||
<div class="resolving-skill">
|
||||
<h1>{gameEffectInfo.effect}</h1>
|
||||
<div> {infoDescription} </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// resolutions happening
|
||||
// just put skill name up
|
||||
if (animating) {
|
||||
|
||||
@ -20,6 +20,7 @@ const addState = connect(
|
||||
itemInfo,
|
||||
itemUnequip,
|
||||
navInstance,
|
||||
info,
|
||||
} = state;
|
||||
|
||||
function sendVboxDiscard() {
|
||||
@ -56,6 +57,7 @@ const addState = connect(
|
||||
itemUnequip,
|
||||
sendItemUnequip,
|
||||
navInstance,
|
||||
info,
|
||||
};
|
||||
},
|
||||
|
||||
@ -115,6 +117,7 @@ function Vbox(args) {
|
||||
sendItemUnequip,
|
||||
|
||||
setReclaiming,
|
||||
info,
|
||||
} = args;
|
||||
|
||||
if (!player) return false;
|
||||
@ -138,7 +141,7 @@ function Vbox(args) {
|
||||
//
|
||||
function vboxHover(e, v) {
|
||||
if (v) {
|
||||
setInfo(v);
|
||||
if (info !== v) setInfo(v);
|
||||
e.stopPropagation();
|
||||
}
|
||||
return true;
|
||||
@ -329,7 +332,7 @@ function Vbox(args) {
|
||||
|
||||
function combinerBtn() {
|
||||
let text = '';
|
||||
|
||||
let comboItem = '';
|
||||
if (combiner.length < 3) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (combiner.length > i) {
|
||||
@ -339,14 +342,18 @@ function Vbox(args) {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
text = 'combine';
|
||||
// Since theres 3 items in combiner and you can't have invalid combos we can preview it
|
||||
const combinerItems = combiner.map(j => vbox.bound[j]);
|
||||
const comboItemObj = itemInfo.combos.find(combo => combinerItems.every(c => combo.components.includes(c)));
|
||||
comboItem = comboItemObj ? comboItemObj.item : 'refine';
|
||||
text = `Combine - ${comboItem}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
class='vbox-btn'
|
||||
disabled={combiner.length !== 3}
|
||||
onMouseOver={e => hoverInfo(e, 'refine')}
|
||||
onMouseOver={e => hoverInfo(e, comboItem)}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onMouseDown={() => sendVboxCombine()}>
|
||||
{text}
|
||||
@ -390,9 +397,10 @@ function Vbox(args) {
|
||||
//
|
||||
// EVERYTHING
|
||||
//
|
||||
function hoverInfo(e, info) {
|
||||
function hoverInfo(e, newInfo) {
|
||||
e.stopPropagation();
|
||||
return setInfo(info);
|
||||
if (info === newInfo) return true;
|
||||
return setInfo(newInfo);
|
||||
}
|
||||
|
||||
const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
|
||||
|
||||
@ -109,7 +109,7 @@ function registerEvents(store) {
|
||||
store.dispatch(actions.setAnimTarget(null));
|
||||
store.dispatch(actions.setAnimText(null));
|
||||
store.dispatch(actions.setAnimating(false));
|
||||
|
||||
store.dispatch(actions.setGameEffectInfo(null));
|
||||
store.dispatch(actions.setSkip(false));
|
||||
|
||||
// set the game state so resolutions don't fire twice
|
||||
|
||||
@ -32,6 +32,8 @@ module.exports = {
|
||||
constructEditId: createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),
|
||||
constructRename: createReducer(null, 'SET_CONSTRUCT_RENAME'),
|
||||
game: createReducer(null, 'SET_GAME'),
|
||||
gameSkillInfo: createReducer(null, 'SET_GAME_SKILL_INFO'),
|
||||
gameEffectInfo: createReducer(null, 'SET_GAME_EFFECT_INFO'),
|
||||
email: createReducer(null, 'SET_EMAIL'),
|
||||
invite: createReducer(null, 'SET_INVITE'),
|
||||
info: createReducer(null, 'SET_INFO'),
|
||||
|
||||
@ -237,6 +237,64 @@ function convertItem(v) {
|
||||
// return;
|
||||
}
|
||||
|
||||
function effectInfo(i) {
|
||||
console.log(i);
|
||||
|
||||
function multiplier(s) { // Update later to use server info in future
|
||||
if (s === 'CounterAttack') return 70;
|
||||
if (s === 'CounterAttack+') return 95;
|
||||
if (s === 'CounterAttack++') return 120;
|
||||
|
||||
if (s === 'DecayTick') return 33;
|
||||
if (s === 'DecayTick+') return 45;
|
||||
if (s === 'DecayTick++') return 70;
|
||||
|
||||
if (s === 'SiphonTick') return 40;
|
||||
if (s === 'SiphonTick+') return 50;
|
||||
if (s === 'SiphonTick++') return 60;
|
||||
|
||||
if (s === 'TriageTick') return 75;
|
||||
if (s === 'TriageTick+') return 110;
|
||||
if (s === 'TriageTick++') return 140;
|
||||
|
||||
if (s === 'Electrocute' || s === 'ElectrocuteTick') return 80;
|
||||
if (s === 'Electrocute+' || s === 'ElectrocuteTick+') return 100;
|
||||
if (s === 'Electrocute++' || s === 'ElectrocuteTick++') return 130;
|
||||
return 0;
|
||||
}
|
||||
|
||||
switch (i.effect) {
|
||||
case 'Amplify': return `Increases construct RedPower and BluePower by ${i.meta[1] - 100}%`;
|
||||
case 'Banish': return 'Banished construct cannot cast or take damage';
|
||||
case 'Block': return `Reduces construct red damage taken by ${100 - i.meta[1]}%`;
|
||||
case 'Buff': return `Increases construct RedPower and SpeedStat by ${i.meta[1] - 100}%`;
|
||||
case 'Sustain': return 'Construct cannot be KO while active. Additionally provides immunity to disables';
|
||||
case 'Curse': return `Construct will take ${i.meta[1] - 100}% increased red and blue damage`;
|
||||
case 'Haste': return `Construct has ${i.meta[1] - 100}% increased SpeedStat. Red attack skills will trigger a HasteStrike dealing 30% SpeedStat as red damage.`;
|
||||
case 'Hybrid': return `Construct has ${i.meta[1] - 100}% increased GreenPower. Blue attack skills will trigger a HybridBlast dealing 25% GreenPower as red damage.`;
|
||||
case 'Invert': return 'Reverses damage and healing. Healing will damage this construct and damage will heal.';
|
||||
case 'Counter': return `Red damage taken by this construct will trigger a CounterAttack. CounterAttack deals ${multiplier(i.meta[1])}% RedPower as red damage.`;
|
||||
case 'Purge': return 'Disable construct from casting any green skills';
|
||||
case 'Reflect': return 'Reflect blue skills back to caster';
|
||||
case 'Slow': return `Reduces construct SpeedStat by ${100 - i.meta[1]}%`;
|
||||
case 'Restrict': return 'Disable construct from casting any red skills';
|
||||
case 'Stun': return 'Stunned construct cannot use skills';
|
||||
case 'Intercept': return 'Redirect any skills on team to this target construct';
|
||||
case 'Vulnerable': return `Construct will take ${i.meta[1] - 100}% increased red damage`;
|
||||
case 'Silence': return 'Disable construct from casting any blue skills';
|
||||
case 'Wither': return `Construct will take ${100 - i.meta[1]}% reduced healing`; //
|
||||
case 'Decay': return `Construct will take ${multiplier(i.tick.skill)}% of caster's BluePower as blue damage each turn.`; //
|
||||
case 'Electric': return `Attacks against this construct will apply Electrocute dealing ${multiplier(i.meta[1])}% of construct BluePower as blue damage each turn.`;
|
||||
case 'Electrocute': return `Construct will take ${multiplier(i.tick.skill)}% of caster's BluePower as blue damage each turn.`;
|
||||
case 'Absorb': return 'If construct takes damage, Absorption will be applied increasing RedPower and BluePower based on damage taken.';
|
||||
case 'Absorption': return `Increasing construct RedPower and BluePower by ${i.meta[1]}`;
|
||||
case 'Triage': return `Construct will be healed for ${multiplier(i.tick.skill)}% of caster's GreenPower each turn.`;
|
||||
case 'Siphon': return `Construct will take ${multiplier(i.tick.skill)}% of caster's BluePower as blue damage each turn, healing the caster.`;
|
||||
|
||||
default: return 'Missing Effect Text';
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
stringSort,
|
||||
numSort,
|
||||
@ -251,4 +309,5 @@ module.exports = {
|
||||
randomPoints,
|
||||
removeTier,
|
||||
match,
|
||||
effectInfo,
|
||||
};
|
||||
|
||||
@ -1420,9 +1420,7 @@ fn break_(source: &mut Construct, target: &mut Construct, mut results: Resolutio
|
||||
}
|
||||
|
||||
fn block(source: &mut Construct, target: &mut Construct, mut results: Resolutions, skill: Skill) -> Resolutions {
|
||||
results.push(Resolution::new(source, target)
|
||||
.event(target.add_effect(skill, skill.effect()[0]))
|
||||
.stages(EventStages::StartEnd));
|
||||
results.push(Resolution::new(source, target).event(target.add_effect(skill, skill.effect()[0])));
|
||||
return results;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user