Merge branch 'demo-orig' into develop

WORKLOG.md

@@ -19,7 +19,6 @@
 
 * msg pane
 * game invites
-* change score to enum
 
 * add speed to descriptions
 

client/assets/styles/menu.less

@@ -77,6 +77,12 @@
             }
         }
     }
+
+    .login {
+        display: flex;
+        flex-flow: column;
+        margin-bottom: 2em;
+    }
 }
 
 section {
@@ -109,3 +115,59 @@ section {
         flex-flow: column;
     }
 }
+
+.demo {
+    margin-top: 1em;
+
+    display: grid;
+    grid-template-areas:
+        "vinfo game"
+        "vcons game";
+
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content 1fr;
+
+    .colour-info {
+        grid-area: vinfo;
+        display: flex;
+        align-items: center;
+
+        div {
+            display: flex;
+        }
+
+        svg {
+            flex: 1;
+            height: 1em;
+        }
+    }
+
+    .vbox-demo {
+        grid-area: vinfo;
+    }
+
+    .game-demo {
+        grid-area: game;
+
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+
+        .game {
+            display: flex;
+            flex-flow: column;
+
+            .game-construct {
+                flex: 1;
+            }
+        }
+    }
+
+    .construct-list {
+        grid-area: vcons;
+        height: 100%;
+
+        svg {
+            height: 100%;
+        }
+    }
+}

client/assets/styles/styles.less

@@ -195,28 +195,6 @@ button[disabled] {
     border-color: #222;
 }
 
-/*
-    LOGIN
-*/
-
-.welcome {
-    .login {
-        width: 50%;
-        display: flex;
-        flex-flow: column;
-        margin-bottom: 2em;
-    }
-
-    .options {
-        display: flex;
-        width: 50%;
-    }
-
-    h2 {
-        margin-bottom: 0.5em;
-    }
-}
-
 #mnml input, #mnml select {
     border-color: #222;
     background-color: #222;
@@ -272,14 +250,6 @@ header {
             color: @white;
             box-shadow: inset 0px 5px 0px 0px @white;
             border: 0;
-            &:first-child {
-                border-left: 1px solid #444;
-            }
-
-            &:last-child {
-                border-right: 1px solid #444;
-            }
-
         }
 
         border: 1px solid #444;

client/src/actions.jsx

@@ -8,6 +8,8 @@ export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value });
 export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value });
 export const setAnimText   = value => ({ type: 'SET_ANIM_TEXT', value });
 
+export const setDemo = value => ({ type: 'SET_DEMO', value });
+
 export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
 export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
 export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });

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/anims/absorb.jsx

@@ -90,7 +90,7 @@ class Absorb extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/amplify.jsx

@@ -78,7 +78,7 @@ class Amplify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/attack.jsx

@@ -59,7 +59,7 @@ class Attack extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 
 }

client/src/components/anims/bash.circle.jsx

@@ -100,7 +100,7 @@ class Bash extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/bash.jsx

@@ -103,7 +103,7 @@ class Bash extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/blast.jsx

@@ -88,7 +88,7 @@ class Blast extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/block.jsx

@@ -53,7 +53,7 @@ class Block extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/break.jsx

@@ -107,7 +107,7 @@ class Break extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/buff.jsx

@@ -81,7 +81,7 @@ class Buff extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/chaos.jsx

@@ -119,7 +119,7 @@ class Chaos extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/counter.jsx

@@ -85,7 +85,7 @@ class Counter extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/curse.jsx

@@ -78,7 +78,7 @@ class Curse extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/debuff.jsx

@@ -83,7 +83,7 @@ class Debuff extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/decay.jsx

@@ -68,7 +68,7 @@ class Decay extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/electrify.jsx

@@ -109,7 +109,7 @@ class Electrify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/electrocute.jsx

@@ -101,7 +101,7 @@ class Electrocute extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/haste.jsx

@@ -83,7 +83,7 @@ class Haste extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/heal.jsx

@@ -81,7 +81,7 @@ class Heal extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/hex.jsx

@@ -88,7 +88,7 @@ class Hex extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/hybrid.jsx

@@ -153,7 +153,7 @@ class Hybrid extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/intercept.jsx

@@ -96,7 +96,7 @@ class Intercept extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/link.jsx

@@ -91,7 +91,7 @@ class Link extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/purge.jsx

@@ -81,7 +81,7 @@ class Purge extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/purify.jsx

