Make window resizable and refactor global.css

src/main/java/org/example/chaosgame/controller/ChaosGameController.java

@@ -252,5 +252,18 @@ public class ChaosGameController implements Observer, Subject, GameController {
   public void setBind(StackPane mainPane) {
     canvas.widthProperty().bind(mainPane.widthProperty().multiply(0.85));
     canvas.heightProperty().bind(mainPane.heightProperty().multiply(0.85));
+    mainPane.heightProperty().addListener((observable, oldValue, newValue) -> {
+      // Update the canvas height here
+      if (mainPane.getHeight() > 0 && mainPane.getWidth() > 0) {
+        chaosGame.notifyObservers();
+      }
+    });
+    // Add a change listener to the width property
+    mainPane.widthProperty().addListener((observable, oldValue, newValue) -> {
+      // Update the canvas width here
+      if (mainPane.getHeight() > 0 && mainPane.getWidth() > 0) {
+        chaosGame.notifyObservers();
+      }
+    });
   }
 }

src/main/java/org/example/chaosgame/controller/ExploreGameController.java

@@ -261,8 +261,21 @@ public class ExploreGameController implements Observer, Subject, GameController
 
   @Override
   public void setBind(StackPane mainPane) {
-    canvas.widthProperty().bind(mainPane.widthProperty().multiply(0.80));
-    canvas.heightProperty().bind(mainPane.heightProperty().multiply(0.80));
+    canvas.widthProperty().bind(mainPane.widthProperty().multiply(0.85));
+    canvas.heightProperty().bind(mainPane.heightProperty().multiply(0.85));
+    mainPane.heightProperty().addListener((observable, oldValue, newValue) -> {
+      // Update the canvas height here
+      if (mainPane.getHeight() > 0 && mainPane.getWidth() > 0) {
+        updateExplorePage();
+      }
+    });
+    // Add a change listener to the width property
+    mainPane.widthProperty().addListener((observable, oldValue, newValue) -> {
+      // Update the canvas width here
+      if (mainPane.getHeight() > 0 && mainPane.getWidth() > 0) {
+        updateExplorePage();
+      }
+    });
   }
 
   @Override

src/main/java/org/example/chaosgame/view/ChaosPage.java

