Merge branch 'master' of ssh://mnml.gg:40022/~/mnml

client/assets/styles/styles.css

@@ -370,12 +370,13 @@ header {
 }
 
 .constructs-list {
+    max-height: 100%;
     margin-top: 0.5em;
     grid-area: team;
 
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    /*grid-auto-rows: 1fr;*/
+    grid-auto-rows: 1fr;
     grid-gap: 0.5em;
 }
 
@@ -570,5 +571,6 @@ main .top button {
 }
 
 /* Mobile Nav*/
-#toggle-nav { display: none; }
+#nav-btn {
-#toggle-nav-label { display: none; }
+    display: none;
+}

client/assets/styles/styles.mobile.css

@@ -18,45 +18,27 @@
     }
 
     nav {
-        opacity: 0;
+        display: none;
-        position: fixed;
+    }
-        margin-top: 4em;
+
-        pointer-events: none;
+    #nav-btn {
-        -webkit-transition: all 0.5s ease-in-out;
+        display: inline-block;
-        -moz-transition: all 0.5s ease-in-out;
+        margin: 0 0.5em;
-        -o-transition: all 0.5s ease-in-out;
+    }
-        transition: all 0.5s ease-in-out;
+
+    #mnml.nav-visible nav {
+        display: block;
+        grid-area: main;
+    }
+
+    #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/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",
+    "preact": "^8.4.2",
-    "react-redux": "^7.0.3",
+    "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"
   }
 }

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('preact-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/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');
 

client/src/components/game.container.jsx

@@ -1,4 +1,4 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 

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}

client/src/components/header.container.jsx

@@ -1,11 +1,15 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 const Header = require('./header.component');
+const actions = require('./../actions');
 
 const addState = connect(
-    ({ account, ping }) => {
+    ({ account, ping, showNav }) => {
-        return { account, ping };
+        return { account, ping, showNav };
     },
+    dispatch => ({
+        setShowNav: v => dispatch(actions.setShowNav(v)),
+    })
 );
 
 module.exports = addState(Header);

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

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

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

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(

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

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

client/src/components/login.component.jsx

@@ -1,33 +1,35 @@
 // 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 (
+        <main>
             <div className="login">
                 <input
                     className="login-input"
                     type="email"
                     placeholder="username"
-                onInput={e => setName(e.target.value)}
+                    onChange={e => (details.name = e.target.value)}
                 />
                 <input
                     className="login-input"
                     type="password"
                     placeholder="password"
-                onInput={e => setPassword(e.target.value)}
+                    onChange={e => (details.password = e.target.value)}
                 />
                 <button
                     className="login-btn"
-                onClick={() => submitLogin(name, password)}>
+                    onClick={() => submitLogin(details.name, details.password)}>
                     Login
                 </button>
                 <button
                     className="login-btn"
-                onClick={() => submitRegister(name, password)}>
+                    onClick={() => submitRegister(details.name, details.password)}>
                     Register
                 </button>
                 <button
@@ -36,6 +38,7 @@ function renderLogin({ submitLogin, submitRegister }) {
                     Discord + Invites
                 </button>
             </div>
+        </main>
     );
 }
 

client/src/components/login.container.jsx

@@ -1,10 +1,10 @@
-const { connect } = require('react-redux');
+const { connect } = require('preact-redux');
 
 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

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

client/src/components/mnml.jsx

@@ -0,0 +1,19 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const Header = require('./header.container');
+const Main = require('./main');
+const Nav = require('./nav');
+
+const addState = connect(
+    state => ({ showNav: state.showNav })
+);
+
+const Mnml = ({ showNav, setShowNav }) =>
+    <div id="mnml" className={showNav ? 'nav-visible' : ''}>
+        <Header />
+        <Nav />
+        <Main />
+    </div>;
+
+module.exports = addState(Mnml);

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');
@@ -50,10 +50,15 @@ const addState = connect(
             return dispatch(actions.setNav(place));
         }
 
+        function hideNav() {
+            return dispatch(actions.setShowNav(false));
+        }
+
         return {
             setTestGame,
             setTestInstance,
             setNav,
+            hideNav,
         };
     }
 );
@@ -72,6 +77,7 @@ function Nav(args) {
         setTestGame,
         setTestInstance,
         setNav,
+        hideNav,
     } = args;
 
     function navTo(p) {
@@ -107,7 +113,7 @@ function Nav(args) {
         : null;
 
     return (
-        <nav>
+        <nav onClick={hideNav} >
             <h2>Team</h2>
             {teamElements}
             <h2>Instances</h2>

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

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 });
     }
 
+    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={e => enabledToggle(e)} >
+                onClick={() => this.enable()} >
                 <h2>+</h2>
                 <input
                     className="login-input"
                     type="text"
-                disabled={!enabled}
+                    disabled={!this.state.enabled}
-                value={name}
+                    value={this.state.value}
                     placeholder="name"
-                onInput={e => nameInput(e)}
+                    onInput={this.handleInput}
                 />
                 <button
                     className="login-btn"
-                disabled={!enabled}
+                    disabled={!this.state.enabled}
-                onClick={() => spawn(name)}
+                    onClick={this.handleSubmit}
                     type="submit">
                     spawn
                 </button>
             </div>
         );
     }
+}
 
 module.exports = SpawnButton;

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

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

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

client/src/reducers.jsx

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