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

    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>COMBAT PHASE</h2>
                    <p>Battle your opponent using dynamic team builds from the VBOX phase.</p>
                    <p>Crafted skills can be used to damage the opponent or support your team.</p>
                    <p>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>
            </div>
        );
    };

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

module.exports = addState(Demo);