diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index fb57f694..14b4a3d5 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -1,4 +1,4 @@ -@media (max-width: 800px) { +@media (max-width: 1000px) { body { overflow-y: initial; } diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 4b9d11ac..e42d349c 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -36,12 +36,10 @@ 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 }); export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value }); -export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value }); export const setSkip = value => ({ type: 'SET_SKIP', value }); export const setShop = value => ({ type: 'SET_SHOP', value }); export const setSubscription = value => ({ type: 'SET_SUBSCRIPTION', value }); diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx index 45dcf71d..494015ef 100644 --- a/client/src/components/demo.jsx +++ b/client/src/components/demo.jsx @@ -84,7 +84,7 @@ function Demo(args) { function inventoryElement() { return ( -
+

VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()} @@ -117,7 +117,7 @@ function Demo(args) { : 'empty gray'; const constructEl = c => ( -
+

{c.name}

diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index b5e98674..23b0148a 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -1,9 +1,6 @@ -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'); @@ -16,12 +13,10 @@ const addState = connect( const { instance, nav, - navInstance, } = state; return { instance, nav, - navInstance, }; }, @@ -30,10 +25,6 @@ const addState = connect( return dispatch(actions.setInfo(c)); } - function setNavInstance(c) { - return dispatch(actions.setNavInstance(c)); - } - function clearItems() { dispatch(actions.setCombiner([])); @@ -48,80 +39,38 @@ const addState = connect( return { setInfo, clearItems, - setNavInstance, }; } ); -class Instance extends Component { - shouldComponentUpdate(newProps) { - if (newProps.instance !== this.props.instance) return true; - return false; +function Instance(args) { + const { + instance, + clearItems, + } = args; + + if (!instance) return false; + + if (instance.phase !== 'InProgress') { + return ; } - render(args) { - const { - instance, - clearItems, - } = args; - - if (!instance) return false; - - if (instance.phase !== 'InProgress') { - return ; - } - - function instanceClick(e) { - e.stopPropagation(); - clearItems(); - } - - function onTouchMove(e) { - e.preventDefault(); - } - - return ( -
- - - -
- ); + function instanceClick(e) { + e.stopPropagation(); + clearItems(); } - componentDidMount() { - if (!this.h) this.bindSwipes(); + function onTouchMove(e) { + e.preventDefault(); } - componentDidUpdate() { - if (!this.h) this.bindSwipes(); - } - - bindSwipes() { - const instance = document.getElementById('instance'); - if (!instance) { - return setTimeout(this.bindSwipes, 50); - } - if (this.h) this.h.destroy(); - this.h = new Hammer(instance); - 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; - } + return ( +
+ + + +
+ ); } module.exports = addState(Instance); diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 1e010061..5168df19 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -1,5 +1,6 @@ const { connect } = require('preact-redux'); const preact = require('preact'); + const range = require('lodash/range'); const buttons = require('./buttons'); @@ -19,7 +20,6 @@ const addState = connect( account, itemInfo, itemEquip, - navInstance, tutorial, } = state; @@ -38,7 +38,6 @@ const addState = connect( sendVboxApply, itemInfo, itemEquip, - navInstance, sendUnequip, tutorial, }; @@ -77,7 +76,6 @@ function Construct(props) { iter, itemEquip, instance, - mobileVisible, player, tutorial, // Static Info @@ -220,7 +218,7 @@ function Construct(props) {
; }); - const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`; + const classes = `instance-construct`; const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`); return (
@@ -243,7 +241,6 @@ class InstanceConstructs extends preact.Component { shouldComponentUpdate(newProps) { if (newProps.itemEquip !== this.props.itemEquip) return true; if (newProps.tutorial !== this.props.tutorial) return true; - if (newProps.navInstance !== this.props.navInstance) return true; // JSON or Array objects if (newProps.player !== this.props.player) return true; if (newProps.instance !== this.props.instance) return true; @@ -255,7 +252,6 @@ class InstanceConstructs extends preact.Component { // Changing state variables itemEquip, instance, - navInstance, player, tutorial, // Static data @@ -274,7 +270,7 @@ class InstanceConstructs extends preact.Component { if (instance.phase === 'Lobby') return false; const constructs = range(0, 3).map(i => { - const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i); + const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, i); if (tutorialConstruct) return (tutorialConstruct); return Construct({ @@ -292,7 +288,6 @@ class InstanceConstructs extends preact.Component { setVboxHighlight, sendUnequip, tutorial, - mobileVisible: navInstance === i + 1, }); }); diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx index 60dad587..17d3203f 100644 --- a/client/src/components/mnml.jsx +++ b/client/src/components/mnml.jsx @@ -10,21 +10,14 @@ const addState = connect( state => ({ showNav: state.showNav }) ); -class Mnml extends preact.Component { - shouldComponentUpdate(newProps) { - if (newProps.showNav !== this.props.showNav) return true; - return false; - } - - render(args) { - return ( -
-
- -
-
- ); - } +function Mnml(args) { + return ( +
+
+ +
+
+ ); } module.exports = addState(Mnml); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index c2c1a51a..366f87af 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -20,7 +20,6 @@ const addState = connect( vboxSelected, itemInfo, itemUnequip, - navInstance, tutorial, } = state; @@ -57,7 +56,6 @@ const addState = connect( itemInfo, itemUnequip, sendItemUnequip, - navInstance, tutorial, }; }, @@ -100,7 +98,6 @@ class Vbox extends preact.Component { if (newProps.combiner !== this.props.combiner) return true; if (newProps.itemUnequip !== this.props.itemUnequip) return true; if (newProps.reclaiming !== this.props.reclaiming) return true; - if (newProps.navInstance !== this.props.navInstance) return true; if (newProps.tutorial !== this.props.tutorial) return true; if (newProps.vboxSelected !== this.props.vboxSelected) return true; if (newProps.player !== this.props.player) return true; @@ -116,7 +113,6 @@ class Vbox extends preact.Component { player, reclaiming, tutorial, - navInstance, vboxSelected, instance, @@ -439,7 +435,7 @@ class Vbox extends preact.Component { return setInfo(newInfo); } - const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`; + const classes = `vbox`; return (
{vboxElement()} diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index d2d06f43..96d8001c 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -45,8 +45,6 @@ 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'), reclaiming: createReducer(false, 'SET_RECLAIMING'), diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx index 1cdf0dfb..ea4ade3e 100644 --- a/client/src/tutorial.utils.jsx +++ b/client/src/tutorial.utils.jsx @@ -1,11 +1,10 @@ const preact = require('preact'); const actions = require('./actions'); -function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) { +function tutorialConstructDisplay(player, instance, tutorial, i) { if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) { if (tutorial <= 2 || (tutorial > 2 && i > 0)) { - const mobileVisible = navInstance === i + 1; - const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`; + const classes = `instance-construct`; return (
); } }