ticket-to-earth/Assets/Components/MainMenu.re.js

import * as RE from 'rogue-engine';
import AsyncLoader from './Library/AsyncLoader';
import { TweenManager, SimpleTween } from './Library/SimpleTweens';
import Easing from './Library/Easings';
import GameData from './Library/GameDataPersistent';

export default class MainMenu extends RE.Component {
  loader = new AsyncLoader()
  tweenManager = new TweenManager()
  uiStyleValues = { opacity: 1, levelSelectOpacity: 0 }
  isFading = false
  levelData = {
    1: {x: 2, y: 2, c: 2, g: 100},
    2: {x: 2, y: 2, c: 3, g: 100},
    3: {x: 2, y: 2, c: 4, g: 100},
    4: {x: 2, y: 2, c: 5, g: 100},
    5: {x: 4, y: 4, c: 2, g: 100},
    6: {x: 4, y: 4, c: 3, g: 100},
    7: {x: 4, y: 4, c: 4, g: 100},
    8: {x: 4, y: 4, c: 5, g: 100},
    9: {x: 6, y: 6, c: 2, g: 100},
    10: {x: 6, y: 6, c: 3, g: 100},
    11: {x: 6, y: 6, c: 4, g: 100},
    12: {x: 6, y: 6, c: 5, g: 100},
    13: {x: 8, y: 8, c: 2, g: 100},
    14: {x: 8, y: 8, c: 3, g: 100},
    15: {x: 8, y: 8, c: 4, g: 100},
    16: {x: 8, y: 8, c: 5, g: 100},
    17: {x: 10, y: 10, c: 2, g: 100},
    18: {x: 10, y: 10, c: 3, g: 100},
    19: {x: 10, y: 10, c: 4, g: 100},
    20: {x: 10, y: 10, c: 5, g: 100},
  }
  awake() {

  }

  start() {
    GameData.set("level-data", this.levelData)
    this.loader.loadStaticText("mainmenu.html").then(html => {
      RE.Runtime.uiContainer.innerHTML = html
      document.getElementById("play-button").addEventListener("touchend", this.transitionToLevelSelect.bind(this))
      document.getElementById("play-button").addEventListener("mouseup", this.transitionToLevelSelect.bind(this))
      this.generateLevelButtons()
    }, error =>  RE.Debug.logError(error))

    this.tweenManager.start()
  }

  transitionToLevelSelect() {
    document.getElementById("play-button").disabled = true
    this.tweenManager.add(new SimpleTween(this.uiStyleValues, {opacity: 0}, 350, Easing.Linear.EaseNone, () => { 
      document.getElementById("main-menu").style.display = "none"
      this.tweenManager.add(new SimpleTween(this.uiStyleValues, {levelSelectOpacity: 1}, 350, Easing.Linear.EaseNone, () => { 
        document.getElementById("level-select").style.display = "block"
      }))
    }))
    
  }

  generateLevelButtons() {
    let existingButtons = [...document.getElementById("level-select").getElementsByTagName("button")]
    existingButtons.forEach(button => {
      let level = parseInt(button.getAttribute("data-level"))
      button.addEventListener("touchend", () => { this.levelSelect(level) })
      button.addEventListener("mouseup", () => { this.levelSelect(level) })
    })
  }

  levelSelect(level) {
    GameData.set("active-level", level)
    this.disabled = true
    this.transitionToMain()
  }

  transitionToMain() {
    this.tweenManager.add(new SimpleTween(this.uiStyleValues, {levelSelectOpacity: 0}, 500, Easing.Linear.EaseNone, () => { 
      document.getElementById("main-menu").style.opacity = 0
      RE.App.loadScene("Main")
    }))
  }

  update() {
    this.tweenManager.update()
    if(this.uiStyleValues.opacity != 1 && this.uiStyleValues.opacity != 0) {
      document.getElementById("main-menu").style.opacity = this.uiStyleValues.opacity
    }

    if(this.uiStyleValues.levelSelectOpacity != 1 && this.uiStyleValues.levelSelectOpacity != 0) {
      document.getElementById("level-select").style.opacity = this.uiStyleValues.levelSelectOpacity
    }
  }
}

RE.registerComponent(MainMenu);