@@ -115,7 +115,7 @@ class Purify extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/recharge.jsx

@@ -95,7 +95,7 @@ class Recharge extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/red.block.jsx

@@ -76,7 +76,7 @@ class Block extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/red.circles.jsx

@@ -82,7 +82,7 @@ class Intercept extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/reflect.jsx

@@ -77,7 +77,7 @@ class Refl extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/restrict.jsx

@@ -102,7 +102,7 @@ class Restrict extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/ruin.jsx

@@ -100,7 +100,7 @@ class Ruin extends Component {
             this.animations[i].reset();
         }
         try {
-            this.props.animCb();
+            this.props.animCb && this.props.animCb();
         } catch (e) {
             console.log(e);
         }

client/src/components/anims/silence.jsx

@@ -97,7 +97,7 @@ class Silence extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/siphon.jsx

@@ -69,7 +69,7 @@ class Siphon extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/siphon.tick.jsx

@@ -116,7 +116,7 @@ class SiphonTick extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/slay.jsx

@@ -152,7 +152,7 @@ class Slay extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/sleep.jsx

@@ -140,7 +140,7 @@ class Sleep extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/strike.jsx

@@ -120,7 +120,7 @@ class Strike extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/stun.jsx

@@ -78,7 +78,7 @@ class Stun extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/sustain.jsx

@@ -127,7 +127,7 @@ class Sustain extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/triage.jsx

@@ -80,7 +80,7 @@ class Triage extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/anims/triage.tick.jsx

@@ -79,7 +79,7 @@ class TriageTick extends Component {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
-        this.props.animCb();
+        this.props.animCb && this.props.animCb();
     }
 }
 

client/src/components/demo.jsx

@@ -0,0 +1,177 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+
+const actions = require('../actions');
+const shapes = require('./shapes');
+
+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 { combiner, items, equipping, equipped, players } = demo;
+
+    console.log(items);
+
+    const vboxDemo = () => {
+        function inventoryBtn(i, j) {
+            if (!i) return <button disabled class='empty' >&nbsp;</button>;
+            const highlighted = combiner.indexOf(j) > -1;
+            const classes = `${highlighted ? 'highlight' : ''}`;
+
+            if (shapes[i]) {
+                return <button class={classes} key={j}>{shapes[i]()}</button>;
+            }
+
+            return <button class={classes}>{i}</button>;
+        }
+
+        function combinerBtn() {
+            let text = '';
+
+            if (combiner.length < 3) {
+                for (let i = 0; i < 3; i++) {
+                    if (combiner.length > i) {
+                        text += '■ ';
+                    } else {
+                        text += '▫ ';
+                    }
+                }
+            } else {
+                text = 'combine';
+            }
+
+            return (
+                <button
+                    class='vbox-btn'
+                    disabled={combiner.length !== 3}>
+                    {text}
+                </button>
+            );
+        }
+
+        function inventoryElement() {
+            return (
+                <div class="vbox">
+                    <div class='vbox-section'>
+                        <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>
+                    <div>&nbsp;</div>
+                    <div class='vbox-section'>
+                        <div class='vbox-items'>
+                            {items.map((i, j) => inventoryBtn(i, j))}
+                        </div>
+                        {combinerBtn()}
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div class="news vbox-demo">
+                {inventoryElement()}
+            </div>
+        );
+    };
+
+    const vboxConstructs = () => {
+        const btnClass = equipping
+            ? '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>
+                ))}
+            </div>
+        );
+    };
+
+    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={players[1].constructs[0]} />
+                        <ConstructAnimation construct={players[1].constructs[0]} />
+                    </div>
+                    <div></div>
+                    <div class="game-construct">
+                        <ConstructAvatar construct={players[1].constructs[1]} />
+                        <ConstructAnimation construct={players[1].constructs[1]} />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <section class='demo news'>
+            {vboxDemo()}
+            {vboxConstructs()}
+            {gameDemo()}
+        </section>
+    );
+}
+
+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/info.component.jsx

