diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.less similarity index 84% rename from client/assets/styles/instance.mobile.css rename to client/assets/styles/instance.mobile.less index acc33451..07c76286 100644 --- a/client/assets/styles/instance.mobile.css +++ b/client/assets/styles/instance.mobile.less @@ -1,3 +1,5 @@ +@import 'colours.less'; + @media (max-width: 800px) { .instance { font-size: 8pt; @@ -7,14 +9,14 @@ grid-template-areas: "vbox" "constructs"; + + .info { + display: none; + } } .instance .nav-btn { display: initial; } - /* Default view */ - .instance .equip { display: none; } - .instance .info { display: none; } - .instance .construct-list { display: none; } .vbox { grid-area: vbox; margin-bottom: 0; @@ -27,6 +29,9 @@ "inventory" "combiner"; + &:not(.visible) { + display: none; + } } .vbox-arrow { @@ -45,24 +50,13 @@ margin: 0; } - /* constructs toggled on */ - .instance.constructs-visible .vbox { - display: none; - } - - .instance.constructs-visible .equip { - display: initial; - grid-area: vbox; - margin: 0; - } - - .instance.constructs-visible .highlight { - display: initial; - } - - .instance.constructs-visible .construct-list { + .construct-list { display: grid; grid-auto-rows: 1fr; + + .instance-construct:not(.visible) { + display: none; + }; } .vbox-inventory { diff --git a/client/index.js b/client/index.js index ae5df689..8ad272c9 100644 --- a/client/index.js +++ b/client/index.js @@ -9,7 +9,7 @@ require('./assets/styles/vbox.less'); require('./assets/styles/game.less'); require('./assets/styles/player.less'); require('./assets/styles/styles.mobile.css'); -require('./assets/styles/instance.mobile.css'); +require('./assets/styles/instance.mobile.less'); // kick it off require('./src/app'); diff --git a/client/package.json b/client/package.json index 51074c78..c0350a08 100644 --- a/client/package.json +++ b/client/package.json @@ -19,6 +19,7 @@ "async": "^2.6.2", "borc": "^2.0.3", "docco": "^0.7.0", + "hammerjs": "^2.0.8", "izitoast": "^1.4.0", "keymaster": "^1.6.2", "linkstate": "^1.1.1", diff --git a/client/src/actions.jsx b/client/src/actions.jsx index ccfadcaa..282d2474 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -27,6 +27,7 @@ export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value }); export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value }); export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value }); export const setNav = value => ({ type: 'SET_NAV', value }); +export const setNavInstance = value => ({ type: 'SET_NAV_INSTANCE', value }); export const setPing = value => ({ type: 'SET_PING', value }); export const setPlayer = value => ({ type: 'SET_PLAYER', value }); export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value }); diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 12f78532..864bf9e2 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -1,6 +1,9 @@ +const { Component } = require('preact'); const preact = require('preact'); const { connect } = require('preact-redux'); +const Hammer = require('hammerjs'); + const Vbox = require('./vbox.component'); const InfoContainer = require('./info.container'); const InstanceConstructsContainer = require('./instance.constructs'); @@ -11,8 +14,14 @@ const actions = require('../actions'); const addState = connect( function receiveState(state) { - const { instance, nav } = state; - return { instance, nav }; + const { instance, + nav, + navInstance, + } = state; + return { instance, + nav, + navInstance, + }; }, function receiveDispatch(dispatch) { @@ -20,6 +29,11 @@ const addState = connect( return dispatch(actions.setInfo(c)); } + function setNavInstance(c) { + return dispatch(actions.setNavInstance(c)); + } + + function clearItems() { dispatch(actions.setCombiner([])); dispatch(actions.setReclaiming(false)); @@ -33,38 +47,68 @@ const addState = connect( return { setInfo, clearItems, + setNavInstance, }; } ); -function Instance(args) { - const { - instance, - setInfo, - clearItems, +class Instance extends Component { + render(args) { + const { + instance, + setInfo, + clearItems, + } = args; - nav, - } = args; + if (!instance) return false; - if (!instance) return false; + if (instance.phase !== 'InProgress') { + return ; + } - if (instance.phase !== 'InProgress') { - return ; + function instanceClick(e) { + e.stopPropagation(); + clearItems(); + } + + return ( +
setInfo(null)} > + + + +
+ ); } - function instanceClick(e) { - e.stopPropagation(); - clearItems(); + componentDidMount() { + this.bindSwipes(); } - const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`; - return ( -
setInfo(null)} > - - - -
- ); + bindSwipes() { + const instance = document.getElementById('instance'); + if (!instance) return setTimeout(this.bindSwipes, 50); + if (this.h) this.h.destroy(); + this.h = new Hammer(instance); + const display = ['vbox', 'c0', 'c1', 'c2']; + + this.h.on('swiperight', () => { + const { + navInstance, + setNavInstance, + } = this.props; + setNavInstance(navInstance === 0 ? 3 : navInstance - 1); + }); + + this.h.on('swipeleft', () => { + const { + navInstance, + setNavInstance, + } = this.props; + setNavInstance((navInstance + 1) % 4); + }); + + return true; + } } module.exports = addState(Instance); diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 9afd9cc5..fce829f5 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -9,7 +9,16 @@ const actions = require('../actions'); const addState = connect( function receiveState(state) { - const { ws, instance, player, account, itemInfo, itemEquip, activeConstruct } = state; + const { + ws, + instance, + player, + account, + itemInfo, + itemEquip, + activeConstruct, + navInstance, + } = state; function sendVboxApply(constructId, i) { return ws.sendVboxApply(instance.id, constructId, i); @@ -26,6 +35,7 @@ const addState = connect( sendVboxApply, itemInfo, itemEquip, + navInstance, activeConstruct, sendUnequip, }; @@ -63,7 +73,6 @@ const addState = connect( function Construct(props) { const { - activeConstruct, itemEquip, construct, player, @@ -74,6 +83,7 @@ function Construct(props) { itemInfo, setInfo, sendUnequip, + mobileVisible, } = props; function onClick(e) { @@ -191,8 +201,10 @@ function Construct(props) { ; }); + const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`; + return ( -
+

{construct.name}

hoverInfo(e, 'constructSkills')} > @@ -224,6 +236,7 @@ function InstanceConstructs(props) { setItemUnequip, setItemEquip, sendUnequip, + navInstance, } = props; if (!player) return false; @@ -242,6 +255,7 @@ function InstanceConstructs(props) { itemInfo, setVboxHighlight, sendUnequip, + mobileVisible: navInstance === i + 1, })); const classes = `construct-list`; diff --git a/client/src/components/instance.footer.jsx b/client/src/components/instance.footer.jsx index 4a01e943..82e01681 100644 --- a/client/src/components/instance.footer.jsx +++ b/client/src/components/instance.footer.jsx @@ -15,16 +15,11 @@ const addState = connect( }, function receiveDispatch(dispatch) { - function setInfo(c) { - return dispatch(actions.setInfo(c)); - } - function setNav(v) { return dispatch(actions.setNav(v)); } return { - setInfo, setNav, }; } @@ -34,29 +29,11 @@ function Instance(args) { const { instance, player, - nav, - showNav, - - setInfo, - setNav, sendInstanceReady, } = args; - if (!instance || !player) { - return ( -
- -
- ); - } - - function hoverInfo(e, info) { - e.stopPropagation(); - return setInfo(info); - } - - const rdyClasses = `${player.ready ? 'ready ready-btn' : 'ready-btn'}`; + const rdyClasses = `ready-btn ready`; const readyInfo = instance.phase === 'Lobby' ? 'lobbyReady' : 'ready'; @@ -64,27 +41,11 @@ function Instance(args) { 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); @@ -112,7 +73,6 @@ function Instance(args) { return (
{timer} - {navBtn} {readyBtn}
); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index e659ee72..53c03819 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -17,6 +17,7 @@ const addState = connect( vboxSelected, itemInfo, itemUnequip, + navInstance, } = state; function sendVboxDiscard() { @@ -51,7 +52,8 @@ const addState = connect( vboxSelected, itemInfo, itemUnequip, - sendItemUnequip + sendItemUnequip, + navInstance, }; }, @@ -90,6 +92,7 @@ const addState = connect( function Vbox(args) { const { combiner, + navInstance, // instance, itemInfo, player, @@ -348,7 +351,7 @@ function Vbox(args) { return setInfo(info); } - const classes = 'vbox'; + const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`; return (
{vboxElement()} diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 349d6e91..588caa53 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -40,6 +40,7 @@ module.exports = { itemUnequip: createReducer([], 'SET_ITEM_UNEQUIP'), mtxActive: createReducer(null, 'SET_MTX_ACTIVE'), nav: createReducer(null, 'SET_NAV'), + navInstance: createReducer(0, 'SET_NAV_INSTANCE'), showNav: createReducer(null, 'SET_SHOW_NAV'), ping: createReducer(null, 'SET_PING'), player: createReducer(null, 'SET_PLAYER'),