change: layout stuff

This commit is contained in:
ramollia
2025-10-04 13:52:04 +02:00
parent 8fc7f606f9
commit 87a5b301c7
9 changed files with 205 additions and 114 deletions

View File

@@ -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 enum Type {
VERTICAL, HORIZONTAL,
}
public abstract class Container {
public abstract Region getContainer();
public static Container create(String cssClass, Type type, int spacing) {
final Container container = new Container();
public abstract void addNode(Node node);
public abstract void addContainer(Container container, boolean fill);
switch (type) {
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) {
public Text addText(String cssClass, String x, boolean wrap) {
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) {
return addText("text", x);
public Text addText(String x, boolean wrap) {
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; }
}

View File

@@ -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);
container.getContainer().setMaxHeight(Region.USE_PREF_SIZE);
final double widthUnit = App.getWidth() / 100.0;
final double heightUnit = App.getHeight() / 100.0;
final double xPercent = xOffset * (App.getWidth() / 100.0);
final double yPercent = yOffset * (App.getHeight() / 100.0);
if (widthPercent > 0) {
container.getContainer().setMaxWidth(widthPercent * widthUnit);
} else { container.getContainer().setMaxWidth(Region.USE_PREF_SIZE); }
container.getContainer().setTranslateX(xPercent);
container.getContainer().setTranslateY(yPercent);
if (heightPercent > 0) {
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;

View File

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

View File

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

View File

@@ -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");
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);
reload();
}
@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);
}
}

View File

@@ -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);
connectionContainer.addToggle("Local", "Server", !isConnectionLocal, (server) -> {
if (server) {
System.out.println("Server is checked now");
}
final Container mainContainer = new VerticalContainer(5);
mainContainer.addToggle("Local", "Server", !isConnectionLocal, (server) -> {
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("input player name here: ...");
player1Container.addText("player is human", true);
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("input player name here: ...");
player2Container.addText("player is human", true);
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 port here: ...");
player2Container.addText("enter server ip here: ...", true);
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(player1Container, Pos.CENTER_LEFT, 10, 0);
addContainer(player2Container, Pos.CENTER_RIGHT, -10, 0);
addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2);
addContainer(mainContainer, Pos.CENTER, 0, 0, 75, 75);
addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
}
}

View File

@@ -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");
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);
reload();
}
@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);
}
}

View File

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

View File

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