reverting to old preact

client/assets/styles/styles.css

@@ -370,6 +370,7 @@ header {
 }
 
 .constructs-list {
+    max-height: 100%;
     margin-top: 0.5em;
     grid-area: team;
 

client/assets/styles/styles.mobile.css

@@ -18,45 +18,21 @@
     }
 
     nav {
-        opacity: 0;
+        display: none;
-        position: fixed;
+    }
-        margin-top: 4em;
+
-        pointer-events: none;
+    #mnml.nav-visible nav {
-        -webkit-transition: all 0.5s ease-in-out;
+        display: grid;
-        -moz-transition: all 0.5s ease-in-out;
+    }
-        -o-transition: all 0.5s ease-in-out;
+
-        transition: all 0.5s ease-in-out;
+    #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%;
     }

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

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 Mnml = require('./components/mnml');
-const Main = require('./components/main');
-const Nav = require('./components/nav');
 
 // 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 />

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 details = {
-    const [password, setPassword] = useState('');
+        name: '',
+        password: '',
+    };
 
     return (
-        <div className="login">
+        <main>
-            <input
+            <div className="login">
-                className="login-input"
+                <input
-                type="email"
+                    className="login-input"
-                placeholder="username"
+                    type="email"
-                onInput={e => setName(e.target.value)}
+                    placeholder="username"
-            />
+                    onChange={e => (details.name = e.target.value)}
-            <input
+                />
-                className="login-input"
+                <input
-                type="password"
+                    className="login-input"
-                placeholder="password"
+                    type="password"
-                onInput={e => setPassword(e.target.value)}
+                    placeholder="password"
-            />
+                    onChange={e => (details.password = e.target.value)}
-            <button
+                />
-                className="login-btn"
+                <button
-                onClick={() => submitLogin(name, password)}>
+                    className="login-btn"
-                Login
+                    onClick={() => submitLogin(details.name, details.password)}>
-            </button>
+                    Login
-            <button
+                </button>
-                className="login-btn"
+                <button
-                onClick={() => submitRegister(name, password)}>
+                    className="login-btn"
-                Register
+                    onClick={() => submitRegister(details.name, details.password)}>
-            </button>
+                    Register
-            <button
+                </button>
-                className="login-btn"
+                <button
-                onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
+                    className="login-btn"
-                Discord + Invites
+                    onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
-            </button>
+                    Discord + Invites
-        </div>
+                </button>
+            </div>
+        </main>
     );
 }
 

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 };
     },
 );
 

client/src/components/main.jsx

@@ -24,23 +24,15 @@ function Main(props) {
     } = props;
 
     if (!account) {
-        return (
+        return <LoginContainer />;
-            <main>
-                <LoginContainer />
-            </main>
-        );
     }
 
     if (game) {
-        return (
+        return <GameContainer />;
-            <GameContainer />
-        );
     }
 
     if (instance) {
-        return (
+        return <Instance />;
-            <Instance />
-        );
     }
 
     if (nav === 'team') return <Team />;

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

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,

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 }) {
+class SpawnButton extends Component {
-    const [name, setName] = useState('');
+    constructor(props) {
-    const [enabled, setEnabled] = useState(false);
+        super(props);
 
-    function nameInput(e) {
+        this.state = { value: null, enabled: false };
-        e.stopPropagation();
+
-        setName(e.target.value);
+        this.handleInput = this.handleInput.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.enable = this.enable.bind(this);
     }
 
-    function enabledToggle(e) {
+    handleInput(event) {
-        e.stopPropagation();
+        console.log(event.target.value);
-        setEnabled(true);
+        this.setState({ value: event.target.value });
     }
 
-    return (
+    handleSubmit(event) {
-        <div
+        event.preventDefault();
-            className="menu-construct spawn-btn"
+        this.props.spawn(this.state.value);
-            onClick={e => enabledToggle(e)} >
+        this.setState({ value: null, enabled: false });
-            <h2>+</h2>
+    }
-            <input
+
-                className="login-input"
+    enable() {
-                type="text"
+        this.setState({ enabled: true });
-                disabled={!enabled}
+    }
-                value={name}
+
-                placeholder="name"
+    render() {
-                onInput={e => nameInput(e)}
+        return (
-            />
+            <div
-            <button
+                key={this.props.i}
-                className="login-btn"
+                className="menu-construct spawn-btn"
-                disabled={!enabled}
+                onClick={() => this.enable()} >
-                onClick={() => spawn(name)}
+                <h2>+</h2>
-                type="submit">
+                <input
-                spawn
+                    className="login-input"
-            </button>
+                    type="text"
-        </div>
+                    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;

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'),

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(() => {
+    // useEffect(() => {
-        animateConstruct(id);
+    //     animateConstruct(id);
-        return () => clearAnimation(id);
+    //     return () => clearAnimation(id);
-    });
+    // });
 
     return (
         <img
@@ -96,10 +95,10 @@ function constructAvatar(name, id) {
 }
 
 function instanceConstruct(name, id) {
-    useEffect(() => {
+    // useEffect(() => {
-        animateConstruct(id);
+    //     animateConstruct(id);
-        return () => clearAnimation(id);
+    //     return () => clearAnimation(id);
-    });
+    // });
 
     return (
         <div
@@ -111,10 +110,10 @@ function instanceConstruct(name, id) {
 }
 
 function gameConstructImg(name, id, combatTextEl, selectSkillTarget) {
-    useEffect(() => {
+    // useEffect(() => {
-        animateConstruct(id);
+    //     animateConstruct(id);
-        return () => clearAnimation(id);
+    //     return () => clearAnimation(id);
-    });
+    // });
 
     return (
         <div