From 8e90e6e0e38239029193f3db38f95cc92e9c7104 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 5 Dec 2019 15:55:14 +1000 Subject: [PATCH 1/2] remove tutorialGame from game.construct --- client/src/components/game.construct.jsx | 12 +----------- client/src/events.jsx | 6 ++++++ client/src/socket.jsx | 1 + 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 347b4511..9a9c9e90 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -89,7 +89,6 @@ const addState = connect( animText, gameSkillInfo, itemInfo, - tutorialGame, } = state; function selectSkillTarget(targetConstructId) { @@ -109,7 +108,6 @@ const addState = connect( selectSkillTarget, gameSkillInfo, itemInfo, - tutorialGame, }; }, @@ -118,11 +116,7 @@ const addState = connect( dispatch(actions.setGameEffectInfo(info)); } - function setTutorialGameClear(activeSkill, tutorialGame) { - if (activeSkill && tutorialGame) dispatch(actions.setTutorialGame(null)); - } - - return { setGameEffectInfo, setTutorialGameClear }; + return { setGameEffectInfo }; } ); @@ -157,7 +151,6 @@ class GameConstruct extends preact.Component { if (newProps.animating !== this.props.animating) return true; if (newProps.construct !== this.props.construct) return true; if (newProps.player !== this.props.player) return true; - if (newProps.tutorialGame !== this.props.tutorialGame) return true; if (newProps.gameSkillInfo !== this.props.gameSkillInfo) return true; return false; } @@ -171,14 +164,12 @@ class GameConstruct extends preact.Component { animating, construct, player, - tutorialGame, gameSkillInfo, // Constants i, itemInfo, // Functions selectSkillTarget, - setTutorialGameClear, setGameEffectInfo, } = this.props; @@ -233,7 +224,6 @@ class GameConstruct extends preact.Component {
{ selectSkillTarget(construct.id); - setTutorialGameClear(activeSkill, tutorialGame); }} style={ activeSkill ? { cursor: 'pointer' } : {}} class={`game-construct ${ko} ${cssClass}`}> diff --git a/client/src/events.jsx b/client/src/events.jsx index d6ca701a..ad4045f3 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -32,6 +32,11 @@ function registerEvents(store) { } + function clearTutorialGame() { + store.dispatch(actions.setTutorialGame(null)); + } + + function setPing(ping) { store.dispatch(actions.setPing(ping)); } @@ -351,6 +356,7 @@ function registerEvents(store) { clearInstance, clearMtxActive, clearTutorial, + clearTutorialGame, setAccount, setAccountInstances, setActiveItem, diff --git a/client/src/socket.jsx b/client/src/socket.jsx index a99fe130..210a0700 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -129,6 +129,7 @@ function createSocket(events) { { game_id: gameId, construct_id: constructId, target_construct_id: targetConstructId, skill }, ]); events.setActiveSkill(null); + events.clearTutorialGame(); } function sendGameSkillClear(gameId) { From af654cffc2be5793e8784722bfec388954c40b67 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 5 Dec 2019 17:25:54 +1000 Subject: [PATCH 2/2] refactor game.construct --- .../components/game.construct.anim.text.jsx | 73 +++++++ .../components/game.construct.effect.box.jsx | 72 +++++++ client/src/components/game.construct.jsx | 194 ++---------------- client/src/components/game.construct.life.jsx | 44 ++++ ...l.btn.jsx => game.construct.skill.btn.jsx} | 2 + client/src/events.jsx | 2 +- 6 files changed, 213 insertions(+), 174 deletions(-) create mode 100644 client/src/components/game.construct.anim.text.jsx create mode 100644 client/src/components/game.construct.effect.box.jsx create mode 100644 client/src/components/game.construct.life.jsx rename client/src/components/{skill.btn.jsx => game.construct.skill.btn.jsx} (98%) diff --git a/client/src/components/game.construct.anim.text.jsx b/client/src/components/game.construct.anim.text.jsx new file mode 100644 index 00000000..14b8fde1 --- /dev/null +++ b/client/src/components/game.construct.anim.text.jsx @@ -0,0 +1,73 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); +const anime = require('animejs').default; +const reactStringReplace = require('react-string-replace'); + +const shapes = require('./shapes'); +const { removeTier } = require('../utils'); +const { TIMES } = require('./../constants'); + +const addState = connect(({ animText, itemInfo }) => ({ animText, itemInfo })); + +class AnimText extends preact.Component { + shouldComponentUpdate(newProps) { + if (newProps.animText !== this.props.animText) return true; + return false; + } + + componentDidUpdate(prevProps) { + const { animText, construct } = this.props; + if (animText && animText !== prevProps.animText && animText.constructId === construct.id) { + anime({ + targets: '.combat-text', + top: '40%', + duration: TIMES.POST_SKILL_DURATION_MS - 500, + easing: 'easeOutQuad', + }); + } + } + + render(props) { + const { construct, animText, itemInfo } = props; + if (animText && animText.constructId === construct.id) { + const itemSourceDescription = () => { + const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animText.skill)); + const itemSourceInfo = itemSource.length + ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` + : false; + const itemRegEx = /(Red|Blue|Green)/; + return reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); + }; + + const animationTextHtml = () => { + // monkaW hack to make red / blue recharge work nicely + if (animText.css === 'rb') { + const text = animText.text.split(' '); + return ( +

+ {text[0]}  + {text[1]} +

+ ); + } + return ( +

+ {animText.text} +

+ ); + }; + + + return ( +
+

{animText.skill}

+ {itemSourceDescription()} + {animationTextHtml()} +
+ ); + } + return null; + } +} + +module.exports = addState(AnimText); diff --git a/client/src/components/game.construct.effect.box.jsx b/client/src/components/game.construct.effect.box.jsx new file mode 100644 index 00000000..d8fcda3b --- /dev/null +++ b/client/src/components/game.construct.effect.box.jsx @@ -0,0 +1,72 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); +const reactStringReplace = require('react-string-replace'); + +const actions = require('../actions'); +const shapes = require('./shapes'); +const { INFO } = require('./../constants'); + +const addState = connect( + ({ animText, itemInfo, gameSkillInfo }) => ({ animText, itemInfo, gameSkillInfo }), + + function receiveDispatch(dispatch) { + function setGameEffectInfo(info) { + dispatch(actions.setGameEffectInfo(info)); + } + + return { setGameEffectInfo }; + } + +); + +class GameConstructEffects extends preact.Component { + shouldComponentUpdate(newProps) { + if (newProps.animText !== this.props.animText) { + if (newProps.animText && newProps.animText.constructId === this.props.construct.id) return true; + } + if (newProps.construct !== this.props.construct) return true; + return false; + } + + render() { + const { + animText, + construct, + gameSkillInfo, + setGameEffectInfo, + itemInfo, + } = this.props; + + function hoverInfo(e, info) { + e.stopPropagation(); + return setGameEffectInfo(info); + } + 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 = Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% ; + return ( +
+

{gameSkillInfo.skill}

+ {infoDescription}
+ {speed} +
); + } + + const effects = animText && animText.constructId === construct.id && animText.effects + ? animText.effects + : construct.effects; + const renderEffects = effects.length + ? effects.map(c => +
+ hoverInfo(e, c)} + onMouseOut={e => hoverInfo(e, null)}> {c.effect} - {c.duration}T + +
) + : null; + return (
{renderEffects}
); + } +} + +module.exports = addState(GameConstructEffects); diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 9a9c9e90..7642b014 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -1,94 +1,23 @@ const preact = require('preact'); const { connect } = require('preact-redux'); -const anime = require('animejs').default; const range = require('lodash/range'); -const reactStringReplace = require('react-string-replace'); -const { STATS, removeTier } = require('../utils'); const { ConstructAvatar, ConstructText } = require('./construct'); -const shapes = require('./shapes'); -const { INFO, TIMES } = require('./../constants'); -const actions = require('../actions'); -const SkillBtn = require('./skill.btn'); - -const addStateText = connect(({ animText, itemInfo }) => ({ animText, itemInfo })); - -class combatText extends preact.Component { - shouldComponentUpdate(newProps) { - if (newProps.animText !== this.props.animText) return true; - return false; - } - - componentDidUpdate(prevProps) { - const { animText, construct } = this.props; - if (animText && animText !== prevProps.animText && animText.constructId === construct.id) { - anime({ - targets: '.combat-text', - top: '40%', - duration: TIMES.POST_SKILL_DURATION_MS - 500, - easing: 'easeOutQuad', - }); - } - } - - render(props) { - const { construct, animText, itemInfo } = props; - if (animText && animText.constructId === construct.id) { - const itemSourceDescription = () => { - const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animText.skill)); - const itemSourceInfo = itemSource.length - ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` - : false; - const itemRegEx = /(Red|Blue|Green)/; - return reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); - }; - - const animationTextHtml = () => { - // monkaW hack to make red / blue recharge work nicely - if (animText.css === 'rb') { - const text = animText.text.split(' '); - return ( -

- {text[0]}  - {text[1]} -

- ); - } - return ( -

- {animText.text} -

- ); - }; - - - return ( -
-

{animText.skill}

- {itemSourceDescription()} - {animationTextHtml()} -
- ); - } - return null; - } -} - -const ConstructAnimationText = addStateText(combatText); +const SkillBtn = require('./game.construct.skill.btn'); +const ConstructAnimationText = require('./game.construct.anim.text'); +const ConstructLife = require('./game.construct.life'); +const ConstructEffectBox = require('./game.construct.effect.box'); const addState = connect( function receiveState(state) { const { ws, game, - account, + activeSkill, animFocus, - animating, animText, - gameSkillInfo, - itemInfo, } = state; function selectSkillTarget(targetConstructId) { @@ -99,59 +28,20 @@ const addState = connect( } return { - game, - account, - animating, + activeSkill, animFocus, animText, - activeSkill, selectSkillTarget, - gameSkillInfo, - itemInfo, }; - }, - - function receiveDispatch(dispatch) { - function setGameEffectInfo(info) { - dispatch(actions.setGameEffectInfo(info)); - } - - return { setGameEffectInfo }; } - ); -const eventClasses = (animating, animFocus, construct, postSkill) => { - if (!animating) return ''; - if (!postSkill) { - if (animFocus.includes(construct.id)) return ''; - return 'unfocus'; - } - if (postSkill.constructId !== construct.id) { - if (animFocus.includes(construct.id)) return ''; - return 'unfocus'; - } - if (postSkill.effects) construct.effects = postSkill.effects; - construct.green_life.value = postSkill.life.green; - construct.red_life.value = postSkill.life.red; - construct.blue_life.value = postSkill.life.blue; - return postSkill.css; -}; - class GameConstruct extends preact.Component { - constructor() { - super(); - this.resolvedLength = 0; - } - shouldComponentUpdate(newProps) { if (newProps.activeSkill !== this.props.activeSkill) return true; if (newProps.animFocus !== this.props.animFocus) return true; if (newProps.animText !== this.props.animText) return true; - if (newProps.animating !== this.props.animating) return true; if (newProps.construct !== this.props.construct) return true; - if (newProps.player !== this.props.player) return true; - if (newProps.gameSkillInfo !== this.props.gameSkillInfo) return true; return false; } @@ -161,78 +51,36 @@ class GameConstruct extends preact.Component { activeSkill, animFocus, animText, - animating, + selectSkillTarget, construct, player, - gameSkillInfo, - // Constants - i, - itemInfo, - // Functions - selectSkillTarget, - setGameEffectInfo, } = this.props; - const koEvent = animText ? animText.text === 'KO!' && animText.constructId === construct.id : false; + const koEvent = animText && animText.text === 'KO!' && animText.constructId === construct.id; const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : ''; - const classes = eventClasses(animating, animFocus, construct, animText); - const cssClass = ['ko-transition', 'unfocus'].includes(classes) ? classes : null; - const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => ( -
- {shapes[s]()} -
{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}
-
{construct[STATS[s].stat].value}
-
- )); - - const skills = range(0, 3) - .map(j => ); - - let crypSkills =
; - if (player) crypSkills = (
{skills}
); - - 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 = Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% ; - return ( -
-

{gameSkillInfo.skill}

- {infoDescription}
- {speed} -
); - } - const effects = construct.effects.length - ? construct.effects.map(c => -
- hoverInfo(e, c)} - onMouseOut={e => hoverInfo(e, null)}> {c.effect} - {c.duration}T - -
) - : null; - return (
{effects}
); + const cssClass = () => { + if (koEvent) return 'ko-transition'; + if (animFocus && !animFocus.includes(construct.id)) return 'unfocus'; + return ''; }; + const crypSkills = player + ?
{range(0, 3).map(j => )}
+ :
; + + return (
{ - selectSkillTarget(construct.id); - }} + onClick={() => selectSkillTarget(construct.id)} style={ activeSkill ? { cursor: 'pointer' } : {}} - class={`game-construct ${ko} ${cssClass}`}> + class={`game-construct ${ko} ${cssClass()}`}>
{crypSkills} - {effectBox()} +
-
{stats}
+ diff --git a/client/src/components/game.construct.life.jsx b/client/src/components/game.construct.life.jsx new file mode 100644 index 00000000..b8d267f8 --- /dev/null +++ b/client/src/components/game.construct.life.jsx @@ -0,0 +1,44 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); + +const shapes = require('./shapes'); + +const addState = connect(({ animText }) => ({ animText })); + +class GameConstructLife extends preact.Component { + shouldComponentUpdate(newProps) { + if (newProps.animText !== this.props.animText) { + if (newProps.animText && newProps.animText.constructId === this.props.construct.id) return true; + } + if (newProps.construct !== this.props.construct) return true; + return false; + } + + render() { + const { construct, animText } = this.props; + // this will be cleaner in new update + const updateLife = animText && animText.constructId === construct.id; + const redLife = updateLife ? animText.life.red : construct.red_life.value; + const greenLife = updateLife ? animText.life.green : construct.green_life.value; + const blueLife = updateLife ? animText.life.blue : construct.blue_life.value; + + return ( +
+
+ {shapes.RedLife()} +
{redLife} / {construct.red_life.max}
+
+
+ {shapes.GreenLife()} +
{greenLife} / {construct.green_life.max}
+
+
+ {shapes.BlueLife()} +
{blueLife} / {construct.blue_life.max}
+
+
+ ); + } +} + +module.exports = addState(GameConstructLife); diff --git a/client/src/components/skill.btn.jsx b/client/src/components/game.construct.skill.btn.jsx similarity index 98% rename from client/src/components/skill.btn.jsx rename to client/src/components/game.construct.skill.btn.jsx index d7be22be..db0ac3ed 100644 --- a/client/src/components/skill.btn.jsx +++ b/client/src/components/game.construct.skill.btn.jsx @@ -10,11 +10,13 @@ const addState = connect( const { activeSkill, game, + animating, } = state; return { activeSkill, game, + animating, }; }, diff --git a/client/src/events.jsx b/client/src/events.jsx index ad4045f3..b10442ba 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -138,7 +138,7 @@ function registerEvents(store) { store.dispatch(actions.setAnimText(null)); store.dispatch(actions.setAnimating(false)); store.dispatch(actions.setGameEffectInfo(null)); - + store.dispatch(actions.setAnimFocus(null)); // set the game state so resolutions don't fire twice store.dispatch(actions.setGame(game)); ws.sendGameState(game.id);