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-07-07 23:31:12 +10:00
parent e45f28e4ea
commit e224f57ea0
12 changed files with 181 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
WORKLOG.md
View File

@ -41,6 +41,8 @@
*CLIENT*
theme toasts
mobile info page
rework link

47
client/assets/styles/styles.css
View File

@ -455,37 +455,45 @@ header {
}
.inventory {
display: flex;
flex-flow: row wrap;
margin-right: 2em;
grid-area: inventory;
}
.inventory h2 {
flex: 1 0 100%;
.inventory .list {
letter-spacing: 0.25em;
text-transform: uppercase;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
flex-flow: row wrap;
align-items: flex-end;
}
.inventory figure {
flex: 0 0 10%;
font-size: 125%;
display: flex;
flex-flow: column;
margin: 0.5em 1em;
}
/* heading included */
.inventory figure:nth-child(3) {
margin-right: 2em;
}
.inventory figure div {
}
.menu-instances {
display: flex;
flex-flow: column;
height: 100%;
display: grid;
grid-template-rows: minmax(min-content, 2fr) 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"constructs constructs"
"inventory games";
}
.menu-instances .construct-list {
flex: 1;
grid-area: constructs;
/* poor man's <hr>*/
padding-bottom: 2em;
margin-bottom: 2em;
border-bottom: 0.1em solid whitesmoke;
}
.menu-instances .menu-construct {
@ -493,6 +501,7 @@ header {
}
.menu-instance-list {
grid-area: games;
flex: 1;
order: 99;
flex-flow: row wrap;
@ -650,4 +659,4 @@ footer button .ready {
.mobile-title {
display: none;
}
}

10
client/assets/styles/styles.mobile.css
View File

@ -57,4 +57,14 @@
display: block;
margin-bottom: 1em;
}
.menu-instances {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"constructs"
"inventory"
"games";
}
}

37
client/src/actions.jsx
View File

@ -1,26 +1,27 @@
export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value });
export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
export const setSkip = value => ({ type: 'SET_SKIP', value });
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
export const setInstances = value => ({ type: 'SET_INSTANCES', value });
export const setNav = value => ({ type: 'SET_NAV', value });
export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
export const setInstance = value => ({ type: 'SET_INSTANCE', value });
export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
export const setPing = value => ({ type: 'SET_PING', value });
export const setPlayer = value => ({ type: 'SET_PLAYER', value });
export const setGame = value => ({ type: 'SET_GAME', value });
export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value });
export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
export const setGame = value => ({ type: 'SET_GAME', value });
export const setInfo = value => ({ type: 'SET_INFO', value });
export const setInstance = value => ({ type: 'SET_INSTANCE', value });
export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
export const setInstances = value => ({ type: 'SET_INSTANCES', value });
export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value });
export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value });
export const setNav = value => ({ type: 'SET_NAV', value });
export const setPing = value => ({ type: 'SET_PING', value });
export const setPlayer = value => ({ type: 'SET_PLAYER', value });
export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });
export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
export const setSkip = value => ({ type: 'SET_SKIP', value });
export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
export const setWs = value => ({ type: 'SET_WS', value });

2
client/src/components/account.status.jsx
View File

