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..80ce32a5 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,57 @@ 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/components/welcome.register.jsx b/client/src/components/welcome.register.jsx index 7051a8ce..899c8ef6 100644 --- a/client/src/components/welcome.register.jsx +++ b/client/src/components/welcome.register.jsx @@ -12,8 +12,8 @@ const addState = connect( ws } = state; - function submitRegister(name, password, code) { - postData('/account/register', { name, password, code }) + function submitRegister(name, password) { + postData('/account/register', { name, password }) .then(res => res.json()) .then(data => { if (data.error) return errorToast(data.error); @@ -34,12 +34,11 @@ function Register(args) { submitRegister, } = args; - const { password, confirm, name, code } = this.state; + const { password, confirm, name } = this.state; const registerSubmit = (event) => { event.preventDefault(); - submitRegister(name, password, code); - // this.setState({ name: '', password: '', confirm: '', code: ''}); + submitRegister(name, password); } const registerConfirm = () => @@ -75,14 +74,6 @@ function Register(args) { value={this.state.confirm} onInput={linkState(this, 'confirm')} /> - -