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

buy btn

Browse Source
This commit is contained in:
ntr 2019-06-17 16:03:36 +10:00
parent 463241f1e4
commit 6f7c2cf571
6 changed files with 109 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/assets/styles/styles.css
View File

@ -462,6 +462,18 @@ header {
font-size: 1.2em; font-size: 1.2em;
} }
.stripe-btn {
padding: 0 0.5em;
background: whitesmoke;
color: black;
border-radius: 2px;
}
.stripe-btn:hover {
color: black;
}
.refresh-btn { .refresh-btn {
border: 1px solid #222; border: 1px solid #222;
float: right; float: right;

1
client/index.html
View File

@ -17,6 +17,7 @@
</head> </head>
<body> <body>
</body> </body>
<script src="https://js.stripe.com/v3/"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
<script> <script>
// Check that service workers are registered // Check that service workers are registered

6
client/package.json
View File

@ -23,8 +23,10 @@
"node-sass": "^4.12.0", "node-sass": "^4.12.0",
"parcel": "^1.12.3", "parcel": "^1.12.3",
"preact": "^8.4.2", "preact": "^8.4.2",
"preact-compat": "^3.19.0",
"preact-context": "^1.1.3", "preact-context": "^1.1.3",
"preact-redux": "^2.1.0", "preact-redux": "^2.1.0",
"react-stripe-elements": "^3.0.0",
"redux": "^4.0.0" "redux": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
@ -37,5 +39,9 @@
"eslint-plugin-import": "^2.14.0", "eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1", "eslint-plugin-react": "^7.11.1",
"jest": "^18.0.0" "jest": "^18.0.0"
},
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
} }
} }

3
client/src/app.jsx
View File

@ -3,6 +3,7 @@ const preact = require('preact');
const { Provider, connect } = require('preact-redux'); const { Provider, connect } = require('preact-redux');
const { createStore, combineReducers } = require('redux'); const { createStore, combineReducers } = require('redux');
const { StripeProvider } = require('react-stripe-elements');
const reducers = require('./reducers'); const reducers = require('./reducers');
const actions = require('./actions'); const actions = require('./actions');
@ -28,7 +29,9 @@ document.fonts.load('16pt "Jura"').then(() => {
const App = () => ( const App = () => (
<Provider store={store}> <Provider store={store}>
<StripeProvider apiKey="pk_test_PiLzjIQE7zUy3Xpott7tdQbl00uLiCesTa">
<Mnml /> <Mnml />
</StripeProvider>
</Provider> </Provider>
); );

82
client/src/components/account.status.jsx Normal file
View 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);

24
client/src/components/nav.jsx
View File

@ -4,17 +4,11 @@ const { Fragment } = require('preact');
const { postData } = require('../utils'); const { postData } = require('../utils');
const actions = require('../actions'); const actions = require('../actions');
const { saw } = require('./shapes'); const AccountStatus = require('./account.status');
const testGame = process.env.NODE_ENV === 'development' && require('./../test.game'); const testGame = process.env.NODE_ENV === 'development' && require('./../test.game');
const testInstance = process.env.NODE_ENV === 'development' && require('./../test.instance'); 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( const addState = connect(
function receiveState(state) { function receiveState(state) {
const { const {
@ -95,15 +89,13 @@ const addState = connect(
function Nav(args) { function Nav(args) {
const { const {
account, account,
ping,
team,
instances, instances,
game, game,
team,
sendInstanceState, sendInstanceState,
sendAccountInstances, sendAccountInstances,
sendInstanceList, sendInstanceList,
logout,
setTestGame, setTestGame,
setTestInstance, setTestInstance,
@ -140,24 +132,16 @@ function Nav(args) {
<h2>Hax</h2> <h2>Hax</h2>
<button onClick={() => setTestGame(account.id)}>Test Game</button> <button onClick={() => setTestGame(account.id)}>Test Game</button>
<button onClick={() => setTestInstance(account.id)}>Test Instance</button> <button onClick={() => setTestInstance(account.id)}>Test Instance</button>
<button onClick={() => logout()}>Logout</button>
</Fragment>) </Fragment>)
: null; : null;
const canJoin = team.some(c => !c); 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 ( return (
<nav onClick={hideNav} > <nav onClick={hideNav} >
<h1 class="header-title">mnml.gg</h1> <h1 class="header-title">mnml.gg</h1>
{accountStatus} <AccountStatus />
<hr />
<button onClick={() => navTo('team')}>Select Team</button> <button onClick={() => navTo('team')}>Select Team</button>
<button disabled={canJoin} onClick={() => navTo('list')}>Play</button> <button disabled={canJoin} onClick={() => navTo('list')}>Play</button>
<hr /> <hr />