diff --git a/README.md b/README.md index 19e7ce8d..e2ead233 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # mnml mnml is a turn-based 1v1 strategy game in an abstract setting. -players craft a team of 3 constructs combining a deep pool of skills, effects and specialisations to mindgame & outplay their opponents in a rapid series of duels. -featuring complex interactions arising from simple rules, simultaneous turns to increase the pace, and a unique speed mechanic mnml is a tactical game in a genre of its own. -it is completely free to play and requires no installation. +Craft a team of 3 constructs combining a deep pool of skills, effects and specialisations to mindgame & outplay opponents in a rapid series of duels. +Featuring complex interactions arising from simple rules, simultaneous turns to increase the pace, and a unique speed mechanic mnml is a tactical game in a genre of its own. +It is completely free to play and requires no installation. minimal studios is ntr & mashy: 2 mates with a friendship forged in the fires of warcraft 3 dota. we have both bailed out of the big city life and have dedicated ourselves to growing farm fresh, organic, ethical gaming produce in the rolling hills of brisbane and leaves of melbourne. diff --git a/VERSION b/VERSION index a73b4325..1d5e9e0b 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.5.2 \ No newline at end of file +1.5.3 \ No newline at end of file diff --git a/WORKLOG.md b/WORKLOG.md index 8f93a003..20cd76e7 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -6,6 +6,8 @@ * mobile styles * mobile info page +* fix info page for tablet layout + * Add TOS and accept to register page * can't reset password without knowing password =\ @@ -45,8 +47,11 @@ reconnect based on time delta consolidate game and instance + * return of the combat log (last few events with condensed descriptions) + - click in to scroll * elo + leaderboards + * reflect event stages (for animations) * mnml tv ## LATER diff --git a/acp/package.json b/acp/package.json index 809c390d..f41793e6 100644 --- a/acp/package.json +++ b/acp/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.2", + "version": "1.5.3", "description": "", "main": "index.js", "scripts": { diff --git a/client/animations.test.js b/client/animations.test.js index 3271b840..b6cbc772 100644 --- a/client/animations.test.js +++ b/client/animations.test.js @@ -8,7 +8,7 @@ require('./assets/styles/instance.less'); require('./assets/styles/vbox.less'); require('./assets/styles/game.less'); require('./assets/styles/player.less'); -require('./assets/styles/styles.mobile.css'); -require('./assets/styles/instance.mobile.css'); +require('./assets/styles/styles.mobile.less'); +require('./assets/styles/instance.mobile.less'); require('./src/animations.test.jsx'); diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index f267351a..80612c3e 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -44,7 +44,10 @@ aside { button { width: 100%; font-size: 150%; - margin-bottom: 0.5em; + + &:last-child { + margin-bottom: 0; + } } button.ready:enabled { diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 5e9586de..7c55e35a 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -3,13 +3,13 @@ .game { overflow: hidden; - display: grid; - grid-template-rows: 1fr 0.5fr 1.5fr; - grid-template-columns: 1fr; - grid-template-areas: - "opponent" - "target " - "player "; + // display: grid; + // grid-template-rows: 1fr 0.75fr 1.5fr; + // grid-template-columns: 1fr; + // grid-template-areas: + // "opponent" + // "target " + // "player "; } .game .team { @@ -24,11 +24,22 @@ .player { grid-area: player; z-index: 5; + + position: absolute; + bottom: 0; + height: 50%; + width: 90%; } .opponent { grid-area: opponent; + position: absolute; + top: 0; + height: 35%; + width: 90%; + margin-top: 0.5em; + .game-construct { align-items: flex-start; grid-template-columns: 1fr 2fr; @@ -66,14 +77,16 @@ justify-items: center; - grid-template-columns: 1fr 3fr; + grid-template-columns: 1fr; + grid-template-rows: min-content 1fr; .left { + width: 100%; display: grid; - grid-template-rows: 1fr 1fr; + + grid-template-columns: 1fr 2fr; grid-template-areas: - "skills " - "effects"; + "skills effects"; } .right { @@ -92,7 +105,6 @@ transition-timing-function: ease; .effects { - align-self: flex-end; text-align: right; } @@ -108,13 +120,14 @@ } .skills { - grid-area: skills; - width: 100%; - button { width: 100%; height: 2em; height: 25%; + margin-right: 1em; + } + button.active { + background: #2c2c2c; } } @@ -176,12 +189,19 @@ #targeting { grid-area: target; - height: 100%; - width: 100%; + // height: 100%; + // width: 100%; stroke-width: 2px; stroke: whitesmoke; } +#targeting, .resolving-skill { + position: absolute; + top: 35%; + height: 15%; + width: 90%; +} + .resolving-skill { grid-area: target; align-self: center; @@ -203,9 +223,8 @@ .combat-anim { width: 100%; + height: 100%; position: absolute; - display: flex; - flex-flow: column; } .combat-anim svg { @@ -310,7 +329,7 @@ .skill-animation { opacity: 0; stroke-width: 5px; - height: 5em; + // height: 5em; } @media (max-width: 1000px) { @@ -329,6 +348,11 @@ grid-template-rows: min-content 1fr; .left { + width: 100%; + grid-template-areas: + "skills" + "effects"; + grid-template-columns: 1fr; grid-template-rows: min-content min-content; } @@ -337,6 +361,9 @@ padding: 0 0.5em ; margin: 0; } + button.active { + background: #2c2c2c; + } } .stats div { @@ -363,17 +390,38 @@ font-size: 100%; } - .skills button, .stats, .name { + .stats, .name { font-size: 75%; } + + .skills button { + font-size: 50%; + } + } + + .player { + width: calc(100% - 1em); + bottom: 3em; + height: calc(50% - 3em); } .opponent { + width: calc(100% - 1em); .game-construct { display: grid; grid-template-columns: 1fr; grid-template-rows: min-content 1fr; } } + + #targeting, .resolving-skill { + width: calc(100% - 1em); + } } -} \ No newline at end of file + + .player { + width: calc(100% - 1em); + bottom: 3em; + height: calc(50% - 3em); + } +} diff --git a/client/assets/styles/instance.mobile.less b/client/assets/styles/instance.mobile.less index 07c76286..4621af75 100644 --- a/client/assets/styles/instance.mobile.less +++ b/client/assets/styles/instance.mobile.less @@ -1,5 +1,20 @@ @import 'colours.less'; +// tablet / ipad +@media (max-width: 1100px) { + .instance { + grid-template-columns: 1fr; + grid-template-rows: min-content 1fr; + grid-template-areas: + "vbox" + "constructs"; + + .info { + display: none; + } + } +} + @media (max-width: 800px) { .instance { font-size: 8pt; @@ -32,6 +47,10 @@ &:not(.visible) { display: none; } + + .vbox-vbox { + margin-bottom: 1em; + } } .vbox-arrow { @@ -88,7 +107,7 @@ "avatar " "stats "; - border-top: 0; + border: 0; padding: 0; transition-property: all; diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 589fc2d8..2e3b241c 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -12,6 +12,9 @@ html body { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; + + overflow-x: hidden; + overflow-y: hidden; } #mnml { @@ -23,7 +26,7 @@ html body { /* stops inspector going skitz*/ overflow-x: hidden; - // overflow-y: hidden; + overflow-y: hidden; } @media (min-width: 1921px) { @@ -97,14 +100,8 @@ dl { padding: 0.5em 1em; &.animations-test { - grid-template-columns: 1fr 9fr 1fr; - grid-template-areas: - "nav hdr ctrl" - "nav main ctrl" - "nav main ctrl"; - - nav { - display: initial; + aside button { + font-size: 50%; } } } @@ -124,6 +121,7 @@ button, input { font-size: 100%; flex: 1; border-radius: 0.5em; + line-height: 2em; /*the transitions */ transition-property: border-color, color, background; diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.less similarity index 69% rename from client/assets/styles/styles.mobile.css rename to client/assets/styles/styles.mobile.less index 8cc73e6f..e8269bd2 100644 --- a/client/assets/styles/styles.mobile.css +++ b/client/assets/styles/styles.mobile.less @@ -1,4 +1,8 @@ @media (max-width: 800px) { + body { + overflow-y: initial; + } + #mnml { font-size: 12pt; padding: 0; @@ -13,10 +17,6 @@ min-height: initial; } - #mnml button { - font-size: 10pt; - } - table td { height: 2.5em; } @@ -34,6 +34,10 @@ position: fixed; bottom: 0; width: 100%; + + button { + font-size: 90%; + } } #nav-btn, #instance-nav { @@ -51,10 +55,6 @@ display: none; } -/* header { - display: none; - } -*/ main { overflow-x: hidden; overflow-y: initial; @@ -93,4 +93,34 @@ "inventory" "games"; } + + .menu { + .options { + display: grid; + grid-template-columns: 1fr; + + button:not(:last-child) { + border: 2px solid #222; + } + + button.logo { + border: none; + margin-right: 0; + margin-top: 0.5em; + background-position: center; + } + } + } + + section { + .list { + grid-template-columns: 1fr; + } + } + + .account { + div { + padding: 0; + } + } } diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 52a75939..fe62f0a2 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -33,6 +33,7 @@ margin: 0; background-color: @gray-box; height: 3em; + line-height: 1em; border-width: 0; :active, :hover, :focus { diff --git a/client/index.html b/client/index.html index 4ea0190e..57f8602d 100644 --- a/client/index.html +++ b/client/index.html @@ -1,13 +1,15 @@ - mnml - abstract strategy - - + + + + + mnml - abstract strategy diff --git a/client/index.js b/client/index.js index 8ad272c9..c169c5ee 100644 --- a/client/index.js +++ b/client/index.js @@ -8,7 +8,7 @@ require('./assets/styles/instance.less'); require('./assets/styles/vbox.less'); require('./assets/styles/game.less'); require('./assets/styles/player.less'); -require('./assets/styles/styles.mobile.css'); +require('./assets/styles/styles.mobile.less'); require('./assets/styles/instance.mobile.less'); // kick it off diff --git a/client/package.json b/client/package.json index 4fd0e2f6..90e180ae 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.2", + "version": "1.5.3", "description": "", "main": "index.js", "scripts": { @@ -24,6 +24,7 @@ "keymaster": "^1.6.2", "linkstate": "^1.1.1", "lodash": "^4.17.15", + "logrocket": "^1.0.3", "node-sass": "^4.12.0", "parcel": "^1.12.3", "preact": "^8.4.2", @@ -40,7 +41,7 @@ "babel-plugin-module-resolver": "^3.2.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", - "eslint": "^5.6.0", + "eslint": "^5.16.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-react": "^7.11.1", diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 282d2474..85b113de 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -4,6 +4,7 @@ export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', valu 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 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 }); diff --git a/client/src/animations.test.jsx b/client/src/animations.test.jsx index 5a676a23..e230a58b 100644 --- a/client/src/animations.test.jsx +++ b/client/src/animations.test.jsx @@ -56,9 +56,9 @@ document.fonts.load('16pt "Jura"').then(() => { const Animations = () => (
- +
@@ -69,13 +69,31 @@ document.fonts.load('16pt "Jura"').then(() => { }); const SKILLS = [ + 'Absorb', + 'Absorption', + 'Amplify', + 'Attack', + 'Banish', + 'Bash', + 'Blast', + 'Block', + 'Break', + 'Buff', + 'Chaos', + 'Counter', + 'CounterAttack', + 'Curse', + 'Debuff', + 'Decay', + 'DecayTick', + 'Electrify', 'Electrocute', 'ElectrocuteTick', 'Haste', 'HasteStrike', 'Heal', - 'HybridBlast', 'Hybrid', + 'HybridBlast', 'Intercept', 'Invert', 'Link', @@ -95,22 +113,4 @@ const SKILLS = [ 'Sustain', 'Triage', 'TriageTick', - 'Absorb', - 'Absorption', - 'Amplify', - 'Attack', - 'Banish', - 'Bash', - 'Blast', - 'Block', - 'Break', - 'Buff', - 'Chaos', - 'CounterAttack', - 'Counter', - 'Curse', - 'Debuff', - 'Decay', - 'DecayTick', - 'Electrify', ]; diff --git a/client/src/animations.utils.jsx b/client/src/animations.utils.jsx index 39ef17ef..38da27d5 100644 --- a/client/src/animations.utils.jsx +++ b/client/src/animations.utils.jsx @@ -36,7 +36,7 @@ function getObjects(resolution, stages, game, account) { 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); @@ -68,6 +68,7 @@ function getObjects(resolution, stages, game, account) { return { animSource, animTarget, + animSkill: event.skill, }; } @@ -85,7 +86,7 @@ function getSequence(resolution) { case 'EndPost': return ['END_SKILL', 'POST_SKILL']; case 'EndOnly': return ['END_SKILL']; case 'PostOnly': return ['POST_SKILL']; - case 'None': return []; + case 'NoStages': return []; default: return ['START_SKILL', 'END_SKILL', 'POST_SKILL']; } } @@ -177,7 +178,10 @@ function getText(resolution, sequence) { if (type === 'Recharge') { const { red, blue } = event; - return { text: [`+${red}R ${blue}B`, ''], css: '' }; + if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'purple-damage' }; + if (red > 0) return { text: [`+${red}R`, ''], css: 'red-damage' }; + if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue-damage' }; + return nullText; } if (type === 'Removal') { diff --git a/client/src/app.jsx b/client/src/app.jsx index ab17520c..b63b55a6 100644 --- a/client/src/app.jsx +++ b/client/src/app.jsx @@ -1,6 +1,8 @@ const preact = require('preact'); // const logger = require('redux-diff-logger'); +const LogRocket = require('logrocket'); + const { Provider, connect } = require('preact-redux'); const { createStore, combineReducers } = require('redux'); const { StripeProvider } = require('react-stripe-elements'); @@ -13,6 +15,10 @@ const registerEvents = require('./events'); const Mnml = require('./components/mnml'); +if (process.env.NODE_ENV !== 'development') { + LogRocket.init('yh0dy3/mnml'); +} + function stripeKey() { if (window.location.host === 'mnml.gg') return 'pk_live_fQGrL1uWww2ot8W1G7vTySAv004ygmnMXq'; return 'pk_test_Cb49tTqTXpzk7nEmlGzRrNJg00AU0aNZDj'; diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 0d19b281..8250af93 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -19,10 +19,7 @@ function projectile(x, y, radius, colour) { cx={x} cy={y} r={radius} - fill="url(#grad1)" - stroke-width="2" - stroke={colour} - filter="url(#explosion)" + fill={colour} /> ); } @@ -31,8 +28,11 @@ class Chaos extends Component { constructor() { super(); this.animations = []; - const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 }); - this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#A25AC1')); + const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 }); + this.charges = points.map(coord => { + const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8'; + return projectile(coord[0], coord[1], 14, colour); + }); } render() { @@ -43,19 +43,6 @@ class Chaos extends Component { id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400"> - // {this.charges} - - - - - - - - - - - - {this.charges} ); @@ -63,20 +50,11 @@ class Chaos extends Component { componentDidMount() { const projectiles = document.querySelectorAll('.skill-anim circle'); - projectiles.forEach(proj => { - const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8'; - anime.set(proj, { - stroke: colour, - }); - }); anime.set('.skill-anim', { - translateY: -(window.screen.height) * 0.35 * this.props.direction.y, - translateX: -(window.screen.width) * 0.15 * this.props.direction.x, + translateY: -(window.innerHeight) * 0.35 * this.props.direction.y, + translateX: -(window.innerWidth) * 0.15 * this.props.direction.x, opacity: 0, }); - anime.set('#explosion feDisplacementMap', { - scale: 1, - }); this.animations.push(anime({ targets: '.skill-anim', @@ -96,23 +74,19 @@ class Chaos extends Component { duration: (TIMES.TARGET_DURATION_MS * 1 / 2), easing: 'easeInQuad', })); - this.animations.push(anime({ - targets: '#explosion feDisplacementMap', - scale: 75, - loop: false, - delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3), - duration: (TIMES.TARGET_DURATION_MS * 1 / 3), - easing: 'easeInQuad', - })); - projectiles.forEach(proj => anime({ + projectiles.forEach(proj => this.animations.push(anime({ targets: proj, - cx: Math.random() * 250 + 25, - cy: Math.random() * 300 + 50, + cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), + cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), + // cx: 150, + // cy: 200, + // opacity: 0, + delay: TIMES.TARGET_DELAY_MS, duration: (TIMES.TARGET_DURATION_MS * 2 / 3), easing: 'easeInQuad', - })); + }))); } componentWillUnmount() { diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx index 5a36cd98..c0459ffd 100644 --- a/client/src/components/anims/heal.jsx +++ b/client/src/components/anims/heal.jsx @@ -61,7 +61,7 @@ class Heal extends Component { targets: ['#heal'], opacity: [ { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 }, - { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.4, duration: TIMES.TARGET_DURATION_MS * 0.2 }, + { value: 0, delay: TIMES.TARGET_DURATION_MS / 4, duration: TIMES.TARGET_DURATION_MS * 0.2 }, ], easing: 'easeInOutSine', })); @@ -70,8 +70,8 @@ class Heal extends Component { targets: ['#heal circle'], cx: 150, cy: 200, - delay: TIMES.TARGET_DELAY_MS * 2, - duration: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DELAY_MS * 4, + duration: TIMES.TARGET_DURATION_MS * 0.9, easing: 'easeOutCirc', direction: 'reverse', })); diff --git a/client/src/components/anims/intercept.jsx b/client/src/components/anims/intercept.jsx index c5ee6b2a..1edb45a1 100644 --- a/client/src/components/anims/intercept.jsx +++ b/client/src/components/anims/intercept.jsx @@ -57,7 +57,7 @@ class Intercept extends Component { targets: ['#intercept'], transform: [ `scale(1 1) ${this.props.player ? 'rotate(180)' : ''}`, - `scale(30 3) ${this.props.player ? 'rotate(180)' : ''}`, + `scale(5 5) ${this.props.player ? 'rotate(180)' : ''}`, ], strokeWidth: 0, diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx index 4ba6102b..5a286eb7 100644 --- a/client/src/components/anims/siphon.jsx +++ b/client/src/components/anims/siphon.jsx @@ -27,12 +27,9 @@ class Siphon extends Component { version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 300 400" + viewBox="0 0 300 300" opacity="0"> - - - - + ); } @@ -53,15 +50,10 @@ class Siphon extends Component { anime({ targets: '#siphon', - keyframes: [ - { r: '110', stroke: '#1FF01F' }, - { r: '80', stroke: '#1FF01F' }, - { r: '50', stroke: '#3050f8' }, - { r: '20', stroke: '#3050f8' }, - ], + r: 0, delay: TIMES.TARGET_DELAY_MS, duration, - easing: 'easeInCubic', + easing: 'easeInSine', }); } diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx index 4a0b82e5..5d0faaf9 100644 --- a/client/src/components/anims/siphon.tick.jsx +++ b/client/src/components/anims/siphon.tick.jsx @@ -20,9 +20,7 @@ function projectile(x, y, radius, colour) { cx={x} cy={y} r={radius} - fill="url(#grad1)" - stroke-width="0.1" - stroke={colour} + fill={colour} /> ); } @@ -44,24 +42,16 @@ class SiphonTick extends Component { version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 300 400"> + viewBox="0 0 300 300"> - - - - - - - - {this.charges} ); @@ -84,27 +74,23 @@ class SiphonTick extends Component { }); anime.set('#siphon', { - r: '80', + r: 0, stroke: '#3050f8', }); anime({ targets: '#siphon', - keyframes: [ - { r: '50', stroke: '#3050f8' }, - { r: '20', stroke: '#3050f8' }, - { r: '0', stroke: '#3050f8' }, - ], + r: 600, duration: duration * 2 / 3, - easing: 'easeInCubic', + easing: 'easeInSine', }); const projectiles = document.querySelectorAll('.skill-anim circle'); projectiles.forEach(proj => { anime({ targets: proj, - cx: Math.random() * 250 + 25, - cy: Math.random() * 200 - 100, + cx: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)), + cy: 150 + (Math.random() * 300 * (Math.random() < 0.5 ? -1 : 1)), delay: (Math.random() * duration * 1 / 2), duration, easing: 'easeInQuad', diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index ef862a2f..fe07c228 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -21,20 +21,14 @@ function projectile(x, y, radius, colour) { cx={x} cy={y} r={radius} - fill="url(#grad1)" - stroke-width="2" - stroke={colour} + fill={colour} /> ); } function sword(colour) { return ( - - - - - + ); } @@ -54,18 +48,11 @@ class Slay extends Component { version="1.1" id="slay" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 300 400"> - - - - - - - + viewBox="0 0 300 300"> + - {sword(this.colour)} {this.charges} @@ -91,16 +78,17 @@ class Slay extends Component { }); anime.set('#slay', { - translateY: -1 * (window.screen.height) * 0.35, + translateY: -1 * (window.innerHeight) * 0.35, translateX: 0, }); - anime.set('#explosion feDisplacementMap', { - scale: 100, + + anime.set('#slayFilter feDisplacementMap', { + scale: 0, }); anime.set('#sword', { fill: this.colour, - stroke: this.colour, + opacity: 1, }); this.animations.push(anime({ @@ -119,10 +107,11 @@ class Slay extends Component { duration: (duration * 1 / 2), easing: 'easeInQuad', })); + this.animations.push(anime({ - targets: '#explosion feDisplacementMap', - scale: 10000, - loop: false, + targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'], + baseFrequency: 10, + scale: 100, delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2), duration: (duration * 1 / 2), easing: 'easeInQuad', @@ -130,8 +119,7 @@ class Slay extends Component { this.animations.push(anime({ targets: '#sword', - fill: '#1FF01F', - stroke: '#1FF01F', + opacity: 0, delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7), })); diff --git a/client/src/components/anims/source.cast.jsx b/client/src/components/anims/source.cast.jsx index 74a17184..25237776 100644 --- a/client/src/components/anims/source.cast.jsx +++ b/client/src/components/anims/source.cast.jsx @@ -6,8 +6,8 @@ function sourceCast(id, direction, idle) { const { x, y } = direction; return anime({ targets: [document.getElementById(id)], - translateX: x * window.screen.width * 0.15, - translateY: y * window.screen.height * 0.15, + translateX: x * window.screen.width * 0.1, + translateY: y * window.screen.height * 0.1, easing: 'easeInOutElastic', direction: 'alternate', duration: TIMES.SOURCE_DURATION_MS, diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 00dbbb18..c5023837 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -54,7 +54,7 @@ class Strike extends Component { x: [200, 0, 200], height: [200, 10, 0], width: [20, 400, 0], - delay: TIMES.TARGET_DELAY_MS / 2, + delay: TIMES.TARGET_DELAY_MS * 0.5, duration: TIMES.TARGET_DURATION_MS, })); diff --git a/client/src/components/anims/wiggle.jsx b/client/src/components/anims/wiggle.jsx index 995af86a..a9615181 100644 --- a/client/src/components/anims/wiggle.jsx +++ b/client/src/components/anims/wiggle.jsx @@ -3,10 +3,10 @@ const anime = require('animejs').default; function wiggle(id, idle) { const duration = 300; const target = document.getElementById(id); - const x = window.screen.width * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); - const y = window.screen.height * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); + const x = window.innerWidth * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); + const y = window.innerHeight * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random()); - console.log(x, y); + // console.log(x, y); return anime({ targets: target, rotate: 0, diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx index 12c308a5..f4f778e1 100644 --- a/client/src/components/game.ctrl.jsx +++ b/client/src/components/game.ctrl.jsx @@ -10,11 +10,13 @@ const GameCtrlTopButtons = require('./game.ctrl.btns.top'); const addState = connect( function receiveState(state) { const { + animating, game, account, } = state; return { + animating, game, account, }; @@ -23,6 +25,7 @@ const addState = connect( function Controls(args) { const { + animating, account, game, } = args; @@ -31,10 +34,10 @@ function Controls(args) { const opponent = game.players.find(t => t.id !== account.id); const player = game.players.find(t => t.id === account.id); - const zero = Date.parse(game.phase_start); - const now = Date.now(); + const now = animating ? zero : Date.now(); const end = Date.parse(game.phase_end); + const timerPct = game.phase_end ? ((now - zero) / (end - zero) * 100) : 100; diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 0da7dced..56aa0e7d 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -93,8 +93,6 @@ class Instance extends Component { if (!instance) return setTimeout(this.bindSwipes, 50); if (this.h) this.h.destroy(); this.h = new Hammer(instance); - const display = ['vbox', 'c0', 'c1', 'c2']; - this.h.on('swiperight', () => { const { navInstance, @@ -111,6 +109,7 @@ class Instance extends Component { setNavInstance((navInstance + 1) % 4); }); + console.log('hammer gestures bound'); return true; } } diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx index d1f39939..96ac70fe 100644 --- a/client/src/components/skill.btn.jsx +++ b/client/src/components/skill.btn.jsx @@ -55,7 +55,6 @@ function Skill(props) { // if (skillChosen && !targeting) { // return false; // } - const cdText = construct.skills[i].cd > 0 ? `- ${s.cd}T` : ''; @@ -72,7 +71,7 @@ function Skill(props) { return (