Sidebar

2026-07-05 21:14:50 +02:00
parent eaeb467db9
commit 999b51ce66
8 changed files with 251 additions and 129 deletions
@@ -0,0 +1,138 @@
+package de.fullrisk.citrusDev.UI;
+
+import io.wispforest.owo.ui.base.BaseOwoScreen;
+import io.wispforest.owo.ui.component.LabelComponent;
+import io.wispforest.owo.ui.component.UIComponents;
+import io.wispforest.owo.ui.container.FlowLayout;
+import io.wispforest.owo.ui.container.UIContainers;
+import io.wispforest.owo.ui.core.*;
+import net.minecraft.client.Minecraft;
+import net.minecraft.client.resources.sounds.SimpleSoundInstance;
+import net.minecraft.network.chat.Component;
+import net.minecraft.sounds.SoundEvents;
+import de.fullrisk.citrusDev.UIHelper.ScalableLabel;
+import de.fullrisk.citrusDev.UIHelper.ScalableButton;
+import de.fullrisk.citrusDev.UIHelper.ScaleValue;
+
+public class MyScreen extends BaseOwoScreen<FlowLayout> {
+
+    public MyScreen() {
+        super(Component.literal("Citrus Dev"));
+        Minecraft.getInstance().getSoundManager().play(
+                SimpleSoundInstance.forUI(SoundEvents.UI_TOAST_IN, 1.5F, 2)
+        );
+    }
+
+    @Override
+    protected OwoUIAdapter<FlowLayout> createAdapter() {
+        return OwoUIAdapter.create(this, UIContainers::verticalFlow);
+    }
+
+    @Override
+    protected void build(FlowLayout rootComponent) {
+        rootComponent.gap(0);
+        rootComponent
+                .horizontalAlignment(HorizontalAlignment.CENTER)
+                .verticalAlignment(VerticalAlignment.CENTER);
+
+        // ----- Main panel (now a horizontal container: sidebar | divider | content) -----
+        FlowLayout panel = UIContainers.horizontalFlow(Sizing.content(), Sizing.content());
+        panel.gap(0);
+        panel.padding(Insets.of(2));
+
+        panel.horizontalAlignment(HorizontalAlignment.CENTER);
+        panel.verticalAlignment(VerticalAlignment.CENTER);
+        panel.horizontalSizing(Sizing.fixed(0));
+        panel.verticalSizing(Sizing.fixed(0));
+        panel.horizontalSizing().animate(300, Easing.CUBIC, Sizing.fixed(250)).forwards();
+        panel.verticalSizing().animate(300, Easing.CUBIC, Sizing.fixed(150)).forwards();
+
+        // inner content area, accounting for panel's 2px padding on each side
+        int innerHeight = 150 - 4; // 146
+        int sidebarWidth = 34;
+        int dividerWidth = 1;
+        int contentWidth = 250 - 4 - sidebarWidth - dividerWidth; // 211
+
+        // ----- Sidebar -----
+        FlowLayout sidebar = UIContainers.verticalFlow(Sizing.fixed(sidebarWidth), Sizing.fixed(innerHeight));
+        sidebar.horizontalAlignment(HorizontalAlignment.CENTER);
+        sidebar.verticalAlignment(VerticalAlignment.CENTER);
+        sidebar.padding(Insets.of(4));
+        sidebar.gap(2);
+
+        var sidebarButton = new ScalableButton(Component.literal("+"), btn -> {
+            Minecraft.getInstance().getSoundManager().play(
+                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+            );
+        },
+                0x80FFFFFF,  // base fill
+                0xA0FFFFFF,  // hovered fill
+                0xFFFFFFFF,  // base outline
+                0xFFFFFFFF,  // hovered outline
+                1            // outline width
+        );
+        sidebarButton.horizontalSizing(Sizing.fixed(20));
+        sidebarButton.verticalSizing(Sizing.fixed(20));
+        sidebarButton.scale().animate(300, Easing.CUBIC, new ScaleValue(1f)).forwards();
+
+        sidebar.child(sidebarButton);
+        panel.child(sidebar);
+
+        // ----- Divider -----
+        FlowLayout divider = UIContainers.verticalFlow(Sizing.fixed(dividerWidth), Sizing.fixed(innerHeight));
+        divider.surface(Surface.flat(0x80FFFFFF)); // subtle line, matches glass aesthetic
+        panel.child(divider);
+
+        // ----- Content column (header, button, version) -----
+        FlowLayout content = UIContainers.verticalFlow(Sizing.fixed(contentWidth), Sizing.fixed(innerHeight));
+        content.gap(6);
+        content.horizontalAlignment(HorizontalAlignment.CENTER);
+        content.verticalAlignment(VerticalAlignment.CENTER);
+        panel.child(content);
+
+        var header = new ScalableLabel(Component.literal("Citrus Dev"));
+        content.child(header);
+
+        var header_button = new ScalableButton(Component.literal("Click me"), btn -> {
+            btn.setMessage(Component.literal("Clicked!"));
+            Minecraft.getInstance().getSoundManager().play(
+                    SimpleSoundInstance.forUI(SoundEvents.UI_BUTTON_CLICK.value(), 2.0F, 2)
+            );
+        },
+                0x80FFFFFF,  // base fill
+                0xA0FFFFFF,  // hovered fill
+                0xFFFFFFFF,  // base outline
+                0xFFFFFFFF,  // hovered outline
+                1            // outline width
+        );
+
+        header_button.scale().animate(300, Easing.CUBIC, new ScaleValue(1f)).forwards();
+        header_button.margins(Insets.top(6));
+        content.child(header_button);
+        header.scale().animate(300, Easing.CUBIC, new ScaleValue(2f)).forwards();
+
+        Surface glassPanel = Surface.blur(5f, 15f)
+                .and(Surface.flat(0x40FFFFFF))
+                .and(Surface.outline(0xFFFFFFFF));
+
+        panel.surface(glassPanel);
+
+        var version = new ScalableLabel(Component.literal("Citrus-Dev v2.0"));
+        version.horizontalTextAlignment(HorizontalAlignment.RIGHT);
+        version.verticalTextAlignment(VerticalAlignment.BOTTOM);
+        version.horizontalSizing(Sizing.fixed(202));
+        version.verticalSizing(Sizing.fixed(12));
+        version.positioning(Positioning.relative(115, 100)); // bottom-right corner of `panel`
+
+        version.scale().set(new ScaleValue(0.7f));
+
+        panel.child(version);
+
+        rootComponent.child(panel);
+    }
+
+    @Override
+    public boolean isPauseScreen() {
+        return false;
+    }
+}