vbox phase done

client/assets/styles/menu.less

@@ -117,19 +117,39 @@ section {
 }
 
 .demo {
-    margin-top: 5em;
+    margin-top: 1em;
+
+    display: grid;
+    grid-template-areas:
+        "vinfo game"
+        "vcons game";
+
+    grid-template-columns: 1fr 1fr;
 
     .colour-info {
-        display: grid;
-        grid-template-columns: 2fr 1fr;
+        grid-area: vinfo;
+        display: flex;
+        align-items: center;
 
         div {
             display: flex;
         }
-    }
 
         svg {
             flex: 1;
-        display: inline;
+            height: 1em;
+        }
+    }
+
+    .game {
+        grid-area: game;
+    }
+
+    .construct-list {
+        grid-area: vcons;
+
+        svg {
+            height: 100%;
+        }
     }
 }

client/src/components/demo.jsx

@@ -8,9 +8,15 @@ function Demo(args) {
         const items = this.state.items || ['Red', 'Red', 'Attack'];
         const combiner = this.state.combiner || [];
 
+        const {
+            equipping,
+            equipped,
+        } = this.state;
+
         console.log(combiner, this.state);
 
         function inventoryBtn(i, j) {
+            if (!i) return <button disabled class='empty' >&nbsp;</button>;
             const highlighted = combiner.indexOf(j) > -1;
             const classes = `${highlighted ? 'highlight' : ''}`;
 
@@ -47,53 +53,90 @@ function Demo(args) {
 
         function inventoryElement() {
             return (
+                <div class="vbox">
                     <div class='vbox-section'>
-                    <h2>VBOX PHASE</h2>
-                    <div class='colour-info'>
+                        <h2 class='colour-info'>
+                            VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
+                        </h2>
                         <p>
                             combine the colour base items with an array of skills and specialisations to build powerful variants.
                         </p>
-                        <div>
-                            {shapes.Red()} {shapes.Green()} {shapes.Blue()}
-                        </div>
                     </div>
+                    <div>&nbsp;</div>
+                    <div class='vbox-section'>
                         <div class='vbox-items'>
                             {items.map((i, j) => inventoryBtn(i, j))}
                         </div>
                         {combinerBtn()}
                     </div>
+                </div>
             );
         }
 
         // progress
         setTimeout(() => {
+            if (equipped) {
+                return this.setState({ combiner: [], items: ['Red', 'Red', 'Attack'], equipped: false, equipping: false });
+            }
+
+            if (items.length === 1 && combiner[0] === 0) {
+                return this.setState({ combiner: [], items: [''], equipped: true, equipping: false });
+            }
+
             if (items.length === 1) {
-                this.setState({ combiner: [], items: ['Red', 'Red', 'Attack'], phase: 'game' });
-                return true;
+                return this.setState({ combiner: [0], items: ['Strike'], equipping: true });
             }
 
             if (combiner.length === 3) {
-                this.setState({ combiner: [], items: ['Strike'] });
-                return true;
+                return this.setState({ combiner: [], items: ['Strike'] });
             }
 
             combiner.push(combiner.length);
             this.setState({ combiner });
             return true;
-        }, 2000);
+        }, 1500);
+
+        const skills = ['Strike'];
+
+        const btnClass = equipping
+            ? 'equipping empty gray'
+            : 'empty gray';
 
         return (
-            <div class="vbox demo">
+            <div class="news">
                 {inventoryElement()}
+                <div class='construct-list'>
+                    {[0, 1, 2].map(i => (
+                        <div class="instance-construct" key={i}>
+                            {molecule()}
+                            <h2 class="name" ></h2>
+                            <div class="skills">
+                                {i === 0 && this.state.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>
+                    ))}
+                </div>
             </div>
         );
     };
 
+
     return (
-        <div>
+        <section class='demo'>
             {vboxDemo()}
-            <div class='construct-list'></div>
+            <div class="game">
+                <h2>GAME PHASE</h2>
             </div>
+        </section>
     );
 }