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

move stuff for main

Browse Source
This commit is contained in:
ntr 2019-05-16 21:38:43 +10:00
parent fb9e947c9c
commit 3732e5414f
9 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/assets/normalize.css vendored
View File

@ -41,7 +41,7 @@ hgroup,
main, main,
menu, menu,
nav, nav,
section, main,
summary { summary {
display: block; display: block;
} }
@ -128,7 +128,7 @@ dfn {
} }
/** /**
* Address variable `h1` font-size and margin within `section` and `article` * Address variable `h1` font-size and margin within `main` and `article`
* contexts in Firefox 4+, Safari, and Chrome. * contexts in Firefox 4+, Safari, and Chrome.
*/ */

2
client/assets/skeleton.css vendored
View File

@ -398,7 +398,7 @@ hr {
/* /*
Note: The best way to structure the use of media queries is to create the queries Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it on small devices, paste the mobile query code up in the buttons main and style it
there. there.
*/ */

2
client/index.js
View File

@ -3,4 +3,4 @@ require('./instance.css');
require('./game.css'); require('./game.css');
// kick it off // kick it off
require('./src/main'); require('./src/app');

12
client/src/main.jsx → client/src/app.jsx
View File

@ -11,7 +11,7 @@ const createSocket = require('./socket');
const registerEvents = require('./events'); const registerEvents = require('./events');
const Header = require('./components/header.container'); const Header = require('./components/header.container');
const Body = require('./components/body.component'); const Main = require('./components/main');
const Nav = require('./components/nav'); const Nav = require('./components/nav');
// Redux Store // Redux Store
@ -50,19 +50,19 @@ document.fonts.load('16pt "Jura"').then(() => {
ws.connect(); ws.connect();
const Cryps = () => ( const Cryps = () => (
<main className="cryps" > <div id="cryps" >
<Header /> <Header />
<Nav /> <Nav />
<Body /> <Main />
</main> </div>
); );
const Main = () => ( const App = () => (
<Provider store={store}> <Provider store={store}>
<Cryps /> <Cryps />
</Provider> </Provider>
); );
// eslint-disable-next-line // eslint-disable-next-line
preact.render(<Main />, document.body); preact.render(<App />, document.body);
}); });

8
client/src/components/game.component.jsx
View File

@ -28,7 +28,7 @@ function GamePanel(props) {
if (showLog) { if (showLog) {
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse(); const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
return ( return (
<section className="game"> <main className="game">
<div className="instance-hdr"> <div className="instance-hdr">
<button <button
className="game-btn instance-btn instance-ui-btn left" className="game-btn instance-btn instance-ui-btn left"
@ -42,7 +42,7 @@ function GamePanel(props) {
<div className="logs"> <div className="logs">
{logs} {logs}
</div> </div>
</section> </main>
); );
} }
@ -165,12 +165,12 @@ function GamePanel(props) {
const gameClasses = `game ${resolution ? 'resolving': ''}`; const gameClasses = `game ${resolution ? 'resolving': ''}`;
return ( return (
<section className={gameClasses} onClick={() => setActiveCryp(null)} > <main className={gameClasses} onClick={() => setActiveCryp(null)} >
{header} {header}
{timer} {timer}
{otherTeams.map(OpponentTeam)} {otherTeams.map(OpponentTeam)}
{PlayerTeam(playerTeam, setActiveSkill)} {PlayerTeam(playerTeam, setActiveSkill)}
</section> </main>
); );
} }

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

@ -48,7 +48,7 @@ function InstanceComponent(args) {
); );
return ( return (
<section className="instance" > <main className="instance" >
<div className="top"> <div className="top">
{actionBtn} {actionBtn}
{timer} {timer}
@ -57,7 +57,7 @@ function InstanceComponent(args) {
<InfoContainer /> <InfoContainer />
<EquipmentContainer /> <EquipmentContainer />
<InstanceCrypsContainer /> <InstanceCrypsContainer />
</section> </main>
); );
} }

16
client/src/components/body.component.jsx → client/src/components/main.jsx
View File

@ -19,15 +19,9 @@ function renderBody(props) {
if (!account) { if (!account) {
return ( return (
<section> <main>
<LoginContainer /> <LoginContainer />
</section> </main>
);
}
if (game) {
return (
<GameContainer />
); );
} }
@ -37,6 +31,12 @@ function renderBody(props) {
); );
} }
if (game) {
return (
<GameContainer />
);
}
return ( return (
<MenuContainer /> <MenuContainer />
); );

4
client/src/components/menu.component.jsx
View File

@ -145,9 +145,9 @@ function Menu(args) {
} }
return ( return (
<section className="menu"> <main className="menu">
{instanceList()} {instanceList()}
</section> </main>
); );
} }

14
client/styles.css
View File

@ -2,7 +2,7 @@
GLOBAL GLOBAL
*/ */
html, body, main { html, body, #cryps {
/*width: 100%;*/ /*width: 100%;*/
margin: 0; margin: 0;
@ -60,7 +60,7 @@ figure {
margin: 0; margin: 0;
} }
main { #cryps {
padding: 0 2em; padding: 0 2em;
display: grid; display: grid;
grid-template-columns: 1fr 8fr; grid-template-columns: 1fr 8fr;
@ -115,7 +115,7 @@ nav button:hover {
color: whitesmoke; color: whitesmoke;
} }
section { main {
grid-area: main; grid-area: main;
} }
@ -276,13 +276,13 @@ button[disabled] {
flex-flow: column; flex-flow: column;
} }
.cryps input, .cryps select { #cryps input, #cryps select {
border-color: #444; border-color: #444;
background-color: #333; background-color: #333;
border-radius: 0; border-radius: 0;
} }
.cryps input:focus { #cryps input:focus {
border-color: whitesmoke; border-color: whitesmoke;
} }
@ -457,7 +457,7 @@ figure.gray {
fill: none; fill: none;
} }
section .top { main .top {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex: 1; flex: 1;
@ -502,7 +502,7 @@ section .top {
} }
@media (max-height: 900px), (max-width: 1500px) { @media (max-height: 900px), (max-width: 1500px) {
.cryps { #cryps {
font-size: 75%; font-size: 75%;
} }