From 47bbefc0a811d6f7c5879a5839c22ea2f01ecb25 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 30 May 2019 14:46:53 +1000
Subject: [PATCH 1/4] team styles

---
 client/assets/styles/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css
index 162d3417..ff7d5dcb 100644
--- a/client/assets/styles/styles.css
+++ b/client/assets/styles/styles.css
@@ -375,7 +375,7 @@ header {
 
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    /*grid-auto-rows: 1fr;*/
+    grid-auto-rows: 1fr;
     grid-gap: 0.5em;
 }
 

From 83cfa9cd430b5d66e0376059d298dad96b47e5ea Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 30 May 2019 16:29:41 +1000
Subject: [PATCH 2/4] reverting to old preact

---
 client/assets/styles/styles.css           |  1 +
 client/assets/styles/styles.mobile.css    | 42 +++---------
 client/src/actions.jsx                    |  1 +
 client/src/app.jsx                        | 16 +----
 client/src/components/login.component.jsx | 67 ++++++++++---------
 client/src/components/login.container.jsx |  4 +-
 client/src/components/main.jsx            | 14 +---
 client/src/components/mnml.jsx            | 24 +++++++
 client/src/components/nav.jsx             |  3 +
 client/src/components/spawn.button.jsx    | 79 ++++++++++++++---------
 client/src/reducers.jsx                   |  5 +-
 client/src/utils.jsx                      | 25 ++++---
 12 files changed, 142 insertions(+), 139 deletions(-)
 create mode 100644 client/src/components/mnml.jsx

diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css
index ff7d5dcb..a4efc732 100644
--- a/client/assets/styles/styles.css
+++ b/client/assets/styles/styles.css
@@ -370,6 +370,7 @@ header {
 }
 
 .constructs-list {
+    max-height: 100%;
     margin-top: 0.5em;
     grid-area: team;
 
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index bd29c7f6..e5db00b4 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -18,45 +18,21 @@
     }
 
     nav {
-        opacity: 0;
-        position: fixed;
-        margin-top: 4em;
-        pointer-events: none;
-        -webkit-transition: all 0.5s ease-in-out;
-        -moz-transition: all 0.5s ease-in-out;
-        -o-transition: all 0.5s ease-in-out;
-        transition: all 0.5s ease-in-out;
+        display: none;
+    }
+
+    #mnml.nav-visible nav {
+        display: grid;
+    }
+
+    #mnml.nav-visible main {
+        display: none;
     }
 
     main {
         overflow-x: hidden;
     }
 
-    #toggle-nav { display: none; }
-
-    #toggle-nav-label {
-        grid-area: tnav;
-        color: whitesmoke;
-        line-height: 1.75em;
-        font-size: 1.5em;
-        display: block;
-        cursor: pointer;
-        margin-right: 0.5em;
-    }
-
-    #toggle-nav:checked  #toggle-nav-label {
-      color: #ababab;
-    }
-
-    #toggle-nav:checked ~ nav {
-        opacity: 1;
-        pointer-events: auto;
-    }
-    #toggle-nav:checked ~ main {
-        opacity: 0.1;
-        pointer-events: none;
-    }
-
     .login {
         width: 100%;
     }
diff --git a/client/src/actions.jsx b/client/src/actions.jsx
index 9e8e1b43..f729d120 100644
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@@ -5,6 +5,7 @@ export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setInstances = value => ({ type: 'SET_INSTANCES', value });
 export const setNav = value => ({ type: 'SET_NAV', value });
+export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
 export const setInstance = value => ({ type: 'SET_INSTANCE', value });
 export const setPing = value => ({ type: 'SET_PING', value });
 export const setGame = value => ({ type: 'SET_GAME', value });
diff --git a/client/src/app.jsx b/client/src/app.jsx
index 12827c59..715103e2 100644
--- a/client/src/app.jsx
+++ b/client/src/app.jsx
@@ -1,7 +1,7 @@
 const preact = require('preact');
 // const logger = require('redux-diff-logger');
 
-const { Provider } = require('react-redux');
+const { Provider, connect } = require('react-redux');
 const { createStore, combineReducers } = require('redux');
 
 const reducers = require('./reducers');
@@ -10,9 +10,7 @@ const setupKeys = require('./keyboard');
 const createSocket = require('./socket');
 const registerEvents = require('./events');
 
