iOS-style release trigger and pressed state for ButtonWidgets

gradle.properties

@@ -13,7 +13,7 @@ loader_version=0.16.14
 loom_version=1.11-SNAPSHOT
 
 # Mod Properties
-mod_version=1.0.1
+mod_version=1.1.0
 maven_group=restudio.reglass
 archives_base_name=reglass
 

src/main/java/restudio/reglass/client/LiquidGlassUniforms.java

@@ -41,6 +41,14 @@ public final class LiquidGlassUniforms {
     private List<Integer> usedBlurRadiiOrdered = new ArrayList<>();
     private final HashMap<Integer, Integer> blurRadiusToIndex = new HashMap<>();
 
+    private static final class FadeState {
+        float hover;
+        float focus;
+    }
+
+    private final HashMap<Long, FadeState> fades = new HashMap<>();
+    private double dtSeconds = 0.0;
+
     private LiquidGlassUniforms() {
         samplerInfo = RenderSystem.getDevice().createBuffer(() -> "reglass SamplerInfo", 130, 16);
 
@@ -57,6 +65,11 @@ private LiquidGlassUniforms() {
         calc.putFloat();
         calc.putFloat();
         calc.putFloat();
+        calc.putFloat();
+        calc.putFloat();
+        calc.putFloat();
+        calc.putFloat();
+        calc.putFloat();
         int customUniformsSize = calc.get();
         customUniforms = RenderSystem.getDevice().createBuffer(() -> "reglass CustomUniforms", 130, customUniformsSize);
 
@@ -71,11 +84,12 @@ private LiquidGlassUniforms() {
         bgConfig = RenderSystem.getDevice().createBuffer(() -> "reglass BgConfig", 130, bgConfigSize);
     }
 
-    public void beginFrame() {
+    public void beginFrame(double dtSeconds) {
         widgets.clear();
         screenWantsBlur = false;
         usedBlurRadiiOrdered.clear();
         blurRadiusToIndex.clear();
+        this.dtSeconds = Math.max(0.0, dtSeconds);
     }
 
     public void setScreenWantsBlur(boolean wantsBlur) { this.screenWantsBlur = wantsBlur; }
@@ -118,6 +132,11 @@ public void uploadSharedUniforms() {
             b.putFloat(ReGlassAnim.INSTANCE.debugStep());
             b.putFloat(config.features.pixelatedGrid ? 1.0f : 0.0f);
             b.putFloat(ReGlassAnim.INSTANCE.pixelatedGridSize());
+            b.putFloat(ReGlassAnim.INSTANCE.hoverScalePx());
+            b.putFloat(ReGlassAnim.INSTANCE.focusScalePx());
+            b.putFloat(ReGlassAnim.INSTANCE.focusBorderWidthPx());
+            b.putFloat(ReGlassAnim.INSTANCE.focusBorderIntensity());
+            b.putFloat(ReGlassAnim.INSTANCE.focusBorderSpeed());
         }
 
         try (var map = RenderSystem.getDevice().createCommandEncoder().mapBuffer(bgConfig, false, true)) {
@@ -140,6 +159,23 @@ public void addWidget(LiquidGlassGuiElementRenderState element) {
         widgets.add(element);
     }
 
+    private static long rectKey(int x1, int y1, int x2, int y2) {
+        long a = (((long) x1) & 0xFFFFFFFFL) | ((((long) y1) & 0xFFFFFFFFL) << 32);
+        long b = (((long) x2) & 0xFFFFFFFFL) | ((((long) y2) & 0xFFFFFFFFL) << 32);
+        long h = 1469598103934665603L;
+        h ^= a; h *= 1099511628211L;
+        h ^= b; h *= 1099511628211L;
+        return h;
+    }
+
+    private float smoothToward(float current, float target, double dt, float tau) {
+        if (tau <= 1e-5f) return target;
+        float a = (float) (1.0 - Math.exp(-Math.max(0.0, dt) / Math.max(1e-4, tau)));
+        float v = current + (target - current) * a;
+        if (Math.abs(v - target) < 1e-4f) return target;
+        return v;
+    }
+
     public void uploadWidgetInfo() {
         MinecraftClient mc = MinecraftClient.getInstance();
         int fbH = mc.getFramebuffer().textureHeight;
@@ -259,7 +295,14 @@ public void uploadWidgetInfo() {
                     int radius = Math.max(0, s.getBlurRadius());
                     Integer idx = blurRadiusToIndex.get(radius);
                     if (idx == null) idx = 0;
-                    b.putVec4((float) idx, 0f, 0f, 0f);
+                    var w = widgets.get(i);
+                    long key = rectKey(w.x1(), w.y1(), w.x2(), w.y2());
+                    FadeState fs = fades.computeIfAbsent(key, k -> new FadeState());
+                    fs.hover = smoothToward(fs.hover, Math.max(0f, Math.min(1f, w.hover())), dtSeconds, 0.12f);
+                    fs.focus = smoothToward(fs.focus, Math.max(0f, Math.min(1f, w.focus())), dtSeconds, 0.18f);
+                    double h = Math.sin(w.x1() * 12.9898 + w.y1() * 78.233 + i * 37.719);
+                    float seed = (float) (h - Math.floor(h));
+                    b.putVec4((float) idx, fs.hover, fs.focus, seed);
                 } else b.putVec4(0f, 0f, 0f, 0f);
             }
         }

src/main/java/restudio/reglass/client/api/ReGlassApi.java

@@ -27,6 +27,8 @@ public static class Builder {
         private float cornerRadius = -1f;
         @Nullable private Text text = null;
         private WidgetStyle style = new WidgetStyle();
+        private float hoverAmount = 0f;
+        private float focusAmount = 0f;
 
         private Builder(DrawContext context) {
             this.context = context;
@@ -70,11 +72,31 @@ public Builder style(WidgetStyle style) {
             return this;
         }
 
+        public Builder hover(float amount) {
+            if (Float.isNaN(amount)) amount = 0f;
+            this.hoverAmount = Math.max(0f, Math.min(1f, amount));
+            return this;
+        }
+
+        public Builder focus(float amount) {
+            if (Float.isNaN(amount)) amount = 0f;
+            this.focusAmount = Math.max(0f, Math.min(1f, amount));
+            return this;
+        }
+
+        public Builder selected(float amount) {
+            return this.focus(amount);
+        }
+
         public void render() {
             float finalCornerRadius = this.cornerRadius < 0 ? 0.5f * Math.min(this.width, this.height) : this.cornerRadius;
             Matrix3x2f pose = new Matrix3x2f(context.getMatrices());
             ScreenRect scissorRect = ((DrawContextAccessor) context).getScissorStack().peekLast();
-            context.state.addSpecialElement(new LiquidGlassGuiElementRenderState(this.x, this.y, this.x + this.width, this.y + this.height, finalCornerRadius, this.text, this.style, pose, scissorRect));
+            context.state.addSpecialElement(new LiquidGlassGuiElementRenderState(
+                    this.x, this.y, this.x + this.width, this.y + this.height,
+                    finalCornerRadius, this.text, this.style, pose, scissorRect,
+                    this.hoverAmount, this.focusAmount
+            ));
         }
     }
 }

src/main/java/restudio/reglass/client/api/ReGlassConfig.java

@@ -45,6 +45,12 @@ public class ReGlassConfig {
     public float debugStep = 9.0f;
     public float pixelatedGridSize = 8.0f;
 
+    public float hoverScalePx = 1.5f;
+    public float focusScalePx = 2.5f;
+    public float focusBorderWidthPx = 2.0f;
+    public float focusBorderIntensity = 0.75f;
+    public float focusBorderSpeed = 1.6f;
+
     private ReGlassConfig() {}
 
     public static class Features {

src/main/java/restudio/reglass/client/config/ReGlassSettingsIO.java

@@ -81,6 +81,12 @@ private static Data snapshot() {
 
         d.pixelatedGridSize = c.pixelatedGridSize;
 
+        d.hoverScalePx = c.hoverScalePx;
+        d.focusScalePx = c.focusScalePx;
+        d.focusBorderWidthPx = c.focusBorderWidthPx;
+        d.focusBorderIntensity = c.focusBorderIntensity;
+        d.focusBorderSpeed = c.focusBorderSpeed;
+
         return d;
     }
 
@@ -121,6 +127,12 @@ public static void apply(Data d) {
         c.defaultGlareAngleRad = d.glareAngleRad;
 
         c.pixelatedGridSize = d.pixelatedGridSize;
+
+        c.hoverScalePx = d.hoverScalePx;
+        c.focusScalePx = d.focusScalePx;
+        c.focusBorderWidthPx = d.focusBorderWidthPx;
+        c.focusBorderIntensity = d.focusBorderIntensity;
+        c.focusBorderSpeed = d.focusBorderSpeed;
     }
 
     public static class Data {
@@ -158,5 +170,11 @@ public static class Data {
         public float glareAngleRad = (float) (-45.0 * Math.PI / 180.0);
 
         public float pixelatedGridSize = 8.0f;
+
+        public float hoverScalePx = 1.5f;
+        public float focusScalePx = 2.5f;
+        public float focusBorderWidthPx = 2.0f;
+        public float focusBorderIntensity = 0.75f;
+        public float focusBorderSpeed = 1.6f;
     }
 }

src/main/java/restudio/reglass/client/gui/LiquidGlassGuiElementRenderState.java

@@ -7,7 +7,7 @@
 import org.joml.Matrix3x2f;
 import restudio.reglass.client.api.WidgetStyle;
 
-public record LiquidGlassGuiElementRenderState(int x1, int y1, int x2, int y2, float cornerRadius, @Nullable Text text, WidgetStyle style, Matrix3x2f pose, @Nullable ScreenRect scissorArea) implements SpecialGuiElementRenderState {
+public record LiquidGlassGuiElementRenderState(int x1, int y1, int x2, int y2, float cornerRadius, @Nullable Text text, WidgetStyle style, Matrix3x2f pose, @Nullable ScreenRect scissorArea, float hover, float focus) implements SpecialGuiElementRenderState {
 
     @Override
     public float scale() {

src/main/java/restudio/reglass/client/runtime/ReGlassAnim.java

@@ -32,6 +32,12 @@ public final class ReGlassAnim {
     private float debugStep;
     private float pixelatedGridSize;
 
+    private float hoverScalePx;
+    private float focusScalePx;
+    private float focusBorderWidthPx;
+    private float focusBorderIntensity;
+    private float focusBorderSpeed;
+
     private ReGlassAnim() {}
 
     public void update(ReGlassConfig cfg, double dtSeconds) {
@@ -59,6 +65,11 @@ public void update(ReGlassConfig cfg, double dtSeconds) {
             glareAngleRad = cfg.defaultGlareAngleRad;
             debugStep = cfg.debugStep;
             pixelatedGridSize = cfg.pixelatedGridSize;
+            hoverScalePx = cfg.hoverScalePx;
+            focusScalePx = cfg.focusScalePx;
+            focusBorderWidthPx = cfg.focusBorderWidthPx;
+            focusBorderIntensity = cfg.focusBorderIntensity;
+            focusBorderSpeed = cfg.focusBorderSpeed;
             init = true;
             return;
         }
@@ -83,6 +94,11 @@ public void update(ReGlassConfig cfg, double dtSeconds) {
         glareAngleRad = lerp(glareAngleRad, cfg.defaultGlareAngleRad, a);
         debugStep = lerp(debugStep, cfg.debugStep, a);
         pixelatedGridSize = lerp(pixelatedGridSize, cfg.pixelatedGridSize, a);
+        hoverScalePx = lerp(hoverScalePx, cfg.hoverScalePx, a);
+        focusScalePx = lerp(focusScalePx, cfg.focusScalePx, a);
+        focusBorderWidthPx = lerp(focusBorderWidthPx, cfg.focusBorderWidthPx, a);
+        focusBorderIntensity = lerp(focusBorderIntensity, cfg.focusBorderIntensity, a);
+        focusBorderSpeed = lerp(focusBorderSpeed, cfg.focusBorderSpeed, a);
     }
 
     private static float alpha(double dt, float tau) {
@@ -120,4 +136,10 @@ private static float lerp(float a, float b, float t) {
 
     public float debugStep() { return debugStep; }
     public float pixelatedGridSize() { return pixelatedGridSize; }
+
+    public float hoverScalePx() { return hoverScalePx; }
+    public float focusScalePx() { return focusScalePx; }
+    public float focusBorderWidthPx() { return focusBorderWidthPx; }
+    public float focusBorderIntensity() { return focusBorderIntensity; }
+    public float focusBorderSpeed() { return focusBorderSpeed; }
 }

src/main/java/restudio/reglass/client/screen/config/ReGlassConfigScreen.java

@@ -126,6 +126,20 @@ protected void init() {
         addSlider(MappedSlider.floatSlider(widgetX, y, widgetWidth, widgetHeight, Text.literal("Glare Factor"), 0f, 100f, cfg.defaultGlareFactor, v -> cfg.defaultGlareFactor = v.floatValue()), y).active = cfg.features.enableRedesign;
         y += widgetHeight + gap * 2;
 
+        addTitle("Interactions", widgetX, y, widgetWidth);
+        y += widgetHeight;
+
+        addSlider(MappedSlider.floatSlider(widgetX, y, widgetWidth, widgetHeight, Text.literal("Hover Scale (px)"), 0f, 6f, cfg.hoverScalePx, v -> cfg.hoverScalePx = v.floatValue()), y).active = cfg.features.enableRedesign;
+        y += widgetHeight + gap;
+        addSlider(MappedSlider.floatSlider(widgetX, y, widgetWidth, widgetHeight, Text.literal("Focus Scale (px)"), 0f, 8f, cfg.focusScalePx, v -> cfg.focusScalePx = v.floatValue()), y).active = cfg.features.enableRedesign;
+        y += widgetHeight + gap;
+        addSlider(MappedSlider.floatSlider(widgetX, y, widgetWidth, widgetHeight, Text.literal("Focus Border Width (px)"), 0f, 6f, cfg.focusBorderWidthPx, v -> cfg.focusBorderWidthPx = v.floatValue()), y).active = cfg.features.enableRedesign;
+        y += widgetHeight + gap;
+        addSlider(MappedSlider.floatSlider(widgetX, y, widgetWidth, widgetHeight, Text.literal("Focus Border Intensity"), 0f, 1f, cfg.focusBorderIntensity, v -> cfg.focusBorderIntensity = v.floatValue()), y).active = cfg.features.enableRedesign;
+        y += widgetHeight + gap;
+        addSlider(MappedSlider.floatSlider(widgetX, y, widgetWidth, widgetHeight, Text.literal("Focus Border Speed"), 0f, 4f, cfg.focusBorderSpeed, v -> cfg.focusBorderSpeed = v.floatValue()), y).active = cfg.features.enableRedesign;
+        y += widgetHeight + gap * 2;
+
         addTitle("Debug", widgetX, y, widgetWidth);
         y += widgetHeight;
 
@@ -250,7 +264,7 @@ public void renderWidget(DrawContext context, int mouseX, int mouseY, float delt
         public boolean isMouseOver(double mouseX, double mouseY) {
             return false;
         }
-        
+
         @Override
         protected void appendClickableNarrations(NarrationMessageBuilder builder) {}
     }

src/main/java/restudio/reglass/client/screen/widget/world/WorldListEntryWidget.java

@@ -81,9 +81,10 @@ private void loadIcon() {
     public void render(DrawContext context, int index, int x, int y, int width, int height, int mouseX, int mouseY, boolean hovered, float delta) {
         super.render(context, index, x, y, width, height, mouseX, mouseY, hovered, delta);
 
+        boolean isSelected = this.parent.getList().getSelectedEntries().contains(this);
 
         WidgetStyle style = defaultStyle;
-        if (this.parent.getList().getSelectedEntries().contains(this)) {
+        if (isSelected) {
             style = selectedStyle;
         } else if (hovered) {
             style = hoveredStyle;
@@ -93,6 +94,8 @@ public void render(DrawContext context, int index, int x, int y, int width, int
                 .dimensions(x, y, width, height)
                 .cornerRadius(8)
                 .style(style)
+                .hover(hovered ? 1f : 0f)
+                .focus(isSelected ? 1f : 0f)
                 .render();
 
         String displayName = summary.getDisplayName();
@@ -137,4 +140,4 @@ public void close() {
             this.iconTexture = null;
         }
     }
-}
+}

src/main/java/restudio/reglass/extensions/PressableWidgetExtension.java

@@ -0,0 +1,10 @@
+package restudio.reglass.extensions;
+
+import org.spongepowered.asm.mixin.Unique;
+
+public interface PressableWidgetExtension {
+    @Unique
+    boolean reglass$isDragging();
+    @Unique
+    void reglass$setIsDragging(boolean isDragging);
+}

src/main/java/restudio/reglass/mixin/client/InGameHudMixin.java

@@ -6,6 +6,7 @@
 import net.minecraft.client.render.RenderTickCounter;
 import net.minecraft.entity.player.PlayerEntity;
 import net.minecraft.item.ItemStack;
+import net.minecraft.util.Arm;
 import net.minecraft.util.profiler.Profilers;
 import net.minecraft.world.GameMode;
 import org.spongepowered.asm.mixin.Final;
@@ -66,11 +67,11 @@ protected abstract void renderHotbarItem(
 
         int hotbarWidth = 182;
         int hotbarHeight = 22;
-        int x = context.getScaledWindowWidth() / 2 - hotbarWidth / 2;
-        int y = context.getScaledWindowHeight() - hotbarHeight;
+        int x = this.client.getWindow().getScaledWidth() / 2 - hotbarWidth / 2;
+        int offhandY = this.client.getWindow().getScaledHeight() - hotbarHeight;
 
         ReGlassApi.create(context)
-                .dimensions(x, y, hotbarWidth, hotbarHeight)
+                .dimensions(x, offhandY, hotbarWidth, hotbarHeight)
                 .cornerRadius(11)
                 .style(new WidgetStyle().tint(0x000000, 0.3f))
                 .render();
@@ -102,14 +103,15 @@ protected abstract void renderHotbarItem(
         WidgetStyle selectorStyle = new WidgetStyle().smoothing(-0.005f);
 
         ReGlassApi.create(context)
-                .dimensions(circleX, y, hotbarHeight, hotbarHeight)
+                .dimensions(circleX, offhandY, hotbarHeight, hotbarHeight)
                 .cornerRadius(0.5f * hotbarHeight)
                 .style(selectorStyle)
+                .focus(1f)
                 .render();
 
         for (int i = 0; i < 9; ++i) {
             int itemX = x + 3 + i * 20;
-            int itemY = y + 3;
+            int itemY = offhandY + 3;
             this.renderHotbarItem(
                     context,
                     itemX,
@@ -121,6 +123,20 @@ protected abstract void renderHotbarItem(
             );
         }
 
+        ItemStack offHandStack = player.getOffHandStack();
+        if (!offHandStack.isEmpty()) {
+            Arm arm = player.getMainArm().getOpposite();
+            int offhandX = (arm == Arm.LEFT ? x - hotbarHeight - 4 : x + hotbarWidth + 4);
+
+            ReGlassApi.create(context)
+                    .dimensions(offhandX, offhandY, hotbarHeight, hotbarHeight)
+                    .cornerRadius(hotbarHeight * 0.5f)
+                    .style(new WidgetStyle().tint(0x000000, 0.3f))
+                    .render();
+
+            this.renderHotbarItem(context, offhandX + 3, offhandY + 3, tickCounter, player, offHandStack, 0);
+        }
+
         LiquidGlassUniforms.get().tryApplyBlur(context);
 
         Profilers.get().pop();