reverting to old preact

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

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 (
-            <main>
-                <LoginContainer />
-            </main>
-        );
+        return <LoginContainer />;
     }
 
     if (game) {
-        return (
-            <GameContainer />
-        );
+        return <GameContainer />;
     }
 
     if (instance) {
-        return (
-            <Instance />
-        );
+        return <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 }) {
-    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;