menu wip
This commit is contained in:
ntr
parent
a069249d98
commit
9af2e8717f
@ -17,7 +17,7 @@
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<script>
|
||||
<!-- <script>
|
||||
// Check that service workers are registered
|
||||
if ('serviceWorker' in navigator) {
|
||||
// Use the window load event to keep the page load performant
|
||||
@ -26,5 +26,5 @@
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="./index.js"></script>
|
||||
--> <script src="./index.js"></script>
|
||||
</html>
|
||||
@ -1,4 +1,4 @@
|
||||
require('./cryps.css');
|
||||
require('./styles.css');
|
||||
require('./instance.css');
|
||||
|
||||
// kick it off
|
||||
|
||||
@ -19,11 +19,12 @@ function renderBody(props) {
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<main>
|
||||
<section>
|
||||
<LoginContainer />
|
||||
</main>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (game) {
|
||||
return (
|
||||
<GameContainer />
|
||||
|
||||
@ -28,7 +28,7 @@ function GamePanel(props) {
|
||||
if (showLog) {
|
||||
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
|
||||
return (
|
||||
<main className="game">
|
||||
<section className="game">
|
||||
<div className="instance-hdr">
|
||||
<button
|
||||
className="game-btn instance-btn instance-ui-btn left"
|
||||
@ -42,7 +42,7 @@ function GamePanel(props) {
|
||||
<div className="logs">
|
||||
{logs}
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -173,13 +173,13 @@ function GamePanel(props) {
|
||||
const gameClasses = `game ${resolution ? 'resolving': ''}`;
|
||||
|
||||
return (
|
||||
<main className={gameClasses} onClick={() => setActiveCryp(null)} >
|
||||
<section className={gameClasses} onClick={() => setActiveCryp(null)} >
|
||||
{header}
|
||||
{timer}
|
||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
||||
<TargetingArrows />
|
||||
{otherTeams.map(OpponentTeam)}
|
||||
</main>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -81,7 +81,7 @@ function InstanceComponent(args) {
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="instance" >
|
||||
<section className="instance" >
|
||||
<div className="instance-hdr">
|
||||
{navBtn}
|
||||
{menuBtn}
|
||||
@ -95,11 +95,8 @@ function InstanceComponent(args) {
|
||||
<InstanceCrypsContainer />
|
||||
<EquipmentContainer />
|
||||
<InfoContainer />
|
||||
</main>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Removed while WIP
|
||||
|
||||
module.exports = InstanceComponent;
|
||||
|
||||
@ -145,10 +145,10 @@ function Menu(args) {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="menu">
|
||||
<section className="menu">
|
||||
{instanceList()}
|
||||
{crypList()}
|
||||
</main>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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 = () => (
|
||||
<section className='cryps' >
|
||||
<main className="cryps" >
|
||||
<Header />
|
||||
<nav>
|
||||
<h2>Team</h2>
|
||||
<h2>Instances</h2>
|
||||
<button>
|
||||
six
|
||||
</button>
|
||||
<button>
|
||||
grep
|
||||
</button>
|
||||
</nav>
|
||||
<Body />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
const Main = () => (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user