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

account wip

Browse Source
This commit is contained in:
ntr
2019-08-09 22:48:58 +10:00
parent fe56528b3f
commit 89d2b39823
15 changed files with 336 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/account.management.jsx
+90
View File
@@ -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
+33
View File
@@ -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
+9 -70
View File
@@ -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
+1 -1
View File
@@ -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
+10 -4
View File
@@ -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
+2
View File
@@ -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
+54
View File
@@ -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
+2 -2
View File
@@ -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>
);
}