chooseLevelsView method

MenuView chooseLevelsView (int nrAvailableLevels, int reachedLevel)

This is the view where the user can choose between all the levels he already unlocked by accomplishing the levels. All levels are displayed as a button with the corresponding level number in it.

Implementation 

MenuView chooseLevelsView(int nrAvailableLevels, int reachedLevel) {
  DivElement div = DivElement()
    ..setAttribute("class", "message")
    ..append(getLogo())
    ..append(HRElement());

  DivElement chooseLevelWrapper = DivElement()..setAttribute("class", "choose-level-wrapper");

  for (int i = 0; i < nrAvailableLevels; i++) {
    ButtonElement levelButton = ButtonElement()
      ..setAttribute("value", (i + 1).toString())
      ..setAttribute("class", "choose-level ${i < reachedLevel ? "reached" : ""}")
      ..setAttribute("id", "level-${i + 1}")
      ..appendText((i + 1).toString());

    chooseLevelWrapper.append(levelButton);
  }
  div.append(chooseLevelWrapper);

  ButtonElement button = ButtonElement()
    ..setAttribute("id", "button_to_menu")
    ..setAttribute("class", "lower-bottom-button")
    ..appendText("Return");

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

  DivElement buttonBox = getBottomButtonBox();
  buttonBox.setAttribute("style", "height: 10%");
  button.setAttribute("style", "height: 100%");
  buttonBox.append(button);

  outerDiv.append(buttonBox);

  this.content = outerDiv;
  return this;
}