diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less
index 945e0ea4..5e4dbaad 100644
--- a/client/assets/styles/controls.less
+++ b/client/assets/styles/controls.less
@@ -1,9 +1,15 @@
aside {
grid-area: ctrl;
display: grid;
+ grid-template-rows: 1fr 1fr 1fr;
+ grid-gap: 0.5em 0;
padding: 1em;
+ div {
+ text-align: right;
+ }
+
button {
width: 100%;
font-size: 150%;
diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 67d17fd0..40038876 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -119,7 +119,6 @@
.vbox-hdr {
display: flex;
- align-items: flex-end;
}
.vbox-hdr h3 {
@@ -398,14 +397,10 @@
text-align: center;
overflow: hidden;
display: grid;
- grid-template-rows: min-content 1fr 1.5fr min-content min-content;
+ grid-template-rows: 1fr 1.5fr;
grid-template-areas:
- "oppname"
"opponent"
- "player"
- "playername"
- "ready";
-
+ "player";
h1 {
text-align: center;
diff --git a/client/src/components/controls.jsx b/client/src/components/controls.jsx
index 2c642ed8..b61dd7e0 100644
--- a/client/src/components/controls.jsx
+++ b/client/src/components/controls.jsx
@@ -1,8 +1,7 @@
const preact = require('preact');
const { connect } = require('preact-redux');
-const InstanceCtrl = require('./instance.ctrl');
-const GameCtrl = require('./game.ctrl');
+const PlayerCtrl = require('./player.ctrl');
const PlayCtrl = require('./play.ctrl');
const addState = connect(
@@ -30,8 +29,7 @@ function Controls(args) {
sendGameReady,
} = args;
- if (game) return ;
- if (instance) return ;
+ if (game || instance) return ;
if (nav === 'play' || !nav) return
return false;
diff --git a/client/src/components/faceoff.jsx b/client/src/components/faceoff.jsx
index a2a1b5a9..f7634366 100644
--- a/client/src/components/faceoff.jsx
+++ b/client/src/components/faceoff.jsx
@@ -78,10 +78,8 @@ function Faceoff(props) {
return (
- {otherTeam.name}
{OpponentTeam(otherTeam)}
{PlayerTeam(playerTeam)}
- {playerTeam.name}
);
}
diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx
deleted file mode 100644
index 7b9e2bfd..00000000
--- a/client/src/components/game.ctrl.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-const addState = connect(
- function receiveState(state) {
- const {
- ws,
- animating,
- game,
- } = state;
-
- function sendGameReady() {
- document.activeElement.blur()
- return ws.sendGameReady(game.id);
- }
-
- return {
- game,
- animating,
- sendGameReady,
- };
- },
-);
-
-function Controls(args) {
- const {
- game,
- animating,
- sendGameReady
- } = args;
-
- return (
-
- );
-}
-
-module.exports = addState(Controls);
diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx
index 10954d87..eddde654 100644
--- a/client/src/components/game.jsx
+++ b/client/src/components/game.jsx
@@ -5,7 +5,6 @@ const actions = require('../actions');
const GameConstruct = require('./game.construct');
const Targeting = require('./targeting.arrows');
-const Controls = require('./controls');
const addState = connect(
function receiveState(state) {
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index ec023e3f..31fc35c6 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -5,14 +5,11 @@ const { INFO } = require('./../constants');
const { convertItem } = require('../utils');
const shapes = require('./shapes');
-const ScoreBoard = require('./scoreboard');
-
function InfoComponent(args) {
const {
itemInfo,
combiner,
player,
- instance,
info,
} = args;
@@ -166,13 +163,8 @@ function InfoComponent(args) {
);
}
- const scoreboard = instance.phase === 'Lobby' || info
- ? null
- : ;
-
return (
- {scoreboard}
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 03c626ea..12f78532 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -5,7 +5,6 @@ const Vbox = require('./vbox.component');
const InfoContainer = require('./info.container');
const InstanceConstructsContainer = require('./instance.constructs');
// const EquipmentContainer = require('./instance.equip');
-const ScoreBoard = require('./scoreboard');
const Faceoff = require('./faceoff');
const actions = require('../actions');
diff --git a/client/src/components/instance.ctrl.jsx b/client/src/components/instance.ctrl.jsx
deleted file mode 100644
index 9d7c3329..00000000
--- a/client/src/components/instance.ctrl.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-const addState = connect(
- function receiveState(state) {
- const {
- ws,
- instance
- } = state;
-
- function sendInstanceReady() {
- document.activeElement.blur()
- return ws.sendInstanceReady(instance.id);
- }
-
- return { instance, sendInstanceReady };
- },
-);
-
-function Controls(args) {
- const {
- instance,
- sendInstanceReady
- } = args;
-
- return (
-
- );
-}
-
-module.exports = addState(Controls);
diff --git a/client/src/components/player.ctrl.jsx b/client/src/components/player.ctrl.jsx
new file mode 100644
index 00000000..d8b72cdb
--- /dev/null
+++ b/client/src/components/player.ctrl.jsx
@@ -0,0 +1,86 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+// dunno if this is a good idea
+// bashing together instance and game to save having two panels
+
+const addState = connect(
+ function receiveState(state) {
+ const {
+ ws,
+ instance,
+ game,
+ account,
+ animating,
+ } = state;
+
+ function sendReady() {
+ document.activeElement.blur()
+ if (game) return ws.sendGameReady(game.id);
+ if (instance) return ws.sendInstanceReady(instance.id);
+ return false;
+ }
+
+ const gameObject = game || instance;
+
+ return {
+ gameObject,
+ sendReady,
+ account,
+ animating,
+ };
+ },
+);
+
+function scoreboard(gameObject, player, isOpponent) {
+ const text = gameObject.phase === 'Finished'
+ ? player.wins > gameObject.rounds / 2 && 'Winner'
+ : '';
+
+ const classes =`scoreboard ${player.ready ? 'ready' : ''}`;
+
+ const body = isOpponent
+ ? (
+
+ | {player.name} |
+ | {player.wins} / {player.losses} |
+ | {player.ready ? 'ready' : ''} |
+
+ ) : (
+
+ | {player.ready ? 'ready' : ''} |
+ | {player.wins} / {player.losses} |
+ | {player.name} |
+
+ );
+
+ return (
+
+ );
+}
+
+function Controls(args) {
+ const {
+ account,
+ gameObject,
+ animating,
+ sendReady,
+ } = args;
+
+ if (!gameObject) return false;
+
+ const opponent = gameObject.players.find(t => t.id !== account.id);
+ const player = gameObject.players.find(t => t.id === account.id);
+
+ return (
+
+ );
+}
+
+module.exports = addState(Controls);
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 07c96437..da487ef8 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -15,7 +15,7 @@ function registerEvents(store) {
function setTeam(team) {
store.dispatch(actions.setTeam(team));
- setNav('list');
+ setNav('play');
}
function setConstructList(constructs) {