nav
This commit is contained in:
parent
aca772263a
commit
127bdf0530
45
client/src/components/nav.jsx
Normal file
45
client/src/components/nav.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
const { connect } = require('preact-redux');
|
||||
const preact = require('preact');
|
||||
const actions = require('../actions');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const {
|
||||
ws,
|
||||
instances,
|
||||
cryps,
|
||||
} = state;
|
||||
|
||||
function sendInstanceState(instance) {
|
||||
return ws.sendInstanceState(instance.id);
|
||||
}
|
||||
|
||||
return {
|
||||
instances,
|
||||
sendInstanceState,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
function Nav(args) {
|
||||
const {
|
||||
sendInstanceState,
|
||||
instances,
|
||||
} = args;
|
||||
|
||||
const joined = instances.map((i, j) => (
|
||||
<button key={j} onClick={() => sendInstanceState(i)} >{i.name}</button>
|
||||
));
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<h2>Instances</h2>
|
||||
<button>list</button>
|
||||
<button>create</button>
|
||||
<hr />
|
||||
{joined}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(Nav);
|
||||
@ -12,6 +12,7 @@ const registerEvents = require('./events');
|
||||
|
||||
const Header = require('./components/header.container');
|
||||
const Body = require('./components/body.component');
|
||||
const Nav = require('./components/nav');
|
||||
|
||||
// Redux Store
|
||||
const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
|
||||
@ -53,19 +54,7 @@ document.fonts.load('16pt "Jura"').then(() => {
|
||||
const Cryps = () => (
|
||||
<main className="cryps" >
|
||||
<Header />
|
||||
<nav>
|
||||
<h2>Instances</h2>
|
||||
<button>
|
||||
join new
|
||||
</button>
|
||||
<hr />
|
||||
<button>
|
||||
six
|
||||
</button>
|
||||
<button>
|
||||
grep
|
||||
</button>
|
||||
</nav>
|
||||
<Nav />
|
||||
<Body />
|
||||
</main>
|
||||
);
|
||||
|
||||
@ -80,7 +80,7 @@ function crypsReducer(state = defaultCryps, action) {
|
||||
}
|
||||
}
|
||||
|
||||
const defaultInstances = null;
|
||||
const defaultInstances = [];
|
||||
function instancesReducer(state = defaultInstances, action) {
|
||||
switch (action.type) {
|
||||
case actions.SET_INSTANCES:
|
||||
|
||||
@ -312,7 +312,7 @@ function createSocket(events) {
|
||||
sendAccountInstances();
|
||||
sendAccountCryps();
|
||||
// console.log(testGame);
|
||||
events.setGame(testGame(account.id));
|
||||
// events.setGame(testGame(account.id));
|
||||
clearGameStateTimeout();
|
||||
}
|
||||
|
||||
|
||||
@ -65,6 +65,10 @@ nav {
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
nav hr {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
nav button {
|
||||
display: block;
|
||||
color: #888;
|
||||
@ -98,7 +102,7 @@ tr.right:focus, tr.right:hover {
|
||||
}
|
||||
|
||||
tr {
|
||||
transition-property: all;
|
||||
transition-property: background, color;
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user