Add: Lobby UI
This commit is contained in:
Jona Walpert
@@ -0,0 +1,151 @@
|
||||
/* Pixel-Art Font (WICHTIG: Nutze eine Monospace-Schrift für Pixel-Look) */
|
||||
.root {
|
||||
-fx-background-color: #000000;
|
||||
-fx-font-family: "Monospaced", "Courier New";
|
||||
}
|
||||
|
||||
.anchor-pane-bg {
|
||||
-fx-background-color: #ffffff;
|
||||
/* Optional: Bild entfernen oder als Overlay nutzen */
|
||||
-fx-background-image: url("/images/background.png");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-position: center center;
|
||||
-fx-background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* DIE SCHWEBENDE INFO-BOX (PIXEL-STYLE) */
|
||||
.floating-chat-box {
|
||||
-fx-background-color: #0d9e3b;
|
||||
/* Pixel-Ränder: Keine Rundung (0px) oder nur sehr kleine Stufen */
|
||||
-fx-background-radius: 58;
|
||||
-fx-border-radius: 50;
|
||||
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
|
||||
-fx-border-width: 12;
|
||||
-fx-padding: 20;
|
||||
/* Harter Schatten statt weicher Glow */
|
||||
-fx-effect: dropshadow(one-pass-box, rgba(0,0,0,1), 0, 0, 15, 15);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-font-size: 22px;
|
||||
-fx-font-weight: bold;
|
||||
-fx-padding: 0 0 10 0;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-font-size: 16px;
|
||||
}
|
||||
|
||||
/* DER OVALE PIXEL-TISCH */
|
||||
.casino-table {
|
||||
-fx-background-color: #0d9e3b; /* Feste Farbe statt Gradient für Pixel-Look */
|
||||
/* Oval durch festen Radius - Pixel-Art-Ovale sind stufig */
|
||||
-fx-background-radius: 2000;
|
||||
-fx-border-radius: 2000;
|
||||
|
||||
/* Dicker, eckiger Holzrand */
|
||||
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
|
||||
-fx-border-width: 12;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.table-title {
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-font-size: 28px;
|
||||
-fx-font-weight: bold;
|
||||
-fx-effect: dropshadow(one-pass-box, #000, 0, 0, 3, 3);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Hauptcontainer der Statusbox */
|
||||
.player-status-pane {
|
||||
-fx-background-color: rgb(129, 13, 158);
|
||||
-fx-background-radius: 15;
|
||||
-fx-border-radius: 15;
|
||||
|
||||
/* -fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
|
||||
-fx-border-width: 2;
|
||||
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 10, 0, 0, 4);*/
|
||||
}
|
||||
|
||||
.player-status-pane:hover {
|
||||
-fx-translate-y: -3;
|
||||
}
|
||||
|
||||
/* Die zwei inneren Boxen */
|
||||
.status-inner-box-top {
|
||||
-fx-background-color: rgb(13, 93, 158);
|
||||
-fx-background-radius: 19;
|
||||
-fx-border-radius: 15;
|
||||
-fx-padding: 5 10;
|
||||
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
|
||||
-fx-border-width: 3;
|
||||
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
|
||||
}
|
||||
|
||||
.status-inner-box-midle {
|
||||
-fx-background-color: rgba(13, 158, 59, 0);
|
||||
}
|
||||
|
||||
.status-inner-box-bottom {
|
||||
-fx-background-color: rgb(158, 13, 102);
|
||||
-fx-background-radius: 19;
|
||||
-fx-border-radius: 15;
|
||||
-fx-padding: 5 10;
|
||||
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
|
||||
-fx-border-width: 3;
|
||||
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
|
||||
}
|
||||
|
||||
.table-title {
|
||||
/* Titel-Text anpassen */
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-font-size: 32px;
|
||||
-fx-font-weight: bold;
|
||||
-fx-effect: dropshadow(one-pass-box, #000, 0, 0, 3, 3);
|
||||
-fx-padding: 10 0 0 0; /* Abstand nach oben */
|
||||
}
|
||||
|
||||
.green-box {
|
||||
/* Grüne Box anpassen */
|
||||
-fx-fill: #4CAF50;
|
||||
-fx-stroke: #FFFFFF;
|
||||
-fx-stroke-width: 3;
|
||||
-fx-effect: dropshadow(one-pass-box, #000, 0, 0, 10, 10);
|
||||
-fx-padding: 0 0 40 0;
|
||||
}
|
||||
|
||||
.button-exit {
|
||||
-fx-background-radius: 12;
|
||||
-fx-border-radius: 12;
|
||||
-fx-font-family: "Courier New";
|
||||
-fx-font-weight: bold;
|
||||
-fx-border-width: 2;
|
||||
-fx-padding: 6 15;
|
||||
-fx-cursor: hand;
|
||||
}
|
||||
|
||||
.button-exit:hover {
|
||||
-fx-translate-y: -3;
|
||||
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
|
||||
}
|
||||
|
||||
.button-exit {
|
||||
-fx-background-color: #333333;
|
||||
-fx-border-color: #666666;
|
||||
-fx-text-fill: #CCCCCC;
|
||||
-fx-background-radius: 12;
|
||||
-fx-border-radius: 12;
|
||||
-fx-font-family: "Courier New";
|
||||
-fx-font-weight: bold;
|
||||
-fx-border-width: 2;
|
||||
-fx-padding: 6 15;
|
||||
-fx-cursor: hand;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<?import javafx.scene.image.ImageView?>
|
||||
<?import javafx.scene.control.*?>
|
||||
<?import javafx.scene.layout.*?>
|
||||
<?import javafx.geometry.Insets?>
|
||||
|
||||
<AnchorPane xmlns="http://javafx.com"
|
||||
xmlns:fx="http://javafx.com"
|
||||
fx:controller="ch.unibas.dmi.dbis.cs108.casono.client.ui.lobbyui.CasinomainuiController"
|
||||
styleClass="anchor-pane-bg"
|
||||
stylesheets="@Casinomainui.css">
|
||||
|
||||
<GridPane prefWidth="1200" prefHeight="800" AnchorPane.topAnchor="0" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0">
|
||||
<columnConstraints>
|
||||
<!-- Tisch bekommt 75% vom Fenster -->
|
||||
<ColumnConstraints percentWidth="70.0" hgrow="ALWAYS" />
|
||||
<!-- Info-Box bekommt 25% vom Fenster inkl. 5 prozent buffer -->
|
||||
<ColumnConstraints percentWidth="5.0" hgrow="ALWAYS" />
|
||||
<ColumnConstraints percentWidth="25.0" hgrow="ALWAYS" />
|
||||
</columnConstraints>
|
||||
|
||||
<rowConstraints>
|
||||
<RowConstraints vgrow="ALWAYS" />
|
||||
</rowConstraints>
|
||||
|
||||
<children>
|
||||
<!-- LINKER BEREICH (Tisch) -->
|
||||
<GridPane GridPane.columnIndex="0" style="-fx-background-color: transparent;" alignment="CENTER">
|
||||
<rowConstraints>
|
||||
<RowConstraints percentHeight="25.0" vgrow="ALWAYS" />
|
||||
<RowConstraints percentHeight="75.0" vgrow="ALWAYS" />
|
||||
</rowConstraints>
|
||||
|
||||
<columnConstraints>
|
||||
<ColumnConstraints hgrow="ALWAYS" />
|
||||
</columnConstraints>
|
||||
|
||||
<children>
|
||||
<HBox alignment="CENTER" spacing="20"
|
||||
maxWidth="Infinity"
|
||||
GridPane.rowIndex="0"
|
||||
GridPane.columnIndex="0"
|
||||
GridPane.halignment="CENTER">
|
||||
<ImageView fx:id="logoView"
|
||||
fitHeight="96"
|
||||
fitWidth="96"
|
||||
preserveRatio="true" />
|
||||
<VBox alignment="CENTER" spacing="5">
|
||||
<Label text="placeholder text wird in controller ueberschriebeen"
|
||||
styleClass="table-title"
|
||||
fx:id="titleLabel"
|
||||
alignment="CENTER" />
|
||||
<Label text="placeholder text wird in controller ueberschriebeen"
|
||||
styleClass="table-title"
|
||||
fx:id="subtitleLabel"
|
||||
alignment="CENTER" />
|
||||
</VBox>
|
||||
</HBox>
|
||||
<Button text="EXIT"
|
||||
styleClass="button-exit"
|
||||
fx:id="exitbutton"
|
||||
onAction="#handleexitbutton"
|
||||
GridPane.rowIndex="0"
|
||||
GridPane.columnIndex="0"
|
||||
GridPane.halignment="LEFT"
|
||||
GridPane.valignment="TOP">
|
||||
<GridPane.margin>
|
||||
<Insets top="20" left="20" />
|
||||
</GridPane.margin>
|
||||
</Button>
|
||||
|
||||
<VBox fx:id="casinoTable"
|
||||
alignment="CENTER"
|
||||
styleClass="casino-table"
|
||||
spacing="20"
|
||||
maxWidth="Infinity"
|
||||
maxHeight="Infinity"
|
||||
GridPane.rowIndex="1"
|
||||
GridPane.columnIndex="0"
|
||||
GridPane.halignment="CENTER">
|
||||
<GridPane.margin>
|
||||
<Insets left="20" bottom="20" />
|
||||
</GridPane.margin>
|
||||
</VBox>
|
||||
</children>
|
||||
</GridPane>
|
||||
|
||||
|
||||
<VBox GridPane.columnIndex="1"
|
||||
alignment="CENTER"
|
||||
minWidth="100"
|
||||
minHeight="100">
|
||||
<!-- Bleibt leer -->
|
||||
</VBox>
|
||||
|
||||
<!-- RECHTER BEREICH (Info-Box) -->
|
||||
<VBox GridPane.columnIndex="2" alignment="CENTER">
|
||||
<padding>
|
||||
<Insets top="30" right="30" bottom="30" left="10"/>
|
||||
</padding>
|
||||
<VBox VBox.vgrow="ALWAYS" styleClass="floating-chat-box" spacing="10" maxWidth="Infinity">
|
||||
<Label text="== INFO ==" styleClass="chat-header" alignment="CENTER" maxWidth="Infinity"/>
|
||||
<Region minHeight="4" style="-fx-background-color: #ffffff;" />
|
||||
<VBox spacing="15" VBox.vgrow="ALWAYS" styleClass="info-content">
|
||||
<Label text="> CREDITS: 1000" styleClass="info-text"/>
|
||||
<Label text="> JACKPOT: 9999" styleClass="info-text"/>
|
||||
<Label text="> SYSTEM: OK" styleClass="info-text"/>
|
||||
</VBox>
|
||||
</VBox>
|
||||
</VBox>
|
||||
</children>
|
||||
</GridPane>
|
||||
</AnchorPane>
|
||||
Reference in New Issue
Block a user