+[1.10.1] - 2019-12-04
++Changed
+-
+
- Reduced the number of items to create + and ++ versions from 3 to 2 (need 4 items total to make a ++) +
- Reduced the power of ++ skills to be closer to the power of previous + versions +
- Tweaked all values of power specs to reduce their power bonuses +
+[1.10.0] - 2019-11-29
++Changed
+-
+
- Reworked the vbox layout +
- Floating combat text and faster animations +
- Mobile UI fixes +
[1.9.1] - 2019-11-21
Fixed
@@ -742,7 +758,7 @@ pre {[1.9.0] - 2019-11-21
-Changed
+Changed- VBOX
-
@@ -794,7 +810,7 @@ pre {
- Resizing of vbox when you buy / create certain items
-Changed
+Changed- Automatically shows a preview of combo item when you have 3 items selected for combining
- Only highlight the first available item slot when equipping @@ -826,7 +842,7 @@ pre {
- An issue where skills would not be put on cooldown after being used.
-Changed
+Changed-
Game phase
@@ -893,7 +909,7 @@ pre {
-Changed
+Changed-
Construct life changed
@@ -979,7 +995,7 @@ pre {
-Changed
+Changed-
Vbox phase
@@ -1125,7 +1141,7 @@ pre { - Player width styling
-Changed
+Changed- Improved wiggle animation
- Intercept is now considered defensive by bots @@ -1134,7 +1150,7 @@ pre {
- Animations processing on client side reduced.
- Subscriber chat!
[1.6.4] - 2019-10-24
-Changed
+Changed-Changed
+Changed-
Made available skill / effect information during the combat phase.
@@ -1208,7 +1224,7 @@ pre { [1.5.6] - 2019-10-17We've updated the UI during the vbox / buy phase to give a better indication of valid actions.
-Changed
+Changed-
Borders for skill combo's represent the base colours.
@@ -1234,7 +1250,7 @@ pre {[1.5.5] - 2019-10-15
-Changed
+Changed-
Purge
diff --git a/client/package.json b/client/package.json index 4cbd135c..a0e5ba9f 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.10.0", + "version": "1.11.0", "description": "", "main": "index.js", "scripts": { diff --git a/client/src/actions.jsx b/client/src/actions.jsx index e426f70b..a49d8278 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -1,14 +1,12 @@ export const setAccount = value => ({ type: 'SET_ACCOUNT', value }); +export const setAuthenticated = value => ({ type: 'SET_AUTHENTICATED', value }); export const setAnimating = value => ({ type: 'SET_ANIMATING', value }); -export const setAnimCb = value => ({ type: 'SET_ANIM_CB', value }); export const setAnimFocus = value => ({ type: 'SET_ANIM_FOCUS', value }); -export const setAnimSkill = value => ({ type: 'SET_ANIM_SKILL', value }); +export const setAnimSkill = value => ({ type: 'SET_ANIM_SKILL', value }); export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value }); export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value }); -export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value }); - -export const setDemo = value => ({ type: 'SET_DEMO', value }); +export const setResolution = value => ({ type: 'SET_RESOLUTION', value }); export const setChatShow = value => ({ type: 'SET_CHAT_SHOW', value }); export const setChatWheel = value => ({ type: 'SET_CHAT_WHEEL', value }); diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index d42ded1b..71f35de2 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -4,9 +4,7 @@ const toast = require('izitoast'); const eachSeries = require('async/eachSeries'); const actions = require('./actions'); -const { TIMES } = require('./constants'); -const animations = require('./animations.utils'); -const { removeTier } = require('./utils'); +const { setAnimations, clearAnimations } = require('./animations.utils'); const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/api/ws' : 'ws://localhost/api/ws'; @@ -20,73 +18,32 @@ function createSocket(store) { ws.send(cbor.encode(msg)); } - function sendDevResolve(a, b, skill) { - send(['DevResolve', { a, b, skill }]); + function sendDevResolve(skill) { + send(['DevResolve', { skill }]); } - function onDevResolutions(newRes) { - const { game, account, animating } = store.getState(); - - if (animating) return false; + function setGame(game) { + store.dispatch(actions.setGame(game)); store.dispatch(actions.setAnimating(true)); + store.dispatch(actions.setGameSkillInfo(null)); // stop fetching the game state til animations are done - + const newRes = game.resolutions[game.resolutions.length - 1]; return eachSeries(newRes, (r, cb) => { - if (!r.event) return cb(); - const timeout = animations.getTime(r.stages); - const anims = animations.getObjects(r, game, account); - const text = animations.getText(r); - store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game))); - if (anims.animSkill) store.dispatch(actions.setAnimSkill(anims.animSkill)); - - if (r.stages.includes('START_SKILL') && anims.animSource) { - store.dispatch(actions.setAnimSource(anims.animSource)); - } - - if (r.stages.includes('END_SKILL') && anims.animTarget) { - store.dispatch(actions.setAnimTarget(anims.animTarget)); - if (animations.isCbAnim(anims.animSkill)) store.dispatch(actions.setAnimCb(cb)); - } - - if (r.stages.includes('POST_SKILL') && text) { - // timeout to prevent text classes from being added too soon - if (timeout === TIMES.POST_SKILL_DURATION_MS) { - store.dispatch(actions.setAnimText(text)); - } else { - setTimeout( - () => store.dispatch(actions.setAnimText(text)), - timeout - TIMES.POST_SKILL_DURATION_MS - ); - } - } - - return setTimeout(() => { - store.dispatch(actions.setAnimSkill(null)); - store.dispatch(actions.setAnimSource(null)); - store.dispatch(actions.setAnimTarget(null)); - store.dispatch(actions.setAnimText(null)); - store.dispatch(actions.setAnimFocus([])); - if (r.stages.includes('END_SKILL') && animations.isCbAnim(anims.animSkill)) return true; - return cb(); - }, timeout); + // if (r.delay === 0) return cb(); // TargetKo etc + setAnimations(r, store); + return setTimeout(cb, r.delay); }, err => { if (err) return console.error(err); - // clear animation state - store.dispatch(actions.setAnimSkill(null)); - store.dispatch(actions.setAnimSource(null)); - store.dispatch(actions.setAnimTarget(null)); - store.dispatch(actions.setAnimText(null)); - store.dispatch(actions.setAnimating(false)); - store.dispatch(actions.setGameEffectInfo(null)); - + clearAnimations(store); // set the game state so resolutions don't fire twice store.dispatch(actions.setGame(game)); + // ws.sendGameState(game.id); return true; }); } const handlers = { - DevResolutions: onDevResolutions, + GameState: setGame, }; // decodes the cbor and diff --git a/client/src/animations.test.jsx b/client/src/animations.test.jsx index e230a58b..aa33e5c3 100644 --- a/client/src/animations.test.jsx +++ b/client/src/animations.test.jsx @@ -5,18 +5,7 @@ const { createStore, combineReducers } = require('redux'); const reducers = require('./reducers'); const actions = require('./actions'); const createSocket = require('./animations.socket'); - -// const TrippyTriangle = require('./components/svgs/trippy.triangle'); -// const Amplify = require('./components/svgs/amplify'); -// const Hex = require('./components/svgs/hex'); const Game = require('./components/game'); -const testGameBuilder = require('./test.game'); - -const testGame = testGameBuilder('8552e0bf-340d-4fc8-b6fc-cccccccccccc'); -const testAccount = { - id: '8552e0bf-340d-4fc8-b6fc-cccccccccccc', - name: 'ntr', -}; // Redux Store const store = createStore( @@ -24,20 +13,15 @@ const store = createStore( window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), ); +const testAccount = { + id: '8552e0bf-340d-4fc8-b6fc-cccccccccccc', + name: 'ntr', +}; store.dispatch(actions.setAccount(testAccount)); -store.dispatch(actions.setGame(testGame)); function animationsNav(ws) { function useSkill(skill) { - const ateam = Math.round(Math.random()); - const bteam = Math.round(Math.random()); - const acon = Math.floor(Math.random() * 3); - const bcon = Math.floor(Math.random() * 3); - - const a = testGame.players[ateam].constructs[acon].id; - const b = testGame.players[bteam].constructs[bcon].id; - - return ws.sendDevResolve(a, b, skill); + return ws.sendDevResolve(skill); } return SKILLS.map((s, i) => ( diff --git a/client/src/animations.utils.jsx b/client/src/animations.utils.jsx index 461abe84..dbdd2957 100644 --- a/client/src/animations.utils.jsx +++ b/client/src/animations.utils.jsx @@ -1,207 +1,49 @@ +const actions = require('./actions'); const { TIMES } = require('./constants'); -const { removeTier } = require('./utils'); -function none() { - return { - animSource: null, - animTarget: null, - }; -} +function setAnimations(r, store) { + const { focus, event: [type, variant] } = r; -function getObjects(resolution, game, account) { - if (!resolution) return none(); - if (!resolution.target) return none(); + if (type === 'HitAoe') { + const { construct } = variant; + const aoeFocus = focus.concat(construct); - const [type, event] = resolution.event; - if (!event || !event.skill) return none(); + store.dispatch(actions.setResolution(null)); + store.dispatch(actions.setAnimFocus(aoeFocus)); + store.dispatch(actions.setAnimTarget(r)); - const playerTeam = game.players.find(t => t.id === account.id); - const playerTeamIds = playerTeam.constructs.map(c => c.id); - const otherTeam = game.players.find(t => t.id !== account.id); - const otherTeamIds = otherTeam.constructs.map(c => c.id); - const sourceIsPlayer = playerTeamIds.includes(resolution.source.id); - const targetIsPlayer = playerTeamIds.includes(resolution.target.id); - - const targetting = () => { - if (type === 'AoeSkill') { - if (targetIsPlayer) return playerTeamIds; - return otherTeamIds; - } - return [resolution.target.id]; - }; - - const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer); - let y = 0; - if (!sameTeam) y = targetIsPlayer ? 1 : -1; - - const i = sourceIsPlayer - ? playerTeamIds.findIndex(c => c === resolution.source.id) - : otherTeamIds.findIndex(c => c === resolution.source.id); - - const j = targetIsPlayer - ? playerTeamIds.findIndex(c => c === resolution.target.id) - : otherTeamIds.findIndex(c => c === resolution.target.id); - const x = j - i; - const direction = { x, y }; - // const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds; - - const createSourceAnim = () => { - return { - animation: 'sourceCast', - constructId: resolution.source.id, - direction, - }; - }; - - const skipSource = !resolution.stages.includes('START_SKILL') - || resolution.source.id === resolution.target.id; - - const animSource = skipSource - ? null - : createSourceAnim(); - - const animTarget = { - skill: event.skill, - constructId: targetting(), - player: playerTeamIds.includes(resolution.target.id), - direction, - }; - return { - animSource, - animTarget, - animSkill: event.skill, - }; -} - -function getTime(stages) { - let time = 0; - if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { - time += TIMES.SOURCE_AND_TARGET_TOTAL_DURATION; - } else { - if (stages.includes('START_SKILL')) time += TIMES.SOURCE_DURATION_MS; - if (stages.includes('END_SKILL')) time += TIMES.TARGET_DURATION_MS; - } - if (stages.includes('POST_SKILL')) time += TIMES.POST_SKILL_DURATION_MS; - - return time; -} - -function getFocusTargets(resolution, game) { - if (!resolution) return []; - if (!resolution.event) return []; - const [type] = resolution.event; - const source = resolution.source.id; - const target = resolution.target.id; - - if (type === 'AoeSkill') { - const targetTeam = game.players.find(t => t.constructs.find(c => c.id === target)); - const targetTeamIds = targetTeam.constructs.map(c => c.id); - if (source !== target) targetTeamIds.push(source); - return targetTeamIds; - } - if (source !== target) return [source, target]; - return [target]; -} - -function getText(resolution) { - const nullText = { text: null, constructId: null, life: null }; - if (!resolution) return nullText; - if (!resolution.stages.includes('POST_SKILL')) return nullText; - - function generatePostSkill() { - const [type, event] = resolution.event; - if (type === 'Ko') { - return { text: 'KO!', css: 'ko-transition' }; - } - - if (type === 'Disable') { - const { disable } = event; - return { text: `${disable}`, css: '' }; - } - - if (type === 'Immunity') { - return { text: 'IMMUNE', css: '' }; - } - - if (type === 'Damage') { - const { mitigation, colour } = event; - let { amount } = event; - let css = ''; - if (colour === 'Green') { - css = 'green'; - amount *= -1; - } - if (colour === 'Red') css = 'red'; - if (colour === 'Blue') css = 'blue'; - - const mitigationText = mitigation - ? `(${mitigation})` - : ''; - return { text: `${amount} ${mitigationText}`, css }; - } - - if (type === 'Healing') { - const { amount, overhealing } = event; - return { text: `${amount} (${overhealing} OH)`, css: 'green' }; - } - - if (type === 'Inversion') { - return { text: 'INVERT', css: '' }; - } - - if (type === 'Reflection') { - return { text: 'REFLECT', css: '' }; - } - - if (type === 'Effect') { - const { effect, duration, construct_effects: effects } = event; - return { text: `+ ${effect} ${duration}T`, css: '', effects }; - } - - if (type === 'Recharge') { - const { red, blue } = event; - if (red > 0 && blue > 0) return { text: `+${red}R +${blue}B`, css: 'rb' }; - if (red > 0) return { text: `+${red}R`, css: 'red' }; - if (blue > 0) return { text: `+${blue}B`, css: 'blue' }; - return nullText; - } - - if (type === 'Removal') { - const { effect, construct_effects: effects } = event; - if (!effect) { - return { text: 'Effect Removal', css: '', effects }; - } - return { text: `-${effect}`, css: '', effects }; - } - return false; + return setTimeout(() => store.dispatch(actions.setAnimSource(null)), TIMES.SOURCE_DURATION_MS); } - const { green, red, blue } = resolution.target; - const { text, css, effects } = generatePostSkill(); - const skill = resolution.event[1] ? resolution.event[1].skill : null; - return { - css, - text, - effects, - life: { green, red, blue }, - constructId: resolution.target.id, - skill, - }; + store.dispatch(actions.setAnimFocus(focus)); + + if (type === 'Cast') { + store.dispatch(actions.setResolution(null)); + store.dispatch(actions.setAnimSource(r)); + return setTimeout(() => store.dispatch(actions.setAnimSource(null)), TIMES.SOURCE_DURATION_MS); + } + + if (type === 'Hit') { + store.dispatch(actions.setResolution(null)); + store.dispatch(actions.setAnimTarget(r)); + return setTimeout(() => store.dispatch(actions.setAnimTarget(null)), TIMES.TARGET_DURATION_MS); + } + + return store.dispatch(actions.setResolution(r)); } -function isCbAnim(skill) { - return ['Attack', 'Blast', 'Siphon', 'SiphonTick', 'Strike', 'Chaos', 'Slay', 'Heal', - 'Buff', 'Amplify', 'Haste', 'Triage', 'TriageTick', 'Link', 'Hybrid', 'Intercept', - 'Debuff', 'Curse', 'Decay', 'DecayTick', 'Purge', 'Silence', 'Restrict', - 'Stun', 'Bash', 'Absorb', 'Sleep', 'Break', 'Ruin', - 'Block', 'Sustain', 'Electrify', 'Electrocute', 'ElectrocuteTick', - 'Counter', 'CounterAttack', 'Purify', 'Recharge', 'Reflect'].includes(removeTier(skill)); +function clearAnimations(store) { + store.dispatch(actions.setAnimSkill(null)); + store.dispatch(actions.setAnimSource(null)); + store.dispatch(actions.setAnimTarget(null)); + store.dispatch(actions.setResolution(null)); + store.dispatch(actions.setAnimating(false)); + store.dispatch(actions.setGameEffectInfo(null)); + store.dispatch(actions.setAnimFocus(null)); } + module.exports = { - getFocusTargets, - getObjects, - getTime, - getText, - isCbAnim, + setAnimations, + clearAnimations, }; diff --git a/client/src/app.jsx b/client/src/app.jsx index 1599c1ab..47a08e62 100644 --- a/client/src/app.jsx +++ b/client/src/app.jsx @@ -33,6 +33,10 @@ const ws = createSocket(events); ws.connect(); events.setWs(ws); +if (process.env.NODE_ENV !== 'development') { + LogRocket.init('yh0dy3/mnml'); +} + const App = () => ({window.Stripe diff --git a/client/src/components/account.top.jsx b/client/src/components/account.top.jsx index de983dd7..b2500d62 100644 --- a/client/src/components/account.top.jsx +++ b/client/src/components/account.top.jsx @@ -152,11 +152,9 @@ class AccountStatus extends Component { return ( + {subInfo()} - {subInfo()} --- +Email
- Recovery Email
- {email ? email.email : 'No email set'} @@ -174,6 +172,7 @@ class AccountStatus extends Component {
+Password
+Other
spawn new construct
-
-