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

add reshape tab, remove mtx from play page

Browse Source
This commit is contained in:
Mashy 2019-10-22 09:52:24 +10:00
parent 36c9236842
commit 0c9c4a7692
6 changed files with 161 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
## [1.6.3] - 2019-10-XX
### Fixed
- Fixed bug where dots / hots would not trigger when reapplied by a skill caster at higher speed
## [1.6.2] - 2019-10-20
### Fixed
- Combiner bug where it would preview items for different combinations

5
client/src/components/header.jsx
View File

@ -83,6 +83,11 @@ function Header(args) {
class={`login-btn ${nav === 'play' ? 'highlight' : ''}`}>
Play
</button>
<button
onClick={() => navTo('reshape')}
class={`login-btn ${nav === 'reshape' ? 'highlight' : ''}`}>
Reshape
</button>
<button
onClick={() => navTo('shop')}
class={`login-btn ${nav === 'shop' ? 'highlight' : ''}`}>

2
client/src/components/main.top.jsx
View File

@ -6,6 +6,7 @@ const actions = require('./../actions');
const AccountTop = require('./account.top');
const Play = require('./play');
const Shop = require('./shop');
const Reshape = require('./reshape');
const addState = connect(
function receiveState(state) {
@ -27,6 +28,7 @@ function Top(args) {
if (nav === 'account') return <AccountTop />;
if (nav === 'play') return <Play />
if (nav === 'shop') return <Shop />
if (nav === 'reshape') return <Reshape />
return false;
}

128
client/src/components/play.jsx
View File

@ -1,132 +1,38 @@
// 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) => {
const price = item === 'Rename' ? 5 : 1;
return (
<figure key={i} onClick={() => setMtxActive(item)} >
<figcaption>{item}</figcaption>
<button disabled={account.balance === 0}>¤{price}</button>
</figure>
);
};
const availableMtx = (item, i) => (
<figure key={i}>
<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>;
function Play() {
return (
<section class="top">
<div class="news">
<h2>v{VERSION}</h2>
<p class="play-p">Use the buttons on the right to join an instance.</p>
<p>
Select <b>PVP</b> to play against other players.<br />
Select <b>INVITE</b> then click <b>COPY LINK</b> to generate an instance invitation for a friend.<br />
Click <b>LEARN</b> to practice the game without time controls.
Join our discord server to find opponents and talk to the devs. <br />
Message @ntr or @mashy on discord. Invite link on the right control panel. <br />
We will also give you some credits to try the mtx. <br />
</p>
<p>Join our Discord server to find opponents, message @ntr or @mashy for some credits to get started.</p>
<p>
If you enjoy the game please support its development by <b>subscribing</b> or purchasing <b>credits</b>.<br />
If you enjoy the game you can support the development:
<ul>
<li>Invite people to play pvp games and grow the community. </li>
<li><b>Subscribe</b> or purchase <b>credits</b>.</li>
</ul>
glhf
</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)}
</div>
<div class='list'>
{shop.available.map(availableMtx)}
</div>
<p class="play-p">The buttons on the right are the controls to play the game.</p>
<p>
Click <b>LEARN</b> to practice the game without time controls. <br />
Select <b>INVITE</b> then click <b>COPY LINK</b> to create a game invitation for a friend.<br />
Select <b>PVP</b> to queue for a game against other players. <br />
</p>
<p> If you can't find a match through pvp queue, ask around on discord. </p>
</div>
</section>
);
}
module.exports = addState(Play);
module.exports = Play;

131
client/src/components/reshape.jsx Normal file
View File

@ -0,0 +1,131 @@
// const { connect } = require('preact-redux');
const preact = require('preact');
const { connect } = require('preact-redux');
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 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} onClick={e => {
e.stopPropagation();
setMtxActive(item);
}}>
<figcaption>{item}</figcaption>
<button disabled={account.balance === 0}>¤{price}</button>
</figure>
);
};
const availableMtx = (item, i) => (
<figure key={i}>
<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)}
</div>
<div class='list'>
{shop.available.map(availableMtx)}
</div>
</div>
</section>
);
}
module.exports = addState(Reshape);

3
client/src/events.jsx
View File

@ -28,7 +28,8 @@ function registerEvents(store) {
function setTeam(team) {
store.dispatch(actions.setTeam(team));
setNav('play');
const { nav } = store.getState();
if (nav !== 'reshape') setNav('play');
}
function setSubscription(sub) {