diff --git a/WORKLOG.md b/WORKLOG.md index e80b67a5..f8bf9347 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -19,7 +19,6 @@ * msg pane * game invites -* change score to enum * add speed to descriptions diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 49a312fa..03a2334c 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -77,6 +77,12 @@ } } } + + .login { + display: flex; + flex-flow: column; + margin-bottom: 2em; + } } section { @@ -108,4 +114,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..d6e292e7 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -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; @@ -272,14 +250,6 @@ 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; 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/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 dfe3ae5c..0d19b281 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -119,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 020d2962..4ba6102b 100644 --- a/client/src/components/anims/siphon.jsx +++ b/client/src/components/anims/siphon.jsx @@ -69,7 +69,7 @@ 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(); } } 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 c0ffbf88..c1624a62 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -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..6db4077e 100644 --- a/client/src/components/anims/sleep.jsx +++ b/client/src/components/anims/sleep.jsx @@ -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 e40d7623..37cac718 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -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/demo.jsx b/client/src/components/demo.jsx new file mode 100644 index 00000000..b401a4d2 --- /dev/null +++ b/client/src/components/demo.jsx @@ -0,0 +1,177 @@ +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 ( +
+
+

GAME PHASE

+

Outplay noobs wahtever write tomorrow, fix the tiemout shit.

+

also have to just picka random avatar so i don't fill up my drive

+
+
+
+ + +
+
+
+ + +
+
+
+ ); + }; + + return ( +
+ {vboxDemo()} + {vboxConstructs()} + {gameDemo()} +
+ ); +} + +module.exports = addState(Demo); diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx index eddde654..95c34691 100644 --- a/client/src/components/game.jsx +++ b/client/src/components/game.jsx @@ -42,7 +42,6 @@ const addState = connect( function receiveDispatch(dispatch) { function setActiveSkill(constructId, skill) { dispatch(actions.setActiveSkill(constructId, skill)); - // particlesJS(`particles-${constructId}`, config); } function setActiveConstruct(construct) { diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 2d197b18..5f7c262f 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -21,15 +21,14 @@ function InfoComponent(args) { return (

VBOX phase

-

in this phase you strengthen and specialise your constructs by equipping items to them.

-

double clicking items in the VBOX will purchase and move them to your INVENTORY.

+

strengthen and specialise your constructs by equipping items to them.

+

double click to purchase items in the VBOX and move them to your INVENTORY.

- hover over an item to see its effects and combinations.
combine a SKILL or SPEC with 2 COLOURS to create an item.
- combine 3 of the same item to upgrade it.
- click an item and then click a construct to equip that item to it.
+ combine 3 of the same item to upgrade it.
+ click an item and then click a construct to equip that item to it.

-

click the READY button on the right to progress to the GAME PHASE.

+

click the READY button for the GAME PHASE.

); } diff --git a/client/src/components/molecule.jsx b/client/src/components/molecule.jsx index 2be0cfc3..8054a844 100644 --- a/client/src/components/molecule.jsx +++ b/client/src/components/molecule.jsx @@ -1,18 +1,11 @@ const preact = require('preact'); -module.exports = function molecule(combatText) { - const text = combatText - ? - {combatText} - - - - : ''; - - return ( - - - - {text} - ); +module.exports = function molecule() { + return ( + + + + + + ); }; diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx index 27575d98..f2018d30 100644 --- a/client/src/components/welcome.jsx +++ b/client/src/components/welcome.jsx @@ -5,6 +5,7 @@ const Login = require('./welcome.login'); const Register = require('./welcome.register'); const Help = require('./welcome.help'); const About = require('./welcome.about'); +const Demo = require('./demo'); function Welcome() { const page = this.state.page || 'login'; @@ -19,41 +20,51 @@ function Welcome() { }; return ( -
-

mnml.gg

-
-
mnml is an abstract turn based strategy game
-
free to play
-
no email required
-
glhf
+
+
+
+ + + + +
+
+
+
+
+

mnml.gg

+

mnml is a turn-based 1v1 strategy game in an abstract setting.

+

outplay your opponents by building your team of 3 constructs from a shifting meta of skills, effects and specialisations.

+

simple rules, complex interactions, simultaneous turns to increase the pace, and a unique speed mechanic;

+

mnml is a tactical game unlike any other.

+

free to play

+

no email required

+

glhf

+
+ {pageEl()} +
-
- - - - -
- {pageEl()} +
); } diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 0719f25f..f7044d3d 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,3 +1,5 @@ +const preact = require('preact'); + const SOURCE_DURATION_MS = 1000; const TARGET_DELAY_MS = 500; const TARGET_DURATION_MS = 1500; @@ -24,15 +26,11 @@ module.exports = { INFO: { vbox: { item: 'VBOX', - description: 'Contains ITEMS that are available for you to buy.\nDouble-click to purchase.', + description:

ITEMS that are available to buy.
the VBOX is refilled every round.
click REFILL at the bottom to purchase a refill.

, }, inventory: { item: 'INVENTORY', - description: 'Holds purchased ITEMS.\nClick to add ITEM to I-COMBINATOR.', - }, - combiner: { - item: 'I-COMBINATOR', - description: 'Combines purchased ITEMS into more powerful variants. Hover over an ITEM to see recipes.', + description:

holds ITEMS
ITEMS carry over each round.

, }, bits: { item: 'BITS', @@ -51,12 +49,12 @@ module.exports = { description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.', }, refine: { - item: 'REFINE', - description: 'Refine ITEMS currently in I-COMBINATOR into more powerful variants', + item: 'COMBINE', + description:

combine the selected items.
hover over an item to see RECIPES.

, }, refill: { item: 'REFILL', - description: 'Refill the VBOX with new ITEMS.', + description: 'Refill the VBOX with new items.', }, equipSkills: { item: 'QUICK ACCESS - SKILLS', diff --git a/client/src/events.jsx b/client/src/events.jsx index 1c01bd53..a9481ccd 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -1,4 +1,5 @@ const eachSeries = require('async/eachSeries'); +const sample = require('lodash/sample'); const actions = require('./actions'); const { TIMES } = require('./constants'); @@ -187,6 +188,52 @@ function registerEvents(store) { return store.dispatch(actions.setItemInfo(v)); } + function setDemo(d) { + const initial = { + players: d, + combiner: [], + items: ['Red', 'Red', 'Attack'], + equipped: false, + equipping: false, + }; + + const startDemo = () => { + console.log(initial); + store.dispatch(actions.setDemo(initial)); + setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0] }))), 2000); + setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1] }))), 4000); + setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1, 2] }))), 6000); + setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['Strike', '', ''] }))), 8000); + setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0], items: ['Strike', '', ''], equipping: true }))), 10000); + setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['', '', ''], equipped: true, equipping: false }))), 12000); + setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { items: ['', '', ''], equipped: true, equipping: false }))), 12000); + + setTimeout(() => { + const { itemInfo } = store.getState(); + return store.dispatch(actions.setAnimTarget({ + skill: sample(itemInfo.items.filter(i => i.skill)).item, + constructId: d[1].constructs[0].id, + player: false, + direction: 0, + })); + }, 14000); + + setTimeout(() => { + const { itemInfo } = store.getState(); + return store.dispatch(actions.setAnimTarget({ + skill: sample(itemInfo.items.filter(i => i.skill)).item, + constructId: d[1].constructs[1].id, + player: true, + direction: 0, + })); + }, 16000); + + setTimeout(startDemo, 20000); + }; + + startDemo(); + } + // events.on('SET_PLAYER', setInstance); // events.on('SEND_SKILL', function skillActive(gameId, constructId, targetConstructId, skill) { @@ -230,6 +277,7 @@ function registerEvents(store) { setAccountInstances, setActiveItem, setActiveSkill, + setDemo, setConstructList, setNewConstruct, setGame, diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 496a5acc..cfc6dad5 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -23,6 +23,8 @@ module.exports = { animTarget: createReducer(null, 'SET_ANIM_TARGET'), animText: createReducer(null, 'SET_ANIM_TEXT'), + demo: createReducer(null, 'SET_DEMO'), + combiner: createReducer([], 'SET_COMBINER'), constructs: createReducer([], 'SET_CONSTRUCTS'), constructEditId: createReducer(null, 'SET_CONSTRUCT_EDIT_ID'), diff --git a/client/src/socket.jsx b/client/src/socket.jsx index 4ac30163..a6a97162 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -206,6 +206,10 @@ function createSocket(events) { events.setItemInfo(info); } + function onDemo(v) { + events.setDemo(v); + } + let pongTimeout; function onPong() { events.setPing(Date.now() - ping); @@ -231,6 +235,7 @@ function createSocket(events) { InstanceState: onInstanceState, ItemInfo: onItemInfo, Pong: onPong, + Demo: onDemo, QueueRequested: () => events.notify('pvp queue request received'), QueueJoined: () => events.notify('you have joined the pvp queue'), diff --git a/server/src/instance.rs b/server/src/instance.rs index 9abf3aca..489f6fe2 100644 --- a/server/src/instance.rs +++ b/server/src/instance.rs @@ -797,6 +797,25 @@ pub fn instance_game_finished(tx: &mut Transaction, game: &Game, instance_id: Uu Ok(()) } +pub fn demo() -> Result, Error> { + let bot = bot_player(); + + // generate bot imgs for the client to see + for c in bot.constructs.iter() { + img::molecular_write(c.img)?; + }; + + let bot2 = bot_player(); + + // generate bot imgs for the client to see + for c in bot2.constructs.iter() { + img::molecular_write(c.img)?; + }; + + + Ok(vec![bot, bot2]) +} + #[cfg(test)] mod tests { use super::*; diff --git a/server/src/mob.rs b/server/src/mob.rs index 6bb6aaf1..2cab954b 100644 --- a/server/src/mob.rs +++ b/server/src/mob.rs @@ -27,3 +27,4 @@ pub fn bot_player() -> Player { let constructs = instance_mobs(bot_id); Player::new(bot_id, &name(), constructs).set_bot(true) } + diff --git a/server/src/rpc.rs b/server/src/rpc.rs index 09b9cdfd..4f73e17f 100644 --- a/server/src/rpc.rs +++ b/server/src/rpc.rs @@ -21,10 +21,12 @@ use account; use construct::{Construct}; use events::{Event}; use game::{Game, game_state, game_skill, game_skill_clear, game_ready}; -use instance::{Instance, instance_state, instance_practice, instance_ready, instance_abandon}; +use instance::{Instance, instance_state, instance_practice, instance_ready, instance_abandon, demo}; use item::{Item, ItemInfoCtr, item_info}; use mtx; use mail; + +use player::{Player}; use payments; use mail::Email; use pg::{Db}; @@ -41,6 +43,8 @@ pub enum RpcMessage { AccountInstances(Vec), AccountShop(mtx::Shop), + Demo(Vec), + ConstructSpawn(Construct), GameState(Game), ItemInfo(ItemInfoCtr), @@ -271,6 +275,8 @@ impl Handler for Connection { // tx should do nothing tx.commit().unwrap(); + } else { + self.ws.send(RpcMessage::Demo(demo().unwrap())).unwrap(); } Ok(())