Merge branch 'accounting' into develop

client/src/components/account.status.jsx

@@ -0,0 +1,107 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+const { Elements, injectStripe } = require('react-stripe-elements');
+
+const { saw } = require('./shapes');
+
+function pingColour(ping) {
+    if (ping < 100) return 'forestgreen';
+    if (ping < 200) return 'yellow';
+    return 'red';
+}
+
+function BitsBtn(args) {
+    const {
+        stripe,
+        account,
+    } = args;
+    function subscribeClick(e) {
+        stripe.redirectToCheckout({
+            items: [{plan: 'plan_FGmRwawcOJJ7Nv', quantity: 1}],
+            successUrl: 'http://localhost:40080/payments/success',
+            cancelUrl: 'http://localhost:40080/payments/cancel',
+            clientReferenceId: account.id
+        });
+    }
+
+    function bitsClick(e) {
+        stripe.redirectToCheckout({
+            items: [{sku: 'sku_FHUfNEhWQaVDaT', quantity: 1}],
+            successUrl: 'http://localhost:40080/payments/success',
+            cancelUrl: 'http://localhost:40080/payments/cancel',
+            clientReferenceId: account.id
+        });
+    }
+
+    const subscription = account.subscribed
+        ? <h3 class="account-header">Subscribed</h3>
+        : <button
+            onClick={subscribeClick}
+            class="stripe-btn"
+            role="link">
+            Subscribe
+        </button>;
+
+    return (
+        <div>
+            <div id="error-message"></div>
+            {subscription}
+            <button
+                onClick={bitsClick}
+                class="stripe-btn"
+                role="link">
+                Get Bits
+            </button>
+
+        </div>
+    );
+}
+
+const StripeBitsBtn = injectStripe(BitsBtn);
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            account,
+            ping,
+        } = state;
+
+        function logout() {
+            postData('/logout').then(() => window.location.reload(true));
+        }
+
+        return {
+            account,
+            ping,
+            logout,
+        };
+    },
+);
+
+
+function AccountStatus(args) {
+    const {
+        account,
+        ping,
+        logout,
+    } = args;
+
+    if (!account) return null;
+
+    return (
+        <div class="account">
+            <div class="account-status">
+                <h2 class="account-header">{account.name}</h2>
+                {saw(pingColour(ping))}
+                <div class="ping-text">{ping}ms</div>
+            </div>
+            <h3 class="account-header">{`¤${account.credits}`}</h3>
+            <Elements>
+                <StripeBitsBtn account={account} />
+            </Elements>
+            <button onClick={() => logout()}>Logout</button>
+        </div>
+    );
+}
+
+module.exports = addState(AccountStatus);

client/src/components/login.jsx

@@ -3,16 +3,29 @@ const preact = require('preact');
 const { Component } = require('preact')
 const { connect } = require('preact-redux');
 
+const { postData } = require('../utils');
+
 const addState = connect(
     (state) => {
-        const { ws, account } = state;
+        const {
+            ws
+        } = state;
         function submitLogin(name, password) {
-            return ws.sendAccountLogin(name, password);
+            postData('/login', { name, password })
+                .then(data => ws.connect())
+                .catch(error => console.error(error));
         }
+
         function submitRegister(name, password, code) {
-            return ws.sendAccountCreate(name, password, code);
+            postData('/register', { name, password, code })
+                .then(data => ws.connect())
+                .catch(error => console.error(error));
+        }
+
+        return {
+            submitLogin,
+            submitRegister,
         }
-        return { account, submitLogin, submitRegister };
     },
 );
 
@@ -65,6 +78,7 @@ class Login extends Component {
                         class="login-input"
                         type="email"
                         placeholder="username"
+                        tabIndex={1}
                         value={this.state.name}
                         onInput={this.nameInput}
                     />
@@ -72,6 +86,7 @@ class Login extends Component {
                         class="login-input"
                         type="password"
                         placeholder="password"
+                        tabIndex={2}
                         value={this.state.password}
                         onInput={this.passwordInput}
                     />
@@ -79,16 +94,19 @@ class Login extends Component {
                         class="login-input"
                         type="text"
                         placeholder="code"
+                        tabIndex={3}
                         value={this.state.code}
                         onInput={this.codeInput}
                     />
                     <button
                         class="login-btn"
+                        tabIndex={4}
                         onClick={this.loginSubmit}>
                         Login
                     </button>
                     <button
                         class="login-btn"
+                        tabIndex={5}
                         onClick={this.registerSubmit}>
                         Register
                     </button>

client/src/components/main.jsx

@@ -10,8 +10,8 @@ const List = require('./list');
 
 const addState = connect(
     state => {
-        const { game, instance, account, nav, team } = state;
-        return { game, instance, account, nav, team };
+        const { game, instance, account, nav, team, constructs } = state;
+        return { game, instance, account, nav, team, constructs };
     }
 );
 
@@ -22,6 +22,7 @@ function Main(props) {
         account,
         nav,
         team,
+        constructs,
     } = props;
 
     if (!account) {
@@ -36,8 +37,8 @@ function Main(props) {
         return <Instance />;
     }
 
+    if (nav === 'team' || !team.some(t => t) || constructs.length < 3) return <Team />;
     if (nav === 'list') return <List />;
-    if (nav === 'team' || !team.some(t => t)) return <Team />;
 
     return (
         <main></main>

client/src/components/nav.jsx

@@ -1,19 +1,14 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
 const { Fragment } = require('preact');
-const actions = require('../actions');
 
-const { saw } = require('./shapes');
+const { postData } = require('../utils');
+const actions = require('../actions');
+const AccountStatus = require('./account.status');
 
 const testGame = process.env.NODE_ENV === 'development' && require('./../test.game');
 const testInstance = process.env.NODE_ENV === 'development' && require('./../test.instance');
 
-function pingColour(ping) {
-    if (ping < 100) return 'forestgreen';
-    if (ping < 200) return 'yellow';
-    return 'red';
-}
-
 const addState = connect(
     function receiveState(state) {
         const {
@@ -38,6 +33,10 @@ const addState = connect(
             return ws.sendInstanceList();
         }
 
+        function logout() {
+            postData('/logout').then(() => window.location.reload(true));
+        }
+
         return {
             account,
             instances,
@@ -47,6 +46,7 @@ const addState = connect(
             sendInstanceState,
             sendAccountInstances,
             sendInstanceList,
+            logout,
         };
     },
     function receiveDispatch(dispatch) {
@@ -89,10 +89,9 @@ const addState = connect(
 function Nav(args) {
     const {
         account,
-        ping,
-        team,
         instances,
         game,
+        team,
 
         sendInstanceState,
         sendAccountInstances,
@@ -138,18 +137,11 @@ function Nav(args) {
 
     const canJoin = team.some(c => !c);
 
-    const accountStatus = account
-        ? (<div class="header-status">
-            <h2 class="header-username">{account.name}</h2>
-            {saw(pingColour(ping))}
-            <div class="ping-text">{ping}ms</div>
-        </div>)
-        : false;
-
     return (
         <nav onClick={hideNav} >
             <h1 class="header-title">mnml.gg</h1>
-            {accountStatus}
+            <AccountStatus />
+            <hr />
             <button onClick={() => navTo('team')}>Select Team</button>
             <button disabled={canJoin} onClick={() => navTo('list')}>Play</button>
             <hr />