-const Header = require('./components/header.container');
-const Main = require('./components/main');
-const Nav = require('./components/nav');
+const Mnml = require('./components/mnml');
 
 // Redux Store
 const store = createStore(
@@ -28,16 +26,6 @@ document.fonts.load('16pt "Jura"').then(() => {
     store.dispatch(actions.setWs(ws));
     ws.connect();
 
-    const Mnml = () => (
-        <div id="mnml" >
-            <input type="checkbox" id="toggle-nav"/>
-            <label id="toggle-nav-label" htmlFor="toggle-nav"><i className="fa fa-bars"></i></label>
-            <Header />
-            <Nav />
-            <Main />
-        </div>
-    );
-
     const App = () => (
         <Provider store={store}>
             <Mnml />
diff --git a/client/src/components/login.component.jsx b/client/src/components/login.component.jsx
index 41465585..2e8ba903 100644
--- a/client/src/components/login.component.jsx
+++ b/client/src/components/login.component.jsx
@@ -1,41 +1,44 @@
 // eslint-disable-next-line
 const preact = require('preact');
-const { useState } = require('preact/hooks');
 
 function renderLogin({ submitLogin, submitRegister }) {
-    const [name, setName] = useState('');
-    const [password, setPassword] = useState('');
+    const details = {
+        name: '',
+        password: '',
+    };
 
     return (
-        <div className="login">
-            <input
-                className="login-input"
-                type="email"
-                placeholder="username"
-                onInput={e => setName(e.target.value)}
-            />
-            <input
-                className="login-input"
-                type="password"
-                placeholder="password"
-                onInput={e => setPassword(e.target.value)}
-            />
-            <button
-                className="login-btn"
-                onClick={() => submitLogin(name, password)}>
-                Login
-            </button>
-            <button
-                className="login-btn"
-                onClick={() => submitRegister(name, password)}>
-                Register
-            </button>
-            <button
-                className="login-btn"
-                onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
-                Discord + Invites
-            </button>
-        </div>
+        <main>
+            <div className="login">
+                <input
+                    className="login-input"
+                    type="email"
+                    placeholder="username"
+                    onChange={e => (details.name = e.target.value)}
+                />
+                <input
+                    className="login-input"
+                    type="password"
+                    placeholder="password"
+                    onChange={e => (details.password = e.target.value)}
+                />
+                <button
+                    className="login-btn"
+                    onClick={() => submitLogin(details.name, details.password)}>
+                    Login
+                </button>
+                <button
+                    className="login-btn"
+                    onClick={() => submitRegister(details.name, details.password)}>
+                    Register
+                </button>
+                <button
+                    className="login-btn"
+                    onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
+                    Discord + Invites
+                </button>
+            </div>
+        </main>
     );
 }
 
diff --git a/client/src/components/login.container.jsx b/client/src/components/login.container.jsx
index 0cba679e..32a451c4 100644
--- a/client/src/components/login.container.jsx
+++ b/client/src/components/login.container.jsx
@@ -4,7 +4,7 @@ const Login = require('./login.component');
 
 const addState = connect(
     (state) => {
-        const { ws } = state;
+        const { ws, account } = state;
         function submitLogin(name, password) {
             return ws.sendAccountLogin(name, password);
         }
@@ -12,7 +12,7 @@ const addState = connect(
             console.log(name, password);
             return ws.sendAccountCreate(name, password);
         }
-        return { account: state.account, submitLogin, submitRegister };
+        return { account, submitLogin, submitRegister };
     },
 );
 
diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx
index 0e4c7b28..ec4b132e 100644
--- a/client/src/components/main.jsx
+++ b/client/src/components/main.jsx
@@ -24,23 +24,15 @@ function Main(props) {
     } = props;
 
     if (!account) {
-        return (
-            <main>
-                <LoginContainer />
-            </main>
-        );
+        return <LoginContainer />;
     }
 
     if (game) {
-        return (
-            <GameContainer />
-        );
+        return <GameContainer />;
     }
 
     if (instance) {
-        return (
-            <Instance />
-        );
+        return <Instance />;
     }
 
     if (nav === 'team') return <Team />;
diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx
new file mode 100644
index 00000000..b69c718c
--- /dev/null
+++ b/client/src/components/mnml.jsx
@@ -0,0 +1,24 @@
+const preact = require('preact');
+const { connect } = require('react-redux');
+
+const actions = require('./../actions');
+const Header = require('./header.container');
+const Main = require('./main');
+const Nav = require('./nav');
+
+const addState = connect(
+    state => ({ showNav: state.showNav }),
+    dispatch => ({
+        setShowNav: v => dispatch(actions.setShowNav(v)),
+    })
+);
+
+const Mnml = ({ showNav, setShowNav }) =>
+    <div id="mnml" className={showNav ? 'nav-visible' : ''}>
+        <i onClick={() => setShowNav(!showNav)} className="fa fa-bars"></i>
+        <Header />
+        <Nav />
+        <Main />
+    </div>;
+
+module.exports = addState(Mnml);
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index d7a352a4..244bce49 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -15,6 +15,7 @@ const addState = connect(
             team,
             constructs,
             game,
+            showNav,
         } = state;
 
         function sendInstanceState(instance) {
@@ -31,6 +32,7 @@ const addState = connect(
             team,
             constructs,
             game,
+            showNav,
             sendInstanceState,
             sendAccountInstances,
         };
@@ -68,6 +70,7 @@ function Nav(args) {
         constructs,
         instances,
         game,
+        showNav,
 
         setTestGame,
         setTestInstance,
diff --git a/client/src/components/spawn.button.jsx b/client/src/components/spawn.button.jsx
index 65924d77..fceeb1d0 100644
--- a/client/src/components/spawn.button.jsx
+++ b/client/src/components/spawn.button.jsx
@@ -1,42 +1,57 @@
 const preact = require('preact');
-const { useState } = require('preact/hooks');
+const { Component } = require('preact');
 
-function SpawnButton({ spawn }) {
-    const [name, setName] = useState('');
-    const [enabled, setEnabled] = useState(false);
+class SpawnButton extends Component {
+    constructor(props) {
+        super(props);
 
-    function nameInput(e) {
-        e.stopPropagation();
-        setName(e.target.value);
+        this.state = { value: null, enabled: false };
+
+        this.handleInput = this.handleInput.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.enable = this.enable.bind(this);
     }
 
-    function enabledToggle(e) {
-        e.stopPropagation();
-        setEnabled(true);
+    handleInput(event) {
+        console.log(event.target.value);
+        this.setState({ value: event.target.value });
     }
 
-    return (
-        <div
-            className="menu-construct spawn-btn"
-            onClick={e => enabledToggle(e)} >
-            <h2>+</h2>
-            <input
-                className="login-input"
-                type="text"
-                disabled={!enabled}
-                value={name}
-                placeholder="name"
-                onInput={e => nameInput(e)}
-            />
-            <button
-                className="login-btn"
-                disabled={!enabled}
-                onClick={() => spawn(name)}
-                type="submit">
-                spawn
-            </button>
-        </div>
-    );
+    handleSubmit(event) {
+        event.preventDefault();
+        this.props.spawn(this.state.value);
+        this.setState({ value: null, enabled: false });
+    }
+
+    enable() {
+        this.setState({ enabled: true });
+    }
+
+    render() {
+        return (
+            <div
+                key={this.props.i}
+                className="menu-construct spawn-btn"
+                onClick={() => this.enable()} >
+                <h2>+</h2>
+                <input
+                    className="login-input"
+                    type="text"
+                    disabled={!this.state.enabled}
+                    value={this.state.value}
+                    placeholder="name"
+                    onInput={this.handleInput}
+                />
+                <button
+                    className="login-btn"
+                    disabled={!this.state.enabled}
+                    onClick={this.handleSubmit}
+                    type="submit">
+                    spawn
+                </button>
+            </div>
+        );
+    }
 }
 
 module.exports = SpawnButton;
\ No newline at end of file
diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx
index 88c5d91a..4e5baf16 100644
--- a/client/src/reducers.jsx
+++ b/client/src/reducers.jsx
@@ -12,11 +12,11 @@ function createReducer(defaultState, actionType) {
 /* eslint-disable key-spacing */
 module.exports = {
     account:            createReducer(null, 'SET_ACCOUNT'),
-    activeConstruct:         createReducer(null, 'SET_ACTIVE_CONSTRUCT'),
+    activeConstruct:    createReducer(null, 'SET_ACTIVE_CONSTRUCT'),
     activeItem:         createReducer(null, 'SET_ACTIVE_VAR'),
     activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
     combiner:           createReducer([null, null, null], 'SET_COMBINER'),
-    constructs:              createReducer([], 'SET_CONSTRUCTS'),
+    constructs:         createReducer([], 'SET_CONSTRUCTS'),
     game:               createReducer(null, 'SET_GAME'),
     info:               createReducer(null, 'SET_INFO'),
     instance:           createReducer(null, 'SET_INSTANCE'),
@@ -25,6 +25,7 @@ module.exports = {
     itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),
     itemUnequip:        createReducer(null, 'SET_ITEM_UNEQUIP'),
     nav:                createReducer(null, 'SET_NAV'),
+    showNav:            createReducer(null, 'SET_SHOW_NAV'),
     ping:               createReducer(null, 'SET_PING'),
     reclaiming:         createReducer(false, 'SET_RECLAIMING'),
     resolution:         createReducer(null, 'SET_RESOLUTION'),
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 01d4b34c..6d9d452a 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -1,5 +1,4 @@
 const preact = require('preact');
-const { useEffect } = require('preact/hooks');
 
 const get = require('lodash/get');
 const anime = require('animejs').default;
@@ -80,10 +79,10 @@ function clearAnimation(id) {
 }
 
 function constructAvatar(name, id) {
-    useEffect(() => {
-        animateConstruct(id);
-        return () => clearAnimation(id);
-    });
+    // useEffect(() => {
+    //     animateConstruct(id);
+    //     return () => clearAnimation(id);
+    // });
 
     return (
         <img
@@ -96,10 +95,10 @@ function constructAvatar(name, id) {
 }
 
 function instanceConstruct(name, id) {
-    useEffect(() => {
-        animateConstruct(id);
-        return () => clearAnimation(id);
-    });
+    // useEffect(() => {
+    //     animateConstruct(id);
+    //     return () => clearAnimation(id);
+    // });
 
     return (
         <div
@@ -111,10 +110,10 @@ function instanceConstruct(name, id) {
 }
 
 function gameConstructImg(name, id, combatTextEl, selectSkillTarget) {
-    useEffect(() => {
-        animateConstruct(id);
-        return () => clearAnimation(id);
-    });
+    // useEffect(() => {
+    //     animateConstruct(id);
+    //     return () => clearAnimation(id);
+    // });
 
     return (
         <div

From 70dcf26d58d15aecf450ec90066501f0f89e917e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 30 May 2019 16:33:55 +1000
Subject: [PATCH 3/4] revert preact x

---
 client/package.json                            | 9 +++------
 client/src/app.jsx                             | 2 +-
 client/src/components/game.construct.jsx       | 2 +-
 client/src/components/game.container.jsx       | 2 +-
 client/src/components/header.container.jsx     | 2 +-
 client/src/components/info.container.jsx       | 2 +-
 client/src/components/instance.component.jsx   | 2 +-
 client/src/components/instance.constructs.jsx  | 2 +-
 client/src/components/instance.create.form.jsx | 2 +-
 client/src/components/instance.equip.jsx       | 2 +-
 client/src/components/list.jsx                 | 2 +-
 client/src/components/login.container.jsx      | 2 +-
 client/src/components/main.jsx                 | 2 +-
 client/src/components/menu.container.jsx       | 2 +-
 client/src/components/mnml.jsx                 | 2 +-
 client/src/components/nav.jsx                  | 2 +-
 client/src/components/skill.btn.jsx            | 2 +-
 client/src/components/targeting.arrows.jsx     | 2 +-
 client/src/components/team.jsx                 | 2 +-
 client/src/components/vbox.component.jsx       | 2 +-
 20 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/client/package.json b/client/package.json
index dd03ae0c..80d32b83 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,8 +22,9 @@
     "lodash": "^4.17.11",
     "node-sass": "^4.12.0",
     "parcel": "^1.12.3",
-    "preact": "^10.0.0-beta.1",
-    "react-redux": "^7.0.3",
+    "preact": "^8.4.2",
+    "preact-context": "^1.1.3",
+    "preact-redux": "^2.1.0",
     "redux": "^4.0.0"
   },
   "devDependencies": {
@@ -36,9 +37,5 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
     "jest": "^18.0.0"
-  },
-  "alias": {
-    "react": "preact/compat",
-    "react-dom": "preact/compat"
   }
 }
diff --git a/client/src/app.jsx b/client/src/app.jsx
index 715103e2..06da152a 100644
--- a/client/src/app.jsx
+++ b/client/src/app.jsx
@@ -1,7 +1,7 @@
 const preact = require('preact');
 // const logger = require('redux-diff-logger');
 
-const { Provider, connect } = require('react-redux');
+const { Provider, connect } = require('preact-redux');
 const { createStore, combineReducers } = require('redux');
 
 const reducers = require('./reducers');
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index b749e37b..a12d231f 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 const preact = require('preact');
 const range = require('lodash/range');
 
diff --git a/client/src/components/game.container.jsx b/client/src/components/game.container.jsx
index 50ebb468..f6709c4c 100644
--- a/client/src/components/game.container.jsx
+++ b/client/src/components/game.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
diff --git a/client/src/components/header.container.jsx b/client/src/components/header.container.jsx
index 93f24dcf..a9a27313 100644
--- a/client/src/components/header.container.jsx
+++ b/client/src/components/header.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const Header = require('./header.component');
 
diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx
index a5c75f2c..9d460ff9 100644
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 const Info = require('./info.component');
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 2bc1b09c..796ac788 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 91af7728..fabb665e 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 const preact = require('preact');
 const range = require('lodash/range');
 
diff --git a/client/src/components/instance.create.form.jsx b/client/src/components/instance.create.form.jsx
index 77a8abfc..33d7e219 100644
--- a/client/src/components/instance.create.form.jsx
+++ b/client/src/components/instance.create.form.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 const { Component } = require('preact');
 
 const addState = connect(
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index a5f8f813..bc44bc0c 100644
--- a/client/src/components/instance.equip.jsx
+++ b/client/src/components/instance.equip.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 const preact = require('preact');
 const range = require('lodash/range');
 
diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx
index d5f6c926..778f9e11 100644
--- a/client/src/components/list.jsx
+++ b/client/src/components/list.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 const preact = require('preact');
 
 const { stringSort, NULL_UUID, COLOURS, constructAvatar } = require('./../utils');
diff --git a/client/src/components/login.container.jsx b/client/src/components/login.container.jsx
index 32a451c4..d0ca7fe4 100644
--- a/client/src/components/login.container.jsx
+++ b/client/src/components/login.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const Login = require('./login.component');
 
diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx
index ec4b132e..c38cd7cb 100644
--- a/client/src/components/main.jsx
+++ b/client/src/components/main.jsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line
 const preact = require('preact');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const LoginContainer = require('./login.container');
 const GameContainer = require('./game.container');
diff --git a/client/src/components/menu.container.jsx b/client/src/components/menu.container.jsx
index a43dab97..c4918b72 100644
--- a/client/src/components/menu.container.jsx
+++ b/client/src/components/menu.container.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const Menu = require('./menu.component');
 const actions = require('./../actions');
diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx
index b69c718c..316886ce 100644
--- a/client/src/components/mnml.jsx
+++ b/client/src/components/mnml.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const actions = require('./../actions');
 const Header = require('./header.container');
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index 244bce49..ce1c88e2 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 const preact = require('preact');
 const { Fragment } = require('preact');
 const actions = require('../actions');
diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx
index 58fc922a..1f2e2740 100644
--- a/client/src/components/skill.btn.jsx
+++ b/client/src/components/skill.btn.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index b114fb9d..6f578aa9 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const addState = connect(
     ({ game, account, resolution }) => ({ game, account, resolution })
diff --git a/client/src/components/team.jsx b/client/src/components/team.jsx
index 151c73d9..0acb1b3f 100644
--- a/client/src/components/team.jsx
+++ b/client/src/components/team.jsx
@@ -1,5 +1,5 @@
 const preact = require('preact');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 const range = require('lodash/range');
 
 const actions = require('./../actions');
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 555694ea..df699660 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -1,6 +1,6 @@
 const preact = require('preact');
 const range = require('lodash/range');
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const shapes = require('./shapes');
 const { convertItem } = require('./../utils');

From f3a673d7d199ae9aec40d4f08b36864ab58d9406 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 30 May 2019 16:45:35 +1000
Subject: [PATCH 4/4] one click mobile nav

---
 client/assets/styles/styles.css            |  5 +++--
 client/assets/styles/styles.mobile.css     |  8 +++++++-
 client/src/components/header.component.jsx |  3 ++-
 client/src/components/header.container.jsx |  8 ++++++--
 client/src/components/mnml.jsx             |  7 +------
 client/src/components/nav.jsx              | 11 +++++++----
 6 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css
index a4efc732..bc849a64 100644
--- a/client/assets/styles/styles.css
+++ b/client/assets/styles/styles.css
@@ -571,5 +571,6 @@ main .top button {
 }
 
 /* Mobile Nav*/
-#toggle-nav { display: none; }
-#toggle-nav-label { display: none; }
+#nav-btn {
+    display: none;
+}
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index e5db00b4..636cafb2 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -21,8 +21,14 @@
         display: none;
     }
 
+    #nav-btn {
+        display: inline-block;
+        margin: 0 0.5em;
+    }
+
     #mnml.nav-visible nav {
-        display: grid;
+        display: block;
+        grid-area: main;
     }
 
     #mnml.nav-visible main {
diff --git a/client/src/components/header.component.jsx b/client/src/components/header.component.jsx
index 1df1afc4..c6b0ca3c 100644
--- a/client/src/components/header.component.jsx
+++ b/client/src/components/header.component.jsx
@@ -10,7 +10,7 @@ function pingColour(ping) {
 }
 
 function renderHeader(args) {
-    const { account, ping } = args;
+    const { account, ping, setShowNav, showNav } = args;
 
     const accountStatus = account
         ? (<div className="header-status">
@@ -23,6 +23,7 @@ function renderHeader(args) {
     return (
         <header>
             <h1 className="header-title">
+                <i id="nav-btn" onClick={() => setShowNav(!showNav)} className="fa fa-bars"></i>
                 mnml.gg
             </h1>
             {accountStatus}
diff --git a/client/src/components/header.container.jsx b/client/src/components/header.container.jsx
index a9a27313..2b1e73f1 100644
--- a/client/src/components/header.container.jsx
+++ b/client/src/components/header.container.jsx
@@ -1,11 +1,15 @@
 const { connect } = require('preact-redux');
 
 const Header = require('./header.component');
+const actions = require('./../actions');
 
 const addState = connect(
-    ({ account, ping }) => {
-        return { account, ping };
+    ({ account, ping, showNav }) => {
+        return { account, ping, showNav };
     },
+    dispatch => ({
+        setShowNav: v => dispatch(actions.setShowNav(v)),
+    })
 );
 
 module.exports = addState(Header);
diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx
index 316886ce..31f79e3e 100644
--- a/client/src/components/mnml.jsx
+++ b/client/src/components/mnml.jsx
@@ -1,21 +1,16 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const actions = require('./../actions');
 const Header = require('./header.container');
 const Main = require('./main');
 const Nav = require('./nav');
 
 const addState = connect(
-    state => ({ showNav: state.showNav }),
-    dispatch => ({
-        setShowNav: v => dispatch(actions.setShowNav(v)),
-    })
+    state => ({ showNav: state.showNav })
 );
 
 const Mnml = ({ showNav, setShowNav }) =>
     <div id="mnml" className={showNav ? 'nav-visible' : ''}>
-        <i onClick={() => setShowNav(!showNav)} className="fa fa-bars"></i>
         <Header />
         <Nav />
         <Main />
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index ce1c88e2..d054992e 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -15,7 +15,6 @@ const addState = connect(
             team,
             constructs,
             game,
-            showNav,
         } = state;
 
         function sendInstanceState(instance) {
@@ -32,7 +31,6 @@ const addState = connect(
             team,
             constructs,
             game,
-            showNav,
             sendInstanceState,
             sendAccountInstances,
         };
@@ -52,10 +50,15 @@ const addState = connect(
             return dispatch(actions.setNav(place));
         }
 
+        function hideNav() {
+            return dispatch(actions.setShowNav(false));
+        }
+
         return {
             setTestGame,
             setTestInstance,
             setNav,
+            hideNav,
         };
     }
 );
@@ -70,11 +73,11 @@ function Nav(args) {
         constructs,
         instances,
         game,
-        showNav,
 
         setTestGame,
         setTestInstance,
         setNav,
+        hideNav,
     } = args;
 
     function navTo(p) {
@@ -110,7 +113,7 @@ function Nav(args) {
         : null;
 
     return (
-        <nav>
+        <nav onClick={hideNav} >
             <h2>Team</h2>
             {teamElements}
             <h2>Instances</h2>