change: layout stuff

app/src/main/java/org/toop/app/layer/Container.java

@@ -5,65 +5,34 @@ import org.toop.framework.eventbus.GlobalEventBus;
 
 import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.SimpleBooleanProperty;
+import javafx.scene.Node;
 import javafx.scene.control.Button;
-import javafx.scene.layout.HBox;
 import javafx.scene.control.Label;
-import javafx.scene.layout.Pane;
 import javafx.scene.layout.Region;
-import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
+import javafx.scene.text.TextFlow;
 
 import java.util.function.Consumer;
 
-public final class Container {
+public abstract class Container {
-	public enum Type {
+	public abstract Region getContainer();
-		VERTICAL, HORIZONTAL,
-	}
 
-	public static Container create(String cssClass, Type type, int spacing) {
+	public abstract void addNode(Node node);
-		final Container container = new Container();
+	public abstract void addContainer(Container container, boolean fill);
 
-		switch (type) {
+	public Text addText(String cssClass, String x, boolean wrap) {
-			case VERTICAL:
-				container.container = new VBox(spacing);
-				break;
-			case HORIZONTAL:
-				container.container = new HBox(spacing);
-				break;
-		}
-
-		container.container.getStyleClass().add(cssClass);
-		return container;
-	}
-
-	public static Container create(Type type, int spacing) {
-		return create("container", type, spacing);
-	}
-
-	private Pane container;
-
-	public Container addContainer(String cssClass, Type type, int spacing) {
-		final Container element = create(cssClass, type, spacing);
-		element.container.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
-
-		container.getChildren().add(element.container);
-		return element;
-	}
-
-	public Container addContainer(Type type, int spacing) {
-		return addContainer("container", type, spacing);
-	}
-
-	public Text addText(String cssClass, String x) {
 		final Text element = new Text(x);
 		element.getStyleClass().add(cssClass);
 
-		container.getChildren().addLast(element);
+		if (wrap) {
+			addNode(new TextFlow(element));
+		} else { addNode(element); }
+
 		return element;
 	}
 
-	public Text addText(String x) {
+	public Text addText(String x, boolean wrap) {
-		return addText("text", x);
+		return addText("text", x, wrap);
 	}
 
 	public Button addButton(String cssClass, String x, Runnable runnable) {
@@ -79,7 +48,7 @@ public final class Container {
 			runnable.run();
 		});
 
-		container.getChildren().addLast(element);
+		addNode(element);
 		return element;
 	}
 
@@ -110,13 +79,11 @@ public final class Container {
 			consumer.accept(checked.get());
 		});
 
-		container.getChildren().addLast(element);
+		addNode(element);
 		return element;
 	}
 
 	public Label addToggle(String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
 		return addToggle("toggle", x1, x2, toggled, consumer);
 	}
-
-	public Pane getContainer() { return container; }
 }

app/src/main/java/org/toop/app/layer/Layer.java

@@ -1,7 +1,6 @@
 package org.toop.app.layer;
 
 import org.toop.app.App;
-import org.toop.app.canvas.GameCanvas;
 import org.toop.framework.asset.ResourceManager;
 import org.toop.framework.asset.resources.CssAsset;
 
@@ -29,33 +28,26 @@ public abstract class Layer {
 		this(cssFile, "background");
 	}
 
