diff --git a/client/assets/normalize.css b/client/assets/normalize.css index 81c6f31e..ca4c7b04 100644 --- a/client/assets/normalize.css +++ b/client/assets/normalize.css @@ -41,7 +41,7 @@ hgroup, main, menu, nav, -section, +main, summary { 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. */ diff --git a/client/assets/skeleton.css b/client/assets/skeleton.css index b080afb6..41fe2f37 100644 --- a/client/assets/skeleton.css +++ b/client/assets/skeleton.css @@ -398,7 +398,7 @@ hr { /* 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 -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. */ diff --git a/client/index.js b/client/index.js index d5a46b42..f5ec6a52 100755 --- a/client/index.js +++ b/client/index.js @@ -3,4 +3,4 @@ require('./instance.css'); require('./game.css'); // kick it off -require('./src/main'); +require('./src/app'); diff --git a/client/src/main.jsx b/client/src/app.jsx similarity index 90% rename from client/src/main.jsx rename to client/src/app.jsx index dfb333b5..65e79741 100644 --- a/client/src/main.jsx +++ b/client/src/app.jsx @@ -11,7 +11,7 @@ const createSocket = require('./socket'); const registerEvents = require('./events'); const Header = require('./components/header.container'); -const Body = require('./components/body.component'); +const Main = require('./components/main'); const Nav = require('./components/nav'); // Redux Store @@ -50,19 +50,19 @@ document.fonts.load('16pt "Jura"').then(() => { ws.connect(); const Cryps = () => ( -
+
+
+ ); - const Main = () => ( + const App = () => ( ); // eslint-disable-next-line - preact.render(
, document.body); + preact.render(, document.body); }); diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index eb99ef5f..50030d41 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -28,7 +28,7 @@ function GamePanel(props) { if (showLog) { const logs = game.log.map((l, i) => (
{l}
)).reverse(); return ( -
+
-
+
); } @@ -165,12 +165,12 @@ function GamePanel(props) { const gameClasses = `game ${resolution ? 'resolving': ''}`; return ( -
setActiveCryp(null)} > +
setActiveCryp(null)} > {header} {timer} {otherTeams.map(OpponentTeam)} {PlayerTeam(playerTeam, setActiveSkill)} -
+
); } diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index a9399405..5dbfb966 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -48,7 +48,7 @@ function InstanceComponent(args) { ); return ( -
+
{actionBtn} {timer} @@ -57,7 +57,7 @@ function InstanceComponent(args) { -
+ ); } diff --git a/client/src/components/body.component.jsx b/client/src/components/main.jsx similarity index 95% rename from client/src/components/body.component.jsx rename to client/src/components/main.jsx index 432d961a..26ff037d 100644 --- a/client/src/components/body.component.jsx +++ b/client/src/components/main.jsx @@ -19,15 +19,9 @@ function renderBody(props) { if (!account) { return ( -
+
-
- ); - } - - if (game) { - return ( - + ); } @@ -37,6 +31,12 @@ function renderBody(props) { ); } + if (game) { + return ( + + ); + } + return ( ); diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx index cec5eb2f..bd1b1f48 100644 --- a/client/src/components/menu.component.jsx +++ b/client/src/components/menu.component.jsx @@ -145,9 +145,9 @@ function Menu(args) { } return ( -
+
{instanceList()} -
+ ); } diff --git a/client/styles.css b/client/styles.css index f997a44c..99170928 100644 --- a/client/styles.css +++ b/client/styles.css @@ -2,7 +2,7 @@ GLOBAL */ -html, body, main { +html, body, #cryps { /*width: 100%;*/ margin: 0; @@ -60,7 +60,7 @@ figure { margin: 0; } -main { +#cryps { padding: 0 2em; display: grid; grid-template-columns: 1fr 8fr; @@ -115,7 +115,7 @@ nav button:hover { color: whitesmoke; } -section { +main { grid-area: main; } @@ -276,13 +276,13 @@ button[disabled] { flex-flow: column; } -.cryps input, .cryps select { +#cryps input, #cryps select { border-color: #444; background-color: #333; border-radius: 0; } -.cryps input:focus { +#cryps input:focus { border-color: whitesmoke; } @@ -457,7 +457,7 @@ figure.gray { fill: none; } -section .top { +main .top { display: flex; flex-flow: column; flex: 1; @@ -502,7 +502,7 @@ section .top { } @media (max-height: 900px), (max-width: 1500px) { - .cryps { + #cryps { font-size: 75%; }