128 lines
3.5 KiB
JavaScript
128 lines
3.5 KiB
JavaScript
// const { connect } = require('preact-redux');
|
|
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const actions = require('./../actions');
|
|
|
|
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 Reshape(args) {
|
|
const {
|
|
account,
|
|
shop,
|
|
mtxBuy,
|
|
|
|
setMtxActive,
|
|
setNav,
|
|
} = args;
|
|
|
|
if (!shop) return false;
|
|
|
|
const useMtx = (item, i) => {
|
|
const price = item === 'Rename' ? 5 : 1;
|
|
return (
|
|
<figure key={i * 2} onClick={e => {
|
|
e.stopPropagation();
|
|
setMtxActive(item);
|
|
}}>
|
|
<figcaption>{item}</figcaption>
|
|
<button disabled={account.balance === 0}>¤{price}</button>
|
|
</figure>
|
|
);
|
|
};
|
|
|
|
const availableMtx = (item, i) => (
|
|
<figure key={i * 2 + 1}>
|
|
<figcaption>Enable {item.variant}</figcaption>
|
|
<button onClick={() => mtxBuy(item)} disabled={account.balance < item.credits}>¤{item.credits}</button>
|
|
</figure>
|
|
);
|
|
|
|
const subscription = account.subscribed
|
|
? <button
|
|
class="yellow-btn"
|
|
disabled>
|
|
Subscribed
|
|
</button>
|
|
: <button
|
|
onClick={() => setNav('shop')}
|
|
class="yellow-btn"
|
|
role="link">
|
|
Subscribe
|
|
</button>;
|
|
|
|
return (
|
|
<section class="top" onClick={() => setMtxActive(null)}>
|
|
<div class="news">
|
|
<p class="play-p">Use credits to modify your construct names and appearance.</p>
|
|
<ul>
|
|
|
|
<li> Purchase image sets to unlock different types of avatars. </li>
|
|
<li> You can reroll any avatar to a new avatar from owned sets. </li>
|
|
<li> Reroll avatars by clicking the owned set and then the construct you wish to reroll. </li>
|
|
<li>Press escape to clear any active mtx. </li>
|
|
</ul>
|
|
|
|
<p>
|
|
You can switch out your active constructs in the account settings. <br />
|
|
Accounts start with 4 constructs by default. <br />
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h1 class="credits">¤ {account.balance}</h1>
|
|
<div class='list'>
|
|
{subscription}
|
|
<button
|
|
onClick={() => setNav('shop')}
|
|
class="yellow-btn"
|
|
role="link">
|
|
Get Credits
|
|
</button>
|
|
<div id="error-message"></div>
|
|
</div>
|
|
<div class='list'>
|
|
{shop.owned.map(useMtx)}
|
|
{shop.available.map(availableMtx)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(Reshape);
|