anims?

client/src/components/animations.jsx

@@ -68,6 +68,7 @@ class ConstructAnimation extends Component {
         const animSkill = removeTier(skill);
         if (!constructId.includes(construct.id)) return false;
 
+
         // find target animation
         const chooseAnim = (animSkill) => {
             switch (animSkill) {

client/src/components/demo.jsx

@@ -1,8 +1,51 @@
+const { connect } = require('preact-redux');
 const preact = require('preact');
+const sample = require('lodash/sample');
+
+const actions = require('../actions');
 const shapes = require('./shapes');
-const molecule = require('./molecule');
+
+const { TIMES: { SOURCE_AND_TARGET_TOTAL_DURATION } } = require('./../constants');
+
+const { ConstructAvatar } = require('./construct');
+const { ConstructAnimation } = require('./animations');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            account,
+            itemInfo,
+            demo,
+        } = state;
+
+        return {
+            account,
+            itemInfo,
+            demo,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setAnimTarget(anim) {
+            dispatch(actions.setAnimTarget(anim));
+        }
+
+        return { setAnimTarget };
+    }
+);
+
 
 function Demo(args) {
+    const {
+        demo,
+        itemInfo,
+        account,
+
+        setAnimTarget,
+    } = args;
+
+    if (!demo || !itemInfo.items.length || account) return false;
+
     const vboxDemo = () => {
         const phase = this.state.phase || 'vbox';
         const items = this.state.items || ['Red', 'Red', 'Attack'];
@@ -13,8 +56,6 @@ function Demo(args) {
             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;
@@ -79,22 +120,22 @@ function Demo(args) {
                 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[0] === 'Strike' && combiner[0] === 0) {
+                return this.setState({ combiner: [], items: ['', '', ''], equipped: true, equipping: false });
             }
 
-            if (items.length === 1) {
-                return this.setState({ combiner: [0], items: ['Strike'], equipping: true });
+            if (items[0] === 'Strike') {
+                return this.setState({ combiner: [0], items: ['Strike', '', ''], equipping: true });
             }
 
             if (combiner.length === 3) {
-                return this.setState({ combiner: [], items: ['Strike'] });
+                return this.setState({ combiner: [], items: ['Strike', '', ''] });
             }
 
             combiner.push(combiner.length);
             this.setState({ combiner });
             return true;
-        }, 1500);
+        }, 2000);
 
         const skills = ['Strike'];
 
@@ -106,10 +147,10 @@ function Demo(args) {
             <div class="news">
                 {inventoryElement()}
                 <div class='construct-list'>
-                    {[0, 1, 2].map(i => (
+                    {demo[0].constructs.map((c, i) => (
                         <div class="instance-construct" key={i}>
-                            {molecule()}
-                            <h2 class="name" ></h2>
+                            <h2 class="name" >{c.name}</h2>
+                            <ConstructAvatar construct={c} />
                             <div class="skills">
                                 {i === 0 && this.state.equipped
                                     ? <button>Strike</button>
@@ -129,15 +170,42 @@ function Demo(args) {
         );
     };
 
+    setTimeout(() => {
+        setAnimTarget({
+            skill: sample(itemInfo.items.filter(i => i.skill)).item,
+            constructId: [sample(demo[1].constructs).id],
+            player: Math.round(Math.random()),
+            direction: 0,
+        });
+
+        // setTimeout(setAnimTarget(null), 5000);
+    }, 2000);
+
+    const gameDemo = () => {
+        return (
+            <div class="game-demo">
+                <h2>GAME PHASE</h2>
+                <div class="game">
+                    <div class="game-construct">
+                        <ConstructAvatar construct={demo[1].constructs[0]} />
+                        <ConstructAnimation construct={demo[1].constructs[0]} />
+                    </div>
+                    <div></div>
+                    <div class="game-construct">
+                        <ConstructAvatar construct={demo[1].constructs[1]} />
+                        <ConstructAnimation construct={demo[1].constructs[1]} />
+                    </div>
+                </div>
+            </div>
+        );
+    };
 
     return (
         <section class='demo'>
             {vboxDemo()}
-            <div class="game">
-                <h2>GAME PHASE</h2>
-            </div>
+            {gameDemo()}
         </section>
     );
 }
 
-module.exports = Demo;
+module.exports = addState(Demo);

client/src/components/game.jsx

@@ -42,7 +42,6 @@ const addState = connect(
     function receiveDispatch(dispatch) {
         function setActiveSkill(constructId, skill) {
             dispatch(actions.setActiveSkill(constructId, skill));
-            // particlesJS(`particles-${constructId}`, config);
         }
 
         function setActiveConstruct(construct) {

client/src/components/welcome.jsx

@@ -54,9 +54,9 @@ function Welcome() {
                     <div class="news">
                         <h1>mnml.gg</h1>
                         <p>mnml is a turn-based 1v1 strategy game in an abstract setting.</p>
-                        <p>build your team of 3 constructs from a shifting meta of skills, effects and specialisations in order to outplay your opponents.</p>
+                        <p>outplay your opponents by building your team of 3 constructs from a shifting meta of skills, effects and specialisations.</p>
                         <p>simple rules, complex interactions, simultaneous turns to increase the pace, and a unique speed mechanic;</p>
-                        <p>mnml is a tactical game in a genre of its own.</p>
+                        <p>mnml is a tactical game unlike any other.</p>
                         <p>free to play</p>
                         <p>no email required</p>
                         <p>glhf</p>