130 lines
3.4 KiB
JavaScript
130 lines
3.4 KiB
JavaScript
// const { connect } = require('preact-redux');
|
|
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
const { Elements } = require('react-stripe-elements');
|
|
|
|
const Header = require('./header');
|
|
const Team = require('./team');
|
|
const StripeBtns = require('./stripe.buttons');
|
|
|
|
const actions = require('./../actions');
|
|
|
|
const VERSION = process.env.npm_package_version;
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
account,
|
|
shop,
|
|
} = state;
|
|
|
|
function mtxBuy(mtx) {
|
|
return ws.sendMtxBuy(mtx.variant);
|
|
}
|
|
|
|
return {
|
|
account,
|
|
shop,
|
|
mtxBuy,
|
|
};
|
|
},
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function setMtxActive(mtx) {
|
|
dispatch(actions.setConstructRename(null));
|
|
dispatch(actions.setMtxActive(mtx));
|
|
return true;
|
|
}
|
|
|
|
function setNav(place) {
|
|
return dispatch(actions.setNav(place));
|
|
}
|
|
|
|
return {
|
|
setMtxActive,
|
|
setNav,
|
|
};
|
|
}
|
|
);
|
|
|
|
function Play(args) {
|
|
const {
|
|
account,
|
|
shop,
|
|
mtxBuy,
|
|
|
|
setMtxActive,
|
|
setNav,
|
|
} = args;
|
|
|
|
if (!shop) return false;
|
|
|
|
const useMtx = (item, i) => (
|
|
<figure key={i} onClick={() => setMtxActive(item)} >
|
|
<figcaption>{item}</figcaption>
|
|
<button disabled={account.balance === 0}>¤1</button>
|
|
</figure>
|
|
);
|
|
|
|
const availableMtx = (item, i) => (
|
|
<figure key={i} onClick={() => mtxBuy(item)} >
|
|
<figcaption>{item.variant}</figcaption>
|
|
<button disabled={account.balance < item.credits}>¤{item.credits}</button>
|
|
</figure>
|
|
);
|
|
|
|
const subscription = account.subscribed
|
|
? <button
|
|
class="stripe-btn"
|
|
disabled>
|
|
Subscribed
|
|
</button>
|
|
: <button
|
|
onClick={() => setNav('shop')}
|
|
class="stripe-btn"
|
|
role="link">
|
|
Subscribe
|
|
</button>;
|
|
|
|
|
|
return (
|
|
<section class="top">
|
|
<div class="news">
|
|
<h1>mnml v{VERSION}</h1>
|
|
<p>use the buttons on the right to join an instance.</p>
|
|
<p>
|
|
select <b>PVP</b> to play against other players.<br />
|
|
click <b>LEARN</b> to practice the game without time controls.
|
|
</p>
|
|
<p>
|
|
if you enjoy the game please support its development by <b>subscribing</b> or purchasing <b>credits</b>.<br />
|
|
glhf
|
|
</p>
|
|
<p>--ntr & mashy</p>
|
|
</div>
|
|
<div>
|
|
<h1 class="credits">¤ {account.balance}</h1>
|
|
<div class='list'>
|
|
{subscription}
|
|
<button
|
|
onClick={() => setNav('shop')}
|
|
class="stripe-btn"
|
|
role="link">
|
|
Get Credits
|
|
</button>
|
|
<div id="error-message"></div>
|
|
</div>
|
|
<div class='list'>
|
|
{shop.owned.map(useMtx)}
|
|
</div>
|
|
<div class='list'>
|
|
{shop.available.map(availableMtx)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Play);
|