diff --git a/WORKLOG.md b/WORKLOG.md index 999f1afa..5af518fa 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -11,9 +11,6 @@ * constructs jiggle when clicked * background colour changes depending on time of day -* bug fixes - * pvp 1st round doesn't resolve until warden timer completes - * bot game grind * stress test diff --git a/client/assets/styles/account.less b/client/assets/styles/account.less index d6f43a30..74ef9e3c 100644 --- a/client/assets/styles/account.less +++ b/client/assets/styles/account.less @@ -1,9 +1,6 @@ @import 'colours.less'; .account { - margin-top: 2em; - grid-area: bottom; - display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0 1em; diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index d036debc..4484d720 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -8,10 +8,17 @@ aside { "timer controls"; grid-template-columns: min-content 1fr; - grid-template-rows: 1fr 1fr 1fr; - grid-gap: 0.5em 0; + grid-template-rows: 1fr; - padding: 1em 1em 1em 0; + padding-left: 1em; + + .controls { + grid-area: controls; + + display: grid; + grid-auto-rows: 1fr; + grid-gap: 0.5em 0; + } // fix chrome being inconsistent table { diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 88ce7692..ee7a1898 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -1,7 +1,7 @@ @import 'colours.less'; .instance { - overflow-x: hidden; + overflow: hidden; display: grid; grid-template-columns: 1fr minmax(min-content, 1fr); grid-template-rows: min-content 1fr; diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index acb680a1..041f0263 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -4,17 +4,16 @@ height: 100%; display: grid; - grid-template-rows: minmax(min-content, 2fr) min-content 1fr; + grid-template-rows: min-content 1fr 2fr; grid-template-columns: 1fr; grid-template-areas: + "hdr" "top" - "tabs" "bottom"; .top { grid-area: top; - padding: 0 0 0.5em 2em; border-bottom: 0.1em solid #222; box-sizing: border-box; } @@ -25,9 +24,10 @@ .team { display: grid; - grid-area: top; + grid-area: bottom; grid-template-columns: repeat(auto-fill, minmax(min-content, 33%)); max-height: 100%; + margin-top: 1em; .team-select:not(:nth-child(3n)) { margin-right: 0.5em; @@ -62,8 +62,6 @@ } .inventory { - margin-top: 2em; - grid-area: bottom; display: grid; grid-template-columns: 1fr 1fr; @@ -71,6 +69,10 @@ margin-bottom: 0.5em; } + .news { + padding-right: 1em; + } + .list { letter-spacing: 0.25em; text-transform: uppercase; @@ -89,16 +91,19 @@ } .options { - grid-area: tabs; - display: flex; - flex-flow: row; + grid-area: hdr; + button { + width: 25%; border-top: 0; border: 1px solid #222; &:not(:last-child) { border-right: 0; } - flex: 1; + + &:last-child { + float: right; + } } } } diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index e678e581..747c36ca 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -84,16 +84,17 @@ dl { #mnml { display: grid; - grid-template-columns: minmax(min-content, 1fr) 8fr 1fr; - grid-template-rows: min-content 1fr min-content; + grid-template-columns: 9fr 1fr; + grid-template-rows: min-content min-content 1fr; grid-template-areas: - "hd hd ctrl" - "main main ctrl" - "main main ctrl"; + "hdr ctrl" + "main ctrl" + "main ctrl"; + + padding: 0.5em 1em; } main { - padding: 1em; grid-area: main; } @@ -253,10 +254,17 @@ figure.gray { display: none; } -.options { - display: flex; - flex-flow: row; +header { + .options { + font-size: 150%; + } + button { + height: 2em; + } +} + +.options { button { &.highlight { color: @white; @@ -279,4 +287,4 @@ figure.gray { nav { display: none; -} +} \ No newline at end of file diff --git a/client/src/components/account.management.jsx b/client/src/components/account.management.jsx index b2799138..813e6054 100644 --- a/client/src/components/account.management.jsx +++ b/client/src/components/account.management.jsx @@ -151,19 +151,9 @@ class AccountStatus extends Component { } return ( -
+
-

{account.name}

