...
;
-
- function actionClick() {
- if (game.phase === 'Finish') {
- sendInstanceState(game.instance);
- quit();
- return true;
- }
-
- if (resolution) {
- return skip();
- }
-
- return sendGameReady();
- }
-
- const otherTeams = game.players.filter(t => t.id !== account.id);
- const playerTeam = game.players.find(t => t.id === account.id);
-
- let actionText = 'Ready';
- let actionStyles = 'instance-btn instance-ui-btn right';
- if (game.phase === 'Finish') actionText = 'Done';
- if (resolution) actionText = 'Skip';
- if (actionText === 'Ready' && playerTeam.ready) actionStyles += ' ready';
-
- const header = (
- ...
;
+
+ const otherTeams = game.players.filter(t => t.id !== account.id);
+ const playerTeam = game.players.find(t => t.id === account.id);
+
+ function PlayerTeam(team) {
+ const constructs = team.constructs.map((c, i) =>
+
@@ -22,14 +30,11 @@ function renderHeader(args) {
return (
-
- setShowNav(!showNav)} >☰
- mnml.gg
-
+ mnml.gg
{accountStatus}
);
}
-module.exports = renderHeader;
+module.exports = addState(renderHeader);
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 457ba45a..8ef11ff3 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -10,13 +10,8 @@ const actions = require('../actions');
const addState = connect(
function receiveState(state) {
- const { ws, instance, player, account, nav } = state;
-
- function sendInstanceReady() {
- return ws.sendInstanceReady(instance.id);
- }
-
- return { player, instance, sendInstanceReady, nav };
+ const { ws, instance, nav } = state;
+ return { instance, nav };
},
function receiveDispatch(dispatch) {
@@ -24,13 +19,8 @@ const addState = connect(
return dispatch(actions.setInfo(c));
}
- function setNav(v) {
- return dispatch(actions.setNav(v));
- }
-
return {
setInfo,
- setNav,
};
}
);
@@ -38,62 +28,13 @@ const addState = connect(
function Instance(args) {
const {
instance,
- player,
- sendInstanceReady,
setInfo,
nav,
- setNav,
} = args;
if (!instance) return false;
- function hoverInfo(e, info) {
- e.stopPropagation();
- return setInfo(info);
- }
-
- const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
- const readyInfo = instance.phase === 'Lobby'
- ? 'lobbyReady'
- : 'ready';
- const readyBtn = (
-
- );
-
- function navClick() {
- if (nav === 'vbox') return setNav('constructs');
- return setNav('vbox');
- }
-
- const navBtn = (
-
- );
-
-
- const actionBtn = player
- ? readyBtn
- : null;
-
- // TIMER
- const zero = Date.parse(instance.phase_start);
- const now = Date.now();
- const end = Date.parse(instance.phase_end);
- const timerPct = ((now - zero) / (end - zero) * 100);
- const timerStyles = {
- width: `${timerPct < 100 ? timerPct : 0}%`,
- background: player.ready ? 'forestgreen' : 'whitesmoke',
- };
-
function playerRound(id) {
if (!instance.rounds.length) return null;
return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
@@ -139,21 +80,10 @@ function Instance(args) {
);
}
- const timer = (
-
- );
-
const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
return (
setInfo(null)} >
-
- {actionBtn}
- {timer}
- {navBtn}
-
diff --git a/client/src/components/instance.footer.jsx b/client/src/components/instance.footer.jsx
new file mode 100644
index 00000000..e07e4db0
--- /dev/null
+++ b/client/src/components/instance.footer.jsx
@@ -0,0 +1,126 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const addState = connect(
+ function receiveState(state) {
+ const { ws, instance, player, nav, showNav } = state;
+
+ function sendInstanceReady() {
+ return ws.sendInstanceReady(instance.id);
+ }
+
+ return { player, instance, sendInstanceReady, nav, showNav };
+ },
+
+ function receiveDispatch(dispatch) {
+ function setShowNav(v) {
+ return dispatch(actions.setShowNav(v));
+ }
+
+ function setInfo(c) {
+ return dispatch(actions.setInfo(c));
+ }
+
+ function setNav(v) {
+ return dispatch(actions.setNav(v));
+ }
+
+ return {
+ setInfo,
+ setNav,
+ setShowNav,
+ };
+ }
+);
+
+function Instance(args) {
+ const {
+ instance,
+ player,
+ nav,
+ showNav,
+
+ setInfo,
+ setNav,
+ setShowNav,
+
+ sendInstanceReady,
+ } = args;
+
+ if (!instance || !player) {
+ return (
+
+ );
+ }
+
+ function hoverInfo(e, info) {
+ e.stopPropagation();
+ return setInfo(info);
+ }
+
+ const rdyClasses = `${player.ready ? 'ready' : ''}`;
+ const readyInfo = instance.phase === 'Lobby'
+ ? 'lobbyReady'
+ : 'ready';
+
+ const readyBtn = (
+
+ );
+
+ function navClick() {
+ if (nav === 'vbox') return setNav('constructs');
+ return setNav('vbox');
+ }
+
+ const navBtn = instance.phase === 'InProgress'
+ ? (
+
+ )
+ : null;
+
+ const zero = Date.parse(instance.phase_start);
+ const now = Date.now();
+ const end = Date.parse(instance.phase_end);
+ const timerPct = ((now - zero) / (end - zero) * 100);
+
+ const displayColour = player.ready
+ ? 'forestgreen'
+ : timerPct > 80
+ ? 'red'
+ : 'whitesmoke';
+
+ const timerStyles = {
+ width: `${timerPct}%`,
+ background: displayColour,
+ };
+
+ const timer = (
+
+ );
+
+ return (
+
+ );
+}
+
+module.exports = addState(Instance);
diff --git a/client/src/components/list.footer.jsx b/client/src/components/list.footer.jsx
new file mode 100644
index 00000000..36a509cf
--- /dev/null
+++ b/client/src/components/list.footer.jsx
@@ -0,0 +1,47 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const actions = require('./../actions');
+
+const addState = connect(
+ function receiveState(state) {
+ const { showNav } = state;
+ return { showNav };
+ },
+ function receiveDispatch(dispatch) {
+ function navToTeam() {
+ return dispatch(actions.setNav('team'));
+ }
+
+ function setShowNav(v) {
+ return dispatch(actions.setShowNav(v));
+ }
+
+ return {
+ navToTeam,
+ setShowNav,
+ };
+ }
+);
+
+function ListFooter(args) {
+ const {
+ showNav,
+
+ navToTeam,
+ setShowNav,
+ } = args;
+
+ return (
+
+ );
+}
+
+module.exports = addState(ListFooter);
diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx
index fe708d49..a8e6c8b4 100644
--- a/client/src/components/list.jsx
+++ b/client/src/components/list.jsx
@@ -37,15 +37,6 @@ const addState = connect(
instanceList,
};
},
-
- function receiveDispatch(dispatch) {
- function navToTeam() {
- return dispatch(actions.setNav('team'));
- }
- return {
- navToTeam,
- };
- }
);
function List(args) {
@@ -57,7 +48,6 @@ function List(args) {
sendInstanceJoin,
sendInstanceList,
instanceList,
- navToTeam,
} = args;
function listElements() {
@@ -120,20 +110,8 @@ function List(args) {