fix(ui): fix image too big on small screens in skin selection scene #14

src/main/java/de/hdm_stuttgart/battlearena/Controller/SkinSelectionController.java

@@ -3,9 +3,12 @@ package de.hdm_stuttgart.battlearena.Controller;
 import javafx.fxml.FXML;
 import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
+import javafx.geometry.Rectangle2D;
 import javafx.scene.control.ToggleButton;
 import javafx.scene.control.ToggleGroup;
+import javafx.scene.image.ImageView;
 import javafx.scene.layout.VBox;
+import javafx.stage.Screen;
 
 import java.io.IOException;
 import java.net.URL;
@@ -15,6 +18,7 @@ import java.util.ResourceBundle;
 public class SkinSelectionController implements Initializable {
     @FXML public VBox parent;
     @FXML public ToggleGroup selectionButton;
+    @FXML public ImageView selection1, selection2, selection3;
 
     @Override
     public void initialize(URL url, ResourceBundle resourceBundle) {
@@ -25,7 +29,16 @@ public class SkinSelectionController implements Initializable {
                 System.out.println(value);
             }
         });
+        setImageWidth(selection1, selection2, selection3);
+    }
 
+    private void setImageWidth(ImageView... imageViews) { // the ... allows for zero or more arguments seperated by a comma
+        Rectangle2D screen = Screen.getPrimary().getVisualBounds();
+        final double imageWidth = screen.getWidth() * 0.2;
+        for (ImageView image : imageViews) {
+            image.setFitWidth(imageWidth);
+            image.setPreserveRatio(true);
+        }
     }
 
     public void gameScene() {

src/main/resources/fxml/SkinSelection.fxml

@@ -14,7 +14,7 @@
          <children>
             <ToggleButton contentDisplay="TOP" mnemonicParsing="false" text="Elias">
                <graphic>
-                  <ImageView fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
+                  <ImageView fx:id="selection1" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                      <image>
                         <Image url="@../textures/images/elias.png" />
                      </image>
@@ -26,7 +26,7 @@
             </ToggleButton>
             <ToggleButton contentDisplay="TOP" mnemonicParsing="false" text="Erzan" toggleGroup="$selectionButton">
                <graphic>
-                  <ImageView fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
+                  <ImageView fx:id="selection2" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                      <image>
                         <Image url="@../textures/images/erzan.png" />
                      </image>
@@ -35,7 +35,7 @@
             </ToggleButton>
             <ToggleButton contentDisplay="TOP" mnemonicParsing="false" text="Martin" toggleGroup="$selectionButton">
                <graphic>
-                  <ImageView fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
+                  <ImageView fx:id="selection3" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                      <image>
                         <Image url="@../textures/images/martin.png" />
                      </image>