diff --git a/client/assets/assets/molecules/726.svg b/client/assets/assets/molecules/726.svg deleted file mode 100644 index 3d18b0c0..00000000 --- a/client/assets/assets/molecules/726.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/assets/mnni.svg b/client/assets/mnni.svg new file mode 100644 index 00000000..3b4b744b --- /dev/null +++ b/client/assets/mnni.svg @@ -0,0 +1,2557 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index c154e044..b465938d 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -50,31 +50,6 @@ aside { } } - // button.ready:enabled { - // &:hover { - // color: forestgreen; - // border-color: forestgreen; - // } - - // &:active, &:focus, &.enabled { - // background: forestgreen; - // color: black; - // border-color: forestgreen; - // } - // } - - button.ready:enabled { - color: forestgreen; - border-color: forestgreen; - - &:hover { - background: forestgreen; - color: black; - border-color: forestgreen; - } - } - - .timer-container { grid-area: timer; @@ -144,12 +119,6 @@ aside { } } -.play-ctrl { - .controls { - grid-template-rows: 1fr 1fr 1fr 3fr 1fr; - } -} - .abandon:not([disabled]) { &:hover { color: @red; diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 62f4c760..461f8eb0 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -439,10 +439,10 @@ font-weight: bold; color: @black; - animation: faceoff 4s linear 0s 2 alternate; + animation: faceoff 4s ease-in-out 0s 2 alternate; &.winner { - animation: win 2s linear 0s 1; + animation: win 2s ease-in-out 0s 1; } } diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index cbe04a86..0fbb7f90 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -109,13 +109,40 @@ section { letter-spacing: 0.25em; text-transform: uppercase; display: grid; - grid-template-columns: repeat(4, 1fr); + // grid-template-columns: repeat(4, 1fr); + grid-template-columns: 1fr 1fr; grid-gap: 1em; flex-flow: row wrap; align-items: flex-end; button { border-radius: 0.25em; + // height: 3em; } + + &.play { + grid-template-columns: repeat(2, 1fr); + align-items: flex-start; + + &.rejoin { + grid-template-columns: 1fr; + } + + button.ready:enabled { + color: forestgreen; + border-color: forestgreen; + + &:hover { + background: forestgreen; + color: black; + border-color: forestgreen; + } + } + } + } + + .panes { + display: grid; + grid-template-columns: repeat(2, 1fr); } figure { @@ -189,7 +216,12 @@ section { .list { grid-template-columns: 1fr 1fr; + + &.play { + grid-template-columns: 1fr; + } } + } .menu .team { diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 2d3af757..e8188302 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -281,7 +281,7 @@ ul { } li { - margin-bottom: 0.5em; + margin-bottom: 0; } .logo { @@ -299,6 +299,10 @@ li { background-position: center; } +.mnni { + background-image: url("./../mnni.svg"); +} + .avatar { grid-area: avatar; object-fit: contain; diff --git a/client/src/components/faceoff.jsx b/client/src/components/faceoff.jsx index 723c985b..251f10e6 100644 --- a/client/src/components/faceoff.jsx +++ b/client/src/components/faceoff.jsx @@ -95,7 +95,7 @@ function Faceoff(props) { return (
{winner.name}
-
win
+
wins
) diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 44df54e7..abd2e9da 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -62,9 +62,9 @@ class Instance extends Component { if (!instance) return false; - // if (instance.phase !== 'InProgress') { + if (instance.phase !== 'InProgress') { return ; - // } + } function instanceClick(e) { e.stopPropagation(); @@ -95,7 +95,6 @@ class Instance extends Component { bindSwipes() { const instance = document.getElementById('instance'); if (!instance) { - console.log('no instance, binding in 50'); return setTimeout(this.bindSwipes, 50); } if (this.h) this.h.destroy(); @@ -116,7 +115,6 @@ class Instance extends Component { setNavInstance((navInstance + 1) % 4); }); - console.log('hammer gestures bound'); return true; } } diff --git a/client/src/components/instance.ctrl.jsx b/client/src/components/instance.ctrl.jsx index b025d239..6ec4bdaf 100644 --- a/client/src/components/instance.ctrl.jsx +++ b/client/src/components/instance.ctrl.jsx @@ -43,11 +43,11 @@ function Controls(args) { const zero = Date.parse(instance.phase_start); const now = Date.now(); const end = Date.parse(instance.phase_end); - const timerPct = instance.phase_end + const timerPct = instance.phase !== 'Finished' && instance.phase_end ? ((now - zero) / (end - zero) * 100) : 100; - const displayColour = !instance.phase_end + const displayColour = !instance.phase_end || instance.phase === 'Finished' ? '#222' : player.ready ? 'forestgreen' diff --git a/client/src/components/mnni.jsx b/client/src/components/mnni.jsx new file mode 100644 index 00000000..f1506dfc --- /dev/null +++ b/client/src/components/mnni.jsx @@ -0,0 +1,63 @@ +const { Component } = require('preact'); +const preact = require('preact'); +// const { connect } = require('preact-redux'); + +const idleAnimation = require('./anims/idle'); +const wiggle = require('./anims/wiggle'); + +class MnniAvatatr extends Component { + constructor() { + super(); + // The animation ids are a check to ensure that animations are not repeated + // When a new account animation is communicated with state it will have a corresponding Id + // which is a count of how many resoluttions have passed + this.animations = []; + this.resetAnimations = this.resetAnimations.bind(this); + } + + render() { + const { account, mtxActive } = this.props; + return ( +
+
+ ); + } + + onClick() { + if (this.props.mtxActive) { + return this.props.sendMtxAccountApply(); + } + return this.animations.push(wiggle('mnni', this.idle)); + } + + componentDidMount() { + this.idle = idleAnimation('mnni'); + return this.animations.push(this.idle); + } + + resetAnimations() { + for (let i = this.animations.length - 1; i >= 0; i--) { + this.animations[i].reset(); + } + } + + componentWillUnmount() { + this.resetAnimations(); + } +} + +function Mnni(args) { + return ( +
+ +
hi!
+
MNNI
+
 
+
+ ); +} + +module.exports = Mnni; diff --git a/client/src/components/play.ctrl.jsx b/client/src/components/play.ctrl.jsx index 8bdeab21..39f11fc0 100644 --- a/client/src/components/play.ctrl.jsx +++ b/client/src/components/play.ctrl.jsx @@ -1,155 +1,26 @@ const preact = require('preact'); -const { connect } = require('preact-redux'); - -const { errorToast, infoToast } = require('../utils'); +// const { connect } = require('preact-redux'); const AccountBox = require('./account.box'); - -const addState = connect( - function receiveState(state) { - const { - ws, - instances, - invite, - } = state; - - function sendInstanceState(id) { - ws.sendInstanceState(id); - } - - function sendInstancePractice() { - ws.sendInstancePractice(); - } - - function sendInstanceQueue() { - ws.sendInstanceQueue(); - } - - function sendInstanceInvite() { - ws.sendInstanceInvite(); - } - - return { - instances, - invite, - - sendInstanceState, - sendInstanceQueue, - sendInstancePractice, - sendInstanceInvite, - }; - } -); +const Mnni = require('./mnni'); function JoinButtons(args) { - const { - instances, - invite, - - sendInstanceState, - sendInstanceQueue, - sendInstancePractice, - sendInstanceInvite, - } = args; - - const discordBtn = ( - - ); - - if (instances.length) { - return ( - - ); - } - - const inviteBtn = () => { - if (!invite) { - return ( - - ); - } - - function copyClick(e) { - const link = `${document.location.origin}#join=${invite}`; - const textArea = document.createElement('textarea', { id: '#clipboard' }); - textArea.value = link; - document.body.appendChild(textArea); - textArea.focus(); - textArea.select(); - - try { - document.execCommand('copy'); - infoToast('Invite link copied to clipboard.'); - } catch (err) { - console.error('link copy error', err); - errorToast('Invite link copy error.'); - } - - document.body.removeChild(textArea); - return true; - } - - return ( - - ); - }; - return ( ); } -module.exports = addState(JoinButtons); +module.exports = JoinButtons; diff --git a/client/src/components/play.jsx b/client/src/components/play.jsx index 6d846016..dc7a1720 100644 --- a/client/src/components/play.jsx +++ b/client/src/components/play.jsx @@ -2,6 +2,7 @@ const preact = require('preact'); const { connect } = require('preact-redux'); +const { errorToast, infoToast } = require('../utils'); const actions = require('./../actions'); const VERSION = process.env.npm_package_version; @@ -11,10 +12,35 @@ const addState = connect( const { ws, account, + instances, + invite, } = state; + function sendInstanceState(id) { + ws.sendInstanceState(id); + } + + function sendInstancePractice() { + ws.sendInstancePractice(); + } + + function sendInstanceQueue() { + ws.sendInstanceQueue(); + } + + function sendInstanceInvite() { + ws.sendInstanceInvite(); + } + return { account, + instances, + invite, + + sendInstanceState, + sendInstanceQueue, + sendInstancePractice, + sendInstanceInvite, }; }, @@ -36,13 +62,69 @@ const addState = connect( } ); - function Play(args) { const { account, + instances, + invite, + + sendInstanceState, + sendInstanceQueue, + sendInstancePractice, + sendInstanceInvite, + setNav, } = args; - + + const inviteBtn = () => { + if (!invite) { + return ( +
+ +
Invite a Friend
+
+ + ); + } + + function copyClick(e) { + const link = `${document.location.origin}#join=${invite}`; + const textArea = document.createElement('textarea', { id: '#clipboard' }); + textArea.value = link; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + try { + document.execCommand('copy'); + infoToast('Invite link copied to clipboard.'); + } catch (err) { + console.error('link copy error', err); + errorToast('Invite link copy error.'); + } + + document.body.removeChild(textArea); + return true; + } + + return ( +
+ +
Invite Generated
+
+ ); + }; + const subscription = account.subscribed ? +
Matchmaking
+ + {inviteBtn()} +
+ +
Practice MNML
+
+
+ +
Join the Community
+
+ + ); + + return ( +
+
+ +
Resume playing
+
+
+ ); + } + return (
-

v{VERSION}

-

- Join our discord server to find opponents and talk to the devs.
- Message @ntr or @mashy on discord. Invite link on the right control panel.
- We will also give you some credits to try the mtx.
-

-

- If you enjoy the game you can support the development: -

    -
  • Invite people to play pvp games and grow the community.
    • -
  • Subscribe or purchase credits.
    • -
- glhf -

+

v{VERSION}

+ {list()}

¤ {account.balance}

@@ -84,15 +199,19 @@ function Play(args) { role="link"> Get Credits -
+
+
+ Join our Discord server to find opponents and talk to the devs.
+ Message @ntr or @mashy for some credits to get started.

-

- Click LEARN to practice the game without time controls.
- Select INVITE then click COPY LINK to create a game invitation for a friend.
- Select PVP to queue for a game against other players.
-

-

If you can't find a match through pvp queue, ask around on discord.

+
+ If you enjoy the game you can support the development: +
    +
  • Invite people to play pvp games and grow the community.
    • +
  • Subscribe or purchase credits.
    • +
+
); diff --git a/client/src/components/shop.jsx b/client/src/components/shop.jsx index 16883b22..08a79fad 100644 --- a/client/src/components/shop.jsx +++ b/client/src/components/shop.jsx @@ -41,7 +41,7 @@ function Shop(args) { Subscriptions grant extra benefits:

diff --git a/client/src/socket.jsx b/client/src/socket.jsx index 5fed2f29..adad1a66 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -259,7 +259,7 @@ function createSocket(events) { QueueRequested: () => events.notify('pvp queue request received'), QueueJoined: () => events.notify('you have joined the pvp queue'), - InviteRequested: () => events.notify('pvp queue request received'), + InviteRequested: () => events.notify('pvp invite request received'), Invite: code => events.setInvite(code), InstanceChat: chat => events.setInstanceChat(chat), ChatWheel: wheel => events.setChatWheel(wheel),