@@ -21,15 +21,14 @@ function InfoComponent(args) {
             return (
                 <div>
                     <h2>VBOX phase</h2>
-                    <p>in this phase you strengthen and specialise your constructs by equipping items to them.</p>
+                    <p>strengthen and specialise your constructs by equipping items to them.</p>
-                    <p>double clicking items in the <b>VBOX</b> will purchase and move them to your <b>INVENTORY</b>.</p>
+                    <p>double click to purchase items in the <b>VBOX</b> and move them to your <b>INVENTORY</b>.</p>
                     <p>
-                        hover over an item to see its effects and combinations.<br />
                         combine a <b>SKILL</b> or <b>SPEC</b> with 2 <b>COLOURS</b> to create an item.<br />
-                        combine 3 of the same item to upgrade it.<br />
+                        combine <b>3 of the same item</b> to upgrade it.<br />
-                        click an item and then click a construct to equip that item to it.<br />
+                        click an item and then click a construct to <b>equip</b> that item to it.<br />
                     </p>
-                    <p>click the <b>READY</b> button on the right to progress to the <b>GAME PHASE</b>.</p>
+                    <p>click the <b>READY</b> button for the <b>GAME PHASE</b>.</p>
                 </div>
             );
         }

client/src/components/molecule.jsx

@@ -1,18 +1,11 @@
 const preact = require('preact');
 
