diff --git a/WORKLOG.md b/WORKLOG.md index 14a4072c..59de087c 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -10,6 +10,7 @@ * graphs n shit * acp init * DO postgres +* make our own toasts / msg pane * only clear effects on post_resolve electrify doesn't work if you ko the construct diff --git a/client/assets/styles/nav.less b/client/assets/styles/nav.less index 11184866..b65f001c 100644 --- a/client/assets/styles/nav.less +++ b/client/assets/styles/nav.less @@ -6,6 +6,7 @@ nav { h1 { margin-bottom: 0.5em; + letter-spacing: 0.05em; } h2:first-child { diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index dedefa13..690731a1 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -43,6 +43,9 @@ html { h1 { font-size: 2em; margin: 0; + margin-bottom: 0.5em; + letter-spacing: 0.05em; + } h2 { @@ -175,9 +178,14 @@ button[disabled] { */ .login { - width: 25%; + width: 50%; display: flex; flex-flow: column; + margin-bottom: 2em; + + h2 { + margin-bottom: 0.5em; + } } #mnml input, #mnml select { diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css index fc6a30bf..263761ff 100644 --- a/client/assets/styles/styles.mobile.css +++ b/client/assets/styles/styles.mobile.css @@ -50,7 +50,7 @@ main { overflow-x: hidden; - padding: 0; + padding: 0 0.5em; } .login { diff --git a/client/index.html b/client/index.html index 2dc752d5..88515382 100644 --- a/client/index.html +++ b/client/index.html @@ -1,7 +1,7 @@ - mnml.gg + mnml - abstract strategy diff --git a/client/package.json b/client/package.json index d5e82d19..bfc34dff 100644 --- a/client/package.json +++ b/client/package.json @@ -21,6 +21,7 @@ "docco": "^0.7.0", "izitoast": "^1.4.0", "keymaster": "^1.6.2", + "linkstate": "^1.1.1", "lodash": "^4.17.15", "node-sass": "^4.12.0", "parcel": "^1.12.3", diff --git a/client/src/components/account.management.jsx b/client/src/components/account.management.jsx index 6bebfe10..792ac852 100644 --- a/client/src/components/account.management.jsx +++ b/client/src/components/account.management.jsx @@ -16,7 +16,7 @@ const addState = connect( function logout() { - postData('/logout').then(() => window.location.reload(true)); + postData('/account/logout').then(() => window.location.reload(true)); } function sendConstructSpawn(name) { @@ -71,7 +71,7 @@ function AccountStatus(args) {
- + ; if (instance) return ; if (nav === 'play' || !nav) return diff --git a/client/src/components/login.jsx b/client/src/components/login.jsx index 4d822807..0fcbf18f 100644 --- a/client/src/components/login.jsx +++ b/client/src/components/login.jsx @@ -2,6 +2,7 @@ const preact = require('preact'); const { Component } = require('preact') const { connect } = require('preact-redux'); +const linkState = require('linkstate').default; const { postData, errorToast } = require('../utils'); @@ -11,7 +12,7 @@ const addState = connect( ws } = state; function submitLogin(name, password) { - postData('/login', { name, password }) + postData('/account/login', { name, password }) .then(res => res.json()) .then(data => { if (!data.success) return errorToast(data.error_message); @@ -22,7 +23,7 @@ const addState = connect( } function submitRegister(name, password, code) { - postData('/register', { name, password, code }) + postData('/account/register', { name, password, code }) .then(res => res.json()) .then(data => { if (!data.success) return errorToast(data.error_message); @@ -43,70 +44,64 @@ class Login extends Component { constructor(props) { super(props); - this.state = { name: '', password: '', code: ''}; + this.state = { + login: { name: '', password: '', code: ''}, + register: { name: '', password: '', confirm: '', code: ''}, + }; - this.nameInput = this.nameInput.bind(this); - this.passwordInput = this.passwordInput.bind(this); - this.codeInput = this.codeInput.bind(this); this.loginSubmit = this.loginSubmit.bind(this); this.registerSubmit = this.registerSubmit.bind(this); } - nameInput(event) { - this.setState({ name: event.target.value }); - } - - passwordInput(event) { - this.setState({ password: event.target.value }); - } - - codeInput(event) { - this.setState({ code: event.target.value }); - } - loginSubmit(event) { event.preventDefault(); console.log(this.state); - this.props.submitLogin(this.state.name, this.state.password); - this.setState({ name: '', password: '' }); + this.props.submitLogin(this.state.login.name, this.state.login.password); + this.setState({ login: { name: '', password: '' }}); } registerSubmit(event) { event.preventDefault(); - this.props.submitRegister(this.state.name, this.state.password, this.state.code); - console.log(this.state); - this.setState({ name: '', password: '', code: ''}); + this.props.submitRegister(this.state.register.name, this.state.register.password, this.state.register.code); + this.setState({ register: { name: '', password: '', confirm: '', code: ''}}); } - render() { + const registerConfirm = () => + this.state.register.password === this.state.register.confirm; + + const registerDisabled = () => { + const { password, name, code } = this.state.register; + return !(registerConfirm() && password && name && code); + } + return (
-

mnml.gg

+

mnml.gg

+ +
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx index 77eacc76..365500dc 100644 --- a/client/src/components/nav.jsx +++ b/client/src/components/nav.jsx @@ -69,6 +69,8 @@ function Nav(args) { hideNav, } = args; + if (!account) return false; + function navTo(p) { return setNav(p); } @@ -90,6 +92,7 @@ function Nav(args) { const canJoin = team.some(c => !c); + return (