ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mashy 2019-05-30 16:55:24 +10:00
commit 43b1ce837f
28 changed files with 179 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/assets/styles/styles.css
View File

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

48
client/assets/styles/styles.mobile.css
View File

@ -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%;
}

9
client/package.json
View File

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

1
client/src/actions.jsx
View File

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

16
client/src/app.jsx
View File

@ -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 = () => (
<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 />

2
client/src/components/game.construct.jsx
View File

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

2
client/src/components/game.container.jsx
View File

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

3
client/src/components/header.component.jsx
View File

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

10
client/src/components/header.container.jsx
View File

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

2
client/src/components/info.container.jsx
View File

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

2
client/src/components/instance.component.jsx
View File

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

2
client/src/components/instance.constructs.jsx
View File

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

2
client/src/components/instance.create.form.jsx
View File

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

2
client/src/components/instance.equip.jsx
View File

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

2
client/src/components/list.jsx
View File

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

17
client/src/components/login.component.jsx
View File

@ -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 [password, setPassword] = useState('');
const details = {
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>
);
}

6
client/src/components/login.container.jsx
View File

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

16
client/src/components/main.jsx
View File

@ -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 (
<main>
<LoginContainer />
</main>
);
return <LoginContainer />;
}
if (game) {
return (
<GameContainer />
);
return <GameContainer />;
}
if (instance) {
return (
<Instance />
);
return <Instance />;
}
if (nav === 'team') return <Team />;

2
client/src/components/menu.container.jsx
View File

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

19
client/src/components/mnml.jsx Normal file
View File

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

10
client/src/components/nav.jsx
View File

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

2
client/src/components/skill.btn.jsx
View File

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

47
client/src/components/spawn.button.jsx
View File

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

2
client/src/components/targeting.arrows.jsx
View File

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

2
client/src/components/team.jsx
View File

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

2
client/src/components/vbox.component.jsx
View File

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

1
client/src/reducers.jsx
View File

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

25
client/src/utils.jsx
View File

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