better mod card design

src/main/java/org/saturnclient/ui2/RenderScope.java

@@ -80,17 +80,19 @@ public class RenderScope {
     }
 
     public void drawText(String text, int x, int y, boolean bold, int color) {
-        color = getColor(color);
+        int i = 0;
-
+        for (String line : text.split("\n")) {
-        Identifier font = bold ? Fonts.INTER_BOLD : Fonts.INTER;
+            color = getColor(color);
-
+            Identifier font = bold ? Fonts.INTER_BOLD : Fonts.INTER;
-        matrices.push();
+            matrices.push();
-        matrices.translate(x, y, 0);
+            matrices.translate(x, y + (i * Fonts.getHeight()), 0);
-        matrices.scale(1.0f, 1.0f, 1.0f);
+            matrices.scale(1.0f, 1.0f, 1.0f);
-        TextRenderer textRenderer = SaturnClient.client.textRenderer;
+            TextRenderer textRenderer = SaturnClient.client.textRenderer;
-        textRenderer.draw(Fonts.setFont(text, font), 0, 7, color, false, this.matrices.peek().getPositionMatrix(),
+            textRenderer.draw(Fonts.setFont(line, font), 0, 7, color, false, this.matrices.peek().getPositionMatrix(),
-                this.vertexConsumers, TextLayerType.NORMAL, 0, 15728880);
+                    this.vertexConsumers, TextLayerType.NORMAL, 0, 15728880);
-        matrices.pop();
+            matrices.pop();
+            i++;
+        }
     }
 
     public void drawRoundedCorner(int width, int height, int radius, int color) {

src/main/java/org/saturnclient/ui2/components/SaturnModule.java

@@ -5,6 +5,7 @@ import org.saturnclient.saturnclient.SaturnClient;
 import org.saturnclient.saturnclient.config.Property;
 import org.saturnclient.saturnclient.config.ThemeManager;
 import org.saturnclient.saturnclient.menus.ConfigEditor;
+import org.saturnclient.ui.Textures;
 import org.saturnclient.ui2.Element;
 import org.saturnclient.ui2.RenderContext;
 import org.saturnclient.ui2.RenderScope;
@@ -14,28 +15,33 @@ import org.saturnclient.ui2.resources.Fonts;
 import net.minecraft.client.render.RenderLayer;
 
 public class SaturnModule extends Element {
-    private static ThemeManager theme = new ThemeManager("SaturnModule", "enabled", "hovering", "toggle-hovering");
+    private static ThemeManager theme = new ThemeManager("SaturnModule", "enabled", "hovering");
     private static Property<Integer> bgColor = theme.property("bg-color", new Property<Integer>(-16777216));
     private static Property<Integer> fgColor = theme.property("fg-color", new Property<Integer>(-1));
-    private static Property<Integer> iconColor = theme.property("icon-color", new Property<Integer>(-1));
+    private static Property<Integer> iconBgColor = theme.property("icon-bg-color", new Property<Integer>(-16777216));
-    private static Property<Integer> toggleFg = theme.property("toggle-fg", new Property<Integer>(-1));
+    private static Property<Integer> iconColor = theme.property("icon-fg-color", new Property<Integer>(-1));
-    private static Property<Integer> toggleBg = theme.property("toggle-bg", new Property<Integer>(-16777216));
 
-    private static Property<Integer> cornerRadius = theme.property("corner-radius", new Property<Integer>(25));
+    private static Property<Integer> cornerRadius = theme.property("corner-radius", new Property<Integer>(10));
-    private static Property<Boolean> toggleBold = theme.property("toggle-bold", new Property<Boolean>(false));
+    private static Property<Integer> padding = theme.property("padding", new Property<Integer>(10));
-    private static Property<Boolean> nameBold = theme.property("name-bold", new Property<Boolean>(false));
+    private static Property<Integer> iconMargin = theme.property("icon-margin", new Property<Integer>(10));
+    private static Property<Integer> iconPadding = theme.property("icon-padding", new Property<Integer>(4));
+
+    private static ThemeManager settingsTheme = new ThemeManager("SaturnModule$Settings", "hovering");
+    private static Property<Integer> settingsBg = settingsTheme.property("bg-color", new Property<Integer>(-16777216));
+    private static Property<Integer> settingsFg = settingsTheme.property("fg-color", new Property<Integer>(-1));
+    private static Property<Integer> settingsRadius = settingsTheme.property("corner-radius", new Property<Integer>(10));
 
     static {
-        theme.propertyStateDefault("enabled", "toggle-bg", -7643914);
+        theme.propertyStateDefault("enabled", "icon-bg-color", -7643914);
         theme.propertyStateDefault("hovering", "fg-color", -7643914);
-        theme.propertyStateDefault("hovering", "icon-color", -7643914);
+        settingsTheme.propertyStateDefault("hovering", "bg-color", -7643914);
     }
 
     private Module mod;
 
     public SaturnModule(Module mod) {
         this.mod = mod;
-        this.width = 140;
+        this.width = 180;
         this.height = 140;
     }
 
@@ -45,39 +51,76 @@ public class SaturnModule extends Element {
 
         if (mod.isEnabled()) {
             theme.setState("enabled");
-        } else {
-            theme.setState(null);
         }
 
-        if (ctx.isHovering(0, (height-30), width, 30)) {
+        if (ctx.isHovering(0, (height-40), width, 30)) {
-            theme.applyState("toggle-hovering");
+            settingsTheme.setState("hovering");
         } else if (ctx.isHovering()) {
             theme.applyState("hovering");
         }
 
-        renderScope.enableScissor(0, 0, width + 10, height - 30);
         renderScope.drawRoundedRectangle(0, 0, width, height, cornerRadius.value, bgColor.value);
-        renderScope.disableScissor();
 
-        renderScope.drawTexture(mod.getIconTexture(), (width - 20) / 2, (height - 65) / 2, 0, 0, 20, 20, iconColor.value);
+        renderScope.matrices.push();
 
-        renderScope.drawText(mod.getName(), Fonts.centerX(width, mod.getName(), focused), Fonts.centerY(height), nameBold.value, fgColor.value);
+        renderScope.matrices.translate(padding.value, padding.value, 0);
 
-        renderScope.enableScissor(0, height - 30, width + 10, height);
+        renderScope.drawRoundedRectangle(0, 0, 20, 20, 10, iconBgColor.value);
-        renderScope.drawRoundedRectangle(0, 0, width, height, cornerRadius.value, toggleBg.value);
+        renderScope.drawTexture(mod.getIconTexture(), iconPadding.value, iconPadding.value, 0, 0, 20 - (iconPadding.value * 2), 20 - (iconPadding.value * 2), iconColor.value);
-        renderScope.disableScissor();
+        renderScope.drawText(mod.getName(), 20 + iconMargin.value, (22 - Fonts.getHeight()) / 2, false, fgColor.value);
+        renderScope.matrices.push();
+        renderScope.matrices.translate(20 + iconMargin.value, ((22 - Fonts.getHeight()) / 2) + Fonts.getHeight(), 0);
 
-        String t = mod.isEnabled() ? "Enabled" : "Disabled";
+        renderScope.matrices.scale(0.5f, 0.5f, 1);
+        renderScope.drawText(formatText(mod.getDescription(), (int) ((width - iconMargin.value) * 1.5f)), 0, 0, false, -20);
+        renderScope.matrices.pop();
 
-        renderScope.drawText(t, Fonts.centerX(width, t, toggleBold.value), height - 30 + Fonts.centerY(30), toggleBold.value, toggleFg.value);
+        renderScope.matrices.pop();
+
+        // Settings button
+        renderScope.matrices.push();
+        renderScope.matrices.translate(padding.value, height - 30 - padding.value, 0);
+
+        int w = width - (padding.value * 2);
+
+        renderScope.drawRoundedRectangle(0, 0, w, 30, settingsRadius.value, settingsBg.value);
+        renderScope.drawTexture(Textures.SETTINGS, ((w - Fonts.getWidth("Settings", false)) / 2) - 20, (16) / 2, 0, 0, 15, 15, settingsFg.value);
+        renderScope.drawText("Settings", Fonts.centerX(w, "Settings", false), Fonts.centerY(32), false, settingsFg.value);
+        renderScope.matrices.pop();
+
+        theme.setState(null);
+        settingsTheme.setState(null);
     }
 
     @Override
     public void click(int mouseX, int mouseY) {
-        if (Utils.isHovering(mouseX, mouseY - (height-30), width, 30, scale)) {
+        if (Utils.isHovering(mouseX, mouseY - (height-40), width, 30, scale)) {
-            mod.setEnabled(!mod.isEnabled());
-        } else {
             SaturnClient.client.setScreen(new ConfigEditor(mod.getConfig()));
+        } else {
+            mod.setEnabled(!mod.isEnabled());
         }
     }
+
+    public static String formatText(String text, int width) {
+        StringBuilder formatted = new StringBuilder();
+        StringBuilder currentLine = new StringBuilder();
+    
+        for (char c : text.toCharArray()) {
+            currentLine.append(c);
+            if (Fonts.getWidth(currentLine.toString(), false) > width) {
+                // Line is too wide; backtrack the last character
+                currentLine.deleteCharAt(currentLine.length() - 1);
+                formatted.append(currentLine).append('\n');
+                currentLine.setLength(0); // clear currentLine
+                currentLine.append(c); // start new line with the character that overflowed
+            }
+        }
+    
+        // Append any remaining characters in the currentLine
+        if (currentLine.length() > 0) {
+            formatted.append(currentLine);
+        }
+
+        return formatted.toString();
+    }    
 }

src/main/java/org/saturnclient/ui2/screens/ModMenu.java

@@ -30,7 +30,7 @@ public class ModMenu extends SaturnScreen {
         int col = 0;
         
         for (Module mod : ModManager.MODS) {
-            scroll.draw(new SaturnModule(mod).position((140 + gap.value) * col, (140 + gap.value) * row));
+            scroll.draw(new SaturnModule(mod).position((180 + gap.value) * col, (140 + gap.value) * row));
 
             if (col == 2) {
                 col = 0;
@@ -40,7 +40,7 @@ public class ModMenu extends SaturnScreen {
             }
         }
 
-        int scrollWidth = 420 + (gap.value * 2) + (padding.value * 2);
+        int scrollWidth = 540 + (gap.value * 2) + (padding.value * 2);
     
         draw(scroll.dimensions(scrollWidth, 350).center(width, height));