-
-
-
spawn new construct
- -
-
- - + {subInfo()}
@@ -216,7 +206,16 @@ class AccountStatus extends Component {
- {subInfo()} +
+
+
spawn new construct
+ +
+
+ +
); diff --git a/client/src/components/account.page.jsx b/client/src/components/account.page.jsx index 021bb58b..6b945876 100644 --- a/client/src/components/account.page.jsx +++ b/client/src/components/account.page.jsx @@ -2,6 +2,7 @@ const { connect } = require('preact-redux'); const preact = require('preact'); const Team = require('./team'); +const Header = require('./header'); const AccountManagement = require('./account.management'); const addState = connect( @@ -24,6 +25,7 @@ function Account(args) { return (
+
diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx index a27e4e06..4bf517d6 100644 --- a/client/src/components/game.ctrl.jsx +++ b/client/src/components/game.ctrl.jsx @@ -125,9 +125,11 @@ function Controls(args) { return ( ); } diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx index 5562502b..8248e9ac 100644 --- a/client/src/components/header.jsx +++ b/client/src/components/header.jsx @@ -1,40 +1,121 @@ -// eslint-disable-next-line -const preact = require('preact'); const { connect } = require('preact-redux'); +const preact = require('preact'); -const { saw } = require('./shapes'); -const actions = require('./../actions'); - -function pingColour(ping) { - if (ping < 100) return 'forestgreen'; - if (ping < 200) return 'yellow'; - return 'red'; -} +const actions = require('../actions'); +const AccountStatus = require('./account.status'); const addState = connect( - ({ account, ping, showNav }) => { - return { account, ping }; + function receiveState(state) { + const { + ws, + account, + instances, + team, + nav, + ping, + + game, + } = state; + + function sendInstanceState(instance) { + return ws.sendInstanceState(instance.id); + } + + function sendAccountStates() { + ws.sendEmailState(); + ws.sendSubscriptionState(); + } + + return { + account, + instances, + team, + game, + ping, + nav, + sendInstanceState, + sendAccountStates, + }; }, + function receiveDispatch(dispatch) { + function setNav(place) { + dispatch(actions.setGame(null)); + dispatch(actions.setInstance(null)); + dispatch(actions.setCombiner([])); + dispatch(actions.setReclaiming(false)); + dispatch(actions.setActiveSkill(null)); + dispatch(actions.setActiveConstruct(null)); + dispatch(actions.setInfo(null)); + dispatch(actions.setItemEquip(null)); + dispatch(actions.setItemUnequip([])); + dispatch(actions.setVboxHighlight([])); + + return dispatch(actions.setNav(place)); + } + + function hideNav() { + return dispatch(actions.setShowNav(false)); + } + + return { + setNav, + hideNav, + }; + } ); -function renderHeader(args) { - const { account, ping } = args; +function Nav(args) { + const { + account, + game, + team, + nav, - const accountStatus = account - ? (
-

{account.name}

- {saw(pingColour(ping))} -
{ping}ms
-
) - : ''; + sendAccountStates, + sendInstanceState, + + setNav, + hideNav, + } = args; + + if (!account) return false; + + function navTo(p) { + return setNav(p); + } + + function joinInstance(i) { + sendInstanceState(i); + if (game) navTo('transition'); + return true; + } + + function accountClick() { + sendAccountStates(); + navTo('account'); + } return (
-

mnml.gg

- {accountStatus} +
+ + + +
); } - -module.exports = addState(renderHeader); +module.exports = addState(Nav); \ No newline at end of file diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 2696cadf..36fc19b5 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -18,7 +18,19 @@ function InfoComponent(args) { // const { info } = args; function Info() { - if (!info) return false; + if (!info) { + return ( +
+

VBOX phase

+

double clicking items in the VBOX will purchase and move them to your INVENTORY.

+

+ hover over an item to see its effects and combinations.
+ click an item and then click a construct to equip that item to it.
+

+

click the READY button on the right to progress to the GAME PHASE.

+
+ ); + } const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info]; if (!fullInfo) return false; const isSkill = fullInfo.skill; diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 1761b656..1eecfd6e 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -98,7 +98,7 @@ function Construct(props) { const skill = construct.skills[i]; const s = skill ? skill.skill - : (+); + : (SKILL); function skillClick(e) { if (!skill) return false; diff --git a/client/src/components/instance.ctrl.jsx b/client/src/components/instance.ctrl.jsx index 129bb80c..a431f1d4 100644 --- a/client/src/components/instance.ctrl.jsx +++ b/client/src/components/instance.ctrl.jsx @@ -93,11 +93,13 @@ function Controls(args) { ); return ( -