account wip

client/assets/styles/account.less

@@ -0,0 +1,58 @@
+@import 'colours.less';
+
+.account-page {
+    height: 100%;
+    display: grid;
+
+    grid-template-rows: minmax(min-content, 2fr) 1fr;
+    grid-template-columns: 1fr;
+
+    grid-template-areas:
+        "team"
+        "account";
+
+    button {
+        display: block;
+        height: 3em;
+        width: 75%;
+    }
+
+    input {
+        width: 75%;
+        height: 3em;
+        display: block;
+    }
+
+    .team {
+        grid-area: team;
+
+        /* poor man's <hr>*/
+        border-bottom: 0.1em solid #444;
+    }
+
+    .account {
+        margin: 2em 2em 0 0;
+        grid-area: account;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-gap: 0 1em;
+    }
+}
+
+.stripe-btn {
+    background: @yellow;
+    color: black;
+    border-radius: 2px;
+    border-width: 0;
+
+    &:active, &:focus, &:hover {
+        color: black;
+    }
+
+    &[disabled] {
+        border: 1px solid @yellow;
+        color: @yellow;
+        background: black;
+    }
+}

client/assets/styles/colours.less

@@ -4,6 +4,7 @@
 @blue: #3050f8;
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
+@yellow: #ffa100;
 
 @black: black;
 @gray: #222;

client/assets/styles/game.less

