diff --git a/client/index.html b/client/index.html index 8f80d512..3ff703ee 100644 --- a/client/index.html +++ b/client/index.html @@ -17,7 +17,7 @@ - \ No newline at end of file diff --git a/client/index.js b/client/index.js index 0e12acf4..984d58c5 100755 --- a/client/index.js +++ b/client/index.js @@ -1,4 +1,4 @@ -require('./cryps.css'); +require('./styles.css'); require('./instance.css'); // kick it off diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx index 95c45c5e..432d961a 100644 --- a/client/src/components/body.component.jsx +++ b/client/src/components/body.component.jsx @@ -19,11 +19,12 @@ function renderBody(props) { if (!account) { return ( -
+
-
+ ); } + if (game) { return ( diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 57cc223f..d76df5d1 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 ( -
+
-
+ ); } @@ -173,13 +173,13 @@ function GamePanel(props) { const gameClasses = `game ${resolution ? 'resolving': ''}`; return ( -
setActiveCryp(null)} > +
setActiveCryp(null)} > {header} {timer} {PlayerTeam(playerTeam, setActiveSkill)} {otherTeams.map(OpponentTeam)} -
+ ); } diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index d6fdf09c..ab20b391 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -81,7 +81,7 @@ function InstanceComponent(args) { ); return ( -
+
{navBtn} {menuBtn} @@ -95,11 +95,8 @@ function InstanceComponent(args) { -
+ ); } - -// Removed while WIP - module.exports = InstanceComponent; diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx index 773b2e93..5bde6a10 100644 --- a/client/src/components/menu.component.jsx +++ b/client/src/components/menu.component.jsx @@ -145,10 +145,10 @@ function Menu(args) { } return ( -
+
{instanceList()} {crypList()} -
+ ); } diff --git a/client/src/main.jsx b/client/src/main.jsx index 264c9ab0..a5dc81b4 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -1,5 +1,4 @@ const preact = require('preact'); -const jdenticon = require('jdenticon'); const logger = require('redux-diff-logger'); const { Provider } = require('preact-redux'); @@ -55,17 +54,21 @@ document.fonts.load('16pt "Jura"').then(() => { // events.setGame(testGame); // ws.clearGameStateTimeout(); - // tells jdenticon to look for new svgs and render them - // so we don't have to setInnerHtml or manually call update - jdenticon.config = { - replaceMode: 'observe', - }; - const Cryps = () => ( -
+
+ -
+ ); const Main = () => ( diff --git a/client/cryps.css b/client/styles.css similarity index 94% rename from client/cryps.css rename to client/styles.css index 9743f89e..d50f60fc 100644 --- a/client/cryps.css +++ b/client/styles.css @@ -43,28 +43,52 @@ h2 { margin: 0; } - figure { margin: 0; } -/* main container */ -.cryps { +main { padding: 0 2em; - display: flex; - flex-flow: column; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(10, 1fr); + + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "nav main main main main main main main main" + "ft ft ft ft ft ft ft ft ft"; } -main { - display: flex; - flex-flow: row wrap; - flex: 1 1 90%; +nav { + grid-area: nav; +} - padding-top: 1em; +nav button { + display: block; + color: #888; + flex: 1 1 100%; + font-size: 16pt; + padding: 0; + margin: 0; + border-width: 0px; +} - align-content: flex-start; - justify-content: flex-start; - align-items: flex-start; +nav button.active { + color: whitesmoke; +} + +nav button[disabled], nav button[disabled]:hover { + color: #333333; + font-size: 14pt; + text-decoration: line-through +} + +nav button:hover { + color: whitesmoke; +} + +section { + grid-area: main; } tr.right:focus, tr.right:hover { @@ -237,13 +261,15 @@ button[disabled] { border-color: whitesmoke; } -/* +/* HEADER */ header { display: flex; flex-flow: row; + grid-area: hd; + margin-bottom: 1em; } .header-title { @@ -750,19 +776,19 @@ CRYP DAMAGE font-size: 1em; } - main { + section { flex: 1 1 auto; flex-flow: column; overflow-x: hidden; } - main.game { + section.game { flex-flow: column-reverse; justify-content: space-between; height: 100%; } - main.game .instance-hdr { + section.game .instance-hdr { order: 99; }