levelOverview method

MenuView levelOverview (int level, String levelInstruction)

The levelOverview is the main view of all the MenuView's. On it the active level can be started, the number of the active level is displayed, it's highscore, and the buttons to get to the credits and choose level view.

Implementation 

MenuView levelOverview(int level, String levelInstruction) {
  DivElement div = DivElement();
  div.setAttribute("id", "button_start_level");
  div.setAttribute("class", "message");

  div.append(getLogo());
  div.append(HRElement());

  HeadingElement levelTitle = HeadingElement.h2();
  levelTitle.appendText("Level");
  div.append(levelTitle);

  HeadingElement levelId = HeadingElement.h1();
  levelId.setInnerHtml("$level");
  levelId.style.marginTop = "1vh";
  levelId.style.textShadow = "0.04em 0.04em rgb(137,137,137)";
  div.append(levelId);

  ParagraphElement instructions = ParagraphElement();
  instructions.appendText(levelInstruction);
  div.append(instructions);

  div.append(HRElement());

  ParagraphElement tapToPlay = ParagraphElement()
    ..setAttribute("class", "tap-me")
    ..appendText("Tap To Play");
  div.append(tapToPlay);

  ButtonElement chooseLevel = ButtonElement()
    ..setAttribute("id", "button_choose_levels")
    ..setAttribute("class", "upper-bottom-button")
    ..appendText("Choose a Level");

  ButtonElement credits = ButtonElement()
    ..setAttribute("id", "button_credits")
    ..setAttribute("class", "lower-bottom-button")
    ..appendText("Credits");

  DivElement outerDiv = DivElement();
  outerDiv.append(div);

  DivElement buttonBox = getBottomButtonBox();

  buttonBox.setAttribute("style", "height: 20%");
  chooseLevel.setAttribute("style", "height: 50%");
  credits.setAttribute("style", "height: 50%");
  buttonBox.append(chooseLevel);
  buttonBox.append(credits);

  outerDiv.append(buttonBox);

  this.content = outerDiv;
  return this;
}