diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less
index 0df8af26..69b1a07a 100644
--- a/client/assets/styles/controls.less
+++ b/client/assets/styles/controls.less
@@ -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;
diff --git a/client/src/components/account.box.jsx b/client/src/components/account.box.jsx
new file mode 100644
index 00000000..1ad42023
--- /dev/null
+++ b/client/src/components/account.box.jsx
@@ -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 (
+ //
+ //
Processor
+ //
+ //
+ //
+ // );
+ // }
+
+ return (
+
+
+
+
{account.name}
+
0 MMR
+
+ );
+}
+
+module.exports = addState(AccountBox);
diff --git a/client/src/components/game.ctrl.btns.jsx b/client/src/components/game.ctrl.btns.jsx
index 81d36cb7..d92d0b86 100644
--- a/client/src/components/game.ctrl.btns.jsx
+++ b/client/src/components/game.ctrl.btns.jsx
@@ -62,7 +62,7 @@ function GameCtrlBtns(args) {
return (
-
+
diff --git a/client/src/components/instance.ctrl.btns.jsx b/client/src/components/instance.ctrl.btns.jsx
index 751f7137..d2acd10c 100644
--- a/client/src/components/instance.ctrl.btns.jsx
+++ b/client/src/components/instance.ctrl.btns.jsx
@@ -40,7 +40,7 @@ function InstanceCtrlBtns(args) {
return (
-
+
);
diff --git a/client/src/components/play.ctrl.jsx b/client/src/components/play.ctrl.jsx
index 0df4f4d0..4b0ed01c 100644
--- a/client/src/components/play.ctrl.jsx
+++ b/client/src/components/play.ctrl.jsx
@@ -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 = (
+
+ );
+
if (instances.length) {
return (
);
@@ -112,24 +130,26 @@ function JoinButtons(args) {
);
diff --git a/client/src/components/player.box.jsx b/client/src/components/player.box.jsx
index 87ec4dae..409ace1d 100644
--- a/client/src/components/player.box.jsx
+++ b/client/src/components/player.box.jsx
@@ -7,7 +7,7 @@ function Scoreboard(args) {
} = args;
const scoreText = () => {
- if (player.score === 'Zero') return [▫, ▫, ▫];
+ if (player.score === 'Zero' || player.score === 'Lose') return [▫, ▫, ▫];
if (player.score === 'One') return [■, ▫, ▫];
if (player.score === 'Two') return [■, ■, ▫];
if (player.score === 'Win') return [■, ■, ■];
@@ -42,7 +42,6 @@ function Scoreboard(args) {
);
}
-
return (