Adding external unit databases + etfreeman-db support (#3477)

* external database support

* moved styles to better place

* microfix

* opening external database on the tab click

* requested changes

Author: K-ETFreeman

src/main/java/com/faforever/client/config/ClientProperties.java

@@ -181,6 +181,7 @@ public void updateFromEndpoint(ServerEndpoints serverEndpoints) {
   public static class UnitDatabase {
     private String spookiesUrl;
     private String rackOversUrl;
+    private String etfreemanUrl;
   }
 
   @Data

src/main/java/com/faforever/client/preferences/Preferences.java

@@ -1,5 +1,6 @@
 package com.faforever.client.preferences;
 
+import com.faforever.client.config.ClientProperties.UnitDatabase;
 import com.faforever.client.game.GamesTilesContainerController.TilesSortingOrder;
 import com.fasterxml.jackson.annotation.JsonMerge;
 import javafx.beans.property.BooleanProperty;
@@ -257,14 +258,18 @@ public BooleanProperty mapAndModAutoUpdateProperty() {
   }
 
   public enum UnitDataBaseType {
-    SPOOKY("unitDatabase.spooky"),
-    RACKOVER("unitDatabase.rackover");
+    SPOOKY("unitDatabase.spooky", false),
+    RACKOVER("unitDatabase.rackover", false),
+    ETFREEMAN("unitDatabase.etfreeman", true);
 
     @Getter
     private final String i18nKey;
+    @Getter
+    private final boolean external;
 
-    UnitDataBaseType(String i18nKey) {
+    UnitDataBaseType(String i18nKey, boolean external) {
       this.i18nKey = i18nKey;
+      this.external = external;
     }
   }
 }

src/main/java/com/faforever/client/units/UnitsController.java

@@ -1,11 +1,22 @@
 package com.faforever.client.units;
 
 import com.faforever.client.config.ClientProperties;
-import com.faforever.client.config.ClientProperties.UnitDatabase;
 import com.faforever.client.fx.NodeController;
+import com.faforever.client.fx.PlatformService;
+import com.faforever.client.fx.JavaFxUtil;
+import com.faforever.client.i18n.I18n;
 import com.faforever.client.preferences.Preferences;
 import com.faforever.client.preferences.Preferences.UnitDataBaseType;
-import javafx.scene.Node;
+import com.faforever.client.theme.ThemeService;
+import javafx.scene.control.Label;
+import javafx.scene.image.Image;
+import javafx.scene.layout.Background;
+import javafx.scene.layout.BackgroundImage;
+import javafx.scene.layout.BackgroundPosition;
+import javafx.scene.layout.BackgroundRepeat;
+import javafx.scene.layout.BackgroundSize;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
 import javafx.scene.web.WebView;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.config.ConfigurableBeanFactory;
@@ -15,24 +26,83 @@
 @Component
 @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
 @RequiredArgsConstructor
-public class UnitsController extends NodeController<Node> {
+public class UnitsController extends NodeController<StackPane> {
+  private static final String UNIT_DB_IMAGES_PATH = "theme/images/unit_databases/";
+
   private final ClientProperties clientProperties;
   private final Preferences preferences;
+  private final PlatformService platformService;
+  private final I18n i18n;
+  private final ThemeService themeService;
 
-  public WebView unitsRoot;
+  public StackPane unitsRoot;
+  public WebView webView;
+  public StackPane externalBrowserPane;
+  public VBox contentBox;
+  public Label titleLabel;
 
   @Override
   protected void onInitialize() {
+    JavaFxUtil.bindManagedToVisible(webView, externalBrowserPane);
+    contentBox.translateYProperty().bind(externalBrowserPane.heightProperty().multiply(0.15));
     preferences.unitDataBaseTypeProperty().when(showing).subscribe(this::loadUnitDataBase);
   }
 
-  private void loadUnitDataBase(UnitDataBaseType newValue) {
-    UnitDatabase unitDatabase = clientProperties.getUnitDatabase();
-    unitsRoot.getEngine().load(newValue == UnitDataBaseType.SPOOKY ? unitDatabase.getSpookiesUrl() : unitDatabase.getRackOversUrl());
+  private void loadUnitDataBase(UnitDataBaseType type) {
+    boolean isExternal = type.isExternal();
+
+    webView.setVisible(!isExternal);
+    externalBrowserPane.setVisible(isExternal);
+
+    if (isExternal) {
+      platformService.showDocument(getUnitDbUrl(type));
+      String dbName = i18n.get(type.getI18nKey());
+      titleLabel.setText(i18n.get("unitDatabase.external.message", dbName));
+      loadBackgroundImage(type);
+    } else {
+      String url = getUnitDbUrl(type);
+      webView.getEngine().load(url);
+    }
+  }
+
+  private void loadBackgroundImage(UnitDataBaseType type) {
+    String imagePath = UNIT_DB_IMAGES_PATH + type.name().toLowerCase() + ".png";
+    Image image = themeService.getThemeImage(imagePath);
+
+    if (image == null || image.isError()) {
+      externalBrowserPane.setBackground(null);
+      return;
+    }
+
+    BackgroundImage bgImage = new BackgroundImage(
+        image,
+        BackgroundRepeat.NO_REPEAT,
+        BackgroundRepeat.NO_REPEAT,
+        BackgroundPosition.CENTER,
+        new BackgroundSize(BackgroundSize.AUTO, BackgroundSize.AUTO, false, false, true, true)
+    );
+    externalBrowserPane.setBackground(new Background(bgImage));
+  }
+
+  public void onOpenExternalBrowserClicked() {
+    UnitDataBaseType type = preferences.getUnitDataBaseType();
+    if (!type.isExternal()) {
+      return;
+    }
+    platformService.showDocument(getUnitDbUrl(type));
+  }
+
+  private String getUnitDbUrl(UnitDataBaseType type) {
+    ClientProperties.UnitDatabase db = clientProperties.getUnitDatabase();
+    return switch (type) {
+      case SPOOKY -> db.getSpookiesUrl();
+      case RACKOVER -> db.getRackOversUrl();
+      case ETFREEMAN -> db.getEtfreemanUrl();
+    };
   }
 
   @Override
-  public Node getRoot() {
+  public StackPane getRoot() {
     return unitsRoot;
   }
 

src/main/resources/application.yml

@@ -41,6 +41,7 @@ faf-client:
   unit-database:
     spookiesUrl: https://faforever.github.io/spooky-db/#/
     rackOversUrl: https://unitdb.faforever.com?settings64=eyJwcmV2aWV3Q29ybmVyIjoiTm9uZSJ9
+    etfreemanUrl: https://faforever.github.io/etfreeman-db/#/
 
   vanillaGameHashes:
     - 1AFBCD0CA85546470660FA8AC09B230E870EC65C8D1B33FEB6731BB5D4C366C5

src/main/resources/i18n/messages.properties

@@ -596,6 +596,10 @@ userInfo.statistics.errorLoading = Could not load statistics
 settings.general.unitDatabase = Unit Database
 unitDatabase.rackover = Rackover
 unitDatabase.spooky = Spooky
+unitDatabase.etfreeman = ETFreeman
+unitDatabase.external.message = Unit Database by {0}
+unitDatabase.external.description = This database is best experienced using an external browser
+unitDatabase.external.openButton = Open in Browser
 game.player.rating = One of the player's ratings
 mapVault.ladder = Ladder maps
 news.showLadderMaps = Show ladder maps

src/main/resources/i18n/messages_ru.properties

@@ -619,6 +619,10 @@ userInfo.statistics.errorLoading = Статистка не загрузилас
 settings.general.unitDatabase = Информация о юнитах
 unitDatabase.rackover = Rackover
 unitDatabase.spooky = Spooky
+unitDatabase.etfreeman = ETFreeman
+unitDatabase.external.message = База юнитов от {0}
+unitDatabase.external.description = Эта база лучше работает во внешнем браузере
+unitDatabase.external.openButton = Открыть в браузере
 # the overall and average rating of all players in the match?
 game.player.rating = Один из рейтингов игрока
 mapVault.ladder = Рейтинговые карты

src/main/resources/theme/images/unit_databases/etfreeman.png

@@ -946,6 +946,30 @@
   -fx-stroke: transparent;
 }
 
+/***************** Unit Database External *****************/
+
+.unit-database-overlay {
+  -fx-background-color: rgba(0, 0, 0, 0.75);
+}
+
+.unit-database-content {
+  -fx-background-color: -fx-base;
+  -fx-border-radius: 3;
+  -fx-border-color: -fx-box-border;
+  -fx-padding: 15 0 0 0;
+}
+
+.unit-database-title {
+  -fx-font-size: 28px;
+  -fx-padding: 0 0 10 0;
+  -fx-text-fill: white;
+}
+
+.unit-database-subtitle {
+  -fx-padding: 0 0 20 0;
+  -fx-text-fill: #eee;
+}
+
 /***************** Match maker *****************/
 
 .tmm {

src/main/resources/theme/style.css

@@ -1,7 +1,26 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.Region?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.web.WebView?>
-<WebView xmlns:fx="http://javafx.com/fxml/1" fx:id="unitsRoot"
-         fx:controller="com.faforever.client.units.UnitsController" minHeight="200.0" minWidth="200.0" prefHeight="-1.0"
-         prefWidth="-1.0" xmlns="http://javafx.com/javafx/8.0.60"/>
+<StackPane xmlns:fx="http://javafx.com/fxml/1" fx:id="unitsRoot"
+           fx:controller="com.faforever.client.units.UnitsController" minHeight="200.0" minWidth="200.0"
+           xmlns="http://javafx.com/javafx/8.0.60">
+
+    <WebView fx:id="webView" prefHeight="-1.0" prefWidth="-1.0"/>
+
+    <StackPane fx:id="externalBrowserPane" visible="false">
+        <Region styleClass="unit-database-overlay"/>
+        <VBox fx:id="contentBox" alignment="TOP_CENTER" StackPane.alignment="TOP_CENTER"
+              styleClass="unit-database-content" maxWidth="450" maxHeight="160">
+            <Label fx:id="titleLabel" styleClass="unit-database-title" wrapText="true"/>
+            <Label text="%unitDatabase.external.description" styleClass="unit-database-subtitle" wrapText="true"/>
+            <Button text="%unitDatabase.external.openButton" onAction="#onOpenExternalBrowserClicked"
+                    styleClass="primary-button" maxWidth="300"/>
+        </VBox>
+    </StackPane>
+
+</StackPane>