src/main/resources/ui-structure/gameuicomponents/chatbox.fxml

@@ -5,17 +5,21 @@
 <?import javafx.geometry.Insets?>
 
 <!--
-    TODO: Chat-system (platzhalter).
     Dieses Fenster wird später mit den Serveranfragen verknüpft,
     um Nachrichten von Mitspielern und Systemmeldungen in Echtzeit anzuzeigen.
+
     Der Chat unterscheidet intern zwischen:
     - Player-to-Player (Privater 2-Personen-Chat)
     - Lobby-Chat (Aktueller Raum)
     - Globaler Chat (Gesamter Server)
+
+    Features, die später implementiert werden sollen:
+    - Nachrichten-Formatierung (Name, Zeitstempel, Textfarbe nach Typ).
 -->
 
 <VBox xmlns="http://javafx.com/javafx/21"
       xmlns:fx="http://javafx.com/fxml/1"
+      fx:controller="ch.unibas.dmi.dbis.cs108.casono.client.ui.gameui.gameuicomponents.ChatController"
       alignment="CENTER">
 
     <!-- Innenabstand: Schafft oben, rechts und unten 30 Pixel Platz, links nur 10 Pixel (asymmetrisch) -->
@@ -30,23 +34,22 @@
               maxWidth="Infinity">
 
             <children>
-                <Label text="== Chat =="
+                <Label text="== CHAT ==" styleClass="chat-header" alignment="CENTER" maxWidth="Infinity"/>
-                       styleClass="chat-header"
-                       alignment="CENTER"
-                       maxWidth="Infinity"/>
-
                 <Region minHeight="4" styleClass="chat-separator"/>
 
-                <VBox spacing="15"
+                <!-- Chatnachrichten werden hier hinzugefügt -->
-                      VBox.vgrow="ALWAYS"
+                <ScrollPane fx:id="chatScrollPane" fitToWidth="true" vbarPolicy="AS_NEEDED" hbarPolicy="NEVER" VBox.vgrow="ALWAYS" styleClass="chat-scroll-pane">
-                      styleClass="info-content">
+                    <content>
+                        <VBox fx:id="chatVBox" spacing="10" styleClass="chat-VBox"/>
+                    </content>
+                </ScrollPane>
 
-                    <children>
+                <!-- Eingabebereich -->
-                        <Label text="> Spieler 1: Hey" styleClass="info-text"/>
+                <HBox spacing="10">
-                        <Label text="> Spieler 2: Jo" styleClass="info-text"/>
+                    <!-- TODO: Größe des TextFields dynamisch anpassen -->
-                        <Label text="> Spieler 3: hm" styleClass="info-text"/>
+                    <TextField fx:id="inputField" HBox.hgrow="ALWAYS" promptText="Nachricht eingeben..." styleClass="gray-input-field" onAction="#sendMessage"/>
-                    </children>
+                    <Button fx:id="sendButton" text="SENDEN" onAction="#sendMessage" styleClass="yellow-button"/>
-                </VBox>
+                </HBox>
             </children>
         </VBox>
     </children>