mnml/client/src/tutorial.utils.jsx

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

function tutorialConstructDisplay(player, instance, tutorial, i) {
    if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
        if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
            const classes = 'instance-construct';
            return (<div key={player.constructs[i].id} class={classes}></div>);
        }
    }
    return false;
}

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


function tutorialVbox(player, store, tutorial) {
    let stage = tutorial;
    const { vbox } = player;
    if (stage === 1) {
        if (vbox.bits < 29)  {
            stage += 1;
        } else {
            for (let i = 2; i < 6; i += 1) {
                delete vbox.store.Colours[i];
            }
            vbox.store.Skills = {};
            vbox.store.Specs = {};
            delete vbox.stash[0];
            delete vbox.stash[1];
            delete vbox.stash[2];
        }
    }

    if (stage === 2) {
        if (!(vbox.stash[0] === 'Attack' && vbox.stash[1] === 'Attack' && vbox.stash[2] === 'Attack')) {
            stage += 1;
        } else {
            vbox.store.Colours = {};
            vbox.store.Skills = {};
            vbox.store.Specs = {};
            delete vbox.stash[0];
            delete vbox.stash[1];
        }
    }

    if (stage === 3) {
        if (player.constructs[0].skills.length !== 0)  {
            stage += 1;
        } else {
            vbox.store.Colours = {};
            vbox.store.Skills = {};
            vbox.store.Specs = {};
            delete vbox.stash[0];
            delete vbox.stash[1];
        }
    }

    if (stage === 4) {
        if (!vbox.store.Specs[0] || vbox.bits < 24)  {
            stage += 1;
        } else {
            vbox.store.Colours = {};
            vbox.store.Skills = {};
            delete vbox.store.Specs[1];
            delete vbox.store.Specs[2];
            delete vbox.stash[0];
            delete vbox.stash[1];
        }
    }

    if (stage === 5) {
        if (player.constructs[0].specs.length !== 0)  {
            stage += 1;
        } else {
            vbox.store.Colours = {};
            vbox.store.Skills = {};
            vbox.store.Specs = {};
            delete vbox.stash[0];
            delete vbox.stash[1];
        }
    }

    if (stage === 6) {
        if (player.constructs.every(c => c.skills.length !== 0))  {
            stage += 1;
        } else {
            vbox.store.Colours = {};
            vbox.store.Skills = {};
            vbox.store.Specs = {};
        }
    }

    if (stage === 7) {
        if (vbox.bits < 25)  {
            stage += 1;
        } else {
            vbox.store.Colours = {};
            vbox.store.Skills = {};
            vbox.store.Specs = {};
        }
    }
    store.dispatch(actions.setTutorial(stage));
}

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

    const exit = () => clearTutorial();

    const tutorialText = () => {
        if (tutorial === 1) {
            return (
                <div class='info-item'>
                    <h1>Welcome to MNML</h1>
                    <p> This is the <b>VBOX Phase</b> tutorial.</p>
                    <p> In the <b>VBOX Phase</b> you customise your constructs' skills and specialisations. </p>
                    <p> Colours are used to create powerful combinations with base items. </p>
                    <p> Buy the two colours from the store to continue. </p>
                </div>
            );
        }

        if (tutorial === 2) {
            return (
                <div class='info-item'>
                    <h2>Combining Items</h2>
                    <p> You start the game with the base <b>Attack</b> skill item. </p>
                    <p> Highlight the <b>Attack</b> and the two <b> colours</b> then click <b> combine</b> </p>
                </div>
            );
        }

        if (tutorial === 3) {
            const constructOne = instance.players[0].constructs[0].name;
            return (
                <div class='info-item'>
                    <h2>Equipping Items</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 your new skill from the stash. <br />
                        Once selected click the flashing <b>SKILL</b> slot or the construct img to equip the skill. </p>
                </div>
            );
        }

        if (tutorial === 4) {
            return (
                <div class='info-item'>
                    <h2>Specialisations</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 store to continue. </p>
                </div>
            );
        }

        if (tutorial === 5) {
            return (
                <div class='info-item'>
                    <h2>Specialisations</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 stash.<br />
                        Once selected click the flashing <b>SPEC</b> slot to equip the specialisation. </p>
                    <p> <b>PRO TIP:</b> while selecting an item in the shop, click on your construct to buy and equip in one step. </p>
                </div>
            );
        }

        if (tutorial === 6) {
            const constructTwo = instance.players[0].constructs[1].name;
            const constructThree = instance.players[0].constructs[2].name;
            return (
                <div class='info-item'>
                    <h2>Skills</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>
                    <p> <b>PRO TIP:</b> Select a skill or spec on a construct and click another construct to swap it. </p>
                </div>
            );
        }

        if (tutorial === 7) {
            return (
                <div class='info-item'>
                    <h2>Economy</h2>
                    <p> Each round you start with 30 bits and a store full of different skills, specs and colours. </p>
                    <p> Bits are your currency for buying items. <br />
                        You can refill the store by pressing the refill button for 2b. <br />
                    </p>
                    <p> Press the <b>REFILL</b> button to buy new items. </p>
                </div>
            );
        }

        if (tutorial === 8) {
            if (window.innerWidth < 1000) {
                return exit();
            }

            return (
                <div class='info-item'>
                    <h2>GLHF</h2>
                    <p>That completes the VBOX Tutorial.</p>
                    <p>Press the green <b>READY</b> button in the bottom right to progress to the <b>GAME PHASE</b> <br />
                        or continue creating new items to upgrade your constructs further. </p>
                </div>
            );
        }
        return false;
    };

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

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

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