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

login

Browse Source
This commit is contained in:
ntr 2019-04-02 20:22:40 +11:00
parent 51b8d23f91
commit d61691d9df
9 changed files with 88 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/cryps.css
View File

@ -86,6 +86,18 @@ button.left:hover, button.left:focus {
box-shadow: inset 0.5em 0 0 0 whitesmoke;
}
/*
LOGIN
*/
.login {
flex: 0 1 25%;
display: flex;
flex-flow: column;
}
/*
MENU
*/
@ -117,11 +129,6 @@ header {
background-color: black;
}
.login {
display: inline;
margin-right: 0;
}
.ping-path {
fill: none;
stroke-width: 4px;
@ -180,7 +187,7 @@ header {
.menu-instance-btn {
box-sizing: border-box;
flex: 1 0 20%;
flex: 1 0 100%;
font-size: 150%;
/*min-width: 20%;*/
border-width: 2px;
@ -188,10 +195,6 @@ header {
margin: 0.5em;
}
.menu-instance-btn.full {
flex: 1 0 100%;
}
/*
INSTANCE
*/

17
client/src/components/body.component.jsx
View File

@ -3,25 +3,34 @@ const preact = require('preact');
const { connect } = require('preact-redux');
const InstanceListContainer = require('./instance.list.container');
const LoginContainer = require('./login.container');
const CrypListContainer = require('./cryp.list.container');
const GameContainer = require('./game.container');
const InstanceContainer = require('./instance.container');
const addState = connect(
(state) => {
const { game, instance, ws } = state;
state => {
const { game, instance, ws, account } = state;
if (!game) {
console.log('clear gs interval');
// ws.clearGameStateInterval();
}
return { game, instance };
return { game, instance, account };
}
);
function renderBody(props) {
const { game, instance } = props;
const { game, instance, account } = props;
if (!account) {
return (
<main>
<LoginContainer />
</main>
);
}
if (game) {
return (
<GameContainer />

15
client/src/components/header.component.jsx
View File

@ -1,14 +1,23 @@
// eslint-disable-next-line
const preact = require('preact');
const LoginContainer = require('./login.container');
function renderHeader() {
const saw = require('./saw.component');
function renderHeader(args) {
const { account } = args;
const accountStatus = account ?
(<div className="header-status">
<h3 className="header-username">{account.name}</h3>
{saw('whitesmoke')}
</div>)
: '';
return (
<header>
<h1 className="header-title">
cryps.gg
</h1>
<LoginContainer />
{accountStatus}
</header>
);
}

11
client/src/components/header.container.jsx Normal file
View File

@ -0,0 +1,11 @@
const { connect } = require('preact-redux');
const Header = require('./header.component');
const addState = connect(
({ account }) => {
return { account };
},
);
module.exports = addState(Header);

2
client/src/components/instance.list.component.jsx
View File

@ -25,7 +25,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
key={instance.id}
onClick={() => setActiveInstance(instance)}>
{name}
{name} | {instance.score.wins} : {instance.score.losses}
</button>
);
});

56
client/src/components/login.component.jsx
View File

@ -1,16 +1,7 @@
// eslint-disable-next-line
const preact = require('preact');
const saw = require('./saw.component');
function renderLogin({ account, submitLogin, submitRegister }) {
if (account) return (
<div className="header-status">
<h3 className="header-username">{account.name}</h3>
{saw('whitesmoke')}
</div>
);
function renderLogin({ submitLogin, submitRegister, submitDemo }) {
const details = {
name: '',
password: '',
@ -18,57 +9,36 @@ function renderLogin({ account, submitLogin, submitRegister }) {
return (
<div className="login">
<div className="field">
<p className="control has-icons-left has-icons-right">
<input
className="input"
className="login-input"
type="email"
placeholder="Email"
placeholder="username"
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"
className="login-input"
type="password"
placeholder="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 inverted"
type="submit"
onClick={() => submitLogin('ntr', 'grepgrepgrep')}>
Default
</button>
<button
className="button inverted"
className="login-btn"
type="submit"
onClick={() => submitLogin(details.name, details.password)}>
Login
</button>
<button
className="button inverted"
className="login-btn"
type="submit"
onClick={() => submitRegister(details.name, details.password)}>
Register
</button>
</p>
</div>
<button
className="login-btn"
type="submit"
onClick={() => submitDemo()}>
demo
</button>
</div>
);
}

5
client/src/components/login.container.jsx
View File

@ -11,7 +11,10 @@ const addState = connect(
function submitRegister(name, password) {
return ws.sendAccountRegister(name, password);
}
return { account: state.account, submitLogin, submitRegister };
function submitDemo() {
return ws.sendAccountDemo();
}
return { account: state.account, submitLogin, submitRegister, submitDemo };
},
);

2
client/src/main.jsx
View File

@ -10,7 +10,7 @@ const setupKeys = require('./keyboard');
const createSocket = require('./socket');
const registerEvents = require('./events');
const Header = require('./components/header.component');
const Header = require('./components/header.container');
const Body = require('./components/body.component');
// Redux Store

2
client/src/socket.jsx
View File

@ -259,7 +259,7 @@ function createSocket(events) {
// if (!account) events.loginPrompt();
if (process.env.NODE_ENV !== 'production') {
send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
}
return true;