diff --git a/README.md b/README.md index 5d22ff27..19e7ce8d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,13 @@ minimal studios is ntr & mashy: 2 mates with a friendship forged in the fires of 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. completely self funded, we're just here to make games that feel good & play it clean. +## inspiration +- peggle +- soldat +- mini metro +- poe +- mtg + ## Construct Alignments diff --git a/VERSION b/VERSION index 13175fdc..c9929e36 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.4.1 \ No newline at end of file +1.4.2 \ No newline at end of file diff --git a/WORKLOG.md b/WORKLOG.md index 066e89c0..03ff4cbc 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -19,11 +19,6 @@ * msg pane * game invites -* change score to enum - -* pct based translates for combat animation -* add speed to descriptions -* clear skill (if currently targetted) ## SOON *SERVER* diff --git a/acp/package.json b/acp/package.json index 47c34b9f..6ed6d040 100644 --- a/acp/package.json +++ b/acp/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.4.1", + "version": "1.4.2", "description": "", "main": "index.js", "scripts": { diff --git a/client/assets/discord.svg b/client/assets/discord.svg new file mode 100644 index 00000000..fcaa2211 --- /dev/null +++ b/client/assets/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/assets/discord.white.svg b/client/assets/discord.white.svg new file mode 100644 index 00000000..22dd1136 --- /dev/null +++ b/client/assets/discord.white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/assets/styles/account.less b/client/assets/styles/account.less index 44b1c2dd..adb879fe 100644 --- a/client/assets/styles/account.less +++ b/client/assets/styles/account.less @@ -36,10 +36,9 @@ } } -.stripe-btn { +.yellow-btn { background: @yellow; color: black; - border-radius: 2px; border-width: 0; &:active, &:focus, &:hover { diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 4484d720..eebcc6c6 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -1,3 +1,5 @@ +@import 'colours.less'; + aside { grid-area: ctrl; display: grid; @@ -12,6 +14,10 @@ aside { padding-left: 1em; + .instance-ctrl { + grid-template-rows: 1fr 1fr 1fr min-content; + } + .controls { grid-area: controls; @@ -20,6 +26,12 @@ aside { grid-gap: 0.5em 0; } + &.play-ctrl { + .controls { + grid-template-rows: 4fr 4fr 1fr; + } + } + // fix chrome being inconsistent table { height: 100%; @@ -32,7 +44,7 @@ aside { button { width: 100%; font-size: 150%; - margin: 0; + margin-bottom: 0.5em; } button.ready:enabled { @@ -93,3 +105,21 @@ aside { .team-page-ctrl h2 { padding: 0 0.75em 0 0.75em; } + +.instance-ctrl-btns { + font-size: 50%; +} + +.abandon:not([disabled]) { + &:hover { + color: @red; + border-color: @red; + border: 2px solid @red; + }; + + &:active, &.confirming { + background: @red; + color: black; + border: 2px solid black; + } +} \ No newline at end of file diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 49a312fa..bafdaa29 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -64,10 +64,18 @@ .options { grid-area: hdr; + display: flex; + + .logo { + flex: 0 1 10%; + margin-right: 1em; + border: none; + } + button { - width: 25%; + flex: 1; border-top: 0; - border: 1px solid #222; + border: 2px solid #222; &:not(:last-child) { border-right: 0; } @@ -77,6 +85,11 @@ } } } + + .login { + display: flex; + flex-flow: column; + } } section { @@ -99,6 +112,9 @@ section { grid-gap: 1em; flex-flow: row wrap; align-items: flex-end; + button { + border-radius: 0.25em; + } } figure { @@ -108,4 +124,60 @@ section { display: flex; flex-flow: column; } +} + +.demo { + margin-top: 1em; + + display: grid; + grid-template-areas: + "vinfo game" + "vcons game"; + + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content 1fr; + + .colour-info { + grid-area: vinfo; + display: flex; + align-items: center; + + div { + display: flex; + } + + svg { + flex: 1; + height: 1em; + } + } + + .vbox-demo { + grid-area: vinfo; + } + + .game-demo { + grid-area: game; + + display: grid; + grid-template-columns: 1fr 2fr; + + .game { + display: flex; + flex-flow: column; + + .game-construct { + flex: 1; + } + } + } + + .construct-list { + grid-area: vcons; + height: 100%; + + svg { + height: 100%; + } + } } \ No newline at end of file diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index f64f48fa..66bdb2cd 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -105,14 +105,14 @@ button, input { height: auto; border-width: 2px; border-color: @gray-exists; - border-radius: 0; letter-spacing: 0.25em; box-sizing: border-box; font-size: 100%; flex: 1; + border-radius: 0.5em; /*the transitions */ - transition-property: color, background; + transition-property: border-color, color, background; transition-duration: 0.25s; transition-delay: 0; transition-timing-function: ease; @@ -195,28 +195,6 @@ button[disabled] { border-color: #222; } -/* - LOGIN -*/ - -.welcome { - .login { - width: 50%; - display: flex; - flex-flow: column; - margin-bottom: 2em; - } - - .options { - display: flex; - width: 50%; - } - - h2 { - margin-bottom: 0.5em; - } -} - #mnml input, #mnml select { border-color: #222; background-color: #222; @@ -258,11 +236,14 @@ figure.gray { header { .options { - font-size: 150%; + font-size: 200%; } button { height: 2em; + // border-radius: 0.1em; + border: none; + border-radius: 0; } } @@ -272,18 +253,9 @@ header { color: @white; box-shadow: inset 0px 5px 0px 0px @white; border: 0; - &:first-child { - border-left: 1px solid #444; - } - - &:last-child { - border-right: 1px solid #444; - } - } - border: 1px solid #444; - flex: 1; + border: none; } } @@ -298,4 +270,19 @@ ul { li { margin-bottom: 0.5em; -} \ No newline at end of file +} + +.logo { + height: 2em; + background-image: url("../../src/components/svgs/mnml.2.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: left; +} + +.discord-btn { + background-image: url("./../discord.white.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} diff --git a/client/package.json b/client/package.json index dd2e36f9..8512d4d4 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.4.1", + "version": "1.4.2", "description": "", "main": "index.js", "scripts": { diff --git a/client/src/actions.jsx b/client/src/actions.jsx index d4242eb1..d4fe0dc8 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -8,6 +8,8 @@ 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 setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value }); export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null }); export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) }); diff --git a/client/src/components/account.top.jsx b/client/src/components/account.top.jsx index 2589f662..351918b4 100644 --- a/client/src/components/account.top.jsx +++ b/client/src/components/account.top.jsx @@ -120,7 +120,7 @@ class AccountStatus extends Component { // resub button if (subscription.cancel_at_period_end) { - return + return } const classes = `unsub ${unsubState ? 'confirming' : ''}`; diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index ff1c9eaf..f72b356b 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -68,6 +68,7 @@ class ConstructAnimation extends Component { const animSkill = removeTier(skill); if (!constructId.includes(construct.id)) return false; + // find target animation const chooseAnim = (animSkill) => { switch (animSkill) { diff --git a/client/src/components/anims/absorb.jsx b/client/src/components/anims/absorb.jsx index f32f47b6..d4f99252 100644 --- a/client/src/components/anims/absorb.jsx +++ b/client/src/components/anims/absorb.jsx @@ -90,7 +90,7 @@ class Absorb extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/amplify.jsx b/client/src/components/anims/amplify.jsx index 2e82270e..86b67c7d 100644 --- a/client/src/components/anims/amplify.jsx +++ b/client/src/components/anims/amplify.jsx @@ -78,7 +78,7 @@ class Amplify extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx index 6e580daf..65756c1f 100644 --- a/client/src/components/anims/attack.jsx +++ b/client/src/components/anims/attack.jsx @@ -59,7 +59,7 @@ class Attack extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/bash.circle.jsx b/client/src/components/anims/bash.circle.jsx index c202e664..866b5d59 100644 --- a/client/src/components/anims/bash.circle.jsx +++ b/client/src/components/anims/bash.circle.jsx @@ -100,7 +100,7 @@ class Bash extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/bash.jsx b/client/src/components/anims/bash.jsx index 81e43d6f..c8e3894d 100644 --- a/client/src/components/anims/bash.jsx +++ b/client/src/components/anims/bash.jsx @@ -103,7 +103,7 @@ class Bash extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx index b8163225..21d985fa 100644 --- a/client/src/components/anims/blast.jsx +++ b/client/src/components/anims/blast.jsx @@ -88,7 +88,7 @@ class Blast extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/block.jsx b/client/src/components/anims/block.jsx index 5ea544a8..a962b11d 100644 --- a/client/src/components/anims/block.jsx +++ b/client/src/components/anims/block.jsx @@ -53,7 +53,7 @@ class Block extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/break.jsx b/client/src/components/anims/break.jsx index f0fb7e07..9663bce6 100644 --- a/client/src/components/anims/break.jsx +++ b/client/src/components/anims/break.jsx @@ -107,7 +107,7 @@ class Break extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/buff.jsx b/client/src/components/anims/buff.jsx index e49e556f..c73081d0 100644 --- a/client/src/components/anims/buff.jsx +++ b/client/src/components/anims/buff.jsx @@ -81,7 +81,7 @@ class Buff extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 288501ba..0d19b281 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -69,10 +69,9 @@ class Chaos extends Component { stroke: colour, }); }); - anime.set('.skill-anim', { - translateY: -300 * this.props.direction.y, - translateX: -200 * this.props.direction.x, + translateY: -(window.screen.height) * 0.35 * this.props.direction.y, + translateX: -(window.screen.width) * 0.15 * this.props.direction.x, opacity: 0, }); anime.set('#explosion feDisplacementMap', { @@ -120,7 +119,7 @@ class Chaos extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/counter.jsx b/client/src/components/anims/counter.jsx index 0815f974..0ae9d709 100644 --- a/client/src/components/anims/counter.jsx +++ b/client/src/components/anims/counter.jsx @@ -85,7 +85,7 @@ class Counter extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index 8ccfb2b7..0747b1c8 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -78,7 +78,7 @@ class Curse extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx index 72fac14f..0f68d33d 100644 --- a/client/src/components/anims/debuff.jsx +++ b/client/src/components/anims/debuff.jsx @@ -83,7 +83,7 @@ class Debuff extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index 2759b8fd..ebd67e7d 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -68,7 +68,7 @@ class Decay extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/electrify.jsx b/client/src/components/anims/electrify.jsx index 2e9a51cc..a0226894 100644 --- a/client/src/components/anims/electrify.jsx +++ b/client/src/components/anims/electrify.jsx @@ -109,7 +109,7 @@ class Electrify extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/electrocute.jsx b/client/src/components/anims/electrocute.jsx index f33432e9..0d8fdc79 100644 --- a/client/src/components/anims/electrocute.jsx +++ b/client/src/components/anims/electrocute.jsx @@ -101,7 +101,7 @@ class Electrocute extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/haste.jsx b/client/src/components/anims/haste.jsx index 8438d8f7..b93a7b68 100644 --- a/client/src/components/anims/haste.jsx +++ b/client/src/components/anims/haste.jsx @@ -83,7 +83,7 @@ class Haste extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx index 78684aa0..5a36cd98 100644 --- a/client/src/components/anims/heal.jsx +++ b/client/src/components/anims/heal.jsx @@ -81,7 +81,7 @@ class Heal extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/hex.jsx b/client/src/components/anims/hex.jsx index 4be435b1..c279225d 100644 --- a/client/src/components/anims/hex.jsx +++ b/client/src/components/anims/hex.jsx @@ -88,7 +88,7 @@ class Hex extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/hybrid.jsx b/client/src/components/anims/hybrid.jsx index 0b369d7b..7f2a2a58 100644 --- a/client/src/components/anims/hybrid.jsx +++ b/client/src/components/anims/hybrid.jsx @@ -153,7 +153,7 @@ class Hybrid extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/intercept.jsx b/client/src/components/anims/intercept.jsx index 745f67f3..c5ee6b2a 100644 --- a/client/src/components/anims/intercept.jsx +++ b/client/src/components/anims/intercept.jsx @@ -96,7 +96,7 @@ class Intercept extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/link.jsx b/client/src/components/anims/link.jsx index 6f6ebf32..e20d5bbf 100644 --- a/client/src/components/anims/link.jsx +++ b/client/src/components/anims/link.jsx @@ -91,7 +91,7 @@ class Link extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/purge.jsx b/client/src/components/anims/purge.jsx index da072286..34bd6c68 100644 --- a/client/src/components/anims/purge.jsx +++ b/client/src/components/anims/purge.jsx @@ -81,7 +81,7 @@ class Purge extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx index 732a6180..adc83efd 100644 --- a/client/src/components/anims/purify.jsx +++ b/client/src/components/anims/purify.jsx @@ -115,7 +115,7 @@ class Purify extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/recharge.jsx b/client/src/components/anims/recharge.jsx index 169f884e..7f224604 100644 --- a/client/src/components/anims/recharge.jsx +++ b/client/src/components/anims/recharge.jsx @@ -95,7 +95,7 @@ class Recharge extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/red.block.jsx b/client/src/components/anims/red.block.jsx index 9961344c..4adb850d 100644 --- a/client/src/components/anims/red.block.jsx +++ b/client/src/components/anims/red.block.jsx @@ -76,7 +76,7 @@ class Block extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/red.circles.jsx b/client/src/components/anims/red.circles.jsx index 74ff44ce..4b6134e1 100644 --- a/client/src/components/anims/red.circles.jsx +++ b/client/src/components/anims/red.circles.jsx @@ -82,7 +82,7 @@ class Intercept extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/reflect.jsx b/client/src/components/anims/reflect.jsx index 816f1f76..ac18ab0e 100644 --- a/client/src/components/anims/reflect.jsx +++ b/client/src/components/anims/reflect.jsx @@ -77,7 +77,7 @@ class Refl extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/restrict.jsx b/client/src/components/anims/restrict.jsx index f8c1395d..ac663cb8 100644 --- a/client/src/components/anims/restrict.jsx +++ b/client/src/components/anims/restrict.jsx @@ -102,7 +102,7 @@ class Restrict extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/ruin.jsx b/client/src/components/anims/ruin.jsx index 7022f3a0..9738d7a8 100644 --- a/client/src/components/anims/ruin.jsx +++ b/client/src/components/anims/ruin.jsx @@ -100,7 +100,7 @@ class Ruin extends Component { this.animations[i].reset(); } try { - this.props.animCb(); + this.props.animCb && this.props.animCb(); } catch (e) { console.log(e); } diff --git a/client/src/components/anims/silence.jsx b/client/src/components/anims/silence.jsx index bbd40c34..f30d1bb9 100644 --- a/client/src/components/anims/silence.jsx +++ b/client/src/components/anims/silence.jsx @@ -97,7 +97,7 @@ class Silence extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx index f6812a05..4ba6102b 100644 --- a/client/src/components/anims/siphon.jsx +++ b/client/src/components/anims/siphon.jsx @@ -69,9 +69,8 @@ class Siphon extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } - } module.exports = addState(Siphon); diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx index accb7b7b..4a0b82e5 100644 --- a/client/src/components/anims/siphon.tick.jsx +++ b/client/src/components/anims/siphon.tick.jsx @@ -116,7 +116,7 @@ class SiphonTick extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index 2713a569..ef862a2f 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -91,7 +91,7 @@ class Slay extends Component { }); anime.set('#slay', { - translateY: -400, + translateY: -1 * (window.screen.height) * 0.35, translateX: 0, }); anime.set('#explosion feDisplacementMap', { @@ -152,7 +152,7 @@ class Slay extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/sleep.jsx b/client/src/components/anims/sleep.jsx index a9af121b..c76e1e55 100644 --- a/client/src/components/anims/sleep.jsx +++ b/client/src/components/anims/sleep.jsx @@ -47,7 +47,7 @@ class Sleep extends Component { version="1.1" id="sleep" xmlns="http://www.w3.org/2000/svg" - viewBox="-291 -191 582 582"> + viewBox="-291 -291 582 582"> @@ -140,7 +140,7 @@ class Sleep extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 5aca4fbc..37cac718 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -85,7 +85,7 @@ class Strike extends Component { }); anime.set('#strike', { - translateY: -400, + translateY: (window.screen.height) * 0.35 * this.props.direction.y, translateX: 0, }); @@ -120,7 +120,7 @@ class Strike extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/stun.jsx b/client/src/components/anims/stun.jsx index 5a8eadce..5f53c5a1 100644 --- a/client/src/components/anims/stun.jsx +++ b/client/src/components/anims/stun.jsx @@ -78,7 +78,7 @@ class Stun extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/sustain.jsx b/client/src/components/anims/sustain.jsx index dca163cb..a206e250 100644 --- a/client/src/components/anims/sustain.jsx +++ b/client/src/components/anims/sustain.jsx @@ -127,7 +127,7 @@ class Sustain extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/triage.jsx b/client/src/components/anims/triage.jsx index cf7edc15..73d11d92 100644 --- a/client/src/components/anims/triage.jsx +++ b/client/src/components/anims/triage.jsx @@ -80,7 +80,7 @@ class Triage extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/anims/triage.tick.jsx b/client/src/components/anims/triage.tick.jsx index 06878d18..afeb6034 100644 --- a/client/src/components/anims/triage.tick.jsx +++ b/client/src/components/anims/triage.tick.jsx @@ -79,7 +79,7 @@ class TriageTick extends Component { for (let i = this.animations.length - 1; i >= 0; i--) { this.animations[i].reset(); } - this.props.animCb(); + this.props.animCb && this.props.animCb(); } } diff --git a/client/src/components/collection.jsx b/client/src/components/collection.jsx index c6441803..8a598b8a 100644 --- a/client/src/components/collection.jsx +++ b/client/src/components/collection.jsx @@ -56,7 +56,7 @@ function Collection(args) { teamSelect[insert] = id; return setTeam(teamSelect); } - console.log(constructs.length); + const dispConstructs = constructs.length >= ((teamPage + 1) * 6) ? constructs.slice(teamPage * 6, (teamPage + 1) * 6) : constructs.slice(teamPage * 6, constructs.length); diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx new file mode 100644 index 00000000..84e05e93 --- /dev/null +++ b/client/src/components/demo.jsx @@ -0,0 +1,179 @@ +const { connect } = require('preact-redux'); +const preact = require('preact'); + +const actions = require('../actions'); +const shapes = require('./shapes'); + +const { ConstructAvatar } = require('./construct'); +const { ConstructAnimation } = require('./animations'); + +const addState = connect( + function receiveState(state) { + const { + account, + itemInfo, + demo, + } = state; + + return { + account, + itemInfo, + demo, + }; + }, + + function receiveDispatch(dispatch) { + function setAnimTarget(anim) { + dispatch(actions.setAnimTarget(anim)); + } + + return { setAnimTarget }; + } +); + + +function Demo(args) { + const { + demo, + itemInfo, + account, + + setAnimTarget, + } = args; + + if (!demo || !itemInfo.items.length || account) return false; + + const { combiner, items, equipping, equipped, players } = demo; + + console.log(items); + + const vboxDemo = () => { + function inventoryBtn(i, j) { + if (!i) return ; + const highlighted = combiner.indexOf(j) > -1; + const classes = `${highlighted ? 'highlight' : ''}`; + + if (shapes[i]) { + return ; + } + + return ; + } + + function combinerBtn() { + let text = ''; + + if (combiner.length < 3) { + for (let i = 0; i < 3; i++) { + if (combiner.length > i) { + text += '■ '; + } else { + text += '▫ '; + } + } + } else { + text = 'combine'; + } + + return ( + + ); + } + + function inventoryElement() { + return ( +
+
+

+ VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()} +

+

+ Combine the colour base items with an array of skills and specialisations to build powerful variants. +

+
+
 
+
+
+ {items.map((i, j) => inventoryBtn(i, j))} +
+ {combinerBtn()} +
+
+ ); + } + + return ( +
+ {inventoryElement()} +
+ ); + }; + + const vboxConstructs = () => { + const btnClass = equipping + ? 'equipping empty gray' + : 'empty gray'; + + return ( +
+ {players[0].constructs.map((c, i) => ( +
+

{c.name}

+ +
+ {i === 0 && equipped + ? + : + } + + +
+
+
+
+
+
+ ))} +
+ ); + }; + + const gameDemo = () => { + return ( +
+
+

COMBAT PHASE

+

Battle your opponent using dynamic team builds from the VBOX phase.

+

Crafted skills can be used to damage the opponent or support your team.

+

Turn based combat, each team picks targets for their skills during this phase.

+

The damage dealt by skills, cast order and construct life depend on your decisions in the VBOX phase.

+
+
+
+ + +
+
+
+ + +
+
+
+ ); + }; + + return ( +
+ {vboxDemo()} + {vboxConstructs()} + {gameDemo()} +
+ ); +} + +module.exports = addState(Demo); diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx index 9fd5b07a..0aa4220f 100644 --- a/client/src/components/game.ctrl.jsx +++ b/client/src/components/game.ctrl.jsx @@ -4,6 +4,7 @@ const { connect } = require('preact-redux'); const actions = require('../actions'); const PlayerBox = require('./player.box'); +const InstanceCtrlBtns = require('./instance.ctrl.btns'); const addState = connect( function receiveState(state) { @@ -23,8 +24,18 @@ const addState = connect( return ws.sendInstanceState(game.instance); } + function sendGameSkillClear() { + return ws.sendGameSkillClear(game.id); + } + + function sendAbandon() { + return ws.sendInstanceAbandon(game.instance); + } + return { game, + sendAbandon, + sendGameSkillClear, sendReady, account, getInstanceState, @@ -46,15 +57,19 @@ const addState = connect( function Controls(args) { const { account, + sendAbandon, game, animating, + sendGameSkillClear, sendReady, - quit, getInstanceState, + quit, } = args; if (!game) return false; + const { abandonState } = this.state; + const opponent = game.players.find(t => t.id !== account.id); const player = game.players.find(t => t.id === account.id); @@ -92,13 +107,27 @@ function Controls(args) { const readyBtn = ; const quitBtn = ; + const cancelAbandon = e => { + e.stopPropagation(); + return this.setState({ abandonState: false }); + }; + + const abandonStateTrue = e => { + e.stopPropagation(); + this.setState({ abandonState: true }); + }; + + const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`; + const abandonAction = abandonState ? sendAbandon : abandonStateTrue; + return ( - ); diff --git a/client/src/components/play.jsx b/client/src/components/play.jsx index 1f0325f7..b76feb0c 100644 --- a/client/src/components/play.jsx +++ b/client/src/components/play.jsx @@ -76,13 +76,13 @@ function Play(args) { const subscription = account.subscribed ? : ; @@ -91,7 +91,7 @@ function Play(args) { return (
-

mnml v{VERSION}

+

v{VERSION}

use the buttons on the right to join an instance.

select PVP to play against other players.
@@ -109,7 +109,7 @@ function Play(args) { {subscription} diff --git a/client/src/components/shop.jsx b/client/src/components/shop.jsx index cb00e91c..659de78e 100644 --- a/client/src/components/shop.jsx +++ b/client/src/components/shop.jsx @@ -39,7 +39,7 @@ function Shop(args) {

subscriptions grant extra benefits:

    -
  • additional credits
    • +
  • ¤150 per month
  • chat wheel (soon ™)
  • account icons (soon ™)
diff --git a/client/src/components/stripe.buttons.jsx b/client/src/components/stripe.buttons.jsx index 15b3411a..03d3e6b3 100644 --- a/client/src/components/stripe.buttons.jsx +++ b/client/src/components/stripe.buttons.jsx @@ -45,13 +45,13 @@ function BitsBtn(args) { const subscription = account.subscribed ? : ; @@ -64,19 +64,19 @@ function BitsBtn(args) {
bitsClick(5)} >
$5 AUD
- +
bitsClick(10)} >
$10 AUD
- +
bitsClick(20)} >
$20 AUD
- +
bitsClick(50)} >
$50 AUD
- +
diff --git a/client/src/components/svgs/circle.svg b/client/src/components/svgs/circle.svg new file mode 100644 index 00000000..144f9b89 --- /dev/null +++ b/client/src/components/svgs/circle.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/client/src/components/svgs/mnml.2.svg b/client/src/components/svgs/mnml.2.svg new file mode 100644 index 00000000..a8355af2 --- /dev/null +++ b/client/src/components/svgs/mnml.2.svg @@ -0,0 +1,184 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + mnml.gg + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/components/svgs/mnml.3.svg b/client/src/components/svgs/mnml.3.svg new file mode 100644 index 00000000..7411fc7f --- /dev/null +++ b/client/src/components/svgs/mnml.3.svg @@ -0,0 +1,177 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + mnml.gg + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/components/svgs/mnml.4.svg b/client/src/components/svgs/mnml.4.svg new file mode 100644 index 00000000..801d6215 --- /dev/null +++ b/client/src/components/svgs/mnml.4.svg @@ -0,0 +1,177 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + mnml.gg + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/components/svgs/mnml.horizontal.svg b/client/src/components/svgs/mnml.horizontal.svg new file mode 100644 index 00000000..5b0aa973 --- /dev/null +++ b/client/src/components/svgs/mnml.horizontal.svg @@ -0,0 +1,191 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + mnml.gg + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/components/svgs/mnml.line.svg b/client/src/components/svgs/mnml.line.svg new file mode 100644 index 00000000..d2591da5 --- /dev/null +++ b/client/src/components/svgs/mnml.line.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + mnml.gg + + + + diff --git a/client/src/components/svgs/mnml.plain.svg b/client/src/components/svgs/mnml.plain.svg new file mode 100644 index 00000000..65379683 --- /dev/null +++ b/client/src/components/svgs/mnml.plain.svg @@ -0,0 +1,181 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + mnml.gg + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/components/svgs/mnml.svg b/client/src/components/svgs/mnml.svg new file mode 100644 index 00000000..0e5af50f --- /dev/null +++ b/client/src/components/svgs/mnml.svg @@ -0,0 +1,190 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + mnml.gg + + + + + + + + + + + + + + + + + abstract strategy v + + + + + + diff --git a/client/src/components/svgs/square.svg b/client/src/components/svgs/square.svg new file mode 100644 index 00000000..5bca8ee5 --- /dev/null +++ b/client/src/components/svgs/square.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/client/src/components/svgs/triangle.svg b/client/src/components/svgs/triangle.svg new file mode 100644 index 00000000..38e643a8 --- /dev/null +++ b/client/src/components/svgs/triangle.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx index 27575d98..a9cd4c53 100644 --- a/client/src/components/welcome.jsx +++ b/client/src/components/welcome.jsx @@ -4,7 +4,8 @@ const preact = require('preact'); const Login = require('./welcome.login'); const Register = require('./welcome.register'); const Help = require('./welcome.help'); -const About = require('./welcome.about'); +// const About = require('./welcome.about'); +const Demo = require('./demo'); function Welcome() { const page = this.state.page || 'login'; @@ -13,47 +14,60 @@ function Welcome() { const pageEl = () => { if (page === 'login') return ; if (page === 'register') return ; - if (page === 'about') return ; if (page === 'help') return ; return false; }; return ( -
-

mnml.gg

-