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

nav

Browse Source
This commit is contained in:
ntr 2019-05-15 19:26:27 +10:00
parent aca772263a
commit 127bdf0530
5 changed files with 54 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
client/src/components/nav.jsx Normal file
View 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);

15
client/src/main.jsx
View File

@ -12,6 +12,7 @@ const registerEvents = require('./events');
const Header = require('./components/header.container'); const Header = require('./components/header.container');
const Body = require('./components/body.component'); const Body = require('./components/body.component');
const Nav = require('./components/nav');
// Redux Store // Redux Store
const createStoreWithMiddleware = applyMiddleware(logger)(createStore); const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
@ -53,19 +54,7 @@ document.fonts.load('16pt "Jura"').then(() => {
const Cryps = () => ( const Cryps = () => (
<main className="cryps" > <main className="cryps" >
<Header /> <Header />
<nav> <Nav />
<h2>Instances</h2>
<button>
join new
</button>
<hr />
<button>
six
</button>
<button>
grep
</button>
</nav>
<Body /> <Body />
</main> </main>
); );

2
client/src/reducers.jsx
View File

@ -80,7 +80,7 @@ function crypsReducer(state = defaultCryps, action) {
} }
} }
const defaultInstances = null; const defaultInstances = [];
function instancesReducer(state = defaultInstances, action) { function instancesReducer(state = defaultInstances, action) {
switch (action.type) { switch (action.type) {
case actions.SET_INSTANCES: case actions.SET_INSTANCES:

2
client/src/socket.jsx
View File

@ -312,7 +312,7 @@ function createSocket(events) {
sendAccountInstances(); sendAccountInstances();
sendAccountCryps(); sendAccountCryps();
// console.log(testGame); // console.log(testGame);
events.setGame(testGame(account.id)); // events.setGame(testGame(account.id));
clearGameStateTimeout(); clearGameStateTimeout();
} }

6
client/styles.css
View File

@ -65,6 +65,10 @@ nav {
margin-right: 2em; margin-right: 2em;
} }
nav hr {
margin: 2em 0;
}
nav button { nav button {
display: block; display: block;
color: #888; color: #888;
@ -98,7 +102,7 @@ tr.right:focus, tr.right:hover {
} }
tr { tr {
transition-property: all; transition-property: background, color;
transition-duration: 0.5s; transition-duration: 0.5s;
transition-delay: 0; transition-delay: 0;
transition-timing-function: ease; transition-timing-function: ease;