diff --git a/client/cryps.css b/client/cryps.css
index 3b3b89b1..2c98ed74 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -529,6 +529,10 @@ header {
flex: 1;
}
+.mobile-skills {
+ display: none;
+}
+
@media (max-width: 1000px) {
.selected-skills {
display: none;
@@ -542,6 +546,23 @@ header {
justify-content: space-between;
}
+ main.game {
+ flex-flow: column-reverse;
+ }
+
+ main.game .instance-hdr {
+ order: 99;
+ }
+
+ .header-username {
+ display: none;
+ }
+
+ .menu-instance-list {
+ order: -1;
+ width: 100%;
+ }
+
.cryps {
font-size: 0.75em;
padding: 0 1em;
@@ -584,11 +605,33 @@ header {
display: none;
}
-
.selected-skills {
display: block;
}
+ .mobile-skills {
+ display: flex;
+ flex-flow: row;
+ width: 100%;
+ }
+
+ .cryp-skill-btn {
+ flex: 1;
+ font-size: 16pt;
+ border-width: 1px;
+ padding: 0;
+ margin: 0;
+ border-bottom-width: 0px;
+ border-left-width: 0px;
+ border-top-width: 1px;
+ border-right-width: 1px;
+ }
+
+ .cryp-skill-btn:first-child {
+ border-top-width: 1px;
+ }
+
+
.cryp-box .stats figure {
padding: 0.2em 0;
}
diff --git a/client/src/actions.jsx b/client/src/actions.jsx
index 0c17da7d..a7d970c7 100644
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@@ -22,12 +22,12 @@ export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(val
export const SET_SELECTED_CRYPS = 'SET_SELECTED_CRYPS';
export const setSelectedCryps = value => ({ type: SET_SELECTED_CRYPS, value: Array.from(value) });
-export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING';
-export const setActiveIncoming = value => ({ type: SET_ACTIVE_INCOMING, value });
-
export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: crypId ? { crypId, skill } : null });
+export const SET_ACTIVE_CRYP = 'SET_ACTIVE_CRYP';
+export const setActiveCryp = value => ({ type: SET_ACTIVE_CRYP, value });
+
export const SET_INFO = 'SET_INFO';
export const setInfo = value => ({ type: SET_INFO, value });
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 19256b3d..d810b55a 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -12,7 +12,9 @@ function GamePanel(props) {
game,
activeSkill,
setActiveSkill,
+ setActiveCryp,
selectSkillTarget,
+ activeCryp,
account,
showLog,
toggleLog,
@@ -42,7 +44,7 @@ function GamePanel(props) {
if (showLog) {
const logs = game.log.map((l, i) => (
{l}
)).reverse();
return (
-
+
{header}
{logs}
@@ -80,41 +82,45 @@ function GamePanel(props) {
);
}
+ function Skill(cryp, i) {
+ const ko = cryp.hp.value === 0 ? 'ko' : '';
+
+ const s = cryp.skills[i];
+ if (!s) {
+ return (
+
+ );
+ }
+
+ const cdText = cryp.skills[i].cd > 0
+ ? `- ${s.cd}`
+ : '';
+
+ const highlight = activeSkill
+ ? activeSkill.crypId === cryp.id && activeSkill.skill === s
+ : false;
+
+ return (
+
+ );
+ }
+
function Cryp(cryp) {
const ko = cryp.hp.value === 0 ? 'ko' : '';
- const skills = range(0, 4).map(i => {
- const s = cryp.skills[i];
- if (!s) {
- return (
-
- );
- }
-
- const cdText = cryp.skills[i].cd > 0
- ? `- ${s.cd}`
- : '';
-
- const highlight = activeSkill
- ? activeSkill.crypId === cryp.id && activeSkill.skill === s
- : false;
-
- return (
-
- );
- });
+ const skills = range(0, 4).map(i => Skill(cryp, i));
const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
@@ -124,10 +130,16 @@ function GamePanel(props) {
));
+ function onClick(e) {
+ e.stopPropagation();
+ return setActiveCryp(cryp);
+ }
+
return (
stackElement(c, i));
+ const mobileSkills = activeCryp
+ ? range(0, 4).map(i => Skill(activeCryp, i))
+ : ();
return (
-
+ setActiveCryp(null)} >
{header}
{PlayerTeam(playerTeam, setActiveSkill)}
+
+ {mobileSkills}
+
{selectedSkills}
diff --git a/client/src/components/game.container.jsx b/client/src/components/game.container.jsx
index 6fc2f45e..d436803e 100644
--- a/client/src/components/game.container.jsx
+++ b/client/src/components/game.container.jsx
@@ -1,17 +1,24 @@
-import 'particles.js/particles';
+// import 'particles.js/particles';
const { connect } = require('preact-redux');
const actions = require('../actions');
const Game = require('./game.component');
-const config = require('./particles.config');
+// const config = require('./particles.config');
-const particlesJS = window.particlesJS;
+// const particlesJS = window.particlesJS;
const addState = connect(
function receiveState(state) {
- const { ws, game, account, showLog, activeSkill, activeIncoming } = state;
+ const {
+ ws,
+ game,
+ account,
+ showLog,
+ activeSkill,
+ activeCryp,
+ } = state;
function selectSkillTarget(targetCrypId) {
if (activeSkill) {
@@ -25,14 +32,14 @@ const addState = connect(
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
}
- function selectIncomingTarget(crypId) {
- if (activeIncoming) {
- return ws.sendGameTarget(game.id, crypId, activeIncoming);
- }
- return false;
- }
-
- return { game, showLog, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
+ return {
+ game,
+ showLog,
+ account,
+ activeSkill,
+ activeCryp,
+ selectSkillTarget,
+ };
},
function receiveDispatch(dispatch) {
@@ -41,8 +48,8 @@ const addState = connect(
// particlesJS(`particles-${crypId}`, config);
}
- function setActiveIncoming(skillId) {
- dispatch(actions.setActiveIncoming(skillId));
+ function setActiveCryp(cryp) {
+ dispatch(actions.setActiveCryp(cryp));
}
function quit() {
@@ -54,7 +61,7 @@ const addState = connect(
}
- return { setActiveSkill, setActiveIncoming, quit, toggleLog };
+ return { setActiveSkill, setActiveCryp, quit, toggleLog };
}
);
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index ecbc26ec..028d4b94 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -35,19 +35,19 @@ function Vbox(args) {
free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
}
- let freeDbl = false;
+ let freeDbl = -1;
function freeClick(e, i, j) {
// touch + double handling
- if (!freeDbl) {
- freeDbl = true;
+ if (freeDbl !== j) {
+ freeDbl = j;
setTimeout(() => {
- freeDbl = false;
+ freeDbl = -1;
if (free[i][j]) setInfo('item', free[i][j]);
}, 300);
return false;
}
e.preventDefault();
- freeDbl = false;
+ freeDbl = -1;
return sendVboxAccept(j, i);
}
@@ -73,16 +73,16 @@ function Vbox(args) {
// INVENTORY
//
// lots of rubbish to make it flow nice
- let boundDbl = false;
+ let boundDbl = -1;
function boundClick(e, i) {
// touch + double handling
- if (!boundDbl) {
- boundDbl = true;
- setTimeout(() => boundDbl = false, 300);
+ if (boundDbl !== i) {
+ boundDbl = i;
+ setTimeout(() => boundDbl = -1, 300);
return false;
}
e.preventDefault();
- boundDbl = false;
+ boundDbl = -1;
// action
if (reclaiming && i) {
@@ -158,7 +158,7 @@ function Vbox(args) {
return (
setReclaiming(false)} >
-
VBOX
+
e.target.scrollIntoView(true)}>VBOX
{vbox.bits}b