Browse Source

Finished game layout

Ondřej Schlaichert 8 months ago
parent
commit
9b3a2d3dfc

+ 24 - 0
src/main/java/eu/oschl/gui/GameController.java

@@ -17,6 +17,9 @@ public class GameController implements Observer {
     @FXML
     private VBox inputButtonContainer;
 
+    @FXML
+    private VBox inventoryContainer;
+
     @FXML
     public void initialize() {
         Output.setOutputElement(output);
@@ -39,6 +42,7 @@ public class GameController implements Observer {
     @Override
     public void update() {
         renderActionButtons();
+        renderInventoryItems();
     }
 
     private void renderActionButtons() {
@@ -126,6 +130,26 @@ public class GameController implements Observer {
         inputButtonContainer.getChildren().addAll(newButtons);
     }
 
+    private void renderInventoryItems() {
+        inventoryContainer.getChildren().clear();
+
+        var newItems = new ArrayList<Button>();
+
+        for (var item : Session.getGame().getInventory().getItems()) {
+            var label = item.getName();
+            var buttonData = new ButtonData("inspectitem", item.getName());
+
+            var button = createActionButton(label, buttonData);
+
+            button.getStyleClass().add("inventory-item-button");
+
+            newItems.add(button);
+        }
+
+        inventoryContainer.getChildren().addAll(newItems);
+
+    }
+
     private Button createActionButton(String label, ButtonData buttonData) {
         Button actionButton = new Button(label);
 

+ 30 - 0
src/main/resources/eu/oschl/gui/css/style.css

@@ -105,4 +105,34 @@
 
 .scroll-bar .thumb:hover {
 	-fx-background-color: #555555;
+}
+
+.inventory-item {
+	/* Base style: No background, no border, transparent */
+	-fx-background-color: transparent;
+	-fx-border-color: transparent;
+	-fx-border-width: 1px; /* Keep border-width for smooth hover transition */
+	-fx-background-radius: 0;
+	-fx-border-radius: 0;
+	-fx-padding: 6px 12px; /* Inherit or define padding */
+}
+
+.inventory-item:hover {
+	/* Hover state: Opaque border (select box) */
+	-fx-background-color: transparent; /* No background change */
+	-fx-border-color: #e0e0e0; /* Opaque white/light-gray border */
+	-fx-text-fill: #ffffff; /* Slightly brighter text */
+}
+
+.inventory-item:focused {
+	/* Focused state: Retain a visible focus indicator */
+	-fx-border-color: #aaaaaa; /* A clear, visible focus color */
+	-fx-border-width: 1px;
+	-fx-background-color: transparent;
+}
+
+.inventory-item:pressed {
+	/* Pressed state: Slight visual feedback */
+	-fx-background-color: rgba(224, 224, 224, 0.1); /* Very subtle dark overlay */
+	-fx-border-color: #e0e0e0;
 }

+ 41 - 30
src/main/resources/eu/oschl/gui/game.fxml

@@ -1,5 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.ScrollPane?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.RowConstraints?>
@@ -7,62 +11,69 @@
 <?import javafx.scene.text.TextFlow?>
 
 <?import javafx.scene.layout.StackPane?>
-<?import javafx.scene.image.ImageView?>
-<?import javafx.scene.image.Image?>
-<GridPane fx:controller="eu.oschl.gui.GameController"
-          xmlns:fx="http://javafx.com/fxml/1"
-          xmlns="http://javafx.com/javafx/25">
+<?import javafx.scene.shape.Rectangle?>
+<?import javafx.scene.control.Button?>
+<GridPane xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1"
+          fx:controller="eu.oschl.gui.GameController">
+
     <columnConstraints>
         <ColumnConstraints hgrow="ALWAYS"/>
     </columnConstraints>
 
     <rowConstraints>
-        <RowConstraints minHeight="10.0" vgrow="ALWAYS" percentHeight="75.0"/>
-        <RowConstraints minHeight="10.0" vgrow="ALWAYS" percentHeight="25.0"/>
+        <RowConstraints minHeight="10.0" percentHeight="75.0" vgrow="ALWAYS"/>
+        <RowConstraints minHeight="10.0" percentHeight="25.0" vgrow="ALWAYS"/>
     </rowConstraints>
-
     <GridPane>
         <columnConstraints>
-            <ColumnConstraints minWidth="10.0" hgrow="ALWAYS" percentWidth="75.0"/>
-            <ColumnConstraints minWidth="10.0" hgrow="ALWAYS" percentWidth="25.0"/>
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="75.0"/>
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="25.0"/>
         </columnConstraints>
-
         <rowConstraints>
-            <RowConstraints vgrow="ALWAYS"/>
+            <RowConstraints minHeight="10.0" vgrow="SOMETIMES"/>
         </rowConstraints>
-
         <ScrollPane fitToWidth="true" hbarPolicy="NEVER">
             <TextFlow fx:id="output">
                 <padding>
-                    <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
+                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
                 </padding>
             </TextFlow>
         </ScrollPane>
-        <GridPane>
+        <GridPane GridPane.columnIndex="1">
             <columnConstraints>
-                <ColumnConstraints hgrow="ALWAYS"/>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0"/>
             </columnConstraints>
-
             <rowConstraints>
-                <RowConstraints minHeight="10.0" vgrow="ALWAYS" percentHeight="50.0"/>
-                <RowConstraints minHeight="10.0" vgrow="ALWAYS" percentHeight="50.0"/>
+                <RowConstraints minHeight="10.0" percentHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES"/>
+                <RowConstraints minHeight="10.0" percentHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES"/>
             </rowConstraints>
-
-            <ImageView p11reserveRatio="true">
-                <Image url="@images/rooms/well.png"/>
-            </ImageView>
-
-            <GridPane>
-
-            </GridPane>
+            <StackPane GridPane.columnIndex="0" GridPane.rowIndex="0"
+                       GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS"
+                       GridPane.fillWidth="true" GridPane.fillHeight="true"
+                       fx:id="cell"
+                       minWidth="0" minHeight="0"
+                       maxWidth="Infinity" maxHeight="Infinity">
+                <clip>
+                    <Rectangle width="${cell.width}" height="${cell.height}"/>
+                </clip>
+                <ImageView preserveRatio="true" fitWidth="${cell.width}">
+                    <Image url="@images/rooms/well.png"/>
+                </ImageView>
+            </StackPane>
+            <ScrollPane fitToWidth="true" fitToHeight="true" GridPane.rowIndex="1">
+                <VBox fx:id="inventoryContainer" spacing="5.0" alignment="BOTTOM_CENTER">
+                    <padding>
+                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
+                    </padding>
+                </VBox>
+            </ScrollPane>
         </GridPane>
     </GridPane>
-
     <ScrollPane fitToWidth="true" GridPane.rowIndex="1">
         <VBox fx:id="inputButtonContainer" spacing="5.0">
             <padding>
-                <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
+                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
             </padding>
         </VBox>
     </ScrollPane>
-</GridPane> 
+</GridPane>