buy btn
This commit is contained in:
ntr
parent
463241f1e4
commit
6f7c2cf571
@ -462,6 +462,18 @@ header {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.stripe-btn {
|
||||
padding: 0 0.5em;
|
||||
background: whitesmoke;
|
||||
color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.stripe-btn:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.refresh-btn {
|
||||
border: 1px solid #222;
|
||||
float: right;
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<script src="./index.js"></script>
|
||||
<script>
|
||||
// Check that service workers are registered
|
||||
|
||||
@ -23,8 +23,10 @@
|
||||
"node-sass": "^4.12.0",
|
||||
"parcel": "^1.12.3",
|
||||
"preact": "^8.4.2",
|
||||
"preact-compat": "^3.19.0",
|
||||
"preact-context": "^1.1.3",
|
||||
"preact-redux": "^2.1.0",
|
||||
"react-stripe-elements": "^3.0.0",
|
||||
"redux": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -37,5 +39,9 @@
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"jest": "^18.0.0"
|
||||
},
|
||||
"alias": {
|
||||
"react": "preact-compat",
|
||||
"react-dom": "preact-compat"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ const preact = require('preact');
|
||||
|
||||
const { Provider, connect } = require('preact-redux');
|
||||
const { createStore, combineReducers } = require('redux');
|
||||
const { StripeProvider } = require('react-stripe-elements');
|
||||
|
||||
const reducers = require('./reducers');
|
||||
const actions = require('./actions');
|
||||
@ -28,7 +29,9 @@ document.fonts.load('16pt "Jura"').then(() => {
|
||||
|
||||
const App = () => (
|
||||
<Provider store={store}>
|
||||
<Mnml />
|
||||
<StripeProvider apiKey="pk_test_PiLzjIQE7zUy3Xpott7tdQbl00uLiCesTa">
|
||||
<Mnml />
|
||||
</StripeProvider>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
|
||||
82
client/src/components/account.status.jsx
Normal file
82
client/src/components/account.status.jsx
Normal file
@ -0,0 +1,82 @@
|
||||
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 } = args;
|
||||
function onClick(e) {
|
||||
stripe.redirectToCheckout({
|
||||
items: [{sku: 'sku_FGjPl1YKoT241P', quantity: 1}],
|
||||
successUrl: 'http://localhost:40080/payments/success',
|
||||
cancelUrl: 'http://localhost:40080/payments/cancel',
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div id="error-message"></div>
|
||||
<button
|
||||
onClick={onClick}
|
||||
class="stripe-btn"
|
||||
id="checkout-button-sku_FGjPl1YKoT241P"
|
||||
role="link">
|
||||
Buy 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>
|
||||
<div class="header-status">
|
||||
<h2 class="header-username">{account.name}</h2>
|
||||
{saw(pingColour(ping))}
|
||||
<div class="ping-text">{ping}ms</div>
|
||||
</div>
|
||||
<Elements>
|
||||
<StripeBitsBtn />
|
||||
</Elements>
|
||||
<button onClick={() => logout()}>Logout</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(AccountStatus);
|
||||
@ -4,17 +4,11 @@ const { Fragment } = require('preact');
|
||||
|
||||
const { postData } = require('../utils');
|
||||
const actions = require('../actions');
|
||||
const { saw } = require('./shapes');
|
||||
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 {
|
||||
@ -95,15 +89,13 @@ const addState = connect(
|
||||
function Nav(args) {
|
||||
const {
|
||||
account,
|
||||
ping,
|
||||
team,
|
||||
instances,
|
||||
game,
|
||||
team,
|
||||
|
||||
sendInstanceState,
|
||||
sendAccountInstances,
|
||||
sendInstanceList,
|
||||
logout,
|
||||
|
||||
setTestGame,
|
||||
setTestInstance,
|
||||
@ -140,24 +132,16 @@ function Nav(args) {
|
||||
<h2>Hax</h2>
|
||||
<button onClick={() => setTestGame(account.id)}>Test Game</button>
|
||||
<button onClick={() => setTestInstance(account.id)}>Test Instance</button>
|
||||
<button onClick={() => logout()}>Logout</button>
|
||||
</Fragment>)
|
||||
: null;
|
||||
|
||||
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 />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user