Positionierung StartMenu Buttons & SettingsMenu

Projekte/jme-common/src/main/resources/Interface/Lemur/pp-styles.groovy

@@ -1,85 +1,83 @@
 // Styling of Lemur components
-// For documentation, see
+// For documentation, see:
 // https://github.com/jMonkeyEngine-Contributions/Lemur/wiki/Styling
 
-import com.simsilica.lemur.Button
-import com.simsilica.lemur.Button.ButtonAction
-import com.simsilica.lemur.Command
-import com.simsilica.lemur.HAlignment
-import com.simsilica.lemur.Insets3f
-import com.simsilica.lemur.component.QuadBackgroundComponent
-import com.simsilica.lemur.component.TbtQuadBackgroundComponent
+import com.simsilica.lemur.*
 
+// Farben und allgemeine Stile
 def bgColor = color(1, 1, 1, 1)
 def buttonEnabledColor = color(0.8, 0.9, 1, 1)
 def buttonDisabledColor = color(0.8, 0.9, 1, 0.2)
-//def buttonBgColor = color(0, 0.75, 0.75, 1)
 def sliderColor = color(0.6, 0.8, 0.8, 1)
 def sliderBgColor = color(0.5, 0.75, 0.75, 1)
 def gradientColor = color(0.5, 0.75, 0.85, 0.5)
 def tabbuttonEnabledColor = color(0.4, 0.45, 0.5, 1)
+def playButtonBorderColor = color(1, 0.6, 0, 1) // For "Spielen" button
 
-def playButtonBorderColor = color(1, 0.6, 0, 1) // Orange border for "Spielen" button
-def playButtonTextColor = color(0, 0, 0, 1) // Black text color for "Spielen" button
-def buttonBgColor = color(1, 1, 1, 1) // White background for "Spiel beenden" and "Einstellungen" buttons
-def buttonTextColor = color(0, 0, 0, 1) // Black text color for "Spiel beenden" and "Einstellungen" buttons
-def borderColor = color(0, 0, 0, 1) // Black border for "Spiel beenden" and "Einstellungen"
-
-
+// Hintergrundverläufe
 def gradient = TbtQuadBackgroundComponent.create(
-        texture(name: "/com/simsilica/lemur/icons/bordered-gradient.png",
-                generateMips: false),
-        1, 1, 1, 126, 126,
-        1f, false)
+        texture(name: "/com/simsilica/lemur/icons/bordered-gradient.png", generateMips: false),
+        1, 1, 1, 126, 126, 1f, false)
 
 def doubleGradient = new QuadBackgroundComponent(gradientColor)
-doubleGradient.texture = texture(name: "/com/simsilica/lemur/icons/double-gradient-128.png",
-                                 generateMips: false)
+doubleGradient.texture = texture(name: "/com/simsilica/lemur/icons/double-gradient-128.png", generateMips: false)
 
+// Hauptstil für die Schriftart
 selector("pp") {
     font = font("Interface/Fonts/Metropolis/Metropolis-Regular-32.fnt")
 }
 
