import Phaser from 'phaser';
import { GAME_WIDTH, GAME_HEIGHT, WORLD_SCALE } from '../config.js';
import { createButton } from '../util/ui.js';

export default class MainMenuScene extends Phaser.Scene {
  constructor() {
    super('MainMenu');
  }

  create() {
    this.cameras.main.setBackgroundColor('#8fc7e8');

    this.add.text(GAME_WIDTH / 2, 90 * WORLD_SCALE, 'MONSTERPLEX', {
      fontFamily: 'monospace',
      fontSize: `${40 * WORLD_SCALE}px`,
      color: '#1a1f29',
      fontStyle: 'bold',
    }).setOrigin(0.5);

    createButton(this, GAME_WIDTH / 2, GAME_HEIGHT / 2 - 20 * WORLD_SCALE, 'PLAY', () => {
      this.scene.start('LevelSelect');
    });

    this.add.text(GAME_WIDTH / 2, GAME_HEIGHT / 2 + 60 * WORLD_SCALE, 'Arrows/WASD to drive and lean.\nDon\'t let the g-force throw the kids out!', {
      fontFamily: 'monospace',
      fontSize: `${14 * WORLD_SCALE}px`,
      color: '#1a1f29',
      align: 'center',
    }).setOrigin(0.5);
  }
}