@ -51,7 +51,7 @@ function BitsBtn(args) {
onClick={bitsClick}
class="stripe-btn"
role="link">
Get Bits
Get Credits
</button>
</div>

60
client/src/components/inventory.jsx Normal file
View File

@ -0,0 +1,60 @@
const { connect } = require('preact-redux');
const preact = require('preact');
const actions = require('./../actions');
const addState = connect(
function receiveState(state) {
const {
// ws,
account,
} = state;
return {
account,
};
},
function receiveDispatch(dispatch) {
function setMtxActive(mtx) {
dispatch(actions.setMtxActive(mtx));
}
return {
setMtxActive,
};
}
);
function Inventory(args) {
const {
account,
setMtxActive,
} = args;
return (
<div class="inventory">
<h1>¤ {account.credits}</h1>
<div class='list'>
<figure onClick={() => setMtxActive('Reimage')} >
<figcaption>Reimage</figcaption>
<button>¤1</button>
</figure>
<figure onClick={() => setMtxActive('Rename')} >
<figcaption>Rename</figcaption>
<button>¤1</button>
</figure>
<figure>
<figcaption>Invader Architecture</figcaption>
<button>∞</button>
</figure>
<figure>
<figcaption>Molecular Architecture</figcaption>
<button>∞</button>
</figure>
</div>
</div>
);
}
module.exports = addState(Inventory);

30
client/src/components/list.footer.jsx
View File

@ -25,22 +25,24 @@ const addState = connect(
);
function ListFooter(args) {
const {
showNav,
return false;
navToTeam,
setShowNav,
} = args;
// const {
// showNav,
return (
<footer>
<button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
<button
onClick={() => navToTeam()}>
Back
</button>
</footer>
);
// navToTeam,
// setShowNav,
// } = args;
// return (
// <footer>
// <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
// <button
// onClick={() => navToTeam()}>
// Back
// </button>
// </footer>
// );
}
module.exports = addState(ListFooter);

53
client/src/components/list.jsx
View File

@ -5,12 +5,20 @@ const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
const { ConstructAvatar } = require('./construct');
const actions = require('./../actions');
const InstanceCreateForm = require('./instance.create.buttons');
const Inventory = require('./inventory');
const idSort = stringSort('id');
const addState = connect(
function receiveState(state) {
const { ws, constructs, team, instanceList, account } = state;
const {
ws,
constructs,
team,
instanceList,
account,
mtxActive,
} = state;
function sendInstanceJoin(instance) {
if (team.length) {
@ -27,6 +35,12 @@ const addState = connect(
return ws.sendInstanceList();
}
function selectConstruct(id) {
if (!mtxActive) return false;
console.log('using', mtxActive, 'on', id);
ws.sendMtxApply(id, mtxActive);
}
return {
account,
constructs,
@ -35,18 +49,11 @@ const addState = connect(
sendInstanceState,
sendInstanceList,
instanceList,
mtxActive,
selectConstruct
};
},
function receiveDispatch(dispatch) {
function editConstruct(id) {
dispatch(actions.setConstructEditId(id));
}
return {
editConstruct,
};
}
);
function List(args) {
@ -59,7 +66,8 @@ function List(args) {
sendInstanceList,
instanceList,
editConstruct,
mtxActive,
selectConstruct,
} = args;
function listElements() {
@ -81,6 +89,7 @@ function List(args) {
return (
<div class="menu-instance-list" >
<h1>Join Game</h1>
<table>
<thead>
<tr>
@ -109,7 +118,8 @@ function List(args) {
.map(construct =>
<div
key={construct.id}
// onClick={() => editConstruct(construct.id)}
style={ mtxActive ? { cursor: 'pointer' } : {}}
onClick={() => selectConstruct(construct.id)}
class="menu-construct" >
<ConstructAvatar
name={construct.name}
@ -124,22 +134,7 @@ function List(args) {
<div class="construct-list">
{constructPanels}
</div>
<hr />
<div class="inventory">
<h2>Inventory</h2>
<figure>
<figcaption>Reimage</figcaption>
<button>¤1</button>
</figure>
<figure>
<figcaption>Rename</figcaption>
<button>¤1</button>
</figure>
<figure>
<figcaption>Invader Architecture</figcaption>
<button>∞</button>
</figure>
</div>
<Inventory />
{listElements()}
</main>
);

17
client/src/events.jsx
View File

@ -110,6 +110,10 @@ function registerEvents(store) {
store.dispatch(actions.setCombiner([null, null, null]));
}
function clearMtxActive() {
store.dispatch(actions.setMtxActive(null));
}
function setActiveSkill(skill) {
store.dispatch(actions.setActiveSkill(skill));
}
@ -208,21 +212,22 @@ function registerEvents(store) {
}
return {
errorPrompt,
clearCombiner,
clearInfo,
clearInstance,
clearMtxActive,
errorPrompt,
setAccount,
setActiveSkill,
setAccountInstances,
setActiveItem,
setActiveSkill,
setConstructList,
setGame,
clearInfo,
setInstance,
setInstanceList,
setAccountInstances,
setWs,
setPing,
setItemInfo,
setPing,
setWs,
};
}

2
client/src/keyboard.jsx
View File

@ -12,7 +12,7 @@ function setupKeys(store) {
key('esc', () => store.dispatch(actions.setItemEquip(null)));
key('esc', () => store.dispatch(actions.setItemUnequip(null)));
key('esc', () => store.dispatch(actions.setVboxHighlight([])));
key('esc', () => store.dispatch(actions.setConstructDeleteId(null)));
key('esc', () => store.dispatch(actions.setMtxActive(null)));
}
module.exports = setupKeys;

1
client/src/reducers.jsx
View File

@ -26,6 +26,7 @@ module.exports = {
itemEquip: createReducer(null, 'SET_ITEM_EQUIP'),
itemInfo: createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
itemUnequip: createReducer(null, 'SET_ITEM_UNEQUIP'),
mtxActive: createReducer(null, 'SET_MTX_ACTIVE'),
nav: createReducer('team', 'SET_NAV'),
showNav: createReducer(null, 'SET_SHOW_NAV'),
ping: createReducer(null, 'SET_PING'),

10
client/src/socket.jsx
View File

@ -139,6 +139,11 @@ function createSocket(events) {
send({ method: 'instance_ready', params: { instance_id: instanceId } });
}
function sendMtxApply(constructId, mtx) {
send({ method: 'mtx_apply', params: { construct_id: constructId, mtx } });
events.clearMtxActive();
}
// -------------
// Incoming
// -------------
@ -242,12 +247,12 @@ function createSocket(events) {
// decode binary msg from server
const blob = new Uint8Array(event.data);
const res = cbor.decode(blob);
const [msgType, params] = res;
if (res.err) return errHandler(res.err);
const [msgType, params] = res;
if (msgType !== 'Pong') console.log(res);
// check for error and split into response type and data
if (res.err) return errHandler(res.err);
if (!handlers[msgType]) return errorToast(`${msgType} handler missing`);
return handlers[msgType](params);
}
@ -326,6 +331,7 @@ function createSocket(events) {
sendVboxDiscard,
sendVboxUnequip,
sendItemInfo,
sendMtxApply,
startInstanceStateTimeout,
startGameStateTimeout,
connect,