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

gross

Browse Source
This commit is contained in:
ntr
2018-09-23 22:01:20 +10:00
parent f825b26b37
commit d28d3df1ec
9 changed files with 140 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/cryp.container.js
+10 -4
View File
@@ -1,10 +1,16 @@
const { connect } = require('preact-redux');
const InvStats = require('./invstats');
const CrypPanel = require('./cryp.panel');
// Add the incident from state as a property
const addState = connect(
state => ({ cryp: state.cryp })
function receiveState(state) {
const { ws, cryp } = state;
function sendCombatPve() {
return ws.sendCombatPve(cryp.id);
}
return { cryp, sendCombatPve };
}
);
module.exports = addState(InvStats);
module.exports = addState(CrypPanel);
client/src/components/invstats.jsx → client/src/components/cryp.panel.jsx
+26 -20
View File
@@ -1,54 +1,60 @@
const preact = require('preact');
function InvStats({ cryp }) {
function CrypPanel({ cryp, sendCombatPve }) {
if (!cryp) return <div>not ready</div>;
return (
<div className="tile is-ancestor has-text-centered has-background-grey is-dark is-10">
<div className="tile is-6">
<div className="tile is-parent is-vertical is-3">
<article className="tile is-child notification is-success">
<section className="tile is-child notification is-success">
<p>Helm Slot</p>
</article>
<article className="tile is-child notification is-success">
</section>
<section className="tile is-child notification is-success">
<p>Body Armor</p>
</article>
<article className="tile is-child notification is-success">
</section>
<section className="tile is-child notification is-success">
<p>Gloves</p>
</article>
<article className="tile is-child notification is-success">
</section>
<section className="tile is-child notification is-success">
<p>Boots</p>
</article>
</section>
</div>
<div className="tile is-parent is-6">
<article className="tile is-child notification is-info">
<section className="tile is-child notification is-info">
<figure className="image">
<svg width="160" height="160" data-jdenticon-value={cryp.name} />
</figure>
<p className="title">{cryp.name}</p>
<p className="subtitle">The big boy</p>
</article>
</section>
</div>
<div className="tile is-parent is-vertical is-3">
<article className="tile is-child notification is-dark">
<section className="tile is-child notification is-dark">
<p>Weapon</p>
</article>
<article className="tile is-child notification is-dark">
</section>
<section className="tile is-child notification is-dark">
<p>Jewellery</p>
</article>
<article className="tile is-child notification is-dark">
</section>
<section className="tile is-child notification is-dark">
<p>Artifact</p>
</article>
</section>
</div>
</div>
<div className="tile is-parent is-6">
<article className="tile is-child notification has-background-grey is-dark">
<section className="tile is-child notification has-background-grey is-dark">
<p className="title">Stat Area</p>
<p>{JSON.stringify(cryp.def)}</p>
<p>{JSON.stringify(cryp.dmg)}</p>
<p>{JSON.stringify(cryp.hp)}</p>
<p>{JSON.stringify(cryp.stam)}</p>
</article>
<button
className="button is-success"
type="submit"
onClick={() => sendCombatPve()}>
Start PVE
</button>
</section>
</div>
</div>
);
@@ -57,4 +63,4 @@ function InvStats({ cryp }) {
// that gets put into the dom
}
module.exports = InvStats;
module.exports = CrypPanel;
client/src/components/login.container.jsx
+1 -1
View File
@@ -10,7 +10,7 @@ const addState = connect(
}
return { account: state.account, submitLogin };
},
}
);
module.exports = addState(Login);
client/src/main.jsx
+1 -1
View File
@@ -51,4 +51,4 @@ const Main = () => (
preact.render(<Main />, document.body);
// fizzyText('cryps.gg');
fizzyText('cryps.gg');
client/src/socket.jsx
+28 -5
View File
@@ -23,11 +23,9 @@ function createSocket(store) {
// https://www.christian-schneider.net/CrossSiteWebSocketHijacking.html
let account = null;
function send(msg) {
msg.token = account && account.token;
ws.send(cbor.encode(msg));
}
// -------------
// Incoming
// -------------
function accountLogin(res) {
const [struct, login] = res;
@@ -43,14 +41,37 @@ function createSocket(store) {
return store.dispatch(actions.setCryp(cryp));
}
function combatPve(response) {
const [structName, battle] = response;
console.log('got a new battle', battle);
}
// -------------
// Outgoing
// -------------
function send(msg) {
msg.token = account && account.token;
ws.send(cbor.encode(msg));
}
function sendAccountLogin(name, password) {
send({ method: 'account_login', params: { name, password } });
}
function sendCombatPve(id) {
send({ method: 'combat_pve', params: { id } });
}
// -------------
// Handling
// -------------
// when the server sends a reply it will have one of these message types
// this object wraps the reply types to a function
const handlers = {
cryp_spawn: crypSpawn,
combat_pve: combatPve,
account_login: accountLogin,
account_create: accountLogin,
};
@@ -66,6 +87,7 @@ function createSocket(store) {
// check for error and split into response type and data
if (res.err) return errorToast(res.err);
const { method, params } = res;
if (!handlers[method]) return errorToast(`${method} handler missing`);
return handlers[method](params);
}
@@ -90,6 +112,7 @@ function createSocket(store) {
return {
sendAccountLogin,
sendCombatPve,
};
}