stats and other tings
This commit is contained in:
parent
d6a3ca2eb4
commit
a074677ed6
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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 />;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user