ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

big play rework

Browse Source
This commit is contained in:
ntr 2019-10-23 16:11:04 +11:00
parent 82da5da23e
commit 06b987e877
14 changed files with 2817 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/assets/assets/molecules/726.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

2557
client/assets/mnni.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

31
client/assets/styles/controls.less
View File

@ -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;

4
client/assets/styles/instance.less
View File

@ -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;
}
}

34
client/assets/styles/menu.less
View File

@ -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 {

6
client/assets/styles/styles.less
View File

@ -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;

2
client/src/components/faceoff.jsx
View File

@ -95,7 +95,7 @@ function Faceoff(props) {
return (
<div class="faceoff-text winner">
<div> {winner.name} </div>
<div> win </div>
<div> wins </div>
</div>
)

6
client/src/components/instance.component.jsx
View File

@ -62,9 +62,9 @@ class Instance extends Component {
if (!instance) return false;
// if (instance.phase !== 'InProgress') {
if (instance.phase !== 'InProgress') {
return <Faceoff />;
// }
}
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;
}
}

4
client/src/components/instance.ctrl.jsx
View File

@ -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'

63
client/src/components/mnni.jsx Normal file
View File

@ -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 (
<div
class="img avatar mnni"
id="mnni"
onMouseDown={this.onClick.bind(this)}>
</div>
);
}
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 (
<div class='player-box top'>
<MnniAvatatr />
<div class="msg">hi!</div>
<div class="name">MNNI</div>
<div class="score">&nbsp;</div>
</div>
);
}
module.exports = Mnni;

145
client/src/components/play.ctrl.jsx
View File

@ -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 = (
<button
class='discord-btn'
onClick={() => window.open('https://discord.gg/YJJgurM') }>
&nbsp;
</button>
);
if (instances.length) {
return (
<aside class='play-ctrl'>
<div class="timer-container"></div>
<div class="controls">
{discordBtn}
<div></div>
<div></div>
<AccountBox />
<div class="instance-ctrl-btns">
<button disabled={true}>Chat</button>
<button
class='pvp ready full'
onClick={() => sendInstanceState(instances[0].id)}
type="submit">
Rejoin
</button>
</div>
</div>
</aside>
);
}
const inviteBtn = () => {
if (!invite) {
return (
<button
class='pvp ready'
onClick={() => sendInstanceInvite()}
type="submit">
Invite
</button>
);
}
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 (
<button
class='pvp ready enabled'
onClick={copyClick}
type="submit">
Copy <p> &#x1F517; </p>
</button>
);
};
return (
<aside class='play-ctrl'>
<div class="timer-container"></div>
<div class="controls">
<button
class='practice ready'
onClick={() => sendInstancePractice()}
type="submit">
Learn
</button>
{inviteBtn()}
{discordBtn}
<div class="instance-ctrl-btns">
<button disabled={true}>-</button>
</div>
<Mnni />
<AccountBox />
<div class="instance-ctrl-btns">
<button disabled={true} >Chat</button>
<button
class='pvp ready'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
<button disabled={true}>-</button>
</div>
</div>
</aside>
);
}
module.exports = addState(JoinButtons);
module.exports = JoinButtons;

165
client/src/components/play.jsx
View File

@ -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 (
<figure>
<button
class='ready'
onClick={() => sendInstanceInvite()}
type="submit">
Invite
</button>
<figcaption>Invite a Friend</figcaption>
</figure>
);
}
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 (
<figure>
<button
class='ready'
onClick={copyClick}
type="submit">
Copy &#x1F517;
</button>
<figcaption>Invite Generated</figcaption>
</figure>
);
};
const subscription = account.subscribed
? <button
class="yellow-btn"
@ -56,23 +138,56 @@ function Play(args) {
Subscribe
</button>;
const list = () => {
if (!instances.length) return (
<div class='list play'>
<figure>
<button
class="ready"
onClick={() => sendInstanceQueue()}>
PVP
</button>
<figcaption>Matchmaking</figcaption>
</figure>
{inviteBtn()}
<figure>
<button
class="ready"
onClick={() => sendInstancePractice()}>
Learn
</button>
<figcaption>Practice MNML</figcaption>
</figure>
<figure>
<button
class='discord-btn'
onClick={() => window.open('https://discord.gg/YJJgurM') }>
&nbsp;
</button>
<figcaption>Join the Community</figcaption>
</figure>
</div>
);
return (
<div class='list play rejoin'>
<figure>
<button
class="ready"
onClick={() => sendInstanceState(instances[0].id)}>
Rejoin
</button>
<figcaption>Resume playing</figcaption>
</figure>
</div>
);
}
return (
<section class="top">
<div class="news">
<h2>v{VERSION}</h2>
<p>
Join our discord server to find opponents and talk to the devs. <br />
Message @ntr or @mashy on discord. Invite link on the right control panel. <br />
We will also give you some credits to try the mtx. <br />
</p>
<p>
If you enjoy the game you can support the development:
<ul>
<li>Invite people to play pvp games and grow the community. </li>
<li><b>Subscribe</b> or purchase <b>credits</b>.</li>
</ul>
glhf
</p>
<h1>v{VERSION}</h1>
{list()}
</div>
<div>
<h1 class="credits">¤ {account.balance}</h1>
@ -84,15 +199,19 @@ function Play(args) {
role="link">
Get Credits
</button>
<div id="error-message"></div>
</div>
<div>
Join our Discord server to find opponents and talk to the devs. <br />
Message <b>@ntr</b> or <b>@mashy</b> for some credits to get started.<br />
</div>
<br />
<p>
Click <b>LEARN</b> to practice the game without time controls. <br />
Select <b>INVITE</b> then click <b>COPY LINK</b> to create a game invitation for a friend.<br />
Select <b>PVP</b> to queue for a game against other players. <br />
</p>
<p> If you can't find a match through pvp queue, ask around on discord. </p>
<div>
If you enjoy the game you can support the development:
<ul>
<li>Invite people to play pvp games and grow the community. </li>
<li><b>Subscribe</b> or purchase <b>credits</b>.</li>
</ul>
</div>
</div>
</section>
);

2
client/src/components/shop.jsx
View File

@ -41,7 +41,7 @@ function Shop(args) {
<b>Subscriptions</b> grant extra benefits:
<ul>
<li>¤150 per month</li>
<li>Account icons</li>
<li>Account img</li>
<li>Chat wheel</li>
</ul>
</p>

2
client/src/socket.jsx
View File

@ -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),