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

reverting to old preact

Browse Source
This commit is contained in:
ntr 2019-05-30 16:29:41 +10:00
parent 47bbefc0a8
commit 83cfa9cd43
12 changed files with 142 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -18,45 +18,21 @@
}
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;
}
#mnml.nav-visible nav {
display: grid;
}
#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%;
}

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('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 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 />

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

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

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

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

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

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

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

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

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

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;

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