Started designing the GUI some more with custom backgrounds ect.

This commit is contained in:
Seraina 2022-05-15 12:00:55 +02:00
parent b49bd2e9f3
commit b67dbd684b
9 changed files with 130 additions and 76 deletions

View File

@ -106,6 +106,7 @@ public class ChatController implements Initializable {
Number newValue) {
vBoxChatMessages.setMaxHeight(newValue.doubleValue());
ChatScrollPane.setMaxHeight(newValue.doubleValue() * 2);
ChatScrollPane.setVvalue((Double) newValue);
}
});
/**

View File

@ -1,14 +1,17 @@
package ch.unibas.dmi.dbis.cs108.multiplayer.client.gui.utils;
import static ch.unibas.dmi.dbis.cs108.multiplayer.helpers.Protocol.whisper;
import static javafx.scene.control.PopupControl.USE_COMPUTED_SIZE;
import ch.unibas.dmi.dbis.cs108.multiplayer.client.gui.ClientModel;
import javafx.geometry.Pos;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.Background;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
/**
* Provides utilities to configure Labels for the ChatView {@code ChatView.fxml}
@ -26,9 +29,11 @@ public class ChatLabelConfigurator {
//t = new Text(client.getUsername() + " (you): " + msg);
l = new Label(client.getUsername() + " (you): " + msg);
l.setBackground(Background.fill(Color.LAVENDER));
l.setAlignment(Pos.CENTER_RIGHT);
l.setWrapText(true);
l.setMaxHeight(Double.MAX_VALUE);
l.setScaleShape(true);
l.setPrefWidth(1150);
l.setScaleShape(false);
}
return l;
}

View File

@ -2,17 +2,18 @@
}
#vBoxChatMessages{
-fx-background-color: rgba(255,255,255,0.3);
-fx-background-color: transparent;
}
.anchorPane{
-fx-background-color: transparent;
}
*{
-fx-background-color: transparent;
.label{
-fx-all: unset;
}
.button{
-fx-background-color: midnightblue;
-fx-text-fill: lightsteelblue;

View File

@ -5,6 +5,8 @@
<?import javafx.scene.control.ScrollBar?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
@ -12,9 +14,16 @@
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane fx:id="chatPaneRoot" pickOnBounds="false" stylesheets="@Chat.css" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.unibas.dmi.dbis.cs108.multiplayer.client.gui.chat.ChatController">
<AnchorPane fx:id="chatPaneRoot" maxWidth="1300.0" pickOnBounds="false" prefWidth="1300.0" stylesheets="@Chat.css" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.unibas.dmi.dbis.cs108.multiplayer.client.gui.chat.ChatController">
<children>
<GridPane alignment="CENTER" layoutY="149.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" pickOnBounds="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<ImageView fitHeight="700.0" fitWidth="1300.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@images/chatwindow.png" />
</image>
</ImageView>
<AnchorPane layoutX="105.0" layoutY="100.0" prefHeight="215.0" prefWidth="1150.0">
<children>
<GridPane alignment="CENTER" maxWidth="-Infinity" pickOnBounds="false" prefWidth="1300.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="100.0" />
</columnConstraints>
@ -23,18 +32,18 @@
<RowConstraints maxHeight="-Infinity" minHeight="10.0" percentHeight="30.0" valignment="CENTER" vgrow="ALWAYS" />
</rowConstraints>
<children>
<ScrollPane fx:id="ChatScrollPane" fitToHeight="true" fitToWidth="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="176.0" prefWidth="343.0">
<ScrollPane fx:id="ChatScrollPane" fitToHeight="true" fitToWidth="true" hbarPolicy="ALWAYS" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" prefHeight="151.0" prefWidth="1150.0" vbarPolicy="ALWAYS">
<content>
<VBox fx:id="vBoxChatMessages" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minWidth="-Infinity" prefWidth="170.0" spacing="2.0" />
<VBox fx:id="vBoxChatMessages" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="1300.0" spacing="2.0" />
</content>
</ScrollPane>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" pickOnBounds="false" GridPane.rowIndex="1">
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="-Infinity" pickOnBounds="false" prefWidth="1300.0" GridPane.rowIndex="1">
<children>
<GridPane alignment="CENTER" layoutX="10.0" layoutY="20.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="82.0" prefWidth="2072.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" percentWidth="3.0" />
<ColumnConstraints hgrow="SOMETIMES" percentWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="20.0" percentWidth="87.0" />
<ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0" />
<ColumnConstraints hgrow="SOMETIMES" percentWidth="11.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="20.0" percentWidth="84.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" percentHeight="90.0" vgrow="SOMETIMES" />
@ -45,7 +54,8 @@
<Button fx:id="sendButton" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="56.0" prefWidth="178.0" text="Send" textOverrun="CENTER_WORD_ELLIPSIS" wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<font>
<Font size="10.0" />
</font></Button>
</font>
</Button>
</children>
<GridPane.margin>
<Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
@ -82,7 +92,9 @@
</AnchorPane>
</children>
</GridPane>
<GridPane fx:id="vBoxGridPane" alignment="CENTER" disable="true" layoutX="-14.0" layoutY="-235.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" pickOnBounds="false">
</children>
</AnchorPane>
<GridPane fx:id="vBoxGridPane" alignment="CENTER" disable="true" layoutX="-14.0" layoutY="-235.0" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" pickOnBounds="false" prefWidth="1300.0">
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" percentWidth="73.0" prefWidth="100.0" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" percentWidth="66.0" prefWidth="100.0" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -17,7 +17,6 @@
}
.textField{
-fx-text-fill: white;
-fx-background-color: transparent;
@ -32,5 +31,11 @@
-fx-font-family: Bahnschrift;
-fx-font-weight: bold;
}
.textFlow{
-fx-alignment: center;
-fx-text-fill: black;
-fx-font-family: Bahnschrift;
-fx-font-weight: bold;
}

View File

@ -6,14 +6,15 @@
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.TilePane?>
<?import javafx.scene.text.TextFlow?>
<AnchorPane fx:id="backGroundAnchorPane" pickOnBounds="false" stylesheets="@loungStyle.css" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.unibas.dmi.dbis.cs108.multiplayer.client.gui.lounge.LoungeSceneViewController">
<children>
<AnchorPane fx:id="backGroundAnimationPane" maxHeight="843.75" maxWidth="1500.0" />
<BorderPane fx:id="LoungeSceneBorderPane" layoutX="860.0" layoutY="440.0" pickOnBounds="false" stylesheets="@boarderPane.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<BorderPane fx:id="LoungeSceneBorderPane" layoutX="860.0" layoutY="440.0" pickOnBounds="false" prefHeight="843.75" prefWidth="1500.0" stylesheets="@boarderPane.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<right>
<ListView fx:id="LobbyListView" opacity="0.0" pickOnBounds="false" BorderPane.alignment="CENTER" />
<ListView fx:id="LobbyListView" pickOnBounds="false" BorderPane.alignment="CENTER" />
</right>
<top>
<ToolBar fx:id="NTtBToolBar" pickOnBounds="false" prefHeight="30.0" BorderPane.alignment="CENTER">
@ -46,7 +47,11 @@
</AnchorPane>
</center>
<bottom>
<AnchorPane fx:id="ChatArea" pickOnBounds="false" prefHeight="83.0" prefWidth="578.0" BorderPane.alignment="CENTER" />
<TilePane alignment="CENTER" orientation="VERTICAL" prefColumns="1" prefRows="1" BorderPane.alignment="CENTER">
<children>
<AnchorPane fx:id="ChatArea" pickOnBounds="false" prefHeight="83.0" prefWidth="578.0" />
</children>
</TilePane>
</bottom>
</BorderPane>
<AnchorPane fx:id="gameDisplayAnchorPane" maxHeight="843.75" maxWidth="1500.0" pickOnBounds="false" />

View File

@ -1,5 +1,6 @@
*{
-fx-background-color: transparent;
.label{
-fx-all: unset;
}
#NTtBToolBar{
@ -8,13 +9,15 @@
}
.button{
-fx-border-color: darkgrey;
-fx-background-color: grey;
-fx-text-fill: white;
-fx-background-color: midnightblue;
-fx-text-fill: lightsteelblue;
}
.button:pressed{
-fx-border-color: grey;
-fx-background-color: lightgrey;
-fx-text-fill: black;
-fx-background-color: lightsteelblue;
-fx-text-fill: midnightblue;
}
.button:hover{
-fx-effect: innershadow(gaussian, lightsteelblue, 10, 0.5 , 2, 2);
}

View File

@ -3,6 +3,10 @@
-fx-background-color: midnightblue;
}
#LobbyListView{
-fx-background-color: transparent;
}
#lobbyPrint{
-fx-background-color: midnightblue;
}
@ -15,3 +19,21 @@
.anchorPane{
-fx-alignment: center;
}
.button{
-fx-background-color: midnightblue;
-fx-text-fill: lightsteelblue;
}
.button:pressed{
-fx-background-color: lightsteelblue;
-fx-text-fill: midnightblue;
}
.button:hover{
-fx-effect: innershadow(gaussian, lightsteelblue, 10, 0.5 , 2, 2);
}
.label{
-fx-all: unset;
}