combat events init

2019-04-12 16:09:00 +10:00
parent c0303c5b61
commit 4a081d6ec1
18 changed files with 143 additions and 391 deletions
@@ -1,324 +0,0 @@
-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 damage stats cryp',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            GreenDamageI: {
-                description: 'Increases green damage',
-                colours: ['green'],
-                thresholds: [5, 10, 20],
-            },
-
-            RedDamageI: {
-                description: 'Increased red damage',
-                colours: ['red'],
-                thresholds: [5, 10, 20],
-            },
-
-            BlueDamageI: {
-                description: 'Increased blue damage',
-                colours: ['blue'],
-                thresholds: [5, 10, 20],
-            },
-
-            GRDI: {
-                description: 'Increased green and red damage',
-                colours: ['green', 'red'],
-                thresholds: [2, 5, 10],
-            },
-
-            GBDI: {
-                description: 'Increased green and blue damage',
-                colours: ['green', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            RBDI: {
-                description: 'Increased red and blue damage',
-                colours: ['red', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            Life: {
-                description: 'Increases life',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            GreenLifeI: {
-                description: 'Increases life',
-                colours: ['green'],
-                thresholds: [5, 10, 20],
-            },
-
-            RedLifeI: {
-                description: 'Increased red shield',
-                colours: ['red'],
-                thresholds: [5, 10, 20],
-            },
-
-            BlueLifeI: {
-                description: 'Increased blue shield',
-                colours: ['blue'],
-                thresholds: [5, 10, 20],
-            },
-
-            GRLI: {
-                description: 'Increased life and red shield',
-                colours: ['green', 'red'],
-                thresholds: [2, 5, 10],
-            },
-
-            GBLI: {
-                description: 'Increased life and blue shield',
-                colours: ['green', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            RBLI: {
-                description: 'Increased red and blue shield',
-                colours: ['red', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            Speed: {
-                description: 'Increases speed of cryp',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            RedSpeedI: {
-                description: 'Increases red speed',
-                colours: ['red'],
-                thresholds: [5, 10, 20],
-            },
-
-            BlueSpeedI: {
-                description: 'Increases blue speed',
-                colours: ['blue'],
-                thresholds: [5, 10, 20],
-            },
-
-            GreenSpeedI: {
-                description: 'Increases green speed',
-                colours: ['green'],
-                thresholds: [5, 10, 20],
-            },
-
-            GRSpeedI: {
-                description: 'Increases green and red speed',
-                colours: ['green', 'red'],
-                thresholds: [2, 5, 10],
-            },
-
-            GBSpeedI: {
-                description: 'Increases green and blue speed',
-                colours: ['green', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            RBSpeedI: {
-                description: 'Increases red and blue speed',
-                colours: ['red', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-        },
-
-        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',
-            },
-        },
-    },
-};
@@ -1,105 +0,0 @@
-const preact = require('preact');
-const range = require('lodash/range');
-
-const { stringSort } = require('./../utils');
-const molecule = require('./molecule');
-const SpawnButton = require('./spawn.button');
-
-const idSort = stringSort('id');
-
-const COLOURS = [
-    '#a52a2a',
-    '#1FF01F',
-    '#3498db',
-];
-
-function CrypList(args) {
-    const {
-        cryps,
-        selectedCryps,
-        setSelectedCryps,
-        sendPlayerMmCrypsSet,
-        sendInstanceJoin,
-        sendCrypSpawn
-    } = args;
-
-    if (!cryps) return <div></div>;
-
-    // redux limitation + suggested workaround
-    // so much for dumb components
-    function selectCryp(id) {
-        // remove
-        const i = selectedCryps.findIndex(sid => sid === id);
-        if (i > -1) {
-            selectedCryps[i] = null;
-            return setSelectedCryps(selectedCryps);
-        }
-
-        // window insert
-        const insert = selectedCryps.findIndex(j => j === null);
-        if (insert === -1) return setSelectedCryps([id, null, null]);
-        selectedCryps[insert] = id;
-        return setSelectedCryps(selectedCryps);
-    }
-
-    const instanceJoinHidden = !selectedCryps.every(c => !!c);
-
-    const mmSet = (
-        <button
-            className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
-            disabled={instanceJoinHidden}
-            onClick={() => sendPlayerMmCrypsSet()}>
-            Set Matchmaking Team
-        </button>
-    );
-    const instanceJoin = (
-        <button
-            className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
-            disabled={instanceJoinHidden}
-            onClick={() => sendInstanceJoin()}>
-            Join New Instance
-        </button>
-    );
-
-
-    const crypPanels = cryps.sort(idSort).map(cryp => {
-        const colour = selectedCryps.indexOf(cryp.id);
-        const selected = colour > -1;
-
-        const borderColour = selected ? COLOURS[colour] : '#000000';
-
-        return (
-            <div
-                key={cryp.id}
-                className="menu-cryp-ctr">
-                <div
-                    className="menu-cryp"
-                    style={ { 'border-color': borderColour || 'whitesmoke' } }
-                    onClick={() => selectCryp(cryp.id)} >
-                    <figure className="img">
-                        {molecule}
-                    </figure>
-                    <h2>{cryp.name}</h2>
-                </div>
-            </div>
-        );
-    });
-
-    const spawnButtonsNum = cryps.length < 3
-        ? (3 - cryps.length)
-        : 1;
-
-    const spawnButtons = range(spawnButtonsNum)
-        .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
-
-    return (
-        <div className="menu-cryps">
-            {mmSet}
-            {instanceJoin}
-            {crypPanels}
-            {spawnButtons}
-        </div>
-    );
-}
-
-module.exports = CrypList;
@@ -1,65 +0,0 @@
-const { connect } = require('preact-redux');
-
-const CrypList = require('./cryp.list.component');
-const actions = require('./../actions');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, cryps, selectedCryps, instances } = state;
-
-        function sendInstanceJoin() {
-            if (selectedCryps.length) {
-                return ws.sendInstanceJoin(selectedCryps);
-            }
-            return false;
-        }
-
-        function sendPlayerMmCrypsSet() {
-            if (selectedCryps.length) {
-                return ws.sendPlayerMmCrypsSet(selectedCryps);
-            }
-            return false;
-        }
-
-        function sendCrypSpawn(name) {
-            return ws.sendCrypSpawn(name);
-        }
-
-        return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn, sendPlayerMmCrypsSet };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setSelectedCryps(crypIds) {
-            dispatch(actions.setSelectedCryps(crypIds));
-        }
-
-        function setActiveInstance(instance) {
-            dispatch(actions.setInstance(instance));
-        }
-
-        return {
-            setSelectedCryps,
-            setActiveInstance,
-        };
-    }
-);
-
-module.exports = addState(CrypList);
-
-
-        function sendCrypsSet() {
-            console.log('set crypos');
-            // return ws.sendGamePvp(crypIds);
-        }
-
-        function sendInstanceJoin() {
-            if (selectedCryps.length) {
-                return ws.sendInstanceJoin(selectedCryps);
-            }
-            return false;
-        }
-
-
-        return { instances, sendCrypsSet, sendInstanceJoin };
-    },
-
@@ -140,6 +140,11 @@ function GamePanel(props) {

    function Cryp(cryp) {
        const ko = cryp.green_life.value === 0 ? 'ko' : '';
+        const unfocus = () => {
+            if (!resolution) return false;
+            if (cryp.id === resolution.source.id || cryp.id === resolution.target.id) return false;
+            return 'unfocus';
+        };

        const skills = range(0, 3).map(i => Skill(cryp, i));

@@ -161,7 +166,7 @@ function GamePanel(props) {
                key={cryp.id}
                style={ activeSkill ? { cursor: 'pointer' } : {}}
                onClick={onClick}
-                className={`cryp-box ${ko}`} >
+                className={`cryp-box ${ko} ${unfocus()}`} >
                <div className="cryp-box-top">
                    <figure
                        className="img"
@@ -193,6 +198,12 @@ function GamePanel(props) {
    function OpponentCryp(cryp, i) {
        const ko = cryp.green_life.value === 0 ? 'ko' : '';

+        const unfocus = () => {
+            if (!resolution) return false;
+            if (cryp.id === resolution.source.id || cryp.id === resolution.target.id) return false;
+            return 'unfocus';
+        };
+
        const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
            <figure key={j} alt={s.stat}>
                {s.svg(`stat-icon ${s.colour}`)}
@@ -203,7 +214,7 @@ function GamePanel(props) {
        return (
            <div
                key={i}
-                className={`cryp-box ${ko}`}
+                className={`cryp-box ${ko} ${unfocus()}`}
                style={ activeSkill ? { cursor: 'pointer' } : {}}
                onClick={() => selectSkillTarget(cryp.id)} >
                <div className="cryp-box-top">
@@ -1,13 +1,8 @@
-// import 'particles.js/particles';
-
 const { connect } = require('preact-redux');

 const actions = require('../actions');

 const Game = require('./game.component');
-// const config = require('./particles.config');
-
-// const particlesJS = window.particlesJS;

 const addState = connect(
    function receiveState(state) {
@@ -1,7 +1,7 @@
 const preact = require('preact');
 const range = require('lodash/range');

-const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./constants');
+const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
 const { COLOUR_ICONS, STATS, SPECS } = require('../utils');

 function Info(args) {
@@ -1,131 +0,0 @@
-const preact = require('preact');
-const range = require('lodash/range');
-
-const { stringSort, NULL_UUID } = require('./../utils');
-const molecule = require('./molecule');
-const SpawnButton = require('./spawn.button');
-
-const idSort = stringSort('id');
-
-const COLOURS = [
-    '#a52a2a',
-    '#1FF01F',
-    '#3498db',
-];
-
-function CrypList(args) {
-    const {
-        cryps,
-        selectedCryps,
-        setSelectedCryps,
-        sendPlayerMmCrypsSet,
-        sendInstanceJoin,
-        sendCrypSpawn
-    } = args;
-
-    if (!cryps) return <div></div>;
-
-    // redux limitation + suggested workaround
-    // so much for dumb components
-    function selectCryp(id) {
-        // remove
-        const i = selectedCryps.findIndex(sid => sid === id);
-        if (i > -1) {
-            selectedCryps[i] = null;
-            return setSelectedCryps(selectedCryps);
-        }
-
-        // window insert
-        const insert = selectedCryps.findIndex(j => j === null);
-        if (insert === -1) return setSelectedCryps([id, null, null]);
-        selectedCryps[insert] = id;
-        return setSelectedCryps(selectedCryps);
-    }
-
-    const instanceJoinHidden = !selectedCryps.every(c => !!c);
-
-    const mmSet = (
-        <button
-            className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
-            disabled={instanceJoinHidden}
-            onClick={() => sendPlayerMmCrypsSet()}>
-            Set Matchmaking Team
-        </button>
-    );
-    const instanceJoin = (
-        <button
-            className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
-            disabled={instanceJoinHidden}
-            onClick={() => sendInstanceJoin()}>
-            Join New Instance
-        </button>
-    );
-
-
-    const crypPanels = cryps.sort(idSort).map(cryp => {
-        const colour = selectedCryps.indexOf(cryp.id);
-        const selected = colour > -1;
-
-        const borderColour = selected ? COLOURS[colour] : '#000000';
-
-        return (
-            <div
-                key={cryp.id}
-                className="menu-cryp-ctr">
-                <div
-                    className="menu-cryp"
-                    style={ { 'border-color': borderColour || 'whitesmoke' } }
-                    onClick={() => selectCryp(cryp.id)} >
-                    <figure className="img">
-                        {molecule}
-                    </figure>
-                    <h2>{cryp.name}</h2>
-                </div>
-            </div>
-        );
-    });
-
-    const spawnButtonsNum = cryps.length < 3
-        ? (3 - cryps.length)
-        : 1;
-
-    const spawnButtons = range(spawnButtonsNum)
-        .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
-
-    return (
-        <div className="menu-cryps">
-            {mmSet}
-            {instanceJoin}
-            {crypPanels}
-            {spawnButtons}
-        </div>
-    );
-}
-
-function instanceList({ instances, setActiveInstance }) {
-    if (!instances) return <div>...</div>;
-
-    const instancePanels = instances.map(instance => {
-        const globalInstance = instance.instance === NULL_UUID;
-        const name = globalInstance
-            ? 'Global Matchmaking'
-            : `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;
-
-        return (
-            <button
-                className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
-                key={instance.id}
-                onClick={() => setActiveInstance(instance)}>
-                {name}
-            </button>
-        );
-    });
-
-    return (
-        <section className="menu-instance-list" >
-            {instancePanels}
-        </section>
-    );
-}
-
-module.exports = instanceList;
@@ -1,35 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const InstanceList = require('./instance.list.component');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, selectedCryps, instances } = state;
-        function sendCrypsSet() {
-            console.log('set crypos');
-            // return ws.sendGamePvp(crypIds);
-        }
-
-        function sendInstanceJoin() {
-            if (selectedCryps.length) {
-                return ws.sendInstanceJoin(selectedCryps);
-            }
-            return false;
-        }
-
-
-        return { instances, sendCrypsSet, sendInstanceJoin };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setActiveInstance(instance) {
-            dispatch(actions.setInstance(instance));
-        }
-
-        return { setActiveInstance };
-    }
-);
-
-module.exports = addState(InstanceList);
@@ -20,7 +20,7 @@ function Menu(args) {
        cryps,
        selectedCryps,
        setSelectedCryps,
-        setActiveInstance,
+        sendPlayerState,
        sendPlayerMmCrypsSet,
        sendInstanceJoin,
        sendCrypSpawn,
@@ -40,7 +40,7 @@ function Menu(args) {
                <button
                    className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
                    key={instance.id}
-                    onClick={() => setActiveInstance(instance)}>
+                    onClick={() => sendPlayerState(instance)}>
                    {name}
                </button>
            );
@@ -25,10 +25,15 @@ const addState = connect(
            return ws.sendCrypSpawn(name);
        }

+        function sendPlayerState(instance) {
+            return ws.sendPlayerState(instance.instance);
+        }
+
        return {
            cryps,
            selectedCryps,
            sendInstanceJoin,
+            sendPlayerState,
            sendCrypSpawn,
            sendPlayerMmCrypsSet,
            instances,
@@ -40,13 +45,8 @@ const addState = connect(
            dispatch(actions.setSelectedCryps(crypIds));
        }

-        function setActiveInstance(instance) {
-            dispatch(actions.setInstance(instance));
-        }
-
        return {
            setSelectedCryps,
-            setActiveInstance,
        };
    }
 );