add reshape tab, remove mtx from play page

CHANGELOG.md

@@ -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

client/src/components/header.jsx

@@ -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' : ''}`}>

client/src/components/main.top.jsx

@@ -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;
 }

client/src/components/play.jsx

@@ -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 Play() {
-    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>;
-
     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 />
+                    Join our discord server to find opponents and talk to the devs. <br />
-                    Select <b>INVITE</b> then click <b>COPY LINK</b> to generate an instance invitation for a friend.<br />
+                    Message @ntr or @mashy on discord. Invite link on the right control panel. <br />
-                    Click <b>LEARN</b> to practice the game without time controls.
+                    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>
+                <p class="play-p">The buttons on the right are the controls to play the game.</p>
-                <div class='list'>
+                <p>
-                    {subscription}
+                    Click <b>LEARN</b> to practice the game without time controls. <br />
-                    <button
+                    Select <b>INVITE</b> then click <b>COPY LINK</b> to create a game invitation for a friend.<br />
-                        onClick={() => setNav('shop')}
+                    Select <b>PVP</b> to queue for a game against other players. <br />
-                        class="yellow-btn"
+                </p>
-                        role="link">
+                <p> If you can't find a match through pvp queue, ask around on discord. </p>
-                        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);
+module.exports = Play;

client/src/components/reshape.jsx

@@ -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);

client/src/events.jsx

@@ -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) {