change things

app/src/main/java/org/toop/app/App.java

@@ -1,5 +1,6 @@
 package org.toop.app;
 
+import org.toop.app.canvas.GameCanvas;
 import org.toop.app.layer.Layer;
 import org.toop.app.layer.layers.MainLayer;
 import org.toop.app.layer.layers.QuitLayer;
@@ -73,6 +74,10 @@ public final class App extends Application {
 		isQuitting = false;
 	}
 
+	public static void pushCanvas(GameCanvas canvas) {
+		root.getChildren().addLast(canvas.getCanvas());
+	}
+
 	public static void popAll() {
 		final int childrenCount = root.getChildren().size();
 

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

@@ -6,8 +6,8 @@ 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.control.Label;
+import javafx.scene.control.TextField;
 import javafx.scene.layout.Region;
 import javafx.scene.text.Text;
 import javafx.scene.text.TextFlow;
@@ -20,43 +20,40 @@ public abstract class Container {
 	public abstract void addNode(Node node);
 	public abstract void addContainer(Container container, boolean fill);
 
-	public Text addText(String cssClass, String x, boolean wrap) {
+	public void addText(String cssClass, String x, boolean wrap) {
 		final Text element = new Text(x);
 		element.getStyleClass().add(cssClass);
 
 		if (wrap) {
 			addNode(new TextFlow(element));
 		} else { addNode(element); }
-
-		return element;
 	}
 
-	public Text addText(String x, boolean wrap) {
+	public void addText(String x, boolean wrap) {
-		return addText("text", x, wrap);
+		addText("text", x, wrap);
 	}
 
-	public Button addButton(String cssClass, String x, Runnable runnable) {
+	public void addButton(String cssClass, String x, Runnable runnable) {
-		final Button element = new Button(x);
+		final Label element = new Label(x);
 		element.getStyleClass().add(cssClass);
 
 		element.setOnMouseEntered(_ -> {
 			GlobalEventBus.post(new AppEvents.OnNodeHover());
 		});
 
-		element.setOnAction(_ -> {
+		element.setOnMouseClicked(_ -> {
 			GlobalEventBus.post(new AppEvents.OnNodeClick());
 			runnable.run();
 		});
 
 		addNode(element);
-		return element;
 	}
 
-	public Button addButton(String x, Runnable runnable) {
+	public void addButton(String x, Runnable runnable) {
-		return addButton("button", x, runnable);
+		addButton("button", x, runnable);
 	}
 
-	public Label addToggle(String cssClass, String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
+	public void addToggle(String cssClass, String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
 		final Label element = new Label(toggled? x2 : x1);
 		element.getStyleClass().add(cssClass);
 
@@ -80,10 +77,28 @@ public abstract class Container {
 		});
 
 		addNode(element);
-		return element;
 	}
 
-	public Label addToggle(String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
+	public void addToggle(String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
-		return addToggle("toggle", x1, x2, toggled, consumer);
+		addToggle("toggle", x1, x2, toggled, consumer);
+	}
+
+	public void addInput(String cssClass, String input, Consumer<String> consumer) {
+		final TextField element = new TextField(input);
+		element.getStyleClass().add(cssClass);
+
+		element.setOnMouseEntered(_ -> {
+			GlobalEventBus.post(new AppEvents.OnNodeHover());
+		});
+
+		element.textProperty().addListener((_, _, newValue) -> {
+			consumer.accept(newValue);
+		});
+
+		addNode(element);
+	}
+
+	public void addInput(String input, Consumer<String> consumer) {
+		addInput("input", input, consumer);
 	}
 }

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

@@ -1,6 +1,7 @@
 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;
 
@@ -48,6 +49,26 @@ public abstract class Layer {
 		layer.getChildren().addLast(container.getContainer());
 	}
 
+	protected void addCanvas(GameCanvas canvas, Pos position, int xOffset, int yOffset, int widthPercent, int heightPercent) {
+		StackPane.setAlignment(canvas.getCanvas(), position);
+
+		final double widthUnit = App.getWidth() / 100.0;
+		final double heightUnit = App.getHeight() / 100.0;
+
+		if (widthPercent > 0) {
+			canvas.getCanvas().setWidth(widthPercent * widthUnit);
+		} else { canvas.getCanvas().setWidth(Region.USE_PREF_SIZE); }
+
+		if (heightPercent > 0) {
+			canvas.getCanvas().setHeight(heightPercent * heightUnit);
+		} else { canvas.getCanvas().setHeight(Region.USE_PREF_SIZE); }
+
+		canvas.getCanvas().setTranslateX(xOffset * widthUnit);
+		canvas.getCanvas().setTranslateY(yOffset * heightUnit);
+
+		layer.getChildren().addLast(canvas.getCanvas());
+	}
+
 	protected void pop() {
 		if (layer.getChildren().size() <= 1) {
 			return;

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

@@ -0,0 +1,26 @@
+package org.toop.app.layer.layers;
+
+import javafx.geometry.Pos;
+import org.toop.app.App;
+import org.toop.app.canvas.TicTacToeCanvas;
+import org.toop.app.layer.Container;
+import org.toop.app.layer.Layer;
+import org.toop.app.layer.containers.VerticalContainer;
+
+public class GameLayer extends Layer {
+	public GameLayer() {
+		super("game.css");
+		reload();
+	}
+
+	@Override
+	public void reload() {
+		App.popAll();
+
+		final Container controlContainer = new VerticalContainer(5);
+		controlContainer.addButton("Back", () -> { App.activate(new MainLayer()); });
+
+		addCanvas(new TicTacToeCanvas(), Pos.CENTER, 0, 0, 100, 100);
+		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
+	}
+}

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

@@ -2,6 +2,7 @@ package org.toop.app.layer.layers;
 
 import org.toop.app.App;
 import org.toop.app.GameType;
+import org.toop.app.canvas.TicTacToeCanvas;
 import org.toop.app.layer.Container;
 import org.toop.app.layer.Layer;
 import org.toop.app.layer.containers.HorizontalContainer;
@@ -41,6 +42,12 @@ public class MultiplayerLayer extends Layer {
 		final Container player2Container = new VerticalContainer("player_container", 5);
 		playersContainer.addContainer(player2Container, true);
 
+		if (isConnectionLocal) {
+			mainContainer.addButton("Start", () -> {});
+		} else {
+			mainContainer.addButton("Connnect", () -> { App.activate(new GameLayer()); });
+		}
+
 		player1Container.addToggle("Human", "Computer", !isPlayer1Human, (computer) -> {
 			isPlayer1Human = !computer;
 			reload();
@@ -68,8 +75,11 @@ public class MultiplayerLayer extends Layer {
 				player2Container.addToggle("Easy", "Hard", false, (hard) -> {});
 			}
 		} else {
-			player2Container.addText("enter server ip here: ...", true);
+			player2Container.addText("Server IP", true);
-			player2Container.addText("enter server port here: ...", true);
+			player2Container.addInput("", (input) -> {});
+
+			player2Container.addText("Server Port", true);
+			player2Container.addInput("", (input) -> {});
 		}
 
 		final Container controlContainer = new VerticalContainer(5);

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

@@ -3,37 +3,43 @@
 }
 
 .vertical_container, .horizontal_container {
-	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
+	-fx-padding: 10;
-    -fx-background-insets: 0, 2;
-    -fx-background-radius: 8;
-    -fx-padding: 10;
 
 	-fx-alignment: center;
 	-fx-text-alignment: center;
+
+	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
+    -fx-background-insets: 0, 2;
+    -fx-background-radius: 5;
 }
 
-.text {
+.text, .button, .toggle, .input {
+	-fx-padding: 10;
+
 	-fx-fill: white;
+	-fx-text-fill: white;
 
 	-fx-font-family: "Segoe UI", sans-serif;
 	-fx-font-weight: bold;
-	-fx-font-size: 24px;
+	-fx-font-size: 20px;
-}
-
-.button, .toggle {
-	-fx-padding: 10;
 
 	-fx-background-color: transparent;
 	-fx-border-color: transparent;
-
-	-fx-transition: all 0.3s ease-in-out;
 }
 
 .button:hover, .toggle:hover {
 	-fx-cursor: hand;
 
-    -fx-scale-x: 1.1;
+	-fx-scale-x: 1.1;
-    -fx-scale-y: 1.1;
+	-fx-scale-y: 1.1;
 
-    -fx-effect: dropshadow(gaussian, #007fff, 10, 0.5, 0, 0);
+	-fx-effect: dropshadow(gaussian, #007fff, 10, 0.5, 0, 0);
+}
+
+.input:focused {
+	-fx-border-color: transparent;
+
+	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
+	-fx-background-insets: 0, 2;
+	-fx-background-radius: 8;
 }