ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

swiping pog

Browse Source
This commit is contained in:
ntr 2019-09-24 13:49:34 +10:00
parent b681c9218a
commit 0d3c4374ba
9 changed files with 108 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/assets/styles/instance.mobile.css → client/assets/styles/instance.mobile.less
View File

@ -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 {

2
client/index.js
View File

@ -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');

1
client/package.json
View File

@ -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",

1
client/src/actions.jsx
View File

@ -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 });

58
client/src/components/instance.component.jsx
View File

@ -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,17 +47,17 @@ const addState = connect(
return {
setInfo,
clearItems,
setNavInstance,
};
}
);
function Instance(args) {
class Instance extends Component {
render(args) {
const {
instance,
setInfo,
clearItems,
nav,
} = args;
if (!instance) return false;
@ -57,9 +71,8 @@ function Instance(args) {
clearItems();
}
const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
return (
<main class={instanceClasses} onClick={instanceClick} onMouseOver={() => setInfo(null)} >
<main id="instance" class='instance' onClick={instanceClick} onMouseOver={() => setInfo(null)} >
<Vbox />
<InfoContainer />
<InstanceConstructsContainer />
@ -67,4 +80,35 @@ function Instance(args) {
);
}
componentDidMount() {
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);
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);

20
client/src/components/instance.constructs.jsx
View File

@ -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) {
</div>;
});
const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
return (
<div key={construct.id} class="instance-construct" onClick={onClick} >
<div key={construct.id} class={classes} onClick={onClick} >
<ConstructAvatar construct={construct} />
<h2 class="name" >{construct.name}</h2>
<div class="skills" onMouseOver={e => 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`;

42
client/src/components/instance.footer.jsx
View File

@ -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 (
<footer id="footer">
<button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
</footer>
);
}
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 = (
<button
class={rdyClasses}
onMouseOver={e => hoverInfo(e, readyInfo)}
onClick={() => sendInstanceReady()}>
Ready
</button>
);
function navClick() {
if (nav === 'vbox') return setNav('constructs');
return setNav('vbox');
}
const navBtn = instance.phase === 'InProgress'
? (
<button
id="instance-nav"
onClick={navClick}>
{nav === 'vbox' ? 'Constructs' : 'Vbox'}
</button>
)
: 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 (
<footer id="footer">
{timer}
{navBtn}
{readyBtn}
</footer>
);

7
client/src/components/vbox.component.jsx
View File

@ -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 (
<div class={classes}>
{vboxElement()}

1
client/src/reducers.jsx
View File

@ -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'),