Merge branch 'develop' into ko-anims
This commit is contained in:
Mashy
commit
b120fdc08e
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.0 KiB |
2557
client/assets/mnni.svg
Normal file
2557
client/assets/mnni.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 94 KiB |
@ -131,6 +131,15 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes co-text {
|
||||
from {
|
||||
color: @black;
|
||||
}
|
||||
to {
|
||||
color: @gray-exists;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&.blue {
|
||||
border-color: @blue;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -419,14 +419,9 @@
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.opponent-name {
|
||||
margin-bottom: 1em;
|
||||
grid-area: oppname;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
margin-top: 1em;
|
||||
grid-area: playername;
|
||||
.winner {
|
||||
color: @yellow;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.team {
|
||||
@ -438,9 +433,35 @@
|
||||
|
||||
.faceoff-text {
|
||||
grid-area: text;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
height: auto;
|
||||
font-size: 200%;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1em;
|
||||
font-weight: bold;
|
||||
|
||||
color: @black;
|
||||
animation: faceoff 4s ease-in-out 0s 2 alternate;
|
||||
|
||||
&.winner {
|
||||
animation: win 2s ease-in-out 0s 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes faceoff {
|
||||
from {
|
||||
color: @black;
|
||||
}
|
||||
to {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes win {
|
||||
from {
|
||||
color: @black;
|
||||
}
|
||||
to {
|
||||
color: @yellow;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Nav*/
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -46,6 +46,11 @@
|
||||
grid-area: msg;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&.winner {
|
||||
color: @yellow;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.chat {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -58,7 +58,8 @@ function Faceoff(props) {
|
||||
const constructs = team.constructs.map((c, i) =>
|
||||
<FaceoffConstruct key={c.id} construct={c}/>);
|
||||
|
||||
const classes = `team player ${team.ready ? 'ready' : ''}`
|
||||
const winner = instance.winner === team.id;
|
||||
const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`
|
||||
return (
|
||||
<div class={classes}>
|
||||
{constructs}
|
||||
@ -71,7 +72,8 @@ function Faceoff(props) {
|
||||
const constructs = team.constructs.map((c, i) =>
|
||||
<FaceoffConstruct key={c.id} construct={c}/>);
|
||||
|
||||
const classes = `team opponent ${team.ready ? 'ready' : ''}`
|
||||
const winner = instance.winner === team.id;
|
||||
const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`
|
||||
|
||||
return (
|
||||
<div class={classes}>
|
||||
@ -81,26 +83,19 @@ function Faceoff(props) {
|
||||
}
|
||||
function faceoffText() {
|
||||
if (!instance.winner) {
|
||||
const zero = Date.parse(instance.phase_start);
|
||||
const now = Date.now();
|
||||
const end = Date.parse(instance.phase_end);
|
||||
const timerPct = instance.phase_end
|
||||
? ((now - zero) / (end - zero) * 100)
|
||||
: 100;
|
||||
const fight = timerPct > 10 ? <h1> FIGHT </h1> : null;
|
||||
return (
|
||||
<div class="faceoff-text">
|
||||
<h1> {otherTeam.name} </h1>
|
||||
<h1> vs </h1>
|
||||
<h1> {playerTeam.name} </h1>
|
||||
{fight}
|
||||
<div class="faceoff-text">
|
||||
<div class="opponent-text"> {otherTeam.name} </div>
|
||||
<div class="vs"> vs </div>
|
||||
<div class="player-text"> {playerTeam.name} </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const winner = instance.winner === playerTeam.id ? playerTeam.name : otherTeam.name;
|
||||
const winner = instance.winner === playerTeam.id ? playerTeam : otherTeam;
|
||||
return (
|
||||
<div class="faceoff-text">
|
||||
<h1> {winner} wins</h1>
|
||||
<div class="faceoff-text winner">
|
||||
<div> {winner.name} </div>
|
||||
<div> wins </div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
63
client/src/components/mnni.jsx
Normal 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"> </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Mnni;
|
||||
@ -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') }>
|
||||
|
||||
</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> 🔗 </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;
|
||||
|
||||
@ -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 🔗
|
||||
</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') }>
|
||||
|
||||
</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>
|
||||
);
|
||||
|
||||
@ -67,9 +67,11 @@ function Scoreboard(args) {
|
||||
return '';
|
||||
};
|
||||
|
||||
const winner = player.score === 'Win';
|
||||
|
||||
if (!isPlayer) {
|
||||
return (
|
||||
<div class={`player-box top ${player.ready ? 'ready' : ''}`}>
|
||||
<div class={`player-box top ${winner ? 'winner' : player.ready ? 'ready' : ''}`}>
|
||||
<div></div>
|
||||
<div class="score">{scoreText()}</div>
|
||||
<div class="name">{player.name}</div>
|
||||
@ -80,7 +82,7 @@ function Scoreboard(args) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
|
||||
<div class={`player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`}>
|
||||
<div class="msg">{chat || '\u00A0'}</div>
|
||||
<div class="score">{scoreText()}</div>
|
||||
<div class="name">{player.name}</div>
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
const preact = require('preact');
|
||||
const { connect } = require('preact-redux');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const {
|
||||
ws,
|
||||
instance
|
||||
} = state;
|
||||
|
||||
return { instance };
|
||||
},
|
||||
);
|
||||
|
||||
function ScoreBoard(args) {
|
||||
const {
|
||||
instance,
|
||||
} = args;
|
||||
|
||||
const players = instance.players.map((p, i) => {
|
||||
if (instance.phase === 'Finished') {
|
||||
const winner = p.wins > instance.max_rounds / 2;
|
||||
return <tr key={i}
|
||||
class={p.winner ? 'ready' : ''}>
|
||||
<td>{p.name}</td>
|
||||
<td>{p.wins} / {p.losses}</td>
|
||||
<td>{winner ? 'winner' : ''}</td>
|
||||
</tr>
|
||||
}
|
||||
|
||||
const text = instance.phase === 'Finished'
|
||||
? p.wins > instance.rounds / 2 && 'Winner'
|
||||
: '';
|
||||
|
||||
return <tr key={i}
|
||||
class={p.ready ? 'ready' : ''}>
|
||||
<td>{p.name}</td>
|
||||
<td>{p.wins} / {p.losses}</td>
|
||||
<td>{p.ready ? 'ready' : ''}</td>
|
||||
</tr>
|
||||
});
|
||||
|
||||
return (
|
||||
<table class="scoreboard">
|
||||
<tbody>
|
||||
{players}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(ScoreBoard);
|
||||
@ -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>
|
||||
|
||||
@ -1,172 +0,0 @@
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const { INFO } = require('./../constants');
|
||||
const { convertItem } = require('../utils');
|
||||
const shapes = require('./shapes');
|
||||
|
||||
const ScoreBoard = require('./scoreboard');
|
||||
|
||||
function InfoComponent(args) {
|
||||
const {
|
||||
itemInfo,
|
||||
combiner,
|
||||
player,
|
||||
instance,
|
||||
} = args;
|
||||
|
||||
args.info = 'PowerRG';
|
||||
const { info } = args;
|
||||
|
||||
function Info() {
|
||||
if (!info) return false;
|
||||
const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
|
||||
if (!fullInfo) return false;
|
||||
const isSkill = fullInfo.skill;
|
||||
const isSpec = fullInfo.spec;
|
||||
|
||||
if (isSkill) {
|
||||
return (
|
||||
<div class="info-skill">
|
||||
<h2>{fullInfo.item}</h2>
|
||||
<div>{fullInfo.description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isSpec) {
|
||||
let red = 0;
|
||||
let blue = 0;
|
||||
let green = 0;
|
||||
player.constructs.forEach(construct => {
|
||||
red += construct.colours.red;
|
||||
blue += construct.colours.blue;
|
||||
green += construct.colours.green;
|
||||
});
|
||||
const teamColours = { red, blue, green };
|
||||
|
||||
const colourReqs = fullInfo.values.bonuses || [];
|
||||
|
||||
const thresholds = colourReqs.map((bonus, i) => {
|
||||
const colours = ['red', 'green', 'blue'];
|
||||
const colourGoals = colours.map(c => {
|
||||
const colourReq = bonus.req[c];
|
||||
if (colourReqs === 0) return false;
|
||||
|
||||
const start = i === 0
|
||||
? 0
|
||||
: colourReqs[i - 1].req[c];
|
||||
|
||||
const dots = range(start, colourReq).map(j => {
|
||||
const unmet = teamColours[c] < j + 1;
|
||||
|
||||
const reqClass = unmet
|
||||
? 'unmet'
|
||||
: '';
|
||||
|
||||
return (
|
||||
<figure key={j} alt={c.colour} class={reqClass} >
|
||||
{shapes.square([c])}
|
||||
</figure>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div key={c}>
|
||||
{dots}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
|
||||
|
||||
const reqClass = reqsMet
|
||||
? ''
|
||||
: 'unmet';
|
||||
|
||||
return (
|
||||
<div key={i} class="spec-goal">
|
||||
<div class="colour-reqs">
|
||||
{colourGoals}
|
||||
</div>
|
||||
<div class={reqClass}>
|
||||
+ {bonus.bonus}
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="info-spec">
|
||||
<h2>{info}</h2>
|
||||
<div>{fullInfo.description}</div>
|
||||
<div class="thresholds">
|
||||
{thresholds}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="info-item">
|
||||
<h2>{fullInfo.item}</h2>
|
||||
<div>{fullInfo.description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Combos() {
|
||||
if (!player) return false;
|
||||
|
||||
// show recipe for what's in combiner
|
||||
if (combiner.some(u => u !== null)) {
|
||||
const filteredCombos = itemInfo.combos
|
||||
.filter(combo => combiner.every(u => u === null
|
||||
|| combo.components.includes(player.vbox.bound[u])));
|
||||
if (filteredCombos.length > 6) return false;
|
||||
return (
|
||||
<table>
|
||||
<tbody>
|
||||
{filteredCombos.map((c, i) =>
|
||||
<tr key={i} >
|
||||
<td class="highlight" >{convertItem(c.item)}</td>
|
||||
{c.components.map((u, j) => <td key={j}>{convertItem(u)}</td>)}
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
if (!info) return false;
|
||||
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
|
||||
if (vboxCombos.length > 6) return false;
|
||||
return (
|
||||
<table class="combos">
|
||||
<tbody>
|
||||
{vboxCombos.map((c, i) =>
|
||||
<tr key={i} >
|
||||
<td class="highlight" >{convertItem(c.item)}</td>
|
||||
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
const scoreboard = instance.phase === 'Lobby' || info
|
||||
? null
|
||||
: <ScoreBoard />;
|
||||
|
||||
return (
|
||||
<div class='info' >
|
||||
{scoreboard}
|
||||
<Info />
|
||||
<Combos />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = InfoComponent;
|
||||
@ -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),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user