University-of-Basel-Studentprojects/Programmierprojekt
Archived
1
0
Fork 0
Code Issues 17 Pull Requests Actions Wiki Activity

Feat: Add highscore popup UI and lobby display

Browse Source 
Highscore button in GameUI replaces "Info" Button wich was unused
(Issue #110)
This commit is contained in:
Jona Walpert
2026-04-21 20:13:13 +02:00
parent 7674ae57ad
commit 062e66cdf9
7 changed files with 341 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/ui-structure/Casinomainui.fxml
+17 -9
View File
@@ -81,15 +81,17 @@
</GridPane.margin>
</Button>
<!-- Username input and login/change button -->
<HBox alignment="CENTER_LEFT" spacing="10"
GridPane.rowIndex="0"
GridPane.columnIndex="0"
GridPane.halignment="LEFT"
GridPane.valignment="TOP">
<GridPane.margin>
<Insets top="100" left="20" />
</GridPane.margin>
<!-- Username input + change name, with highscores directly below -->
<VBox alignment="TOP_LEFT" spacing="10"
GridPane.rowIndex="0"
GridPane.columnIndex="0"
GridPane.halignment="LEFT"
GridPane.valignment="TOP">
<GridPane.margin>
<Insets top="140" left="20" />
</GridPane.margin>
<HBox alignment="CENTER_LEFT" spacing="10">
<TextField fx:id="usernameField"
promptText="Username"
styleClass="gray-input-field"
@@ -100,6 +102,12 @@
styleClass="button-create-lobby" />
</HBox>
<Button text="HIGHSCORES"
styleClass="button-create-lobby"
fx:id="highscoreButton"
onAction="#handleOpenHighscores" />
</VBox>
<VBox fx:id="casinoTable"
alignment="CENTER"
styleClass="casino-table"
src/main/resources/ui-structure/gameuicomponents/HighscoreView.css
+139
View File
@@ -0,0 +1,139 @@
.highscore-root {
-fx-background-color: rgba(13, 158, 59, 0.96);
-fx-background-radius: 16;
-fx-border-radius: 16;
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
-fx-border-width: 3;
}
.highscore-title {
-fx-text-fill: #ffffff;
-fx-font-size: 24px;
-fx-font-weight: bold;
-fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 2, 2);
}
.highscore-status {
-fx-text-fill: #ffffff;
-fx-font-size: 13px;
}
.list-view {
-fx-background-color: #114d26;
-fx-control-inner-background: #114d26;
-fx-background-insets: 0;
-fx-background-radius: 12;
-fx-border-radius: 12;
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
-fx-border-width: 2;
}
.list-view .list-cell {
-fx-background-color: transparent;
-fx-text-fill: #ffe89a;
-fx-font-family: "Courier New";
-fx-font-size: 13px;
}
.list-view .list-cell:filled {
-fx-background-color: rgba(0, 0, 0, 0.14);
}
.list-view .list-cell:filled:hover {
-fx-background-color: rgba(0, 0, 0, 0.24);
}
.list-view .list-cell:filled:selected,
.list-view .list-cell:filled:selected:focused {
-fx-background-color: rgba(0, 0, 0, 0.35);
-fx-text-fill: #ffffff;
}
.gray-button,
.yellow-button,
.red-button {
-fx-background-radius: 10;
-fx-border-radius: 10;
-fx-font-family: "Courier New";
-fx-font-weight: bold;
-fx-border-width: 2;
-fx-padding: 6 12;
-fx-cursor: hand;
}
.gray-button {
-fx-background-color: #333333;
-fx-border-color: #666666;
-fx-text-fill: #cccccc;
}
.yellow-button {
-fx-background-color: #b8860b;
-fx-border-color: #ffd700;
-fx-text-fill: #ffffff;
}
.red-button {
-fx-background-color: #8b0000;
-fx-border-color: #ff4444;
-fx-text-fill: #ffffff;
}
.highscore-root {
-fx-background-color: #0d9e3b;
-fx-background-radius: 16;
-fx-border-radius: 16;
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
-fx-border-width: 3;
}
.highscore-title {
-fx-text-fill: #ffffff;
-fx-font-size: 22px;
-fx-font-weight: bold;
}
.highscore-subtitle {
-fx-text-fill: #f2f2f2;
-fx-font-size: 13px;
}
.highscore-text-area {
-fx-control-inner-background: #1b1b1b;
-fx-text-fill: #ffffff;
-fx-font-family: "Courier New";
-fx-font-size: 14px;
-fx-border-color: #666666;
-fx-border-width: 2;
-fx-border-radius: 10;
-fx-background-radius: 10;
}
.gray-button,
.green-button,
.red-button {
-fx-background-radius: 10;
-fx-border-radius: 10;
-fx-font-family: "Courier New";
-fx-font-weight: bold;
-fx-border-width: 2;
-fx-padding: 6 14;
}
.green-button {
-fx-background-color: #1f7d33;
-fx-border-color: #35c759;
-fx-text-fill: #ffffff;
}
.red-button {
-fx-background-color: #8b0000;
-fx-border-color: #ff4444;
-fx-text-fill: #ffffff;
}
.gray-button {
-fx-background-color: #333333;
-fx-border-color: #666666;
-fx-text-fill: #cccccc;
}
src/main/resources/ui-structure/gameuicomponents/HighscoreView.fxml
+33
View File
@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<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.HighscoreViewController"
spacing="12"
styleClass="highscore-root"
stylesheets="@HighscoreView.css">
<padding>
<Insets top="14" right="14" bottom="14" left="14"/>
</padding>
<Label text="Highscores" styleClass="highscore-title"/>
<ListView fx:id="highscoreList" prefHeight="320" VBox.vgrow="ALWAYS"/>
<Label fx:id="statusLabel" text="Ready." styleClass="highscore-status"/>
<HBox spacing="10">
<Button text="Refresh" onAction="#refreshHighscores" styleClass="gray-button" HBox.hgrow="ALWAYS" maxWidth="Infinity"/>
<Button text="Clear" onAction="#clearHighscores" styleClass="yellow-button" HBox.hgrow="ALWAYS" maxWidth="Infinity"/>
<Button text="Close" onAction="#closeWindow" styleClass="red-button" HBox.hgrow="ALWAYS" maxWidth="Infinity"/>
</HBox>
</VBox>
src/main/resources/ui-structure/gameuicomponents/Taskbar.fxml
+1 -1
View File
@@ -19,7 +19,7 @@
<!-- Placeholder buttons -->
<Button text="SETTINGS" styleClass="gray-button" />
<Button text="INFO" styleClass="gray-button" />
<Button text="HIGHSCORE" onAction="#onHighscoreButtonClick" styleClass="gray-button" />
<!-- Buten for the Casono Browser -->
<Button text="HELP" onAction="#onBrowserButtonClick" styleClass="gray-button" />