mnml/client/src/components/demo.jsx

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, combo } = demo;

    const vboxDemo = () => {
        function stashBtn(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 stashElement() {
            return (
                <div class="vbox">
                    <div class='vbox-section'>
                        <h2 class='colour-info'>
                            VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
                        </h2>
                        <p>
                            Combine colours with base skills and specialisations to build an array of powerful variants.
                        </p>
                    </div>
                    <div>&nbsp;</div>
                    <div class='vbox-section'>
                        <div class='vbox-items'>
                            {items.map((i, j) => stashBtn(i, j))}
                        </div>
                        {combinerBtn()}
                    </div>
                </div>
            );
        }

        return (
            <div class="news vbox-demo">
                {stashElement()}
            </div>
        );
    };

    const vboxConstructs = () => {
        const btnClass = equipping
            ? 'equipping empty gray'
            : 'empty gray';

        const constructEl = c => (
            <div class="instance-construct">
                <h2 class="name" >{c.name}</h2>
                <ConstructAvatar construct={c} />
                <div class="skills">
                    {equipped
                        ? <button>{combo}</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>
        );

        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 (
            <section class="game-demo">
                <div>
                    <h2>COMBAT PHASE</h2>
                    <p>Battle your opponent using dynamic team builds from the VBOX phase.</p>
                    <p>The skills crafted can be used to damage the opponent or support your team.</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">
                    <div class="game-construct">
                        <div class="left"></div>
                        <div class="right">
                            <ConstructAvatar construct={players[1].constructs[0]} />
                        </div>
                    </div>
                    <div></div>
                    <div class="game-construct">
                        <div class="left"></div>
                        <div class="right">
                            <ConstructAvatar construct={players[1].constructs[1]} />
                        </div>
                    </div>
                </div>
            </section>
        );
    };

    return (
        <section class='demo news top'>
            {gameDemo()}
            {vboxDemo()}
            {vboxConstructs()}
        </section>
    );
}

module.exports = addState(Demo);