@@ -22,7 +22,9 @@ public class ChaosPage extends GamePage {
   public ChaosPage(ChaosGameController chaosGameController) {
     super();
     this.topBar = new TopBar(chaosGameController);
+    this.topBar.getStyleClass().add("chaos-text");
     this.bottomBar = new BottomBar(chaosGameController);
+    this.bottomBar.getStyleClass().add("chaos-text");
     SideBar sideBar = new SideBar(chaosGameController);
 
     this.setTop(topBar);

src/main/java/org/example/chaosgame/view/ExplorePage.java

@@ -23,11 +23,13 @@ public class ExplorePage extends GamePage {
     super();
     this.setStyle("-fx-background-color: black;");
     this.sidebar = new SideBar(exploreGameController);
+    this.sidebar.setStyle("-fx-background-color: black;");
     this.topBar = new TopBar(exploreGameController);
-    exploreGameController.setCanvas(this.gc.getCanvas());
+    this.topBar.setStyle("-fx-background-color: black;");
     this.bottomBar = new BottomBar(exploreGameController);
-
-    this.setLeft(this.gc.getCanvas());
+    this.bottomBar.setStyle("-fx-background-color: black;");
+    exploreGameController.setCanvas(this.gc.getCanvas());
+    this.setCenter(this.gc.getCanvas());
     this.setRight(sidebar);
     this.setBottom(bottomBar);
     this.setTop(topBar);

src/main/java/org/example/chaosgame/view/GamePage.java

@@ -20,8 +20,8 @@ import java.util.Objects;
 public abstract class GamePage extends BorderPane {
   protected final GraphicsContext gc;
   private static final int COLOR_FACTOR = 6;
-  private static final int CANVAS_WIDTH = 1020;
-  private static final int CANVAS_HEIGHT = 680;
+  private static final int CANVAS_WIDTH = 1250;
+  private static final int CANVAS_HEIGHT = 805;
   private static final int MAX_COLOR_VALUE = 255;
 
   protected Color fractalColor;

src/main/java/org/example/chaosgame/view/components/BottomBar.java

@@ -46,7 +46,6 @@ public class BottomBar extends HBox {
             sliderImaginaryPart, imaginaryPartLabel);
 
     this.getStyleClass().add("top-bottom-bar");
-    this.setStyle("-fx-background-color: #f0f0f0;");
   }
 
   public void updateBottomBar(Transform2D transformation) {
@@ -73,4 +72,9 @@ public class BottomBar extends HBox {
     sliderRealPart.setVisible(isVisible);
     sliderImaginaryPart.setVisible(isVisible);
   }
+
+  public void setBottomBarStyle(String text) {
+    realPartLabel.getStyleClass().add(text);
+    imaginaryPartLabel.getStyleClass().add(text);
+  }
 }

src/main/java/org/example/chaosgame/view/components/ColorPickerComponent.java

@@ -16,8 +16,8 @@ public class ColorPickerComponent extends ColorPicker {
   public ColorPickerComponent(Consumer<Color> colorChangeHandler) {
     super();
     this.getStyleClass().add("color-picker");
-    this.setMaxWidth(200);
-    this.setMinWidth(200);
+    this.setMaxWidth(180);
+    this.setMinWidth(180);
     this.setOnAction(event -> colorChangeHandler.accept(this.getValue()));
   }
 }

src/main/java/org/example/chaosgame/view/components/FractalSelectionBox.java

@@ -16,7 +16,7 @@ public class FractalSelectionBox extends ComboBox<String> {
    * @param chaosGameController the controller for the chaos game
    */
   public FractalSelectionBox(ChaosGameController chaosGameController) {
-    this.setPrefWidth(200);
+    this.setPrefWidth(180);
     this.setPromptText("Julia ");
     this.getItems().addAll("Sierpinski", "Barnsley", "Julia");
 

src/main/java/org/example/chaosgame/view/components/GameButton.java

@@ -8,7 +8,7 @@ import javafx.scene.control.Button;
 public class GameButton extends Button {
   public GameButton(String text){
     super(text);
-    this.setMaxWidth(200);
-    this.setMinWidth(200);
+    this.setMaxWidth(180);
+    this.setMinWidth(180);
   }
 }

src/main/java/org/example/chaosgame/view/components/NumberOfStepsInput.java

@@ -8,8 +8,8 @@ import javafx.scene.control.TextField;
 public class NumberOfStepsInput extends TextField {
   public NumberOfStepsInput() {
     this.setPromptText("Number of steps");
-    this.setMaxWidth(200);
-    this.setMinWidth(200);
+    this.setMaxWidth(180);
+    this.setMinWidth(180);
     this.setMinHeight(30);
     this.setMaxHeight(30);
   }

src/main/java/org/example/chaosgame/view/components/SideBar.java

@@ -15,12 +15,12 @@ public class SideBar extends VBox {
     TextField numberOfStepsInput = new NumberOfStepsInput();
 
     Button coordinatesButton = new GameButton("Set coordinates");
-    Button createOwnFractal = new GameButton("Create own fractal");
+    Button createOwnFractal = new GameButton("Create fractal");
     Button openFileButton = new GameButton("Open file");
     Button saveFractalButton = new GameButton("Save fractal");
 
-    Button runGame = new GameButton("Run ChaosGame");
-    Button resetGame = new GameButton("Reset ChaosGame");
+    Button runGame = new GameButton("Run steps");
+    Button resetGame = new GameButton("Clear canvas");
 
     coordinatesButton.setOnAction(event -> chaosGameController.setMaxMinCoords());
     createOwnFractal.setOnAction(event -> chaosGameController.createOwnFractal());
@@ -33,15 +33,12 @@ public class SideBar extends VBox {
             fractalSelectionBox, colorPicker, numberOfStepsInput,
             coordinatesButton, createOwnFractal, saveFractalButton, openFileButton,
             runGame, resetGame);
-    this.setSpacing(10);
-    this.setPadding(new Insets(10));
     this.setAlignment(Pos.CENTER_RIGHT);
 
     VBox.setMargin(coordinatesButton, new Insets(50, 0, 0, 0));
     VBox.setMargin(runGame, new Insets(50, 0, 0, 0));
 
     this.getStyleClass().add("side-bar");
-    this.setStyle("-fx-background-color: #f0f0f0;");
   }
 
   public SideBar(ExploreGameController exploreGameController) {
@@ -56,7 +53,6 @@ public class SideBar extends VBox {
 
     this.getChildren().addAll(zoomInButton, zoomOutButton, colorPicker, resetImage);
     this.setAlignment(Pos.CENTER_RIGHT);
-    this.setSpacing(10);
     this.getStyleClass().add("side-bar");
   }
 }

src/main/java/org/example/chaosgame/view/components/TopBar.java

@@ -30,7 +30,6 @@ public class TopBar extends HBox {
     this.setSpacing(50);
     this.setAlignment(Pos.CENTER_LEFT);
     this.getStyleClass().add("top-bottom-bar");
-    this.setStyle("-fx-background-color: #f0f0f0;");
   }
 
   public void updateTopBar(Transform2D first, int totalSteps, Vector2D min, Vector2D max) {
@@ -44,4 +43,8 @@ public class TopBar extends HBox {
     coordinatesLabel.setText("Min-Coordinate: " + (double) Math.round(min.getX() * 100) / 100 + ", " + (double) Math.round(min.getY() * 100) / 100 +
             ". Max-Coordinate: " + (double) Math.round(max.getX() * 100) / 100 + ", " + (double) Math.round(max.getY() * 100) / 100);
   }
+
+  public void setTopBarStyle(String text) {
+    coordinatesLabel.getStyleClass().add(text);
+  }
 }

src/main/resources/global.css

 .button {
     -fx-text-fill: white;
     -fx-background-color: #252525;
-    -fx-font: 14 arial;
+    -fx-font: 20 arial;
     -fx-border-radius: 20;
     -fx-background-radius: 20;
     -fx-border-color: #3b3b3b;
@@ -61,7 +61,7 @@
 
 .choose-game-button {
     -fx-text-fill: white;
-    -fx-font: 30 arial;
+    -fx-text-font: 30 arial;
     -fx-background-color: #252525;
     -fx-border-radius: 30;
     -fx-background-radius: 30;
@@ -99,11 +99,6 @@
     -fx-cursor: hand;
 }
 
-.text {
-    -fx-font: 20 arial;
-    -fx-fill: #d2d2d2;
-}
-
 .exit-button {
     -fx-text-fill: white;
     -fx-font: 24 garamond;
@@ -123,17 +118,21 @@
 }
 
 .top-bottom-bar {
-    -fx-background-color: #000000;
+    -fx-background-color: white;
     -fx-border-color: #252525;
     -fx-border-width: 2 0 2 0;
     -fx-background-insets: 1;
-    -fx-padding: 10;
-
+    -fx-padding: 20;
+    -fx-spacing: 10;
+}
+.top-bottom-bar .text {
+    -fx-font: 20 arial;
+    -fx-fill: #7c7c7c;
 }
-
 .side-bar{
-    -fx-background-color: #000000;
-    -fx-padding: 10;
+    -fx-background-color: white;
+    -fx-padding: 20;
+    -fx-spacing: 10;
     -fx-border-color: #252525;
     -fx-border-width: 0 2 0 2;
     -fx-background-insets: 1;