diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index 162d3417..bc849a64 100644 --- a/client/assets/styles/styles.css +++ b/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; } -#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 bd29c7f6..636cafb2 100644 --- a/client/assets/styles/styles.mobile.css +++ b/client/assets/styles/styles.mobile.css @@ -18,45 +18,27 @@ } 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; + } + + #nav-btn { + display: inline-block; + margin: 0 0.5em; + } + + #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%; } 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/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..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 } = 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 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 = () => ( -
- - -
-
- ); - const App = () => ( 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.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 ? (
@@ -23,6 +23,7 @@ function renderHeader(args) { return (

+ setShowNav(!showNav)} className="fa fa-bars"> mnml.gg

{accountStatus} diff --git a/client/src/components/header.container.jsx b/client/src/components/header.container.jsx index 93f24dcf..2b1e73f1 100644 --- a/client/src/components/header.container.jsx +++ b/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 }) => { - 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/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.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 ( -
- setName(e.target.value)} - /> - setPassword(e.target.value)} - /> - - - -
+
+
+ (details.name = e.target.value)} + /> + (details.password = e.target.value)} + /> + + + +
+
); } diff --git a/client/src/components/login.container.jsx b/client/src/components/login.container.jsx index 0cba679e..d0ca7fe4 100644 --- a/client/src/components/login.container.jsx +++ b/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 }; }, ); diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx index 0e4c7b28..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'); @@ -24,23 +24,15 @@ function Main(props) { } = props; if (!account) { - return ( -
- -
- ); + return ; } if (game) { - return ( - - ); + return ; } if (instance) { - return ( - - ); + return ; } if (nav === 'team') return ; 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 new file mode 100644 index 00000000..31f79e3e --- /dev/null +++ b/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 }) => +
+
+
; + +module.exports = addState(Mnml); diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx index d7a352a4..d054992e 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'); @@ -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 ( -