messageNoSupportForGyro method

MenuView messageNoSupportForGyro ()

This message view will be displayed mainly on desktop devices without the gyro sensor support or on mobile devices where the device orientation is disabled. It displays the QR-Code to give the user the chance to play it on another device. Else he can also play it on the current device.

Implementation 

MenuView messageNoSupportForGyro() {
  DivElement div = DivElement();
  div.setAttribute("class", "message");
  div.append(getLogo());
  div.append(HRElement());

  ParagraphElement upperText = ParagraphElement();
  upperText.appendText("Oh No! On this device motion control is not available.");
  div.append(upperText);

  ImageElement qrImage = ImageElement();
  qrImage.setAttribute("src", "resources/qr-code.jpg");
  div.append(qrImage);

  ParagraphElement lowerText = ParagraphElement();
  lowerText.appendText("Scan the QR-Code or play with your arrow keys.");
  div.append(lowerText);

  div.append(HRElement());

  ButtonElement button = ButtonElement()
    ..setAttribute("id", "button_to_menu")
    ..setAttribute("class", "lower-bottom-button")
    ..appendText("Let me play anyway");

  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;
}