-selector("label", "pp") {
-    insets = new Insets3f(2, 2, 2, 2)
-    color = buttonEnabledColor
-}
-
-selector("header", "pp") {
-    font = font("Interface/Fonts/Metropolis/Metropolis-Bold-42.fnt")
-    insets = new Insets3f(2, 2, 2, 2)
-    color = color(1, 0.5, 0, 1)
+// Titel für "Einstellungen"
+selector("settings-title", "pp") {
+    color = color(1, 1, 1, 1)
+    fontSize = 48
     textHAlignment = HAlignment.Center
+    insets = new Insets3f(5, 5, 5, 5)
 }
 
+// Container Stil
 selector("container", "pp") {
     background = gradient.clone()
     background.setColor(bgColor)
 }
 
+// Slider Stil
 selector("slider", "pp") {
-    background = gradient.clone()
-    background.setColor(bgColor)
+    insets = new Insets3f(5, 10, 5, 10) // Abstand
+    background = new QuadBackgroundComponent(sliderBgColor)
 }
 
-selector("play-button", "pp") {
-    color = playButtonTextColor // Black text color
-    background = new QuadBackgroundComponent(playButtonBorderColor) // Orange border background
-    insets = new Insets3f(15, 25, 15, 25) // Padding for larger button size
-    background.setMargin(5, 5) // Thin border effect around the background color
-    fontSize = 36 // Larger font size for prominence
+// Slider-Thumb Stil
+selector("slider.thumb.button", "pp") {
+    text = "[]" // Symbol für den Thumb
+    color = sliderColor
+    insets = new Insets3f(2, 2, 2, 2)
 }
 
+// Slider links/rechts Buttons
+selector("slider.left.button", "pp") {
+    text = "-"
+    color = sliderColor
+    background = doubleGradient.clone()
+    insets = new Insets3f(5, 5, 5, 5)
+}
+
+selector("slider.right.button", "pp") {
+    text = "+"
+    color = sliderColor
+    background = doubleGradient.clone()
+    insets = new Insets3f(5, 5, 5, 5)
+}
+
+// Style für alle Buttons im Menü
 selector("menu-button", "pp") {
-    color = buttonTextColor // Black text color
-    background = new QuadBackgroundComponent(buttonBgColor) // White background
-    insets = new Insets3f(10, 20, 10, 20) // Padding
-    background.setMargin(1, 1) // Thin black border
-    background.setColor(borderColor) // Set black border color
-
-    fontSize = 24 // Standard font size
+    color = color(0, 0, 0, 1) // Schwarzer Text
+    background = new QuadBackgroundComponent(bgColor)
+    insets = new Insets3f(10, 20, 10, 20)
+    fontSize = 24
 }
 
+// Standard Button Commands (Animationseffekt)
 def pressedCommand = new Command<Button>() {
     void execute(Button source) {
         if (source.isPressed())
@@ -98,30 +96,6 @@ def enabledCommand = new Command<Button>() {
     }
 }
 
-def repeatCommand = new Command<Button>() {
-    private long startTime
-    private long lastClick
-
-    void execute(Button source) {
-        // Only do the repeating click while the mouse is
-        // over the button (and pressed of course)
-        if (source.isPressed() && source.isHighlightOn()) {
-            long elapsedTime = System.currentTimeMillis() - startTime
-            // After half a second pause, click 8 times a second
-            if (elapsedTime > 500 && elapsedTime > lastClick + 125) {
-                source.click()
-
-                // Try to quantize the last click time to prevent drift
-                lastClick = ((elapsedTime - 500) / 125) * 125 + 500
-            }
-        }
-        else {
-            startTime = System.currentTimeMillis()
-            lastClick = 0
-        }
-    }
-}
-
 def stdButtonCommands = [
         (ButtonAction.Down)    : [pressedCommand],
         (ButtonAction.Up)      : [pressedCommand],
@@ -129,98 +103,9 @@ def stdButtonCommands = [
         (ButtonAction.Disabled): [enabledCommand]
 ]
 
-def sliderButtonCommands = [
-        (ButtonAction.Hover): [repeatCommand]
-]
-
-selector("title", "pp") {
-    color = color(0.8, 0.9, 1, 0.85f)
-    highlightColor = color(1, 0.8, 1, 0.85f)
-    shadowColor = color(0, 0, 0, 0.75f)
-    shadowOffset = vec3(2, -2, -1)
-    background = new QuadBackgroundComponent(color(0.5, 0.75, 0.85, 1))
-    background.texture = texture(name: "/com/simsilica/lemur/icons/double-gradient-128.png",
-                                 generateMips: false)
-    insets = new Insets3f(2, 2, 2, 2)
-
-    buttonCommands = stdButtonCommands
-}
-
-
 selector("button", "pp") {
     background = gradient.clone()
     color = buttonEnabledColor
-    background.setColor(buttonBgColor)
     insets = new Insets3f(2, 2, 2, 2)
-
-    buttonCommands = stdButtonCommands
-}
-
-selector("slider", "pp") {
-    insets = new Insets3f(1, 3, 1, 2)
-}
-
-selector("slider", "button", "pp") {
-    background = doubleGradient.clone()
-    //background.setColor(sliderBgColor)
-    insets = new Insets3f(0, 0, 0, 0)
-}
-
-selector("slider.thumb.button", "pp") {
-    text = "[]"
-    color = sliderColor
-}
-
-selector("slider.left.button", "pp") {
-    text = "-"
-    background = doubleGradient.clone()
-    //background.setColor(sliderBgColor)
-    background.setMargin(5, 0)
-    color = sliderColor
-
-    buttonCommands = sliderButtonCommands
-}
-
-selector("slider.right.button", "pp") {
-    text = "+"
-    background = doubleGradient.clone()
-    //background.setColor(sliderBgColor)
-    background.setMargin(4, 0)
-    color = sliderColor
-
-    buttonCommands = sliderButtonCommands
-}
-
-selector("slider.up.button", "pp") {
-    buttonCommands = sliderButtonCommands
-}
-
-selector("slider.down.button", "pp") {
-    buttonCommands = sliderButtonCommands
-}
-
-selector("checkbox", "pp") {
-    color = buttonEnabledColor
-}
-
-selector("rollup", "pp") {
-    background = gradient.clone()
-    background.setColor(bgColor)
-}
-
-selector("tabbedPanel", "pp") {
-    activationColor = buttonEnabledColor
-}
-
-selector("tabbedPanel.container", "pp") {
-    background = null
-}
-
-selector("tab.button", "pp") {
-    background = gradient.clone()
-    background.setColor(bgColor)
-    color = tabbuttonEnabledColor
-    insets = new Insets3f(4, 2, 0, 2)
-
     buttonCommands = stdButtonCommands
 }

Projekte/monopoly/client/src/main/java/pp/monopoly/client/StartMenu.java

@@ -5,9 +5,11 @@ import com.jme3.math.Vector3f;
 import com.jme3.scene.Geometry;
 import com.jme3.scene.shape.Quad;
 import com.jme3.texture.Texture;
+import com.simsilica.lemur.Axis;
 import com.simsilica.lemur.Button;
 import com.simsilica.lemur.Container;
 import com.simsilica.lemur.Label;
+import com.simsilica.lemur.component.SpringGridLayout;
 
 import pp.dialog.Dialog;
 import pp.monopoly.client.gui.CreateGameMenu;
@@ -34,60 +36,72 @@ public class StartMenu extends Dialog {
      * opening settings, and quitting the application.
      */
     public static void createStartMenu(MonopolyApp app) {
-        Container mainMenu = new Container();
+        int screenWidth = app.getContext().getSettings().getWidth();
+        int screenHeight = app.getContext().getSettings().getHeight();
 
-        // Hintergrundbild für das Startmenü
+        // Set up the background image
         Texture backgroundImage = app.getAssetManager().loadTexture("Pictures/unibw-Bib2.png");
-        Quad quad = new Quad(app.getCamera().getWidth(), app.getCamera().getHeight()); // Vollbildgröße
+        Quad quad = new Quad(screenWidth, screenHeight);
         Geometry background = new Geometry("Background", quad);
         Material backgroundMaterial = new Material(app.getAssetManager(), "Common/MatDefs/Misc/Unshaded.j3md");
         backgroundMaterial.setTexture("ColorMap", backgroundImage);
         background.setMaterial(backgroundMaterial);
-        background.setLocalTranslation(0, 0, -1); // Hintergrundebene
+        background.setLocalTranslation(0, 0, -1); // Ensure it is behind other GUI elements
         app.getGuiNode().attachChild(background);
 
-        // Positionierung des Hauptmenüs
-        mainMenu.setLocalTranslation(new Vector3f(300, 300, 0));  
+        // Center container for title and play button
+        Container centerMenu = new Container(new SpringGridLayout(Axis.Y, Axis.X));
+        Label titleLabel = new Label("Hauptmenü");
+        titleLabel.setFontSize(48);
+        centerMenu.addChild(titleLabel);
 
-        // Titel des Hauptmenüs
-        mainMenu.addChild(new Label("Hauptmenü"));
+        Button startButton = new Button("Spielen");
+        startButton.addClickCommands(source -> startGame(app));
+        centerMenu.addChild(startButton);
 
-        // Schaltfläche "Spielen" - Wechselt zum CreateGameMenu
-        Button startButton = mainMenu.addChild(new Button("Spielen"));
-        startButton.addClickCommands(source -> {
-            if (!app.isSettingsMenuOpen()) { // Nur ausführen, wenn SettingsMenu geschlossen ist
-                startGame(app);
-            }
-        });
+        // Position the center container in the middle of the screen
+        centerMenu.setLocalTranslation(new Vector3f(
+                screenWidth / 2f - centerMenu.getPreferredSize().x / 2f,
+                screenHeight / 2f + centerMenu.getPreferredSize().y / 2f,
+                0));
+        app.getGuiNode().attachChild(centerMenu);
 
-        // Schaltfläche "Einstellungen" - Öffnet das Einstellungsmenü
-        Button settingsButton = mainMenu.addChild(new Button("Einstellungen"));
+        // Lower-left container for "Spiel beenden" button
+        Container lowerLeftMenu = new Container();
+        lowerLeftMenu.setLocalTranslation(new Vector3f(50, 50, 0));
+        Button quitButton = new Button("Spiel beenden");
+        quitButton.addClickCommands(source -> quitGame());
+        lowerLeftMenu.addChild(quitButton);
+        app.getGuiNode().attachChild(lowerLeftMenu);
+
+        // Lower-right container for "Einstellungen" button
+        Container lowerRightMenu = new Container();
+        lowerRightMenu.setLocalTranslation(new Vector3f(screenWidth - 150, 50, 0));
+        Button settingsButton = new Button("Einstellungen");
         settingsButton.addClickCommands(source -> openSettings(app));
-
-        // Schaltfläche "Spiel beenden" - Beendet das Spiel
-        Button quitButton = mainMenu.addChild(new Button("Spiel beenden"));
-        quitButton.addClickCommands(source -> {
-            if (!app.isSettingsMenuOpen()) { // Nur ausführen, wenn SettingsMenu geschlossen ist
-                quitGame();
-            }
-        });
-
-        // Hauptmenü dem Bildschirm hinzufügen
-        app.getGuiNode().attachChild(mainMenu);
+        lowerRightMenu.addChild(settingsButton);
+        app.getGuiNode().attachChild(lowerRightMenu);
     }
 
+    /**
+     * Starts the game by transitioning to the CreateGameMenu.
+     */
     private static void startGame(MonopolyApp app) {
         app.getGuiNode().detachAllChildren();
-        CreateGameMenu createGameMenu = new CreateGameMenu(app);
-        // Weitere Initialisierung des CreateGameMenu
+        new CreateGameMenu(app);
     }
 
+    /**
+     * Opens the settings menu.
+     */
     private static void openSettings(MonopolyApp app) {
-        SettingsMenu settingsMenu = new SettingsMenu(app);
-        app.setSettingsMenuOpen(true); // Markiert das SettingsMenu als geöffnet
-        settingsMenu.open(() -> app.setSettingsMenuOpen(false)); // Callback, das den Status zurücksetzt
+        app.getGuiNode().detachAllChildren();
+        new SettingsMenu(app);
     }
 
+    /**
+     * Quits the game application.
+     */
     private static void quitGame() {
         System.exit(0);
     }

Projekte/monopoly/client/src/main/java/pp/monopoly/client/gui/SettingsMenu.java

@@ -1,10 +1,12 @@
 package pp.monopoly.client.gui;
 
 import com.jme3.math.ColorRGBA;
-import com.jme3.math.Vector3f;
 import com.simsilica.lemur.Button;
+import com.simsilica.lemur.Checkbox;
 import com.simsilica.lemur.Container;
 import com.simsilica.lemur.Label;
+import com.simsilica.lemur.Slider;
+import com.simsilica.lemur.component.QuadBackgroundComponent;
 import com.simsilica.lemur.style.ElementId;
 
 import pp.dialog.Dialog;
@@ -17,57 +19,60 @@ public class SettingsMenu extends Dialog {
     public SettingsMenu(MonopolyApp app) {
         super(app.getDialogManager());
         this.app = app;
+
         settingsContainer = new Container();
-    }
-    
-    /**
-     * Öffnet das SettingsMenu und führt das onCloseCallback aus, wenn das Menü geschlossen wird.
-     * 
-     * @param onCloseCallback Callback, das beim Schließen des Menüs ausgeführt wird
-     */
-    public void open(Runnable onCloseCallback) {
-        settingsContainer.addChild(new Label("Einstellungen"));
+        
+        // Hintergrundfarbe für das Container-Element setzen, um es undurchsichtig zu machen
+        settingsContainer.setBackground(new QuadBackgroundComponent(new ColorRGBA(0.1f, 0.1f, 0.1f, 1f))); // Dunkelgrauer, undurchsichtiger Hintergrund
 
-        // Zurück-Button, der das Menü schließt und das Callback ausführt
-        Button backButton = settingsContainer.addChild(new Button("Zurück"));
-        backButton.addClickCommands(source -> {
-            close(); // Menü schließen
-            onCloseCallback.run(); // Callback ausführen, um den Status in MonopolyApp zurückzusetzen
-        });
+        // Titel "Einstellungen"
+        Label settingsTitle = settingsContainer.addChild(new Label("Einstellungen", new ElementId("settings-title")));
+        settingsTitle.setFontSize(48);
+        settingsTitle.setColor(ColorRGBA.White);
 
-        app.getGuiNode().attachChild(settingsContainer);
-    }
+        // Effekt Sound mit Slider und Checkbox
+        Container effectSoundContainer = settingsContainer.addChild(new Container());
+        Label effectSoundLabel = effectSoundContainer.addChild(new Label("Effekt Sound", new ElementId("label")));
+        effectSoundLabel.setFontSize(24);
+        effectSoundLabel.setColor(ColorRGBA.White);
 
-    public void open() {
-        settingsContainer.setLocalTranslation(new Vector3f(500, 300, 0));
+        Slider effectSoundSlider = effectSoundContainer.addChild(new Slider());
+        effectSoundSlider.setPreferredSize(new com.jme3.math.Vector3f(300, 30, 0));
 
-        // Titel des Einstellungsmenüs
-        settingsContainer.addChild(new Label("Einstellungen"));
+        Checkbox effectSoundCheckbox = effectSoundContainer.addChild(new Checkbox(""));
+        effectSoundCheckbox.setChecked(true);
 
-        // Beispiel: Button zum Umschalten einer Option
-        Label soundLabel = settingsContainer.addChild(new Label("Sound"));
-        Button toggleSoundButton = settingsContainer.addChild(new Button("An/Aus"));
-        toggleSoundButton.addClickCommands(source -> toggleSound());
+        // Hintergrund Musik mit Slider und Checkbox
+        Container backgroundMusicContainer = settingsContainer.addChild(new Container());
+        Label backgroundMusicLabel = backgroundMusicContainer.addChild(new Label("Hintergrund Musik", new ElementId("label")));
+        backgroundMusicLabel.setFontSize(24);
+        backgroundMusicLabel.setColor(ColorRGBA.White);
 
-        // Button "Beenden" hinzufügen, um das Spiel zu schließen
+        Slider backgroundMusicSlider = backgroundMusicContainer.addChild(new Slider());
+        backgroundMusicSlider.setPreferredSize(new com.jme3.math.Vector3f(300, 30, 0));
+
+        Checkbox backgroundMusicCheckbox = backgroundMusicContainer.addChild(new Checkbox(""));
+        backgroundMusicCheckbox.setChecked(true);
+
+        // Beenden Button
         Button quitButton = settingsContainer.addChild(new Button("Beenden", new ElementId("menu-button")));
-        quitButton.setFontSize(24);
+        quitButton.setFontSize(32);
         quitButton.setColor(ColorRGBA.White);
-        quitButton.addClickCommands(source -> app.stop()); // Beendet das Spiel
+        quitButton.addClickCommands(source -> app.stop());
+
+        // Zentrieren des Containers
+        settingsContainer.setLocalTranslation(
+            (app.getCamera().getWidth() - settingsContainer.getPreferredSize().x) / 2,
+            (app.getCamera().getHeight() + settingsContainer.getPreferredSize().y) / 2,
+            0
+        );
 
-        // Container dem GUI-Knoten hinzufügen
         app.getGuiNode().attachChild(settingsContainer);
     }
+
     @Override
     public void close() {
         app.getGuiNode().detachChild(settingsContainer);
-    }
-
-    private void toggleSound() {
-        System.out.println("Sound umgeschaltet!");
-    }
-
-    public Container getContainer() {
-        return settingsContainer;
+        app.setSettingsMenuOpen(false);
     }
 }