stats and other tings

This commit is contained in:
ntr 2019-05-31 16:23:34 +10:00
parent d6a3ca2eb4
commit a074677ed6
4 changed files with 25 additions and 31 deletions

View File

@ -264,12 +264,10 @@
.construct-list .stats { .construct-list .stats {
grid-area: stats; grid-area: stats;
display: grid; display: flex;
grid-template-rows: 1fr 3fr; flex-flow: row;
grid-template-columns: 3fr 1fr 3fr; flex: 1;
grid-template-areas: justify-content: center;
"dl sl ll"
"st st st";
border-width: 0px; border-width: 0px;
} }
@ -277,19 +275,11 @@
font-size: 75%; font-size: 75%;
} }
.construct-list .stats .icons { .stats figure:nth-child(4n) {
grid-area: st;
display: flex;
flex-flow: row;
flex: 1;
justify-content: center;
}
.icons figure:nth-child(4n) {
margin: 0 1em; margin: 0 1em;
} }
.icons figure { .stats figure {
flex: 1; flex: 1;
} }

View File

@ -19,4 +19,13 @@
<body> <body>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
<script>
// Check that service workers are registered
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('./service.worker.js');
});
}
</script>
</html> </html>

View File

@ -183,7 +183,15 @@ function Construct(props) {
const stats = Object.keys(STATS).map(s => { const stats = Object.keys(STATS).map(s => {
const stat = STATS[s]; const stat = STATS[s];
return <figure key={stat.stat} alt={stat.stat} className={stat.stat}>
const info = (s === 'Speed' && 'Speed')
|| (s.includes('Power') && 'Power')
|| (s.includes('Life') && 'Life');
return <figure key={stat.stat}
alt={stat.stat}
className={stat.stat}
onMouseOver={e => hoverInfo(e, info)} >
{shapes[s]()} {shapes[s]()}
<figcaption>{construct[stat.stat].value}</figcaption> <figcaption>{construct[stat.stat].value}</figcaption>
</figure>; </figure>;
@ -203,20 +211,9 @@ function Construct(props) {
{specs} {specs}
</div> </div>
<div className="stats"> <div className="stats">
<div className="damage-label label">
Power
</div>
<div className="speed-label label">
Speed
</div>
<div className="life-label label">
Life
</div>
<div className="icons">
{stats} {stats}
</div> </div>
</div> </div>
</div>
); );
} }

View File

@ -35,8 +35,6 @@ function Main(props) {
return <Instance />; return <Instance />;
} }
console.warn('nav', nav, instance, game)
if (nav === 'team') return <Team />; if (nav === 'team') return <Team />;
if (nav === 'list') return <List />; if (nav === 'list') return <List />;