-module.exports = function molecule(combatText) {
+module.exports = function molecule() {
-    const text = combatText
+    return (
-        ?   <text x="0" y="400" class="combat-text">
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
-                {combatText}
-                <animate attributeType="XML" attributeName="y" from="300" to="200" dur="2s" repeatCount="1"/>
-                <animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="1"/>
-            </text>
-        : '';
-
-    return (<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
             <rect style="fill: none;"></rect>
             <g transform="translate(-133.97462520598594, -116.025374794014) "><g><line x1="325.9602631261639" x2="296.95475676906796" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="433.01268739700697" y2="466.5063436985035" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="500" y2="466.5063436985035" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="299.038062191021" y2="265.5444058895245" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="232.050749588028" y2="265.5444058895245" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="500" x2="470.994493642904" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #1FF01F; stroke-width: 3; stroke-linecap: butt;"></line><line x1="441.98898728580804" x2="470.994493642904" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="470.994493642904" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="500" x2="470.994493642904" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="325.9602631261639" x2="296.95475676906796" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="354.96576948325986" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="354.96576948325986" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="412.98013156308195" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="412.98013156308195" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="325.9602631261639" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="325.9602631261639" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="383.9712758403558" x2="412.98013156308195" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="412.98013156308195" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="354.96576948325986" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="354.96576948325986" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="441.98898728580804" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="441.98898728580804" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g class="atom" transform="translate(267.949250411972, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 500) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 232.050749588028) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(267.949250411972, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g>
             </g>
-    {text}
+        </svg>
-    </svg>);
+    );
 };

client/src/components/welcome.jsx

@@ -5,6 +5,7 @@ const Login = require('./welcome.login');
 const Register = require('./welcome.register');
 const Help = require('./welcome.help');
 const About = require('./welcome.about');
+const Demo = require('./demo');
 
 function Welcome() {
     const page = this.state.page || 'login';
@@ -19,14 +20,8 @@ function Welcome() {
     };
 
     return (
-        <main class="welcome">
+        <main class="menu">
-            <h1>mnml.gg</h1>
+            <header>
-            <div class="login">
-                <div>mnml is an abstract turn based strategy game</div>
-                <div>free to play</div>
-                <div>no email required</div>
-                <div>glhf</div>
-            </div>
                 <div class="options">
                     <button
                         class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
@@ -53,7 +48,23 @@ function Welcome() {
                         Help
                     </button>
                 </div>
+            </header>
+            <div class="top">
+                <section>
+                    <div class="news">
+                        <h1>mnml.gg</h1>
+                        <p>mnml is a turn-based 1v1 strategy game in an abstract setting.</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 unlike any other.</p>
+                        <p>free to play</p>
+                        <p>no email required</p>
+                        <p>glhf</p>
+                    </div>
                     {pageEl()}
+                </section>
+            </div>
+            <Demo />
         </main>
     );
 }

client/src/constants.jsx

@@ -1,3 +1,5 @@
+const preact = require('preact');
+
 const SOURCE_DURATION_MS = 1000;
 const TARGET_DELAY_MS = 500;
 const TARGET_DURATION_MS = 1500;
@@ -24,15 +26,11 @@ module.exports = {
     INFO: {
         vbox: {
             item: 'VBOX',
-            description: 'Contains ITEMS that are available for you to buy.\nDouble-click to purchase.',
+            description: <p><b>ITEMS</b> that are available to buy.<br />the <b>VBOX</b> is refilled every round.<br />click <b>REFILL</b> at the bottom to purchase a refill. </p>,
         },
         inventory: {
             item: 'INVENTORY',
-            description: 'Holds purchased ITEMS.\nClick to add ITEM to I-COMBINATOR.',
+            description: <p>holds <b>ITEMS</b><br /><b>ITEMS</b> carry over each round.</p>,
-        },
-        combiner: {
-            item: 'I-COMBINATOR',
-            description: 'Combines purchased ITEMS into more powerful variants. Hover over an ITEM to see recipes.',
         },
         bits: {
             item: 'BITS',
@@ -51,12 +49,12 @@ module.exports = {
             description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.',
         },
         refine: {
-            item: 'REFINE',
+            item: 'COMBINE',
-            description: 'Refine ITEMS currently in I-COMBINATOR into more powerful variants',
+            description: <p>combine the selected items.<br />hover over an item to see <b>RECIPES</b>.</p>,
         },
         refill: {
             item: 'REFILL',
-            description: 'Refill the VBOX with new ITEMS.',
+            description: 'Refill the VBOX with new items.',
         },
         equipSkills: {
             item: 'QUICK ACCESS - SKILLS',

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');
@@ -187,6 +188,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) {
@@ -230,6 +277,7 @@ function registerEvents(store) {
         setAccountInstances,
         setActiveItem,
         setActiveSkill,
+        setDemo,
         setConstructList,
         setNewConstruct,
         setGame,

client/src/reducers.jsx

@@ -23,6 +23,8 @@ module.exports = {
     animTarget:         createReducer(null, 'SET_ANIM_TARGET'),
     animText:           createReducer(null, 'SET_ANIM_TEXT'),
 
+    demo:               createReducer(null, 'SET_DEMO'),
+
     combiner:           createReducer([], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
     constructEditId:    createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),

client/src/socket.jsx

@@ -206,6 +206,10 @@ function createSocket(events) {
         events.setItemInfo(info);
     }
 
+    function onDemo(v) {
+        events.setDemo(v);
+    }
+
     let pongTimeout;
     function onPong() {
         events.setPing(Date.now() - ping);
@@ -231,6 +235,7 @@ function createSocket(events) {
         InstanceState: onInstanceState,
         ItemInfo: onItemInfo,
         Pong: onPong,
+        Demo: onDemo,
 
         QueueRequested: () => events.notify('pvp queue request received'),
         QueueJoined: () => events.notify('you have joined the pvp queue'),

server/src/instance.rs

@@ -797,6 +797,25 @@ pub fn instance_game_finished(tx: &mut Transaction, game: &Game, instance_id: Uu
     Ok(())
 }
 
+pub fn demo() -> Result<Vec<Player>, Error> {
+    let bot = bot_player();
+
+    // generate bot imgs for the client to see
+    for c in bot.constructs.iter() {
+        img::molecular_write(c.img)?;
+    };
+
+    let bot2 = bot_player();
+
+    // generate bot imgs for the client to see
+    for c in bot2.constructs.iter() {
+        img::molecular_write(c.img)?;
+    };
+
+
+    Ok(vec![bot, bot2])
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;

server/src/mob.rs

@@ -27,3 +27,4 @@ pub fn bot_player() -> Player {
     let constructs = instance_mobs(bot_id);
     Player::new(bot_id, &name(), constructs).set_bot(true)
 }
+

server/src/rpc.rs

@@ -21,10 +21,12 @@ use account;
 use construct::{Construct};
 use events::{Event};
 use game::{Game, game_state, game_skill, game_skill_clear, game_ready};
-use instance::{Instance, instance_state, instance_practice, instance_ready, instance_abandon};
+use instance::{Instance, instance_state, instance_practice, instance_ready, instance_abandon, demo};
 use item::{Item, ItemInfoCtr, item_info};
 use mtx;
 use mail;
+
+use player::{Player};
 use payments;
 use mail::Email;
 use pg::{Db};
@@ -41,6 +43,8 @@ pub enum RpcMessage {
     AccountInstances(Vec<Instance>),
     AccountShop(mtx::Shop),
 
+    Demo(Vec<Player>),
+
     ConstructSpawn(Construct),
     GameState(Game),
     ItemInfo(ItemInfoCtr),
@@ -271,6 +275,8 @@ impl Handler for Connection {
 
             // tx should do nothing
             tx.commit().unwrap();
+        } else {
+            self.ws.send(RpcMessage::Demo(demo().unwrap())).unwrap();
         }
 
         Ok(())