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

better demo

Browse Source
This commit is contained in:
ntr 2019-10-10 18:04:25 +11:00
parent c9abbf61cf
commit d134bc8cf3
3 changed files with 56 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/assets/styles/menu.less
View File

@ -129,18 +129,29 @@ section {
.demo {
margin-top: 1em;
display: grid;
grid-template-areas:
"vinfo game"
"vcons game";
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 1fr;
display: block;
button {
cursor: default;
}
section {
div:first-child {
padding-right: 1em;
}
}
.construct-section {
.construct-list {
height: 25em;
grid-area: unset;
.instance-construct {
border: 0;
}
}
}
.colour-info {
grid-area: vinfo;
display: flex;
@ -156,17 +167,9 @@ section {
}
}
.vbox-demo {
grid-area: vinfo;
}
.game-demo {
grid-area: game;
display: grid;
grid-template-columns: 1fr 2fr;
.game {
height: 25em;
display: flex;
flex-flow: column;
@ -175,15 +178,6 @@ section {
}
}
}
.construct-list {
grid-area: vcons;
height: 100%;
svg {
height: 100%;
}
}
}
@media (max-width: 800px) {
@ -195,24 +189,6 @@ section {
}
}
.demo {
grid-template-columns: 1fr;
grid-template-areas:
"vinfo"
"vcons"
"game"
"game";
.construct-list .instance-construct:not(:first-child) {
display: none;
}
.game-demo {
grid-template-columns: 1fr;
}
}
.menu .team {
grid-template-columns: 1fr;

4
client/assets/styles/styles.less
View File

@ -14,7 +14,7 @@ html body {
-ms-user-select: none;
overflow-x: hidden;
overflow-y: hidden;
// overflow-y: hidden;
}
#mnml {
@ -26,7 +26,7 @@ html body {
/* stops inspector going skitz*/
overflow-x: hidden;
overflow-y: hidden;
// overflow-y: hidden;
}
// @media (min-width: 1921px) {

61
client/src/components/demo.jsx
View File

@ -84,7 +84,7 @@ function Demo(args) {
function inventoryElement() {
return (
<div class="vbox">
<div class="vbox visible">
<div class='vbox-section'>
<h2 class='colour-info'>
VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
@ -116,39 +116,48 @@ function Demo(args) {
? 'equipping empty gray'
: 'empty gray';
return (
<div class='news construct-list'>
{players[0].constructs.map((c, i) => (
<div class="instance-construct" key={i}>
<h2 class="name" >{c.name}</h2>
<ConstructAvatar construct={c} />
<div class="skills">
{i === 0 && equipped
? <button>Strike</button>
: <button disabled={!equipping} class={btnClass}>SKILL</button>
}
<button disabled={!equipping} class={btnClass}>SKILL</button>
<button disabled={!equipping} class={btnClass}>SKILL</button>
</div>
<div class="specs">
</div>
<div class="stats">
</div>
</div>
))}
const constructEl = c => (
<div class="instance-construct visible">
<h2 class="name" >{c.name}</h2>
<ConstructAvatar construct={c} />
<div class="skills">
{equipped
? <button>Strike</button>
: <button disabled={!equipping} class={btnClass}>SKILL</button>
}
<button disabled={!equipping} class={btnClass}>SKILL</button>
<button disabled={!equipping} class={btnClass}>SKILL</button>
</div>
<div class="specs">
</div>
<div class="stats">
</div>
</div>
);
return (
<section class="construct-section">
<div>
<h2>CONSTRUCTS</h2>
<p><b>Constructs</b> are the units you control. They are reset every game and their initial appearance is randomly generated.</p>
<p><b>Skills</b> and <b>Specs</b> you create in the <b>VBOX Phase</b> are equipped to your constructs to create a build.</p>
</div>
<div class='construct-list'>
{constructEl(players[0].constructs[0])}
</div>
</section>
);
};
const gameDemo = () => {
return (
<div class="game-demo">
<section class="game-demo">
<div>
<h2>COMBAT PHASE</h2>
<p>Battle your opponent using dynamic team builds from the VBOX phase.</p>
<p>Crafted skills can be used to damage the opponent or support your team.</p>
<p>Turn based combat, each team picks targets for their skills during this phase.</p>
<p>The damage dealt by skills, cast order and construct life depend on your decisions in the VBOX phase. </p>
<p>The skills crafted can be used to damage the opponent or support your team.</p>
<p>Simultaneous turn based combat: each team picks targets for their skills during this phase.</p>
<p>The damage dealt by skills, cast order and construct life depend on your decisions in the VBOX phase.</p>
</div>
<div class="game">
<div class="game-construct">
@ -165,7 +174,7 @@ function Demo(args) {
</div>
</div>
</div>
</div>
</section>
);
};