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

menu wip

Browse Source
This commit is contained in:
ntr 2019-05-14 15:41:01 +10:00
parent a069249d98
commit 9af2e8717f
8 changed files with 69 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/index.html
View File

@ -17,7 +17,7 @@
</head> </head>
<body> <body>
</body> </body>
<script> <!-- <script>
// Check that service workers are registered // Check that service workers are registered
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant // Use the window load event to keep the page load performant
@ -26,5 +26,5 @@
}); });
} }
</script> </script>
<script src="./index.js"></script> --> <script src="./index.js"></script>
</html> </html>

2
client/index.js
View File

@ -1,4 +1,4 @@
require('./cryps.css'); require('./styles.css');
require('./instance.css'); require('./instance.css');
// kick it off // kick it off

5
client/src/components/body.component.jsx
View File

@ -19,11 +19,12 @@ function renderBody(props) {
if (!account) { if (!account) {
return ( return (
<main> <section>
<LoginContainer /> <LoginContainer />
</main> </section>
); );
} }
if (game) { if (game) {
return ( return (
<GameContainer /> <GameContainer />

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 (
<main className="game"> <section 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>
</main> </section>
); );
} }
@ -173,13 +173,13 @@ function GamePanel(props) {
const gameClasses = `game ${resolution ? 'resolving': ''}`; const gameClasses = `game ${resolution ? 'resolving': ''}`;
return ( return (
<main className={gameClasses} onClick={() => setActiveCryp(null)} > <section className={gameClasses} onClick={() => setActiveCryp(null)} >
{header} {header}
{timer} {timer}
{PlayerTeam(playerTeam, setActiveSkill)} {PlayerTeam(playerTeam, setActiveSkill)}
<TargetingArrows /> <TargetingArrows />
{otherTeams.map(OpponentTeam)} {otherTeams.map(OpponentTeam)}
</main> </section>
); );
} }

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

@ -81,7 +81,7 @@ function InstanceComponent(args) {
); );
return ( return (
<main className="instance" > <section className="instance" >
<div className="instance-hdr"> <div className="instance-hdr">
{navBtn} {navBtn}
{menuBtn} {menuBtn}
@ -95,11 +95,8 @@ function InstanceComponent(args) {
<InstanceCrypsContainer /> <InstanceCrypsContainer />
<EquipmentContainer /> <EquipmentContainer />
<InfoContainer /> <InfoContainer />
</main> </section>
); );
} }
// Removed while WIP
module.exports = InstanceComponent; module.exports = InstanceComponent;

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

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

21
client/src/main.jsx
View File

@ -1,5 +1,4 @@
const preact = require('preact'); const preact = require('preact');
const jdenticon = require('jdenticon');
const logger = require('redux-diff-logger'); const logger = require('redux-diff-logger');
const { Provider } = require('preact-redux'); const { Provider } = require('preact-redux');
@ -55,17 +54,21 @@ document.fonts.load('16pt "Jura"').then(() => {
// events.setGame(testGame); // events.setGame(testGame);
// ws.clearGameStateTimeout(); // 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 Cryps = () => (
<section className='cryps' > <main className="cryps" >
<Header /> <Header />
<nav>
<h2>Team</h2>
<h2>Instances</h2>
<button>
six
</button>
<button>
grep
</button>
</nav>
<Body /> <Body />
</section> </main>
); );
const Main = () => ( const Main = () => (

60
client/cryps.css → client/styles.css
View File

@ -43,28 +43,52 @@ h2 {
margin: 0; margin: 0;
} }
figure { figure {
margin: 0; margin: 0;
} }
/* main container */ main {
.cryps {
padding: 0 2em; padding: 0 2em;
display: flex; display: grid;
flex-flow: column; 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 { nav {
display: flex; grid-area: nav;
flex-flow: row wrap; }
flex: 1 1 90%;
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; nav button.active {
justify-content: flex-start; color: whitesmoke;
align-items: flex-start; }
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 { tr.right:focus, tr.right:hover {
@ -237,13 +261,15 @@ button[disabled] {
border-color: whitesmoke; border-color: whitesmoke;
} }
/* /*
HEADER HEADER
*/ */
header { header {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
grid-area: hd;
margin-bottom: 1em;
} }
.header-title { .header-title {
@ -750,19 +776,19 @@ CRYP DAMAGE
font-size: 1em; font-size: 1em;
} }
main { section {
flex: 1 1 auto; flex: 1 1 auto;
flex-flow: column; flex-flow: column;
overflow-x: hidden; overflow-x: hidden;
} }
main.game { section.game {
flex-flow: column-reverse; flex-flow: column-reverse;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
} }
main.game .instance-hdr { section.game .instance-hdr {
order: 99; order: 99;
} }