mnml/client/src/tutorial.utils.jsx

const preact = require('preact');
const actions = require('./actions');

function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
    if (localStorage.getItem('tutorial-complete')) return false;
    if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
        if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
            const mobileVisible = navInstance === i + 1;
            const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
            return (<div key={player.constructs[i].id} class={classes}></div>);
        }
    }
    return false;
}

function tutorialShouldDisableEquip(tutorial, iter, instance, construct) {
    if (localStorage.getItem('tutorial-complete')) return false;
    return tutorial && tutorial === 6 && iter === 0 && construct.skills.length !== 0
        && instance.time_control === 'Practice' && instance.rounds.length === 1;
}


function tutorialVbox(player, store, tutorial) {
    if (localStorage.getItem('tutorial-complete')) return false;
    let stage = tutorial;
    const { vbox } = player;
    if (stage === 1) {
        if (vbox.bits < 17)  {
            stage += 1;
        } else {
            vbox.free[0] = vbox.free[0].slice(0, 2);
            vbox.free[1] = [];
            vbox.free[2] = [];
            vbox.bound.fill(null, 0, 3);
        }
    }

    if (stage === 2) {
        if (!(vbox.bound.slice(0, 3).every(i => i === 'Attack') && vbox.bound.length >= 3))  {
            stage += 1;
        } else {
            vbox.free[0] = vbox.free[0].slice(0, 2);
            vbox.free[1] = [];
            vbox.free[2] = [];
            vbox.bound.fill(null, 1, 3);
        }
    }

    if (stage === 3) {
        if (player.constructs[0].skills.length !== 0)  {
            stage += 1;
        } else {
            vbox.free[0] = vbox.free[0].slice(0, 2);
            vbox.free[1] = [];
            vbox.free[2] = [];
            vbox.bound.fill(null, 0, 2);
        }
    }

    if (stage === 4) {
        if (!vbox.free[2][0] || vbox.bits < 12)  {
            stage += 1;
        } else {
            vbox.free[0] = [];
            vbox.free[1] = [];
            vbox.free[2] = vbox.free[2].slice(0, 1);
            vbox.bound.fill(null, 0, 2);
        }
    }

    if (stage === 5) {
        if (player.constructs[0].specs.length !== 0)  {
            stage += 1;
        } else {
            vbox.free[0] = [];
            vbox.free[1] = [];
            vbox.free[2] = vbox.free[2].slice(0, 1);
            vbox.bound.fill(null, 0, 2);
        }
    }

    if (stage === 6) {
        if (player.constructs.every(c => c.skills.length !== 0))  {
            stage += 1;
        } else {
            vbox.free[0] = [];
            vbox.free[1] = [];
            vbox.free[2] = [];
        }
    }

    if (stage === 7) {
        if (vbox.bits < 13)  {
            stage += 1;
        } else {
            vbox.free[0] = [];
            vbox.free[1] = [];
            vbox.free[2] = [];
        }
    }
    store.dispatch(actions.setTutorial(stage));
}

function tutorialStage(tutorial, ws, clearTutorial, instance) {
    if (localStorage.getItem('tutorial-complete')) return false;
    if (!(instance.time_control === 'Practice' && instance.rounds.length === 1)) return false;

    const exit = () => {
        clearTutorial();
        localStorage.setItem('tutorial-complete', true);
        ws.sendInstanceState(instance.id);
    };

    const tutorialText = () => {
        if (tutorial === 1) {
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p> Welcome to the vbox phase tutorial.</p>
                    <p> Colours are used to create powerful combinations. </p>
                    <p> Buy two colours from the vbox by double clicking. <br />
                        You can also click the colour once and then click the inventory. </p>
                </div>
            );
        }

        if (tutorial === 2) {
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p> In a normal game you start with three base <b>Attack</b> skill items. </p>
                    <p> The <b>Attack</b> item can be combined with <b>colours</b> to create a new skill. </p>
                    <p> Select the Attack item along with two colours. <br />
                        Once selected press <b>COMBINE</b> to create a new combo.
                    </p>
                </div>
            );
        }

        if (tutorial === 3) {
            const constructOne = instance.players[0].constructs[0].name;
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p> The first construct on your team is <b>{constructOne}</b>. </p>
                    <p> Skill items can be equipped to your constructs to be used in the combat phase. </p>
                    <p> Click the newly combined skill item in the top right of the inventory. <br />
                        Once selected click the construct <b>SKILL</b> slot to equip the skill. </p>
                </div>
            );
        }

        if (tutorial === 4) {
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p> You can also buy specialisation items for your constructs. <br />
                        Specialisation items increase stats including power, speed and life. </p>
                    <p> Buy the specialisation item from the vbox by double clicking. <br />
                        You can also click the specialisation once and then click the inventory. </p>
                </div>
            );
        }

        if (tutorial === 5) {
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p> Equipping specialisation items will increase the stats of your constructs.</p>
                    <p> These can also be combined with colours for further specialisation. </p>
                    <p> Click the specialisation item in the top right of the inventory.<br />
                        Once selected click the construct <b>SPEC</b> slot to equip the specialisation. </p>
                </div>
            );
        }

        if (tutorial === 6) {
            const constructTwo = instance.players[0].constructs[1].name;
            const constructThree = instance.players[0].constructs[2].name;
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p> You have now created a construct with an upgraded skill and base spec. </p>
                    <p> The goal is to create three powerful constructs for combat. </p>
                    <p> Equip your other constructs <b>{constructTwo}</b> and <b>{constructThree}</b> with the Attack skill. <br />
                        Ensure each construct has a single skill to continue. </p>
                </div>
            );
        }

        if (tutorial === 7) {
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p> Each round you start with a vbox full of different skills, specs and colours. </p>
                    <p> Bits are your currency for buying skills, specs and colours from the vbox. <br />
                        Colours cost 1b, Skills cost 2b and specs cost 3b. <br />
                        You can refill the vbox by pressing the refill button for 2b. <br />
                        After each combat round you get more bits to further upgrade your team.
                    </p>
                    <p> Press the <b>REFILL</b> button to get a new vbox and continue. </p>
                </div>
            );
        }

        if (tutorial === 8) {
            return (
                <div>
                    <h2>Tutorial</h2>
                    <p>You've completed the tutorial! Try to create more skill and spec combinations. </p>
                    <p>You can unequip skills and specs back into the inventory by double clicking. <br />
                        Reclaim can be used to refund the cost of items in your inventory. </p>
                    <p>Click the <b>EXIT TUTORIAL</b> button to replace this section with more information.</p>
                </div>
            );
        }
        return false;
    };

    const classes = tutorial === 8 ? 'focus' : '';
    const exitTutorial = <button
        class={classes}
        onClick={e => e.stopPropagation()}
        onMouseDown={exit}> Exit Tutorial </button>;

    return (
        <div class='tutorial'>
            {tutorialText()}
            <figure>
                {exitTutorial}
            </figure>
        </div>);
}

module.exports = {
    tutorialConstructDisplay,
    tutorialVbox,
    tutorialStage,
    tutorialShouldDisableEquip
};