From 97b3943d18017373151e83954e3d5344c87f272a Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 30 Jul 2019 13:17:31 +1000 Subject: [PATCH] join buttons --- client/assets/styles/colours.less | 3 +- client/assets/styles/styles.less | 70 ++++++++------ client/src/components/join.buttons.jsx | 46 ---------- client/src/components/list.jsx | 121 ------------------------- client/src/components/main.jsx | 7 +- client/src/components/nav.jsx | 2 +- client/src/events.jsx | 12 --- 7 files changed, 47 insertions(+), 214 deletions(-) delete mode 100644 client/src/components/join.buttons.jsx delete mode 100644 client/src/components/list.jsx diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less index 04dd7511..8ffce257 100644 --- a/client/assets/styles/colours.less +++ b/client/assets/styles/colours.less @@ -1,10 +1,11 @@ @green: #1FF01F; @red: #a52a2a; -@blue: #3050f8; +// @blue: #3498db // cyan? @blue: #3050f8; @white: #f5f5f5; // whitesmoke @purple: #9355b5; // 6lack - that far cover +@black: black; @gray: #222; @gray-box: #222; @gray-exists: #444; diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index cc388ede..aa085da9 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -163,7 +163,7 @@ button, input { flex: 1; /*the transitions */ - transition-property: color; + transition-property: color background; transition-duration: 0.5s; transition-delay: 0; transition-timing-function: ease; @@ -472,7 +472,7 @@ header { flex-flow: column; } -.menu-instances { +.play { height: 100%; display: grid; @@ -480,32 +480,46 @@ header { grid-template-columns: 1fr 1fr; grid-template-areas: - "constructs constructs" - "inventory games"; + "team team" + "inventory join"; + + .join { + grid-area: join; + + .buttons { + margin-top: 1em; + display: grid; + font-size: 200%; + grid-template-columns: repeat(2, 1fr); + grid-gap: 1em; + flex-flow: row wrap; + align-items: flex-end; + + button { + height: 3em; + &:hover { + border-color: @green; + color: @green; + } + } + } + } + + .team { + grid-area: team; + + /* poor man's
*/ + padding: 0.5em 2em 0 0; + margin-bottom: 2em; + border-bottom: 0.1em solid whitesmoke; + } + + .menu-construct { + flex: 1 0 33%; + } + } -.menu-instances .construct-list { - grid-area: constructs; - - /* poor man's
*/ - padding: 0.5em 2em 0 0; - margin-bottom: 2em; - border-bottom: 0.1em solid whitesmoke; -} - -.menu-instances .menu-construct { - flex: 1 0 33%; -} - -.menu-instance-list { - grid-area: games; - flex: 1; - order: 99; - flex-flow: row wrap; - - display: flex; - align-content: flex-start; -} .menu-instance-btn { flex: 1 1 100%; @@ -612,10 +626,6 @@ main .top button { transition-timing-function: ease; } -.menu-instance-list table { - margin-bottom: 2em; -} - footer { display: flex; flex-flow: row wrap; diff --git a/client/src/components/join.buttons.jsx b/client/src/components/join.buttons.jsx deleted file mode 100644 index c311da5e..00000000 --- a/client/src/components/join.buttons.jsx +++ /dev/null @@ -1,46 +0,0 @@ -const preact = require('preact'); -const { connect } = require('preact-redux'); - -const addState = connect( - function receiveState(state) { - const { ws } = state; - - function sendInstancePractice() { - ws.sendInstancePractice(); - } - - function sendInstanceQueue() { - ws.sendInstanceQueue(); - } - - return { - sendInstanceQueue, - sendInstancePractice, - }; - } -); - -function CreateButtons(args) { - const { - sendInstanceQueue, - sendInstancePractice, - } = args; - - return ( -
-

Join Game

- - -
- ); -} - -module.exports = addState(CreateButtons); diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx deleted file mode 100644 index 26cd07a0..00000000 --- a/client/src/components/list.jsx +++ /dev/null @@ -1,121 +0,0 @@ -const { connect } = require('preact-redux'); -const preact = require('preact'); - -const { stringSort } = require('./../utils'); -const { ConstructAvatar } = require('./construct'); -const actions = require('./../actions'); -const JoinButtons = require('./join.buttons'); -const Inventory = require('./inventory'); - -const idSort = stringSort('id'); - -const addState = connect( - function receiveState(state) { - const { - ws, - constructs, - constructRename, - team, - mtxActive, - } = state; - - function sendInstancePractice() { - return ws.sendInstancePractice(); - } - - function sendConstructAvatarReroll(id) { - console.log('using', mtxActive, 'on', id); - return ws.sendMtxApply(id, mtxActive, ''); - } - - function sendConstructRename(id, name) { - ws.sendMtxApply(id, 'Rename', name); - } - - return { - constructs, - mtxActive, - constructRename, - team, - sendConstructRename, - sendInstancePractice, - sendConstructAvatarReroll, - }; - }, - - function receiveDispatch(dispatch) { - function setConstructRename(id) { - dispatch(actions.setConstructRename(id)); - } - - function clearMtxRename() { - dispatch(actions.setConstructRename(null)); - dispatch(actions.setMtxActive(null)); - } - - return { - clearMtxRename, - setConstructRename, - }; - } - -); - -function List(args) { - const { - team, - constructRename, - clearMtxRename, - setConstructRename, - sendConstructRename, - mtxActive, - sendConstructAvatarReroll, - } = args; - - const constructPanels = team - .map(construct => { - const constructName = constructRename === construct.id - ? - :

{construct.name}

; - - const confirm = constructRename === construct.id - ? - : false; - - const cancel = constructRename === construct.id - ? - : false; - return ( -
{ - if (!mtxActive) return false; - if (mtxActive === 'Rename') return setConstructRename(construct.id); - return sendConstructAvatarReroll(construct.id); - }} - class="menu-construct" > - - {constructName} - {confirm} - {cancel} -
- ); - }); - - return ( -
-
- {constructPanels} -
- - -
- ); -} - -module.exports = addState(List); diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx index 35782efb..1bfd2c16 100644 --- a/client/src/components/main.jsx +++ b/client/src/components/main.jsx @@ -6,7 +6,7 @@ const Login = require('./login'); const Game = require('./game'); const Instance = require('./instance.component'); const Team = require('./team'); -const List = require('./list'); +const Play = require('./play'); const addState = connect( state => { @@ -27,6 +27,8 @@ function Main(props) { return ; } + if (nav === 'play') return ; + if (game) { return ; } @@ -36,10 +38,9 @@ function Main(props) { } if (nav === 'team') return ; - if (nav === 'list') return ; return ( -
+ ); } diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx index 27421a4f..ba8f7f8e 100644 --- a/client/src/components/nav.jsx +++ b/client/src/components/nav.jsx @@ -95,7 +95,7 @@ function Nav(args) {

mnml.gg

- +
{joined} diff --git a/client/src/events.jsx b/client/src/events.jsx index abe1b065..a6718ee1 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -18,19 +18,7 @@ function registerEvents(store) { } function setConstructList(constructs) { - // check team is in list - const { team } = store.getState(); - const ids = constructs.map(c => c.id); - - // team is fucked up, or just registered - // reset to the first 3 constructs - if (!team.every(t => t && ids.includes(t))) { - setTeam([ids[0], ids[1], ids[2]]); - } - store.dispatch(actions.setConstructs(constructs)); - // Now that constructs have been set we can switch to list - setNav('list'); } function setNewConstruct(construct) {