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

wip

Browse Source
This commit is contained in:
ntr 2019-05-06 18:58:38 +10:00
parent 748f36fa08
commit f658290566
9 changed files with 33 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/actions.jsx
View File

@ -25,8 +25,8 @@ export const setGame = value => ({ type: SET_GAME, value });
export const SET_RESOLUTION = 'SET_RESOLUTION';
export const setResolution = value => ({ type: SET_RESOLUTION, value });
export const SET_SHOW_LOG = 'SET_SHOW_LOG';
export const setShowLog = value => ({ type: SET_SHOW_LOG, value });
export const SET_SHOW_ALT = 'SET_SHOW_ALT';
export const setShowAlt = value => ({ type: SET_SHOW_ALT, value });
export const SET_COMBINER = 'SET_COMBINER';
export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) });

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

@ -21,20 +21,20 @@ function GamePanel(props) {
sendGameReady,
activeCryp,
account,
showLog,
showAlt,
toggleLog,
quit,
} = props;
if (!game) return <div>...</div>;
if (showLog) {
if (showAlt) {
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
return (
<main className="game">
<div className="instance-hdr">
<button
className="game-btn instance-btn instance-ui-btn left"
onClick={() => toggleLog(!showLog)}>
onClick={() => toggleLog(!showAlt)}>
Game
</button>
<div className="spacer">
@ -62,7 +62,7 @@ function GamePanel(props) {
</button>
<button
className="game-btn instance-btn instance-ui-btn left"
onClick={() => toggleLog(!showLog)}>
onClick={() => toggleLog(!showAlt)}>
Log
</button>
<div className="spacer">

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

@ -11,7 +11,7 @@ const addState = connect(
game,
account,
resolution,
showLog,
showAlt,
activeSkill,
activeCryp,
} = state;
@ -39,7 +39,7 @@ const addState = connect(
return {
game,
showLog,
showAlt,
account,
resolution,
activeSkill,
@ -66,7 +66,7 @@ const addState = connect(
}
function toggleLog(v) {
dispatch(actions.setShowLog(v));
dispatch(actions.setShowAlt(v));
}

1
client/src/components/info.container.jsx
View File

@ -37,7 +37,6 @@ const addState = connect(
dispatch(actions.setActiveVar(value));
}
return {
setInfo,
setActiveVar,

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

@ -9,31 +9,22 @@ function InstanceComponent(args) {
instance,
player,
quit,
// clearInfo,
sendInstanceReady,
activeVar,
activeCryp,
setActiveVar,
setActiveCryp,
showAlt,
toggleAlt,
} = args;
if (!instance) return <div>...</div>;
function showVbox(e) {
setActiveVar(null);
setActiveCryp(null);
e.stopPropagation();
}
function showTeam(e) {
setActiveCryp(player.cryps[0]);
function swapPane(e) {
toggleAlt(!showAlt);
e.stopPropagation();
}
const vboxBtn = (
<button
className="instance-btn instance-ui-btn nav-btn left"
onClick={showVbox}>
onClick={swapPane}>
vBox
</button>
);
@ -41,14 +32,12 @@ function InstanceComponent(args) {
const teamBtn = (
<button
className="instance-btn instance-ui-btn nav-btn right"
onClick={showTeam}>
onClick={swapPane}>
team
</button>
);
const infoSelected = activeVar !== null || activeCryp;
const navBtn = infoSelected
const navBtn = showAlt
? vboxBtn
: teamBtn;

10
client/src/components/instance.container.jsx
View File

@ -6,7 +6,7 @@ const Instance = require('./instance.component');
const addState = connect(
function receiveState(state) {
const { ws, instance, player, account, activeVar, activeCryp } = state;
const { ws, instance, player, account, activeVar, showAlt } = state;
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
@ -16,7 +16,7 @@ const addState = connect(
return ws.sendVboxApply(instance.id, crypId, i);
}
return { instance, player, account, sendInstanceReady, sendVboxApply, activeVar, activeCryp };
return { instance, player, account, sendInstanceReady, sendVboxApply, activeVar, showAlt };
},
function receiveDispatch(dispatch) {
@ -28,8 +28,8 @@ const addState = connect(
dispatch(actions.setInfo([item, value]));
}
function setActiveVar(value) {
dispatch(actions.setActiveVar(value));
function toggleAlt(v) {
dispatch(actions.setShowAlt(v));
}
function setActiveCryp(value) {
@ -40,7 +40,7 @@ const addState = connect(
return dispatch(actions.setInfo([]));
}
return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
return { quit, clearInfo, setInfo, toggleAlt, setActiveCryp };
}
);

46
client/src/components/instance.cryps.jsx
View File

@ -8,7 +8,7 @@ const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const { ws, instance, player, account, activeVar, activeCryp } = state;
const { ws, instance, player, account } = state;
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
@ -18,7 +18,7 @@ const addState = connect(
return ws.sendVboxApply(instance.id, crypId, i);
}
return { instance, player, account, sendInstanceReady, sendVboxApply, activeVar, activeCryp };
return { instance, player, account, sendInstanceReady, sendVboxApply };
},
function receiveDispatch(dispatch) {
@ -30,10 +30,6 @@ const addState = connect(
dispatch(actions.setInfo([item, value]));
}
function setActiveVar(value) {
dispatch(actions.setActiveVar(value));
}
function setActiveCryp(value) {
dispatch(actions.setActiveCryp(value));
}
@ -42,7 +38,7 @@ const addState = connect(
return dispatch(actions.setInfo([]));
}
return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
return { quit, clearInfo, setInfo, setActiveCryp };
}
);
@ -50,9 +46,7 @@ const addState = connect(
function Cryp(props) {
const {
cryp,
sendVboxApply,
setInfo,
activeVar,
setActiveCryp,
} = props;
@ -73,25 +67,9 @@ function Cryp(props) {
return <button key={i} className={classes} onClick={skillClick} >{s}</button>;
});
// needed for ondrop to fire
function onDragOver(e) {
e.preventDefault();
return false;
}
function onDrop(e) {
e.stopPropagation();
e.preventDefault();
const item = parseInt(e.dataTransfer.getData('text'), 10);
return sendVboxApply(cryp.id, item);
}
function onClick(e) {
e.stopPropagation();
e.preventDefault();
if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
setInfo(null);
return setActiveCryp(cryp);
}
@ -101,7 +79,7 @@ function Cryp(props) {
function blankSpecClick(e) {
e.stopPropagation();
setActiveCryp(cryp);
setInfo('highlight', 'spec')
setInfo('highlight', 'spec');
}
if (!s) {
@ -142,12 +120,7 @@ function Cryp(props) {
// const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return (
<div
key={cryp.id}
className="instance-cryp"
onDragOver={onDragOver}
onDrop={onDrop}
>
<div key={cryp.id} className="instance-cryp" >
<div className="instance-cryp-top">
<figure className="img" onClick={onClick}>
{crypAvatar(cryp.name)}
@ -168,8 +141,6 @@ function InstanceCryps(props) {
const {
player,
instance,
activeCryp,
activeVar,
// clearInfo,
setInfo,
@ -181,15 +152,12 @@ function InstanceCryps(props) {
if (!player) return false;
if (instance.phase === 'Lobby') return false;
const infoSelected = activeVar !== null || activeCryp;
const crypListClass = `cryp-list`;
const cryps = player.cryps.map((c, i) => Cryp({
cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
cryp: c, sendVboxApply, setInfo, setActiveCryp,
}));
return (
<div className={crypListClass} onClick={() => setActiveCryp(null)}>
<div className="cryp-list" onClick={() => setActiveCryp(null)}>
{cryps}
</div>
);

2
client/src/main.jsx
View File

@ -27,7 +27,7 @@ const store = createStoreWithMiddleware(
cryps: reducers.crypsReducer,
game: reducers.gameReducer,
resolution: reducers.resolutionReducer,
showLog: reducers.showLogReducer,
showAlt: reducers.showAltReducer,
info: reducers.infoReducer,
vboxInfo: reducers.vboxInfoReducer,
instance: reducers.instanceReducer,

8
client/src/reducers.jsx
View File

@ -140,10 +140,10 @@ function resolutionReducer(state = defaultResolution, action) {
}
}
const defaultShowLog = false;
function showLogReducer(state = defaultShowLog, action) {
const defaultShowAlt = false;
function showAltReducer(state = defaultShowAlt, action) {
switch (action.type) {
case actions.SET_SHOW_LOG:
case actions.SET_SHOW_ALT:
return action.value;
default:
return state;
@ -188,7 +188,7 @@ module.exports = {
combinerReducer,
crypsReducer,
gameReducer,
showLogReducer,
showAltReducer,
instanceReducer,
instancesReducer,
playerReducer,