/*
 * Menu state
 *
 * show the menu
 */

import LogoAnimated from '../objects/LogoAnimated';

export default class Menu extends Phaser.State {

    init() {
        // TODO: Stub
    }

    update() {
        // TODO: Stub
    }

    render() {
        // TODO: Stub
    }

    preload() {
        // this.game.stage.backgroundColor = '#292D3A';
        this.game.stage.backgroundColor = '#A7BAB9';
    }

    create() {
        const {centerX: x, centerY: y} = this.world;


    // TEXT
        var style_press = {font: 'italic 23px Arial', fill: '#ffffff', align: 'left'};
        this.text = this.add.text(x + 150, y + 250, 'Click to Start', style_press);

        this.info = this.add.text(x - 350, y + 60,
             'The goal is to get each of the colors in a line.\r'
            +'You can ONLY shift columns left or right (cursor left/right), but you can \r'
            +'move your magic SelectOR up and down (cursor up/down) and\r'
            +'rotate the map with a + s.\r'
            +'If you are stuck reload the level with r.\r'
            +'Enjoy :)',
            style_press);

    // LOGO
        this.menu_logo = new LogoAnimated(this.game, x, y-120); 
        this.add.existing(this.menu_logo);
        
        this.menu_logo.tween_rotate();



        this.input.onDown.add(this.onDown, this);
    }


    onDown() {
        this.state.start('Game');
    }
}
