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

Merge branch 'cryp-component'

Browse Source
This commit is contained in:
ntr 2018-09-22 21:59:53 +10:00
commit ac614030aa
12 changed files with 192 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/actions.jsx
View File

@ -1,3 +1,8 @@
export const SET_ACCOUNT = 'SET_ACCOUNT';
export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
export const setAccount = value => ({ type: SET_ACCOUNT, value });
export const SET_CRYP = 'SET_CRYP';
export const setCryp = (value) => ({ type: SET_CRYP, value });
export const SET_WS = 'SET_WS';
export const setWs = (value) => ({ type: SET_WS, value });

10
client/src/components/cryp.container.js Normal file
View File

@ -0,0 +1,10 @@
const { connect } = require('preact-redux');
const InvStats = require('./invstats');
// Add the incident from state as a property
const addState = connect(
state => ({ cryp: state.cryp }),
);
module.exports = addState(InvStats);

60
client/src/components/invstats.jsx Executable file
View File

@ -0,0 +1,60 @@
const preact = require('preact');
function InvStats({ cryp }) {
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">
<p>Helm Slot</p>
</article>
<article className="tile is-child notification is-success">
<p>Body Armor</p>
</article>
<article className="tile is-child notification is-success">
<p>Gloves</p>
</article>
<article className="tile is-child notification is-success">
<p>Boots</p>
</article>
</div>
<div className="tile is-parent is-6">
<article 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>
</div>
<div className="tile is-parent is-vertical is-3">
<article className="tile is-child notification is-dark">
<p>Weapon</p>
</article>
<article className="tile is-child notification is-dark">
<p>Jewellery</p>
</article>
<article className="tile is-child notification is-dark">
<p>Artifact</p>
</article>
</div>
</div>
<div className="tile is-parent is-6">
<article 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>
</div>
</div>
);
// map is a function that is called on every element of an array
// so in this ^^ case it calls Icon('Mashy') which returns some jsx
// that gets put into the dom
}
module.exports = InvStats;

43
client/src/components/login.component.jsx Normal file
View File

@ -0,0 +1,43 @@
const preact = require('preact');
function renderLogin({ account, submitLogin }) {
if (account) return <div>{JSON.stringify(account)}</div>;
const details = {
name: '',
password: '',
};
return (
<div>
<div className="field">
<p className="control has-icons-left has-icons-right">
<input className="input" type="email" placeholder="Email" onChange={e => details.name = e.target.value} />
<span className="icon is-small is-left">
<i className="fas fa-user" />
</span>
<span className="icon is-small is-right">
<i className="fas fa-check" />
</span>
</p>
</div>
<div className="field">
<p className="control has-icons-left">
<input className="input" type="password" placeholder="Password" onChange={e => details.password = e.target.value} />
<span className="icon is-small is-left">
<i className="fas fa-lock" />
</span>
</p>
</div>
<div className="field">
<p className="control">
<button className="button is-success" type="submit" onClick={() => submitLogin(details.name, details.password)}>
Login
</button>
</p>
</div>
</div>
);
}
module.exports = renderLogin;

16
client/src/components/login.container.jsx Normal file
View File

@ -0,0 +1,16 @@
const { connect } = require('preact-redux');
const Login = require('./login.component');
const addState = connect(
function receiveState(state) {
const { ws } = state;
function submitLogin(name, password) {
return ws.sendAccountLogin(name, password);
}
return { account: state.account, submitLogin };
},
);
module.exports = addState(Login);

6
client/src/components/status.component.jsx
View File

@ -1,6 +0,0 @@
const preact = require('preact');
module.exports = ({ account }) => {
if (account) return <div>{JSON.stringify(account)}</div>;
return <div>not logged in</div>;
};

13
client/src/components/status.container.js
View File

@ -1,13 +0,0 @@
const { connect } = require('preact-redux');
const Status = require('./status.component');
// Add the incident from state as a property
const addState = connect(
state => ({ account: state.account }),
// dispatch => ({
// closeDetails() { dispatch(openIncident()); },
// }),
);
module.exports = addState(Status);

11
client/src/main.jsx
View File

