Add: Lobby UI

This commit is contained in:
Jona Walpert
2026-03-11 15:16:31 +01:00
parent a7e43619f8
commit a5204eaf29
9 changed files with 13 additions and 12 deletions
@@ -1,5 +1,5 @@
package ch.unibas.dmi.dbis.cs108.casono.client;
import ch.unibas.dmi.dbis.cs108.casono.client.ui.Launcher;
public class ClientApp {
public static void start(String arg) {
String[] parts = arg.split(":", 2);
@@ -10,5 +10,6 @@ public class ClientApp {
int port = Integer.parseInt(parts[1]);
System.out.println("You've selected the client. It will connect port " + port + " at host " + host);
Launcher.main(new String[]{});
}
}
@@ -4,7 +4,7 @@ import javafx.application.Application;
public class Launcher {
public static void main(String[] args) {
Application.launch(ch.unibas.dmi.dbis.cs108.casono.client.ui.lobby.Casinomainui.class, args);
Application.launch(ch.unibas.dmi.dbis.cs108.casono.client.ui.lobbyui.Casinomainui.class, args);
}
}
@@ -1,4 +1,4 @@
package ch.unibas.dmi.dbis.cs108.casono.client.ui.lobby;
package ch.unibas.dmi.dbis.cs108.casono.client.ui.lobbyui;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
@@ -10,11 +10,11 @@ import java.io.IOException;
public class Casinomainui extends Application {
@Override
public void start(Stage stage) throws IOException {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("Casinomainui.fxml"));
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/ui-structure/Casinomainui.fxml"));
Scene scene = new Scene(fxmlLoader.load(), 1200, 800);
stage.setTitle("Casono");
stage.getIcons().add(new javafx.scene.image.Image(getClass().getResource("/ch/unibas/dmi/dbis/cs108/casono/client/ui/resources/logoinverted.png").toExternalForm()));
stage.getIcons().add(new javafx.scene.image.Image(getClass().getResource("/images/logoinverted.png").toExternalForm()));
stage.setScene(scene);
stage.setFullScreen(true);
stage.show();
@@ -1,4 +1,4 @@
package ch.unibas.dmi.dbis.cs108.casono.client.ui.lobby;
package ch.unibas.dmi.dbis.cs108.casono.client.ui.lobbyui;
import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
@@ -37,7 +37,7 @@ public class CasinomainuiController {
titleLabel.setText("Casono");
subtitleLabel.setText("Texas Hold'em Poker");
// Logo laden
logoView.setImage(new javafx.scene.image.Image(getClass().getResource("/ch/unibas/dmi/dbis/cs108/casono/client/ui/resources/images/logo.png").toExternalForm()));
logoView.setImage(new javafx.scene.image.Image(getClass().getResource("/images/logo.png").toExternalForm()));
}
@FXML
@@ -1,151 +0,0 @@
/* 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: #8b0000;
-fx-border-color: #ff4444;
-fx-text-fill: white;
-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;
}
@@ -1,113 +0,0 @@
<?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="com.example.demo.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>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 KiB