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