@ -5,22 +5,27 @@ const { Provider } = require('preact-redux');
const { createStore, combineReducers } = require('redux');
const reducers = require('./reducers');
const actions = require('./actions');
const fizzyText = require('../lib/fizzy-text');
const createSocket = require('./socket');
const StatusContainer = require('./components/status.container');
const CrypContainer = require('./components/cryp.container');
const LoginContainer = require('./components/login.container');
const Navbar = require('./components/navbar');
// Redux Store
const store = createStore(
combineReducers({
account: reducers.accountReducer,
cryp: reducers.crypReducer,
ws: reducers.wsReducer,
}),
);
store.subscribe(() => console.log(store.getState()));
const ws = createSocket(store);
store.dispatch(actions.setWs(ws));
// tells jdenticon to look for new svgs and render them
// so we don't have to setInnerHtml or manually call update
@ -33,9 +38,9 @@ const Cryps = () => (
<section>
<Navbar />
<div id="fizzytext" />
<StatusContainer />
<LoginContainer />
<CrypContainer />
</section>
);
const Main = () => (

28
client/src/reducers.jsx
View File

@ -1,9 +1,29 @@
const { SET_ACCOUNT } = require('./actions');
const actions = require('./actions');
const defaultAccount = {};
const defaultAccount = null;
function accountReducer(state = defaultAccount, action) {
switch (action.type) {
case SET_ACCOUNT:
case actions.SET_ACCOUNT:
return action.value;
default:
return state;
}
}
const defaultCryp = null;
function crypReducer(state = defaultCryp, action) {
switch (action.type) {
case actions.SET_CRYP:
return action.value;
default:
return state;
}
}
const defaultWs = null;
function wsReducer(state = defaultWs, action) {
switch (action.type) {
case actions.SET_WS:
return action.value;
default:
return state;
@ -12,4 +32,6 @@ function accountReducer(state = defaultAccount, action) {
module.exports = {
accountReducer,
crypReducer,
wsReducer,
};

18
client/src/socket.jsx
View File

@ -37,16 +37,26 @@ function createSocket(store) {
return send({ method: 'cryp_spawn', params: { name: 'drake' } });
}
function crypSpawn(cryp) {
function crypSpawn(response) {
const [structName, cryp] = response;
console.log('got a new cryp', cryp);
return store.dispatch(actions.setCryp(cryp));
}
function sendAccountLogin(name, password) {
send({ method: 'account_login', params: { name, password } });
}
// 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,
account_login: accountLogin,
account_create: accountLogin,
};
// decodes the cbor and
// calls the handlers defined above based on message type
function onMessage(event) {
// decode binary msg from server
const blob = new Uint8Array(event.data);
@ -62,7 +72,7 @@ function createSocket(store) {
// Connection opened
ws.addEventListener('open', function wsOpen(event) {
// send({ method: 'account_create', params: { name: 'ntr', password: 'grepgrepgrep' }});
send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
});
// Listen for messages
@ -77,6 +87,10 @@ function createSocket(store) {
console.error('WebSocket closed', event);
account = null;
});
return {
sendAccountLogin,
};
}
module.exports = createSocket;

7
server/WORKLOG.md
View File

@ -1,13 +1,18 @@
* Battling
* Logins ✔️
* Cryp Ownership
* Cryp Ownership ✔
* Matchmaking
* Lobbies
* Create
* Join
* Resolve
* Stats
* Scrabble grid
* Items
* Grid reroll
* Colour scheme
* Missions
* Bosses
* Cryp Generation
*

4
server/src/account.rs
View File

@ -1,5 +1,5 @@
use uuid::Uuid;
use bcrypt::{DEFAULT_COST, hash, verify};
use bcrypt::{hash, verify};
use rand::{thread_rng, Rng};
use rand::distributions::Alphanumeric;
use std::iter;
@ -61,7 +61,7 @@ pub fn create(params: AccountCreateParams, db: Db) -> Result<RpcResult, Error> {
if params.password.len() < PASSWORD_MIN_LEN {
return Err(err_msg("password must be at least 12 characters"));
}
let password = hash(&params.password, DEFAULT_COST)?;
let password = hash(&params.password, 4)?;
let mut rng = thread_rng();
let token: String = iter::repeat(())