better demo

client/assets/styles/menu.less

@@ -129,18 +129,29 @@ section {
 .demo {
     margin-top: 1em;
 
-    display: grid;
+    display: block;
-    grid-template-areas:
-        "vinfo game"
-        "vcons game";
-
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: min-content 1fr;
 
     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;
 

client/assets/styles/styles.less

@@ -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) {

client/src/components/demo.jsx

@@ -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,14 +116,12 @@ function Demo(args) {
             ? 'equipping empty gray'
             : 'empty gray';
 
-        return (
+        const constructEl = c => (
-            <div class='news construct-list'>
+            <div class="instance-construct visible">
-                {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
+                    {equipped
                         ? <button>Strike</button>
                         : <button disabled={!equipping} class={btnClass}>SKILL</button>
                     }
@@ -135,19 +133,30 @@ function Demo(args) {
                 <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>The skills crafted 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>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">
@@ -165,7 +174,7 @@ function Demo(args) {
                         </div>
                     </div>
                 </div>
-            </div>
+            </section>
         );
     };