@@ -1,3 +1,4 @@
+@import 'colours.less';
 /* GAME */
 
 .game {

client/assets/styles/styles.less

@@ -90,6 +90,10 @@ nav {
     padding-left: 2em;
     margin-right: 2em;
     max-height: 100%;
+
+    h1 {
+        margin-bottom: 0.5em;
+    }
 }
 
 nav h2:first-child {
@@ -166,17 +170,17 @@ button, input {
     transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
-}
 
-button:hover {
-    color: whitesmoke;
-    border-color: @gray-hover;
-}
+    &:hover {
+        color: whitesmoke;
+        border-color: @gray-hover;
+    }
 
-button:focus {
-    /*colour necesary to bash skellington*/
-    color: @gray-focus;
-    border-color: @gray-focus;
+    &:focus {
+        /*colour necesary to bash skellington*/
+        color: @gray-focus;
+        border-color: @gray-focus;
+    }
 }
 
 a {
@@ -327,16 +331,12 @@ header {
     margin-bottom: 1.5em;
 }
 
-.account {
-    margin: 1em 0;
-}
-
 .header-title {
     flex: 1;
     letter-spacing: 0.05em;
 }
 
-.account-status {
+.account-info {
     display: flex;
 }
 
@@ -346,7 +346,7 @@ header {
     display: inline;
 }
 
-.account-status svg {
+.account-info svg {
     margin: 0.5em 0 0 1em;
     height: 1em;
     background-color: black;
@@ -481,6 +481,10 @@ header {
         display: grid;
         grid-template-columns: 1fr 1fr;
 
+        h1 {
+            margin-bottom: 0.5em;
+        }
+
         .list {
             letter-spacing: 0.25em;
             text-transform: uppercase;
@@ -504,19 +508,6 @@ header {
     font-size: 1.2em;
 }
 
-.stripe-btn {
-    width: 100%;
-    padding: 0 0.5em;
-    margin: 0.25em 0;
-    background: whitesmoke;
-    color: black;
-    border-radius: 2px;
-}
-
-.stripe-btn:hover {
-    color: black;
-}
-
 .play-btn {
     font-size: 150%;
 }
@@ -566,6 +557,11 @@ main .top button {
     width: 100%;
 }
 
+.credits {
+    color: @yellow;
+    font-weight: 800;
+}
+
 .timer-container {
     display: flex;
     flex: 1 1 100%;

client/index.js

@@ -3,6 +3,7 @@ require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/game.less');
 require('./assets/styles/controls.less');
+require('./assets/styles/account.less');
 require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.mobile.css');
 

client/src/components/account.management.jsx

@@ -0,0 +1,90 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const { postData } = require('./../utils');
+const actions = require('../actions');
+
+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 (
+        <section class='account'>
+            <div>
+                <h1>{account.name}</h1>
+                <dl>
+                    <dt>Subscription</dt>
+                    <dd>{account.subscribed ? 'some date' : 'unsubscribed'}</dd>
+                </dl>
+                <button onClick={() => logout()}>Logout</button>
+            </div>
+            <form>
+                <label for="email">Update Email:</label>
+                <input
+                    class="login-input"
+                    disabled
+                    type="email"
+                    name="current"
+                    placeholder={account.email || 'no email set'}
+                />
+                <input
+                    class="login-input"
+                    type="email"
+                    name="email"
+                    placeholder="new email"
+                />
+                <button>Update</button>
+            </form>
+            <form>
+                <label for="password">Change Password:</label>
+                <input
+                    class="login-input"
+                    type="password"
+                    name="current"
+                    placeholder="current"
+                />
+                <input
+                    class="login-input"
+                    type="password"
+                    name="new"
+                    placeholder="new password"
+                />
+                <input
+                    class="login-input"
+                    type="password"
+                    name="confirm"
+                    placeholder="confirm"
+                />
+                <button>Change</button>
+            </form>
+        </section>
+    );
+}
+
+module.exports = addState(AccountStatus);

client/src/components/account.page.jsx

@@ -0,0 +1,33 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const Team = require('./team');
+const AccountManagement = require('./account.management');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            account,
+        } = state;
+
+        return {
+            account,
+        };
+    },
+);
+
+function Account(args) {
+    const {
+        account,
+    } = args;
+
+    return (
+        <main class="account-page">
+            <Team />
+            <AccountManagement />
+        </main>
+    );
+}
+
+module.exports = addState(Account);

client/src/components/account.status.jsx

@@ -1,9 +1,7 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
-const { Elements, injectStripe } = require('react-stripe-elements');
 
 const { saw } = require('./shapes');
-const { postData } = require('./../utils');
 const actions = require('../actions');
 
 function pingColour(ping) {
@@ -12,55 +10,6 @@ function pingColour(ping) {
     return 'red';
 }
 
-function BitsBtn(args) {
-    const {
-        stripe,
-        account,
-    } = args;
-    function subscribeClick(e) {
-        stripe.redirectToCheckout({
-            items: [{plan: 'plan_FGmRwawcOJJ7Nv', quantity: 1}],
-            successUrl: 'http://localhost/api/payments/success',
-            cancelUrl: 'http://localhost/api/payments/cancel',
-            clientReferenceId: account.id
-        });
-    }
-
-    function bitsClick(e) {
-        stripe.redirectToCheckout({
-            items: [{sku: 'sku_FHUfNEhWQaVDaT', quantity: 1}],
-            successUrl: 'http://localhost/payments/success',
-            cancelUrl: 'http://localhost/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 Credits
-            </button>
-
-        </div>
-    );
-}
-
-const StripeBitsBtn = injectStripe(BitsBtn);
-
 const addState = connect(
     function receiveState(state) {
         const {
@@ -68,23 +17,18 @@ const addState = connect(
             ping,
         } = state;
 
-
-        function logout() {
-            postData('/logout').then(() => window.location.reload(true));
-        }
-
         return {
             account,
             ping,
-            logout,
         };
     },
     function receiveDispatch(dispatch) {
-        function selectConstructs() {
-            return dispatch(actions.setNav('team'));
+        function accountPage() {
+            return dispatch(actions.setNav('account'));
         }
+
         return {
-            selectConstructs,
+            accountPage,
         };
     }
 );
@@ -94,25 +38,20 @@ function AccountStatus(args) {
     const {
         account,
         ping,
-        logout,
-        selectConstructs,
+        accountPage,
     } = args;
 
     if (!account) return null;
 
     return (
-        <div class="account">
-            <div class="account-status">
+        <div class="account-status">
+            <div class="account-info">
                 <h2 class="account-header">{account.name}</h2>
                 {saw(pingColour(ping))}
                 <div class="ping-text">{ping}ms</div>
             </div>
-            <h3 class="account-header">{`¤${account.balance}`}</h3>
-            <Elements>
-                <StripeBitsBtn account={account} />
-            </Elements>
-            <button onClick={() => selectConstructs()}>Constructs </button>
-            <button onClick={() => logout()}>Logout</button>
+            <h3 class="account-header credits">{`¤${account.balance}`}</h3>
+            <button onClick={() => accountPage()}>⚙ account</button>
         </div>
     );
 }

client/src/components/controls.jsx

@@ -34,7 +34,7 @@ function Controls(args) {
     if (game) return <GameCtrl />;
     if (instance) return <InstanceCtrl />;
     if (nav === 'play' || !nav) return <PlayCtrl />
-    if (nav === 'team' || !nav) return <TeamCtrl />
+    if (nav === 'team' || nav === 'account') return <TeamCtrl />
 
     return false;
 }

client/src/components/inventory.jsx

@@ -1,8 +1,11 @@
 const { connect } = require('preact-redux');
+const { Elements } = require('react-stripe-elements');
+
 const preact = require('preact');
 const toast = require('izitoast');
 
 const actions = require('./../actions');
+const StripeBtns = require('./stripe.buttons');
 
 const addState = connect(
     function receiveState(state) {
@@ -63,15 +66,18 @@ function Inventory(args) {
     return (
         <div class="inventory">
             <div>
-                <h1>¤ {account.balance}</h1>
+                <h1>Shop</h1>
+                <Elements>
+                    <StripeBtns account={account} />
+                </Elements>
                 <div class='list'>
-                    {shop.owned.map(useMtx)}
+                    {shop.available.map(availableMtx)}
                 </div>
             </div>
             <div>
-                <h1>Shop</h1>
+                <h1 class="credits">¤ {account.balance}</h1>
                 <div class='list'>
-                    {shop.available.map(availableMtx)}
+                    {shop.owned.map(useMtx)}
                 </div>
             </div>
         </div>

client/src/components/main.jsx

@@ -7,6 +7,7 @@ const Game = require('./game');
 const Instance = require('./instance.component');
 const Team = require('./team');
 const Play = require('./play');
+const Account = require('./account.page');
 
 const addState = connect(
     state => {
@@ -38,6 +39,7 @@ function Main(props) {
     if (nav === 'transition') return false;
     if (nav === 'play') return <Play />;
     if (nav === 'team') return <Team />;
+    if (nav === 'account') return <Account />;
 
     return (
         <Play />

client/src/components/stripe.buttons.jsx

@@ -0,0 +1,54 @@
+const preact = require('preact');
+const { injectStripe } = require('react-stripe-elements');
+
+function BitsBtn(args) {
+    const {
+        stripe,
+        account,
+    } = args;
+    function subscribeClick() {
+        stripe.redirectToCheckout({
+            items: [{ plan: 'plan_FGmRwawcOJJ7Nv', quantity: 1 }],
+            successUrl: 'http://localhost',
+            cancelUrl: 'http://localhost',
+            clientReferenceId: account.id,
+        });
+    }
+
+    function bitsClick() {
+        stripe.redirectToCheckout({
+            items: [{ sku: 'sku_FHUfNEhWQaVDaT', quantity: 1 }],
+            successUrl: 'http://localhost',
+            cancelUrl: 'http://localhost',
+            clientReferenceId: account.id,
+        });
+    }
+
+    const subscription = account.subscribed
+        ? <button
+            class="stripe-btn"
+            disabled>
+            Subscribed
+        </button>
+        : <button
+            onClick={subscribeClick}
+            class="stripe-btn"
+            role="link">
+            Subscribe
+        </button>;
+
+    return (
+        <div class='list'>
+            {subscription}
+            <button
+                onClick={bitsClick}
+                class="stripe-btn"
+                role="link">
+                Get Credits
+            </button>
+            <div id="error-message"></div>
+        </div>
+    );
+}
+
+module.exports = injectStripe(BitsBtn);

client/src/components/team.jsx

@@ -89,10 +89,10 @@ function Team(args) {
         .map(i => <SpawnButton key={constructs.length + i} spawn={() => sendConstructSpawn()} />);
 
     return (
-        <main class="team">
+        <section class="team">
             {constructPanels}
             {spawnButtons}
-        </main>
+        </section>
     );
 }