more mobile
This commit is contained in:
ntr
parent
f3e2ed06a9
commit
312e3f109a
@ -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;
|
||||
}
|
||||
|
||||
@ -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 });
|
||||
|
||||
|
||||
@ -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) => (<div key={i}>{l}</div>)).reverse();
|
||||
return (
|
||||
<main>
|
||||
<main className="game">
|
||||
{header}
|
||||
<div className="logs">
|
||||
{logs}
|
||||
@ -80,10 +82,9 @@ function GamePanel(props) {
|
||||
);
|
||||
}
|
||||
|
||||
function Cryp(cryp) {
|
||||
function Skill(cryp, i) {
|
||||
const ko = cryp.hp.value === 0 ? 'ko' : '';
|
||||
|
||||
const skills = range(0, 4).map(i => {
|
||||
const s = cryp.skills[i];
|
||||
if (!s) {
|
||||
return (
|
||||
@ -114,7 +115,12 @@ function GamePanel(props) {
|
||||
{s.skill} {cdText}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function Cryp(cryp) {
|
||||
const ko = cryp.hp.value === 0 ? 'ko' : '';
|
||||
|
||||
const skills = range(0, 4).map(i => Skill(cryp, i));
|
||||
|
||||
const stats = [STATS.hp, STATS.redShield, STATS.blueShield].map((s, j) => (
|
||||
<figure key={j} alt={s.stat}>
|
||||
@ -124,10 +130,16 @@ function GamePanel(props) {
|
||||
));
|
||||
|
||||
|
||||
function onClick(e) {
|
||||
e.stopPropagation();
|
||||
return setActiveCryp(cryp);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cryp.id}
|
||||
style={ activeSkill ? { cursor: 'pointer' } : {}}
|
||||
onClick={onClick}
|
||||
className={`cryp-box ${ko}`} >
|
||||
<div className="cryp-box-top">
|
||||
<figure
|
||||
@ -196,11 +208,17 @@ function GamePanel(props) {
|
||||
|
||||
const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
|
||||
|
||||
const mobileSkills = activeCryp
|
||||
? range(0, 4).map(i => Skill(activeCryp, i))
|
||||
: (<div/>);
|
||||
|
||||
return (
|
||||
<main>
|
||||
<main className="game" onClick={() => setActiveCryp(null)} >
|
||||
{header}
|
||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
||||
<div className="mobile-skills">
|
||||
{mobileSkills}
|
||||
</div>
|
||||
<div className="selected-skills">
|
||||
{selectedSkills}
|
||||
</div>
|
||||
|
||||
@ -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 };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
<div className="vbox" onClick={() => setReclaiming(false)} >
|
||||
<div className="vbox-hdr">
|
||||
<div>VBOX</div>
|
||||
<div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div>
|
||||
<div className="bits" >{vbox.bits}b</div>
|
||||
</div>
|
||||
<button
|
||||
@ -182,7 +182,7 @@ function Vbox(args) {
|
||||
{boundRows}
|
||||
</tbody>
|
||||
</table>
|
||||
<span>I-COMBINATOR</span>
|
||||
<span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span>
|
||||
<button
|
||||
className="instance-btn instance-ui-btn vbox-btn"
|
||||
onClick={() => sendVboxCombine()}>
|
||||
|
||||
@ -18,6 +18,7 @@ const store = createStore(
|
||||
combineReducers({
|
||||
account: reducers.accountReducer,
|
||||
activeSkill: reducers.activeSkillReducer,
|
||||
activeCryp: reducers.activeCrypReducer,
|
||||
combiner: reducers.combinerReducer,
|
||||
cryps: reducers.crypsReducer,
|
||||
game: reducers.gameReducer,
|
||||
|
||||
@ -20,6 +20,16 @@ function activeSkillReducer(state = defaultActiveSkill, action) {
|
||||
}
|
||||
}
|
||||
|
||||
const defaultActiveCryp = null;
|
||||
function activeCrypReducer(state = defaultActiveCryp, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_ACTIVE_CRYP:
|
||||
return action.value;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const defaultCryps = null;
|
||||
function crypsReducer(state = defaultCryps, action) {
|
||||
switch (action.type) {
|
||||
@ -123,6 +133,7 @@ function infoReducer(state = defaultInfo, action) {
|
||||
module.exports = {
|
||||
accountReducer,
|
||||
activeSkillReducer,
|
||||
activeCrypReducer,
|
||||
combinerReducer,
|
||||
crypsReducer,
|
||||
gameReducer,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user