demo state

client/src/components/demo.jsx

@@ -1,12 +1,9 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
-const sample = require('lodash/sample');
 
 const actions = require('../actions');
 const shapes = require('./shapes');
 
-const { TIMES: { SOURCE_AND_TARGET_TOTAL_DURATION } } = require('./../constants');
-
 const { ConstructAvatar } = require('./construct');
 const { ConstructAnimation } = require('./animations');
 
@@ -46,16 +43,11 @@ function Demo(args) {
 
     if (!demo || !itemInfo.items.length || account) return false;
 
+    const { combiner, items, equipping, equipped, players } = demo;
+
+    console.log(items);
+
     const vboxDemo = () => {
-        const phase = this.state.phase || 'vbox';
-        const items = this.state.items || ['Red', 'Red', 'Attack'];
-        const combiner = this.state.combiner || [];
-
-        const {
-            equipping,
-            equipped,
-        } = this.state;
-
         function inventoryBtn(i, j) {
             if (!i) return <button disabled class='empty' >&nbsp;</button>;
             const highlighted = combiner.indexOf(j) > -1;
@@ -114,31 +106,6 @@ function Demo(args) {
             );
         }
 
-        // progress
-        setTimeout(() => {
-            if (equipped) {
-                return this.setState({ combiner: [], items: ['Red', 'Red', 'Attack'], equipped: false, equipping: false });
-            }
-
-            if (items[0] === 'Strike' && combiner[0] === 0) {
-                return this.setState({ combiner: [], items: ['', '', ''], equipped: true, equipping: false });
-            }
-
-            if (items[0] === 'Strike') {
-                return this.setState({ combiner: [0], items: ['Strike', '', ''], equipping: true });
-            }
-
-            if (combiner.length === 3) {
-                return this.setState({ combiner: [], items: ['Strike', '', ''] });
-            }
-
-            combiner.push(combiner.length);
-            this.setState({ combiner });
-            return true;
-        }, 2000);
-
-        const skills = ['Strike'];
-
         const btnClass = equipping
             ? 'equipping empty gray'
             : 'empty gray';
@@ -147,12 +114,12 @@ function Demo(args) {
             <div class="news">
                 {inventoryElement()}
                 <div class='construct-list'>
-                    {demo[0].constructs.map((c, i) => (
+                    {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 && this.state.equipped
+                                {i === 0 && equipped
                                     ? <button>Strike</button>
                                     : <button disabled={!equipping} class={btnClass}>SKILL</button>
                                 }
@@ -170,35 +137,23 @@ function Demo(args) {
         );
     };
 
-    setTimeout(() => {
-        setAnimTarget({
-            skill: sample(itemInfo.items.filter(i => i.skill)).item,
-            constructId: [this.state.side ? demo[1].constructs[0].id : demo[1].constructs[1].id],
-            player: Math.round(Math.random()),
-            direction: 0,
-        });
-
-        this.setState({ side: !this.state.side });
-
-        // setTimeout(setAnimTarget(null), 5000);
-    }, 6000);
-
     const gameDemo = () => {
         return (
             <div class="game-demo">
                 <div>
                     <h2>GAME PHASE</h2>
                     <p>Outplay noobs wahtever write tomorrow, fix the tiemout shit.</p>
+                    <p>also have to just picka  random avatar so i don't fill up my drive</p>
                 </div>
                 <div class="game">
                     <div class="game-construct">
-                        <ConstructAvatar construct={demo[1].constructs[0]} />
+                        <ConstructAvatar construct={players[1].constructs[0]} />
-                        <ConstructAnimation construct={demo[1].constructs[0]} />
+                        <ConstructAnimation construct={players[1].constructs[0]} />
                     </div>
                     <div></div>
                     <div class="game-construct">
-                        <ConstructAvatar construct={demo[1].constructs[1]} />
+                        <ConstructAvatar construct={players[1].constructs[1]} />
-                        <ConstructAnimation construct={demo[1].constructs[1]} />
+                        <ConstructAnimation construct={players[1].constructs[1]} />
                     </div>
                 </div>
             </div>

client/src/events.jsx

@@ -1,4 +1,5 @@
 const eachSeries = require('async/eachSeries');
+const sample = require('lodash/sample');
 
 const actions = require('./actions');
 const { TIMES } = require('./constants');
@@ -18,10 +19,6 @@ function registerEvents(store) {
         store.dispatch(actions.setPing(ping));
     }
 
-    function setDemo(d) {
-        store.dispatch(actions.setDemo(d));
-    }
-
     function setNav(v) {
         store.dispatch(actions.setNav(v));
     }
@@ -190,6 +187,52 @@ function registerEvents(store) {
         return store.dispatch(actions.setItemInfo(v));
     }
 
+    function setDemo(d) {
+        const initial = {
+            players: d,
+            combiner: [],
+            items: ['Red', 'Red', 'Attack'],
+            equipped: false,
+            equipping: false,
+        };
+
+        const startDemo = () => {
+            console.log(initial);
+            store.dispatch(actions.setDemo(initial));
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0] }))), 2000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1] }))), 4000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0, 1, 2] }))), 6000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['Strike', '', ''] }))), 8000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [0], items: ['Strike', '', ''], equipping: true }))), 10000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { combiner: [], items: ['', '', ''], equipped: true, equipping: false }))), 12000);
+            setTimeout(() => store.dispatch(actions.setDemo(Object.assign({}, initial, { items: ['', '', ''], equipped: true, equipping: false }))), 12000);
+
+            setTimeout(() => {
+                const { itemInfo } = store.getState();
+                return store.dispatch(actions.setAnimTarget({
+                    skill: sample(itemInfo.items.filter(i => i.skill)).item,
+                    constructId: d[1].constructs[0].id,
+                    player: false,
+                    direction: 0,
+                }));
+            }, 14000);
+
+            setTimeout(() => {
+                const { itemInfo } = store.getState();
+                return store.dispatch(actions.setAnimTarget({
+                    skill: sample(itemInfo.items.filter(i => i.skill)).item,
+                    constructId: d[1].constructs[1].id,
+                    player: true,
+                    direction: 0,
+                }));
+            }, 16000);
+
+            setTimeout(startDemo, 20000);
+        };
+
+        startDemo();
+    }
+
     // events.on('SET_PLAYER', setInstance);
 
     // events.on('SEND_SKILL', function skillActive(gameId, constructId, targetConstructId, skill) {