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

account box

Browse Source
This commit is contained in:
ntr 2019-09-22 18:10:05 +10:00
parent 05e1b19d11
commit 8151c37f96
6 changed files with 107 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,28 +14,30 @@ aside {
padding-left: 1em;
.instance-ctrl, .game-ctrl {
.controls {
grid-area: controls;
display: grid;
grid-template-areas:
"top"
"p0"
"p1"
"bottom";
grid-template-rows: min-content 3fr 3fr 1fr;
}
.flex {
display: flex;
flex-flow: column;;
}
.controls {
grid-area: controls;
display: grid;
grid-auto-rows: 1fr;
grid-template-rows: min-content 3fr 3fr 1fr;
grid-gap: 0.5em 0;
}
&.play-ctrl {
.controls {
grid-template-rows: 4fr 4fr 1fr;
}
}
// &.play-ctrl {
// .controls {
// grid-template-rows: 4fr 4fr 1fr;
// }
// }
text-align: center;

46
client/src/components/account.box.jsx Normal file
View File

@ -0,0 +1,46 @@
const preact = require('preact');
const { connect } = require('preact-redux');
const addState = connect(
function receiveState(state) {
const {
account,
} = state;
return {
account,
};
}
);
function AccountBox(args) {
const {
account,
} = args;
const imgStyle = account.img
? { 'background-image': `url(/imgs/${account.img}.svg)` }
: null;
// if (!isTop) {
// return (
// <div class='player-box top'>
// <div class="name">Processor</div>
// <div class="img avatar" id={account.img} style={imgStyle}></div>
// <div class="msg">&nbsp;</div>
// </div>
// );
// }
return (
<div class='player-box bottom'>
<div class="msg">&nbsp;</div>
<div class="img avatar" id={account.img} style={imgStyle}></div>
<div class="name">{account.name}</div>
<div class="score">0 MMR</div>
</div>
);
}
module.exports = addState(AccountBox);

2
client/src/components/game.ctrl.btns.jsx
View File

@ -62,7 +62,7 @@ function GameCtrlBtns(args) {
return (
<div class="game-ctrl-btns">
<button>Chat</button>
<button disabled={true} >Chat</button>
<button disabled={animating} onClick={sendGameSkillClear}>Clear</button>
<button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>
</div>

2
client/src/components/instance.ctrl.btns.jsx
View File

@ -40,7 +40,7 @@ function InstanceCtrlBtns(args) {
return (
<div class="instance-ctrl-btns">
<button>Chat</button>
<button disabled={true} >Chat</button>
<button disabled={finished} class="ready" onClick={() => sendReady()}>Ready</button>
</div>
);

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

@ -3,6 +3,8 @@ const { connect } = require('preact-redux');
const { errorToast, infoToast } = require('../utils');
const AccountBox = require('./account.box');
const addState = connect(
function receiveState(state) {
const {
@ -50,17 +52,33 @@ function JoinButtons(args) {
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">
<button
class='pvp ready full'
onClick={() => sendInstanceState(instances[0].id)}
type="submit">
Rejoin
</button>
{discordBtn}
<div class="flex">
<div>&nbsp;</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>
);
@ -112,24 +130,26 @@ function JoinButtons(args) {
<aside class='play-ctrl'>
<div class="timer-container"></div>
<div class="controls">
<button
class='pvp ready'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
{inviteBtn()}
<button
class='practice ready'
onClick={() => sendInstancePractice()}
type="submit">
Learn
</button>
<button
class='discord-btn'
onClick={() => window.open('https://discord.gg/YJJgurM') }>
&nbsp;
</button>
{discordBtn}
<div class="flex">
<button
class='practice ready'
onClick={() => sendInstancePractice()}
type="submit">
Learn
</button>
{inviteBtn()}
</div>
<AccountBox />
<div class="instance-ctrl-btns">
<button disabled={true} >Chat</button>
<button
class='pvp ready'
onClick={() => sendInstanceQueue()}
type="submit">
PVP
</button>
</div>
</div>
</aside>
);

3
client/src/components/player.box.jsx
View File

@ -7,7 +7,7 @@ function Scoreboard(args) {
} = args;
const scoreText = () => {
if (player.score === 'Zero') return [<span i={0}>▫</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
if (player.score === 'Zero' || player.score === 'Lose') return [<span i={0}>▫</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
if (player.score === 'One') return [<span i={0}>■</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
if (player.score === 'Two') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>▫</span>];
if (player.score === 'Win') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>■</span>];
@ -42,7 +42,6 @@ function Scoreboard(args) {
);
}
return (
<div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
<div class="msg">hfhf</div>