Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

CHANGELOG.md

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

WORKLOG.md

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

client/assets/styles/game.less

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

client/src/actions.jsx

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

client/src/components/game.construct.jsx

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

client/src/components/skill.btn.jsx

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

client/src/components/targeting.arrows.jsx

@@ -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, gameEffectInfo }) =>
-        ({ game, account, animSkill, animating, itemInfo })
+        ({ 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) {

client/src/components/vbox.component.jsx

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

client/src/events.jsx

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

client/src/reducers.jsx

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

client/src/utils.jsx

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

server/src/skill.rs

@@ -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)
+    results.push(Resolution::new(source, target).event(target.add_effect(skill, skill.effect()[0])));
-        .event(target.add_effect(skill, skill.effect()[0]))
-        .stages(EventStages::StartEnd));
     return results;
 }