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 SET_RESOLUTION = 'SET_RESOLUTION';
export const setResolution = value => ({ type: SET_RESOLUTION, value }); export const setResolution = value => ({ type: SET_RESOLUTION, value });
export const SET_SHOW_LOG = 'SET_SHOW_LOG'; export const SET_SHOW_ALT = 'SET_SHOW_ALT';
export const setShowLog = value => ({ type: SET_SHOW_LOG, value }); export const setShowAlt = value => ({ type: SET_SHOW_ALT, value });
export const SET_COMBINER = 'SET_COMBINER'; export const SET_COMBINER = 'SET_COMBINER';
export const setCombiner = value => ({ type: SET_COMBINER, value: Array.from(value) }); 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, sendGameReady,
activeCryp, activeCryp,
account, account,
showLog, showAlt,
toggleLog, toggleLog,
quit, quit,
} = props; } = props;
if (!game) return <div>...</div>; if (!game) return <div>...</div>;
if (showLog) { if (showAlt) {
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse(); const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
return ( return (
<main className="game"> <main className="game">
<div className="instance-hdr"> <div className="instance-hdr">
<button <button
className="game-btn instance-btn instance-ui-btn left" className="game-btn instance-btn instance-ui-btn left"
onClick={() => toggleLog(!showLog)}> onClick={() => toggleLog(!showAlt)}>
Game Game
</button> </button>
<div className="spacer"> <div className="spacer">
@ -62,7 +62,7 @@ function GamePanel(props) {
</button> </button>
<button <button
className="game-btn instance-btn instance-ui-btn left" className="game-btn instance-btn instance-ui-btn left"
onClick={() => toggleLog(!showLog)}> onClick={() => toggleLog(!showAlt)}>
Log Log
</button> </button>
<div className="spacer"> <div className="spacer">

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

@ -11,7 +11,7 @@ const addState = connect(
game, game,
account, account,
resolution, resolution,
showLog, showAlt,
activeSkill, activeSkill,
activeCryp, activeCryp,
} = state; } = state;
@ -39,7 +39,7 @@ const addState = connect(
return { return {
game, game,
showLog, showAlt,
account, account,
resolution, resolution,
activeSkill, activeSkill,
@ -66,7 +66,7 @@ const addState = connect(
} }
function toggleLog(v) { 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)); dispatch(actions.setActiveVar(value));
} }
return { return {
setInfo, setInfo,
setActiveVar, setActiveVar,

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

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

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

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

2
client/src/main.jsx
View File

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

8
client/src/reducers.jsx
View File

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