-	protected void addContainer(Container container, Pos position, int xOffset, int yOffset) {
+	protected void addContainer(Container container, Pos position, int xOffset, int yOffset, int widthPercent, int heightPercent) {
 		StackPane.setAlignment(container.getContainer(), position);
 
-		container.getContainer().setMaxWidth(Region.USE_PREF_SIZE);
+		final double widthUnit = App.getWidth() / 100.0;
-		container.getContainer().setMaxHeight(Region.USE_PREF_SIZE);
+		final double heightUnit = App.getHeight() / 100.0;
 
-		final double xPercent = xOffset * (App.getWidth() / 100.0);
+		if (widthPercent > 0) {
-		final double yPercent = yOffset * (App.getHeight() / 100.0);
+			container.getContainer().setMaxWidth(widthPercent * widthUnit);
+		} else { container.getContainer().setMaxWidth(Region.USE_PREF_SIZE); }
 
-		container.getContainer().setTranslateX(xPercent);
+		if (heightPercent > 0) {
-		container.getContainer().setTranslateY(yPercent);
+			container.getContainer().setMaxHeight(heightPercent * heightUnit);
+		} else { container.getContainer().setMaxHeight(Region.USE_PREF_SIZE); }
+
+		container.getContainer().setTranslateX(xOffset * widthUnit);
+		container.getContainer().setTranslateY(yOffset * heightUnit);
 
 		layer.getChildren().addLast(container.getContainer());
 	}
 
-	protected void addCanvas(GameCanvas canvas, Pos position, int xOffset, int yOffset) {
-		StackPane.setAlignment(canvas.getCanvas(), position);
-
-		final double xPercent = xOffset * (App.getWidth() / 100.0);
-		final double yPercent = yOffset * (App.getHeight() / 100.0);
-
-		canvas.getCanvas().setTranslateX(xPercent);
-		canvas.getCanvas().setTranslateX(yPercent);
-
-		layer.getChildren().addLast(canvas.getCanvas());
-	}
-
 	protected void pop() {
 		if (layer.getChildren().size() <= 1) {
 			return;

app/src/main/java/org/toop/app/layer/containers/HorizontalContainer.java

@@ -0,0 +1,58 @@
+package org.toop.app.layer.containers;
+
+import org.toop.app.layer.Container;
+
+import javafx.collections.ObservableList;
+import javafx.scene.Node;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
+import javafx.scene.layout.Region;
+
+public final class HorizontalContainer extends Container {
+	private final HBox container;
+
+	public HorizontalContainer(String cssClass, int spacing) {
+		container = new HBox(spacing);
+		container.getStyleClass().add(cssClass);
+	}
+
+	public HorizontalContainer(int spacing) {
+		this("horizontal_container", spacing);
+	}
+
+	@Override
+	public Region getContainer() { return container; }
+
+	@Override
+	public void addNode(Node node) {
+		container.getChildren().addLast(node);
+	}
+
+	@Override
+	public void addContainer(Container container, boolean fill) {
+		if (fill) {
+			container.getContainer().setMinSize(0, 0);
+			container.getContainer().setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
+			HBox.setHgrow(container.getContainer(), Priority.ALWAYS);
+		} else {
+			container.getContainer().setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+		}
+
+		this.container.getChildren().add(container.getContainer());
+
+		if (fill) {
+			balanceChildWidths();
+		}
+	}
+
+	private void balanceChildWidths() {
+		final ObservableList<Node> children = container.getChildren();
+		final double widthPerChild = container.getWidth() / children.size();
+
+		for (final Node child : children) {
+			if (child instanceof Region) {
+				((Region)child).setPrefWidth(widthPerChild);
+			}
+		}
+	}
+}

app/src/main/java/org/toop/app/layer/containers/VerticalContainer.java

@@ -0,0 +1,58 @@
+package org.toop.app.layer.containers;
+
+import org.toop.app.layer.Container;
+
+import javafx.collections.ObservableList;
+import javafx.scene.Node;
+import javafx.scene.layout.Priority;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.VBox;
+
+public final class VerticalContainer extends Container {
+	private final VBox container;
+
+	public VerticalContainer(String cssClass, int spacing) {
+		container = new VBox(spacing);
+		container.getStyleClass().add(cssClass);
+	}
+
+	public VerticalContainer(int spacing) {
+		this("vertical_container", spacing);
+	}
+
+	@Override
+	public Region getContainer() { return container; }
+
+	@Override
+	public void addNode(Node node) {
+		container.getChildren().addLast(node);
+	}
+
+	@Override
+	public void addContainer(Container container, boolean fill) {
+		if (fill) {
+			container.getContainer().setMinSize(0, 0);
+			container.getContainer().setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
+			VBox.setVgrow(container.getContainer(), Priority.ALWAYS);
+		} else {
+			container.getContainer().setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+		}
+
+		this.container.getChildren().add(container.getContainer());
+
+		if (fill) {
+			balanceChildHeights();
+		}
+	}
+
+	private void balanceChildHeights() {
+		final ObservableList<Node> children = container.getChildren();
+		final double heightPerChild = container.getHeight() / children.size();
+
+		for (final Node child : children) {
+			if (child instanceof Region) {
+				((Region)child).setPrefHeight(heightPerChild);
+			}
+		}
+	}
+}

app/src/main/java/org/toop/app/layer/layers/MainLayer.java

@@ -4,27 +4,30 @@ import org.toop.app.App;
 import org.toop.app.GameType;
 import org.toop.app.layer.Container;
 import org.toop.app.layer.Layer;
+import org.toop.app.layer.containers.VerticalContainer;
 
 import javafx.geometry.Pos;
 
 public final class MainLayer extends Layer {
 	public MainLayer() {
 		super("main.css");
-
+		reload();
-		final Container gamesContainer = Container.create(Container.Type.VERTICAL, 5);
-		gamesContainer.addButton("Tic Tac Toe", () -> { App.activate(new MultiplayerLayer(GameType.TICTACTOE)); });
-		gamesContainer.addButton("Othello", () -> { App.activate(new MultiplayerLayer(GameType.OTHELLO)); });
-
-		final Container controlContainer = Container.create(Container.Type.VERTICAL, 5);
-		controlContainer.addButton("Credits", () -> {});
-		controlContainer.addButton("Options", () -> {});
-		controlContainer.addButton("Quit", () -> { App.quitPopup(); });
-
-		addContainer(gamesContainer, Pos.TOP_LEFT, 2, 2);
-		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2);
 	}
 
 	@Override
 	public void reload() {
+		popAll();
+
+		final Container gamesContainer = new VerticalContainer(5);
+		gamesContainer.addButton("Tic Tac Toe", () -> { App.activate(new MultiplayerLayer(GameType.TICTACTOE)); });
+		gamesContainer.addButton("Othello", () -> { App.activate(new MultiplayerLayer(GameType.OTHELLO)); });
+
+		final Container controlContainer = new VerticalContainer(5);
+		controlContainer.addButton("Credits", () -> {});
+		controlContainer.addButton("Options", () -> {});
+		controlContainer.addButton("Quit", () -> { App.quitPopup(); });
+
+		addContainer(gamesContainer, Pos.TOP_LEFT, 2, 2, 25, 0);
+		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 25, 0);
 	}
 }

app/src/main/java/org/toop/app/layer/layers/MultiplayerLayer.java

@@ -4,6 +4,8 @@ import org.toop.app.App;
 import org.toop.app.GameType;
 import org.toop.app.layer.Container;
 import org.toop.app.layer.Layer;
+import org.toop.app.layer.containers.HorizontalContainer;
+import org.toop.app.layer.containers.VerticalContainer;
 
 import javafx.geometry.Pos;
 
@@ -22,17 +24,22 @@ public class MultiplayerLayer extends Layer {
 	public void reload() {
 		popAll();
 
-		final Container connectionContainer = Container.create(Container.Type.VERTICAL, 0);
+		final Container mainContainer = new VerticalContainer(5);
-		connectionContainer.addToggle("Local", "Server", !isConnectionLocal, (server) -> {
+		mainContainer.addToggle("Local", "Server", !isConnectionLocal, (server) -> {
-			if (server) {
-				System.out.println("Server is checked now");
-			}
-
 			isConnectionLocal = !server;
 			reload();
 		});
 
-		final Container player1Container = Container.create(Container.Type.VERTICAL, 5);
+		final Container playersContainer = new HorizontalContainer(50);
+		mainContainer.addContainer(playersContainer, true);
+
+		final Container player1Container = new VerticalContainer("player_container", 5);
+		playersContainer.addContainer(player1Container, true);
+
+		playersContainer.addText("VS", false);
+
+		final Container player2Container = new VerticalContainer("player_container", 5);
+		playersContainer.addContainer(player2Container, true);
 
 		player1Container.addToggle("Human", "Computer", !isPlayer1Human, (computer) -> {
 			isPlayer1Human = !computer;
@@ -40,15 +47,13 @@ public class MultiplayerLayer extends Layer {
 		});
 
 		if (isPlayer1Human) {
-			player1Container.addText("player is human");
+			player1Container.addText("player is human", true);
-			player1Container.addText("input player name here: ...");
+			player1Container.addText("input player name here: ...", true);
 		} else {
-			player1Container.addText("playing against ai");
+			player1Container.addText("playing against ai", true);
 			player1Container.addToggle("Easy", "Hard", false, (hard) -> {});
 		}
 
-		final Container player2Container = Container.create(Container.Type.VERTICAL, 5);
-
 		if (isConnectionLocal) {
 			player2Container.addToggle("Human", "Computer", !isPlayer2Human, (computer) -> {
 				isPlayer2Human = !computer;
@@ -56,25 +61,21 @@ public class MultiplayerLayer extends Layer {
 			});
 
 			if (isPlayer2Human) {
-				player2Container.addText("player is human");
+				player2Container.addText("player is human", true);
-				player2Container.addText("input player name here: ...");
+				player2Container.addText("input player name here: ...", true);
 			} else {
-				player2Container.addText("playing against ai");
+				player2Container.addText("playing against ai", true);
 				player2Container.addToggle("Easy", "Hard", false, (hard) -> {});
 			}
 		} else {
-			player2Container.addText("enter server ip here: ...");
+			player2Container.addText("enter server ip here: ...", true);
-			player2Container.addText("enter server port here: ...");
+			player2Container.addText("enter server port here: ...", true);
 		}
 
-		final Container controlContainer = Container.create(Container.Type.VERTICAL, 5);
+		final Container controlContainer = new VerticalContainer(5);
 		controlContainer.addButton("Back", () -> { App.activate(new MainLayer()); });
 
-		addContainer(connectionContainer, Pos.TOP_CENTER, 0, 20);
+		addContainer(mainContainer, Pos.CENTER, 0, 0, 75, 75);
-
+		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
-		addContainer(player1Container, Pos.CENTER_LEFT, 10, 0);
-		addContainer(player2Container, Pos.CENTER_RIGHT, -10, 0);
-
-		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2);
 	}
 }

app/src/main/java/org/toop/app/layer/layers/QuitLayer.java

@@ -3,24 +3,30 @@ package org.toop.app.layer.layers;
 import org.toop.app.App;
 import org.toop.app.layer.Container;
 import org.toop.app.layer.Layer;
+import org.toop.app.layer.containers.HorizontalContainer;
+import org.toop.app.layer.containers.VerticalContainer;
 
 import javafx.geometry.Pos;
 
 public final class QuitLayer extends Layer {
 	public QuitLayer() {
 		super("quit.css", "quit_background");
-
+		reload();
-		final Container mainContainer = Container.create(Container.Type.VERTICAL, 30);
-		mainContainer.addText("Are you sure?");
-
-		final Container controlContainer = mainContainer.addContainer(Container.Type.HORIZONTAL, 50);
-		controlContainer.addButton("Yes", () -> { App.quit(); });
-		controlContainer.addButton("No", () -> { App.pop(); });
-
-		addContainer(mainContainer, Pos.CENTER, 0, 0);
 	}
 
 	@Override
 	public void reload() {
+		popAll();
+
+		final Container mainContainer = new VerticalContainer(30);
+		mainContainer.addText("Are you sure?", false);
+
+		final Container controlContainer = new HorizontalContainer(30);
+		mainContainer.addContainer(controlContainer, false);
+
+		controlContainer.addButton("Yes", () -> { App.quit(); });
+		controlContainer.addButton("No", () -> { App.pop(); });
+
+		addContainer(mainContainer, Pos.CENTER, 0, 0, 30, 30);
 	}
 }

app/src/main/resources/assets/style/app.css

@@ -2,7 +2,7 @@
 	-fx-background-color: linear-gradient(to bottom right, #21a7b2, #8f32b9);
 }
 
-.container {
+.vertical_container, .horizontal_container {
 	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
     -fx-background-insets: 0, 2;
     -fx-background-radius: 8;

app/src/main/resources/assets/style/multiplayer.css

@@ -0,0 +1,6 @@
+.player_container {
+	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
+    -fx-background-insets: 0, 2;
+    -fx-background-radius: 8;
+    -fx-padding: 10;
+}