ClickGUI

[Dani]

I haven't ever made any clickguis or anything like that and want to attempt making a basic one myself, if anyone has the src of a basic clickgui (no fancy stuff like blur, glow, shadows, gradient etc., just a basic gui with settings and moveable categories), please send it, maybe send me a some common mistakes or something too (as i said i've never coded a clickgui really)

 

[_akk1o]

Such guis are not difficult to create. You only need 4 classes for this
1. ClickGui (extends GuiScreen)
2. Panel
3. Module
4. Settings

From the very beginning you create the ClickGui class and inherit from GuiScreen, also create a sheet from Panel and in the constructor or initGui() initialize this sheet, for example

// its class ClickGui

private ArrayList<Panel> panels = new ArrayList<>();

public ClickGui() {
    int offset = 100;
    for(Category category : Category.values()) { // Category.values() its list of all categories
        Panel panel = new Panel(category, offset, 100); // (Category category, int posX, int posY)
        panels.add(panel);
        offset += panel.getWidth() + 10; // getWidth() return width of panel
    }
}

@Override
public void drawScreen(int mouseX, int mouseY, float partialTicks) {
    
    // here you can use blur, dark, its background
    
    for(Panel panel : panels) {
        panel.drawScreen(mouseX, mouseY); // draw all panels
    }
}

Next, you create the Panel class and implement it something like this

public class Panel {
    
    private Category category;
    private int posX, posY, width, height;
    private boolean selected;
    private int startX, startY;
    private ArrayList<Module> modules = new ArrayList<>(); // Modules which is ui
    
    public Panel(Category category, int posX, int posY) {
        // Sets poses, sizes and category
        this.category = category;
        this.posX = posX;
        this.posY = posY;
        this.width = 100; // you can change its value
        this.height = 30; // and this you can change
        
        int offset = posY + height;
        for(Module module : getModulesByCategory(category)) { // module which abstract
            Module uiModule = new Module(this, module, posX, offset); // (Panel parent, Module module, int posX, int posY), argument module is abstract
            modues.add(uiModule);
            offset += uiModule.getHeight() + 3; // 3 is indentation Y
        }
    }
    
    // draw the panel and modules
    public void drawScreen(int mouseX, int mouseY) {
        // Title background
        Gui.drawRect(posX, posY, width, height, new Color(51, 79, 214).getRGB());
        // Title text
        mc.fontRendererObj.drawCenteredString(category.name(), posX + (width / 2), posY + (height / 2), -1); // Color -1 return white
        // Draw modules if category selected
        if(selected) {
            for(Module module : modules) {
                module.drawScreen(mouseX, mouseY);
            }
        }
    }
    
    public void mouseClicked(int mouseX, int mouseY, int mouseClicked) {
        if(isHovered(mouseX, mouseY, posX, posY, width, height) && mouseClicked == 1) { // mouseClicked 0 = LMB, 1 = RMB
            selected = !selected;
        } else if(isHovered(mouseX, mouseY, posX, posY, width, height) && mouseClicked == 0) {
            startX = mouseX;
            startY = mouseY;
        }
        for(Module module : modules) {
            modules.mouseClicked(mouseX, mouseY, mouseClicked);
        }
    }
    
    // allow drag category
    public void mouseClickMove(int mouseX, int mouseY, int mouseClicked) {
        if(isHovered(mouseX, mouseY, posX, posY, width, height) && mouseClicked == 0) {
            this.posX += mouseX - startX;
            this.posY += mouseY - startY;
            for(Module module : modules) {
                module.setPos(module.getPosX() + mouseX - startX, module.getPosY() + mouseY - startY); // (int posX, int posY)
            }
            startX = mouseX;
            startY = mouseY;
        }
    }
    
    // Method which return modules by category, if you haven't
    public ArrayList<Module> getModulesByCategory(Category category) {
        ArrayList<Module> modules = new ArrayList<>();
        for(Module module : Client.INSTANCE.getModuleManager().getModules()) { // Module which abstract and all modules extends from him
            if(module.getCategory() == category)
                modules.add(module);
        }
        return modules;
    }
    
    public boolean isHovered(int mouseX, int mouseY, int posX, int posY, int width, int height) {
        return (mouseX > posX && mouseX < posX + width) && (mouseY > posY && mouseY < posY + height);
    }

    public void calculateHeight() {
        for(int i = 1; i < getModulesByCategory(category).size(); i++) {
              modules.get(i).setPosY(modules.get(i - 1).getPosY() + modules.get(i - 1).getHeight() + 3);
        }
    }
}

Next class Module

public class Module {

    private Module module; // abstract module
    private int posX, posY, width, height;
    private boolean selected;
    private ArrayList<Setting> settings = new ArrayList<>();

    public Module(Panel parent, Module module, int posX, int posY) {
        this.parent = parent;
        this.module = module;
        this.posX = posX;
        this.posY = posY;
        width = 100;
        height = 20;

        int offset = posY + 15;
        for(Value value : module.getValues())  {// getValues return setting list
            Setting setting = new Setting(this, value, posX, offset);
            settings.add(setting);
            offset += setting.getHeight() + 5;

        }

    }

    public void drawScreen(int mouseX, int mouseY) {
        if(parent.selected) { // draws module if parent category selected
            Gui.drawRect(posX, posY, width, height, (parent.isHovered(mouseX, mouseY, posX, posY, width, 20)) ? new Color(2, 2, 2, 170).getRGB() : new Color(2, 2, 2, 150).getRGB()); // 1 color - if module is hovered, 2 color - not hovered
            mc.fontRendererObj.drawString(module.getName(), posX + 3, posY + 3, (module.isEnabled()) ? new Color(84, 103, 191).getRGB() : new Color(255, 255, 255).getRGB());
            if(selected) {
                for(Setting setting : settings) {
                    settings.drawScreen(mouseX, mouseY); // (int mouseX, int mouseY)
                }
            }
        }
    }
    
    public void mouseClicked(int mouseX, int mouseY, int mouseClicked) {
        if(parent.isHovered(mouseX, mouseY, posX, posY, width, 20)) { // why 20 and not height? because if module selected then increases click area, but need 20
            switch(mouseClicked) {
                    case 0 -> module.setEnabled(!module.isEnabled()); // enabled/disable module
                    case 1 -> {
                        selected = !selected
                        if(selected) {
                            for(Setting setting : settings) {
                                height += setting.getHeight() + 5;
                            }
                        } else
                            height = 20;
                        parent.calculateHeight();
                    }; // select module (draw settings)
            }
        } else if(parent.isHovered(mouseX, mouseY, posX, posY, width, height)) { // if hovered then call setting click event
            for(Setting setting : settings) {
                setting.mouseClicked(mouseX, mouseY, mouseClicked);
            }
        }
    }

    public int getHeight() {
        return height;
    }

    public void setPosY(int posY) {
        this.posY = posY;
    }
}

Settings, I think you understand what analogy to do