working and prettier chat

ChatApp/app/src/main/java/client/ClientGuiController.java

@@ -2,20 +2,18 @@ package client;
 
 import javafx.application.Platform;
 import javafx.fxml.FXML;
-import javafx.scene.control.Alert;
+import javafx.scene.control.*;
-import javafx.scene.control.Button;
+import javafx.scene.layout.*;
-import javafx.scene.control.ButtonType;
+import javafx.scene.text.Text;
-import javafx.scene.control.TextField;
+import javafx.scene.text.TextFlow;
-import javafx.scene.layout.Border;
-import javafx.scene.layout.BorderPane;
-import javafx.scene.layout.HBox;
-import javafx.scene.layout.VBox;
 import javafx.stage.Stage;
 import network.protocol.packets.ServerResponsePacket;
 
 import java.net.InetSocketAddress;
 import java.net.SocketException;
 import java.time.Instant;
+import java.time.ZoneId;
+import java.time.format.DateTimeFormatter;
 import java.util.List;
 import java.util.Optional;
 
@@ -37,6 +35,9 @@ public class ClientGuiController implements ClientListener {
     @FXML
     private HBox chatInput;
 
+    @FXML
+    private ScrollPane chatPane;
+
     public void setClient(Client client) {
         this.client = client;
     }
@@ -50,6 +51,7 @@ public void initialize() throws SocketException {
             connected = false;
             client.close();
         });
+        chatList.heightProperty().addListener((obs, oldVal, newVal) -> chatPane.setVvalue(1.0));
     });
 }
 
@@ -85,10 +87,21 @@ public void initialize() throws SocketException {
     @Override
     public void handleChatMessage(Instant time, String chatter, String content) {
         Platform.runLater(() -> {
-            VBox msg = new VBox();
+            DateTimeFormatter formatter = DateTimeFormatter.ofPattern("HH:mm")
-            msg.getChildren().add(new TextField(chatter + " : " + content));
+                    .withZone(ZoneId.systemDefault());
-            chatList.getChildren().add(msg);
+            String timeString = formatter.format(time);
-//        chatList.getChildren().add()
+            Text chatterText = new Text(chatter + ": ");
+            chatterText.setStyle("-fx-fill: black; -fx-font-weight: bold;");
+            Text messageText = new Text(content);
+            messageText.setStyle("-fx-fill: black;");
+            TextFlow wholeMessage = new TextFlow(chatterText, messageText);
+            Text timeText = new Text("  " + timeString);
+            timeText.setStyle("-fx-fill: gray; -fx-font-size: 10px;");
+            HBox messageContainer = new HBox(5, wholeMessage, timeText);
+            messageContainer.setStyle("-fx-background-color: lightblue; -fx-padding: 8; -fx-background-radius: 5;");
+            messageContainer.setMaxWidth(Double.MAX_VALUE);
+            HBox.setHgrow(messageText, javafx.scene.layout.Priority.ALWAYS);
+            chatList.getChildren().add(messageContainer);
         });
     }
 
@@ -124,6 +137,7 @@ public void initialize() throws SocketException {
             TextField messageInput = new TextField();
             messageInput.setPromptText("Type a message...");
             messageInput.getStyleClass().add("message-input");
+            HBox.setHgrow(messageInput, Priority.ALWAYS);
             messageInput.onActionProperty().set(event -> {
                 client.SendChatMessage(messageInput.getText());
                 messageInput.clear();

ChatApp/app/src/main/resources/client/clientVue.fxml

@@ -33,11 +33,23 @@
         </ScrollPane>
     </left>
     <center>
-        <ScrollPane styleClass="chat-pane" fx:id="chatPane">
+<!--        <ScrollPane styleClass="chat-pane" fx:id="chatPane">-->
-            <VBox fx:id="chat" spacing="10.0" prefWidth="Infinity">
+<!--            <VBox fx:id="chat" spacing="10.0" prefWidth="Infinity">-->
+<!--                <VBox fx:id="chatList" styleClass="chat-list" spacing="5.0" VBox.vgrow="ALWAYS"/>-->
+<!--                <HBox fx:id="chatInput" styleClass="chat-input" spacing="5.0" />-->
+<!--            </VBox>-->
+<!--        </ScrollPane>-->
+        <BorderPane>
+            <center>
+                <ScrollPane styleClass="chat-pane" fx:id="chatPane" fitToWidth="true">
+                    <VBox fx:id="chat" spacing="10.0">
                         <VBox fx:id="chatList" styleClass="chat-list" spacing="5.0" VBox.vgrow="ALWAYS"/>
-                <HBox fx:id="chatInput" styleClass="chat-input" spacing="5.0" />
                     </VBox>
                 </ScrollPane>
             </center>
+            <bottom>
+                <HBox fx:id="chatInput" styleClass="chat-input" spacing="5.0" style="-fx-padding: 10;" />
+            </bottom>
+        </BorderPane>
+    </center>
 </BorderPane>