combat text

2019-04-13 14:39:24 +10:00
parent 56d1162d79
commit 2e7e9d465d
8 changed files with 262 additions and 108 deletions
@@ -3,7 +3,9 @@ const range = require('lodash/range');

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

-const { STATS, eventClasses } = require('../utils');
+const { STATS, eventClasses, getCombatText } = require('../utils');
+
+const GameCryp = require('./game.cryp');

 // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];

@@ -94,95 +96,8 @@ function GamePanel(props) {
        );
    }

-    function Skill(cryp, i, mobile) {
-        const ko = cryp.green_life.value === 0 ? 'ko' : '';
-
-        const s = cryp.skills[i];
-        if (!s) {
-            return (
-                <button
-                    disabled='true'
-                    key={i}
-                    className='cryp-skill-btn disabled'>
-                    <span>&nbsp;</span>
-                </button>
-            );
-        }
-
-        const side = mobile
-            ? 'top'
-            : 'right';
-
-        const cdText = cryp.skills[i].cd > 0
-            ? `- ${s.cd}`
-            : '';
-
-        const highlight = activeSkill
-            ? activeSkill.crypId === cryp.id && activeSkill.skill === s
-            : false;
-
-        function onClick(e) {
-            e.stopPropagation();
-            return setActiveSkill(cryp.id, s.skill);
-        }
-
-        return (
-            <button
-                key={i}
-                disabled={!!cdText || ko}
-                className={`cryp-skill-btn ${side} ${highlight ? 'active' : ''}`}
-                type="submit"
-                onClick={onClick}>
-                {s.skill} {cdText}
-            </button>
-        );
-    }
-
-    function Cryp(cryp) {
-        const ko = cryp.green_life.value === 0 ? 'ko' : '';
-        const classes = eventClasses(resolution, cryp);
-
-        const skills = range(0, 3).map(i => Skill(cryp, i));
-
-        const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
-            <figure key={j} alt={s.stat}>
-                {s.svg(`stat-icon ${s.colour}`)}
-                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
-            </figure>
-        ));
-
-
-        function onClick(e) {
-            e.stopPropagation();
-            return setActiveCryp(cryp);
-        }
-
-        return (
-            <div
-                key={cryp.id}
-                style={ activeSkill ? { cursor: 'pointer' } : {}}
-                onClick={onClick}
-                className={`cryp-box ${ko} ${classes}`} >
-                <div className="cryp-box-top">
-                    <figure
-                        className="img"
-                        onClick={() => selectSkillTarget(cryp.id)} >
-                        {molecule}
-                        <figcaption>{cryp.name}</figcaption>
-                    </figure>
-                    <div className="skills">
-                        {skills}
-                    </div>
-                </div>
-                <div className="stats">
-                    {stats}
-                </div>
-            </div>
-        );
-    }
-
    function PlayerTeam(team) {
-        const cryps = team.cryps.map(c => Cryp(c));
+        const cryps = team.cryps.map((c, i) => <GameCryp key={i} cryp={c} />);

        return (
            <div className="team-player cryp-list">
@@ -195,8 +110,6 @@ function GamePanel(props) {
        const ko = cryp.green_life.value === 0 ? 'ko' : '';
        const classes = eventClasses(resolution, cryp);

-        console.log(cryp.name, classes);
-
        const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
            <figure key={j} alt={s.stat}>
                {s.svg(`stat-icon ${s.colour}`)}
@@ -204,6 +117,8 @@ function GamePanel(props) {
            </figure>
        ));

+        const combatText = getCombatText(cryp, resolution);
+
        return (
            <div
                key={i}
@@ -212,7 +127,7 @@ function GamePanel(props) {
                onClick={() => selectSkillTarget(cryp.id)} >
                <div className="cryp-box-top">
                    <figure className="img">
-                        {molecule}
+                        {molecule(combatText)}
                        <figcaption>{cryp.name}</figcaption>
                    </figure>
                </div>
@@ -241,16 +156,15 @@ function GamePanel(props) {
        ? resolutionEl(resolution)
        : playerTeam.cryps.map((c, i) => stackElement(c, i));

-    const mobileSkills = activeCryp
-        ? range(0, 3).map(i => Skill(activeCryp, i, true))
-        : (<div/>);
+    // const mobileSkills = activeCryp
+    //     ? range(0, 3).map(i => Skill(activeCryp, i, true))
+    //     : (<div/>);

    return (
        <main className="game" onClick={() => setActiveCryp(null)} >
            {header}
            {PlayerTeam(playerTeam, setActiveSkill)}
            <div className="mobile-skills">
-                {mobileSkills}
            </div>
            <div className="selected-skills">
                {selectedSkills}
@@ -0,0 +1,150 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+const range = require('lodash/range');
+
+const molecule = require('./molecule');
+const actions = require('../actions');
+const { STATS, eventClasses, getCombatText } = require('../utils');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            game,
+            resolution,
+            activeSkill,
+            activeCryp,
+        } = state;
+
+        function selectSkillTarget(targetCrypId) {
+            if (activeSkill) {
+                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
+            }
+            return false;
+        }
+
+        // intercept self casting skills
+        if (activeSkill && activeSkill.skill.self_targeting) {
+            ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
+        }
+
+        return {
+            resolution,
+            activeSkill,
+            activeCryp,
+            selectSkillTarget,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setActiveSkill(crypId, skill) {
+            dispatch(actions.setActiveSkill(crypId, skill));
+        }
+
+        function setActiveCryp(cryp) {
+            dispatch(actions.setActiveCryp(cryp));
+        }
+
+        return { setActiveSkill, setActiveCryp };
+    }
+);
+
+
+function GameCryp(props) {
+    const {
+        cryp,
+        resolution,
+
+        activeSkill,
+        setActiveSkill,
+        setActiveCryp,
+        selectSkillTarget,
+    } = props;
+
+    const ko = cryp.green_life.value === 0 ? 'ko' : '';
+
+    function Skill(i, mobile) {
+        const s = cryp.skills[i];
+        if (!s) {
+            return (
+                <button
+                    disabled='true'
+                    key={i}
+                    className='cryp-skill-btn disabled'>
+                    <span>&nbsp;</span>
+                </button>
+            );
+        }
+
+        const side = mobile
+            ? 'top'
+            : 'right';
+
+        const cdText = cryp.skills[i].cd > 0
+            ? `- ${s.cd}`
+            : '';
+
+        const highlight = activeSkill
+            ? activeSkill.crypId === cryp.id && activeSkill.skill === s
+            : false;
+
+        function onClick(e) {
+            e.stopPropagation();
+            return setActiveSkill(cryp.id, s.skill);
+        }
+
+        return (
+            <button
+                key={i}
+                disabled={!!cdText || ko}
+                className={`cryp-skill-btn ${side} ${highlight ? 'active' : ''}`}
+                type="submit"
+                onClick={onClick}>
+                {s.skill} {cdText}
+            </button>
+        );
+    }
+
+    const classes = eventClasses(resolution, cryp);
+
+    const skills = range(0, 3).map(i => Skill(i));
+
+    const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
+        <figure key={j} alt={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
+        </figure>
+    ));
+
+
+    function onClick(e) {
+        e.stopPropagation();
+        return setActiveCryp(cryp);
+    }
+
+    const combatText = getCombatText(cryp, resolution);
+
+    return (
+        <div
+            style={ activeSkill ? { cursor: 'pointer' } : {}}
+            onClick={onClick}
+            className={`cryp-box ${ko} ${classes}`} >
+            <div className="cryp-box-top">
+                <figure
+                    className="img"
+                    onClick={() => selectSkillTarget(cryp.id)} >
+                    {molecule(combatText)}
+                    <figcaption>{cryp.name}</figcaption>
+                </figure>
+                <div className="skills">
+                    {skills}
+                </div>
+            </div>
+            <div className="stats">
+                {stats}
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(GameCryp);
@@ -92,7 +92,7 @@ function Cryp(props) {
            >
            <div className="cryp-box-top">
                <figure className="img" onClick={onClick}>
-                    {molecule}
+                    {molecule()}
                    <figcaption>{cryp.name}</figcaption>
                </figure>
                <div className="skills">
@@ -109,7 +109,7 @@ function Menu(args) {
                        style={ { 'border-color': borderColour || 'whitesmoke' } }
                        onClick={() => selectCryp(cryp.id)} >
                        <figure className="img">
-                            {molecule}
+                            {molecule()}
                        </figure>
                        <h2>{cryp.name}</h2>
                    </div>