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

more mobile

Browse Source
This commit is contained in:
ntr 2019-04-05 13:49:10 +11:00
parent f3e2ed06a9
commit 312e3f109a
7 changed files with 146 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
client/cryps.css
View File

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

6
client/src/actions.jsx
View File

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

86
client/src/components/game.component.jsx
View File

@ -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,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 (
<button
disabled='true'
key={i}
className='cryp-skill-btn disabled'>
<span>&nbsp;</span>
</button>
);
}
const cdText = cryp.skills[i].cd > 0
? `- ${s.cd}`
: '';
const highlight = activeSkill
? activeSkill.crypId === cryp.id && activeSkill.skill === s
: false;
return (
<button
key={i}
disabled={!!cdText || ko}
className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
type="submit"
onClick={() => setActiveSkill(cryp.id, s.skill)}>
{s.skill} {cdText}
</button>
);
}
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 (
<button
disabled='true'
key={i}
className='cryp-skill-btn disabled'>
<span>&nbsp;</span>
</button>
);
}
const cdText = cryp.skills[i].cd > 0
? `- ${s.cd}`
: '';
const highlight = activeSkill
? activeSkill.crypId === cryp.id && activeSkill.skill === s
: false;
return (
<button
key={i}
disabled={!!cdText || ko}
className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
type="submit"
onClick={() => setActiveSkill(cryp.id, s.skill)}>
{s.skill} {cdText}
</button>
);
});
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>

37
client/src/components/game.container.jsx
View File

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

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

@ -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()}>
@ -193,4 +193,4 @@ function Vbox(args) {
);
}
module.exports = Vbox;
module.exports = Vbox;

1
client/src/main.jsx
View File

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

11
client/src/reducers.jsx
View File

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