move to cc.polyfrost

15 files changed, 1922 insertions, 0 deletions

diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
new file mode 100644
index 0000000..faf0b07
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
@@ -0,0 +1,157 @@
+package cc.polyfrost.oneconfig.gui.elements;
+
+import cc.polyfrost.oneconfig.gui.OneConfigGui;
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.gui.pages.Page;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import org.jetbrains.annotations.NotNull;
+import org.jetbrains.annotations.Nullable;
+
+public class BasicButton extends BasicElement {
+
+    protected String text;
+    protected Images fileNameLeftIco, fileNameRightIco;
+    private final int thisAlignment;
+    private final float fontSize;
+    private final int colorPalette;
+    public int x, y;
+    public static final int ALIGNMENT_LEFT = 0;
+    public static final int ALIGNMENT_CENTER = 1;
+    private boolean toggleable;
+    private Page page;
+    private Runnable runnable;
+
+    /**
+     * Create a new basic button. Used mostly on the homepage and the sidebar. Note: The button will not be drawn until you call {@link #draw(long, int, int)}.
+     * The button's content is centered on its total length, so the text is not always in the middle.
+     *
+     * @param text             Text to display on the button. Has to be there.
+     * @param fileNameLeftIco  file path of the icon to display on the left. Can be null if you don't want to display an icon on the left.
+     * @param fileNameRightIco file path of the icon to display on the right. Can be null if you don't want to display an icon on the right.
+     * @param colorPalette     color palette to use. see {@link ColorUtils} for more info. Can support color palette of -2, which is larger font and icons. Also supports -3, which is just the text changing color.
+     * @param alignment        alignment of the button. ALIGNMENT_LEFT or ALIGNMENT_CENTER.
+     */
+    public BasicButton(int width, int height, @NotNull String text, @Nullable Images fileNameLeftIco, @Nullable Images fileNameRightIco, int colorPalette, int alignment) {
+        super(width, height, colorPalette, true);
+        this.text = text;
+        if (fileNameLeftIco != null) this.fileNameLeftIco = fileNameLeftIco;
+        if (fileNameRightIco != null) this.fileNameRightIco = fileNameRightIco;
+        this.thisAlignment = alignment;
+        if (colorPalette == -2) {
+            fontSize = 24f;
+            this.colorPalette = -1;
+        } else {
+            fontSize = 14f;
+            this.colorPalette = colorPalette;
+        }
+    }
+
+    public BasicButton(int width, int height, @NotNull String text, @Nullable Images fileNameLeftIco, @Nullable Images fileNameRightIco, int colorPalette, int alignment, Page page) {
+        this(width, height, text, fileNameLeftIco, fileNameRightIco, colorPalette, alignment);
+        this.page = page;
+    }
+
+    public BasicButton(int width, int height, @NotNull String text, @Nullable Images fileNameLeftIco, @Nullable Images fileNameRightIco, int colorPalette, int alignment, boolean toggleable) {
+        this(width, height, text, fileNameLeftIco, fileNameRightIco, colorPalette, alignment);
+        this.toggleable = toggleable;
+    }
+
+    public BasicButton(int width, int height, @NotNull String text, @Nullable Images fileNameLeftIco, @Nullable Images fileNameRightIco, int colorPalette, int alignment, Runnable runnable) {
+        this(width, height, text, fileNameLeftIco, fileNameRightIco, colorPalette, alignment);
+        this.runnable = runnable;
+    }
+
+    public BasicButton(int width, int height, @NotNull String text, @Nullable Images fileNameLeftIco, @Nullable Images fileNameRightIco, int colorPalette, int alignment, boolean toggleable, Runnable runnable) {
+        this(width, height, text, fileNameLeftIco, fileNameRightIco, colorPalette, alignment, runnable);
+        this.toggleable = toggleable;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        this.x = x;
+        this.y = y;
+        int textColor = -1;
+        RenderManager.drawRectangle(vg, x, y, this.width, this.height, this.currentColor);
+        float contentWidth = RenderManager.getTextWidth(vg, text, fontSize, Fonts.INTER_MEDIUM);
+        if (fileNameLeftIco != null) {
+            contentWidth += 28;
+        }
+        if (fileNameRightIco != null) {
+            contentWidth += 28;
+        }
+
+        if (this.colorPalette == -3) {
+            textColor = OneConfigConfig.WHITE_80;
+            if (hovered) textColor = OneConfigConfig.WHITE;
+            if (clicked) textColor = OneConfigConfig.WHITE_80;
+            if (page == null) textColor = OneConfigConfig.WHITE_50;
+        }
+
+        if (thisAlignment == ALIGNMENT_CENTER) {
+            int middle = x + this.width / 2;
+            RenderManager.drawString(vg, text, middle - contentWidth / 2 + (fileNameLeftIco != null ? 28 : 0), y + ((float) height / 2) + 1, textColor, fontSize, Fonts.INTER_MEDIUM);
+            if (fileNameLeftIco != null) {
+                RenderManager.drawImage(vg, fileNameLeftIco, middle - contentWidth / 2, y + 8, 20, 20);
+            }
+            if (fileNameRightIco != null) {
+                RenderManager.drawImage(vg, fileNameRightIco, middle + contentWidth / 2 - (fileNameLeftIco != null ? 20 : 24), y + 8, 20, 20);
+            }
+        }
+        if (thisAlignment == ALIGNMENT_LEFT) {
+            if (fileNameLeftIco != null) {
+                RenderManager.drawImage(vg, fileNameLeftIco, x + 12, y + 8, 20, 20, textColor);
+                RenderManager.drawString(vg, text, x + 40, y + ((float) height / 2) + 1, textColor, fontSize, Fonts.INTER_MEDIUM);
+            } else {
+                RenderManager.drawString(vg, text, x + 12, y + ((float) height / 2) + 1, textColor, fontSize, Fonts.INTER_MEDIUM);
+            }
+            if (fileNameRightIco != null) {
+                RenderManager.drawImage(vg, fileNameRightIco, x + width - 28, y + 8, 20, 20);
+            }
+        }
+        this.update(x, y);
+        if (hoverFx) {
+            if (colorPalette == -3) {
+                currentColor = OneConfigConfig.TRANSPARENT;
+                return;
+            }
+            if (!toggleable) {
+                currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, clicked);
+            } else {
+                if (toggled) {
+                    currentColor = ColorUtils.smoothColor(currentColor, OneConfigConfig.GRAY_500, OneConfigConfig.BLUE_600, true, 30f);
+                } else currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, clicked);
+            }
+        }
+    }
+
+
+    @Override
+    public void onClick() {
+        if (this.page != null) {
+            OneConfigGui.INSTANCE.openPage(page);
+        } else if (this.runnable != null) {
+            runnable.run();
+        }
+    }
+
+    @Override
+    public void update(int x, int y) {
+        if (toggleable && toggled) return;
+        super.update(x, y);
+    }
+
+    public void setToggled(boolean state) {
+        this.toggled = state;
+    }
+
+    public Page getPage() {
+        return page;
+    }
+
+    public String getText() {
+        return text;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
new file mode 100644
index 0000000..80eec9b
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
@@ -0,0 +1,107 @@
+package cc.polyfrost.oneconfig.gui.elements;
+
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+
+public class BasicElement {
+    protected int width, height;
+    protected int colorPalette;
+    protected int hitBoxX, hitBoxY;
+    protected final boolean hoverFx;
+    protected boolean hovered = false;
+    protected boolean clicked = false;
+    protected boolean toggled = false;
+    protected boolean disabled = false;
+    protected int currentColor;
+
+    public BasicElement(int width, int height, int colorPalette, boolean hoverFx) {
+        this.height = height;
+        this.width = width;
+        this.colorPalette = colorPalette;
+        this.hoverFx = hoverFx;
+    }
+
+    public BasicElement(int width, int height, boolean hoverFx) {
+        this.height = height;
+        this.width = width;
+        this.colorPalette = -1;
+        this.hoverFx = hoverFx;
+    }
+
+
+    public void draw(long vg, int x, int y) {
+        RenderManager.drawRectangle(vg, x, y, width, height, currentColor);
+
+        update(x, y);
+        if (hoverFx) {
+            currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, clicked);
+        }
+    }
+
+    public void update(int x, int y) {
+        if(disabled) {
+            hovered = false;
+            clicked = false;
+            return;
+        }
+        hovered = InputUtils.isAreaHovered(x - hitBoxX, y - hitBoxY, width + hitBoxX, height + hitBoxY);
+        clicked = InputUtils.isClicked() && hovered;
+
+        if (hovered) {
+            if (clicked) {
+                toggled = !toggled;
+                onClick();
+            }
+        }
+    }
+
+
+    public void onClick() {
+
+    }
+
+    public void setCustomHitbox(int x, int y) {
+        hitBoxX = x;
+        hitBoxY = y;
+    }
+
+    public void setWidth(int width) {
+        this.width = width;
+    }
+
+    public void setHeight(int height) {
+        this.height = height;
+    }
+
+    public void setColorPalette(int colorPalette) {
+        this.colorPalette = colorPalette;
+    }
+
+    public int getWidth() {
+        return width;
+    }
+
+    public int getHeight() {
+        return height;
+    }
+
+    public boolean isHovered() {
+        return hovered;
+    }
+
+    public boolean isClicked() {
+        return clicked;
+    }
+
+    public boolean isToggled() {
+        return toggled;
+    }
+
+    public boolean isDisabled() {
+        return disabled;
+    }
+    public void disable(boolean state) {
+        disabled = state;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
new file mode 100644
index 0000000..83d0f7c
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
@@ -0,0 +1,250 @@
+package cc.polyfrost.oneconfig.gui.elements;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import org.lwjgl.input.Mouse;
+
+import java.awt.*;
+import java.util.ArrayList;
+
+public class ColorSelector {
+    private Color color;
+    private final int x, y;
+    private final int width = 416;
+    private final int height = 768;
+
+    private final BasicElement HSBButton = new BasicElement(128, 32, -1, true);
+    private final BasicElement RGBButton = new BasicElement(128, 32, -1, true);
+    private final BasicElement ChromaButton = new BasicElement(128, 32, -1, true);
+
+    private final ArrayList<BasicElement> faves = new ArrayList<>();
+    private final ArrayList<BasicElement> history = new ArrayList<>();
+    private final BasicElement closeButton = new BasicElement(32, 32, -1, true);
+
+
+    public ColorSelector(Color color, int mouseX, int mouseY) {
+        this.color = color;
+        this.y = mouseY - 768;
+        this.x = mouseX - 208;
+
+    }
+
+    public void draw(long vg) {
+        RenderManager.drawRoundedRect(vg, x, y, width, height, OneConfigConfig.GRAY_800, 20f);
+
+    }
+
+    public Color getColor() {
+        return color;
+    }
+
+
+
+    private class HSBSelector extends ColorSelectorBase {
+
+
+        public HSBSelector(Color color) {
+            super(color);
+        }
+
+        @Override
+        public void drawBox(long vg, int x, int y) {
+
+        }
+
+        @Override
+        public void setColor(Color color) {
+
+        }
+
+        @Override
+        public int[] drawTopSlider() {
+            return new int[0];
+        }
+
+        @Override
+        public int[] drawBottomSlider() {
+            return new int[0];
+        }
+
+        @Override
+        public float[] getColorAtPos(int clickX, int clickY) {
+            return new float[0];
+        }
+    }
+
+
+    private class RGBSelector extends ColorSelectorBase {
+
+        public RGBSelector(Color color) {
+            super(color);
+        }
+
+        @Override
+        public void drawBox(long vg, int x, int y) {
+
+        }
+
+        @Override
+        public void setColor(Color color) {
+
+        }
+
+        @Override
+        public int[] drawTopSlider() {
+            return new int[0];
+        }
+
+        @Override
+        public int[] drawBottomSlider() {
+            return new int[0];
+        }
+
+
+        @Override
+        public float[] getColorAtPos(int clickX, int clickY) {
+            return new float[0];
+        }
+    }
+
+
+
+    private abstract class ColorSelectorBase {
+
+        private int selectedX;
+        private int selectedY;
+        private float[] hsb = new float[3];
+        private float[] rgba;
+        private final TextInputFieldNumber hueField = new TextInputFieldNumber(72, 32, "", 0, 100);
+        private final TextInputFieldNumber saturationField = new TextInputFieldNumber(72, 32, "", 0, 100);
+        private final TextInputFieldNumber brightnessField = new TextInputFieldNumber(72, 32, "", 0, 100);
+        private final TextInputFieldNumber alphaField = new TextInputFieldNumber(72, 32, "", 0, 100);
+
+        private final TextInputField hexField = new TextInputField(107, 32, true, false, "");
+        private final TextInputFieldNumber redField = new TextInputFieldNumber(44, 32, "", 0, 255);
+        private final TextInputFieldNumber greenField = new TextInputFieldNumber(44, 32, "", 0, 255);
+        private final TextInputFieldNumber blueField = new TextInputFieldNumber(44, 32, "", 0, 255);
+
+        private final Slider sliderTop = new Slider(0);
+        private final Slider sliderBottom = new Slider(0);
+
+        public ColorSelectorBase(Color color) {
+            rgba = new float[]{color.getRed() / 255f, color.getGreen() / 255f, color.getBlue() / 255f, color.getAlpha() / 255f};
+        }
+
+        public void updateElements(float[] rgba) {
+            this.rgba = rgba;
+            hsb = Color.RGBtoHSB((int) (rgba[0] * 255), (int) (rgba[1] * 255), (int) (rgba[2] * 255), hsb);
+            hueField.setInput(String.valueOf(hsb[0]));
+            saturationField.setInput(String.valueOf(hsb[1]));
+            brightnessField.setInput(String.valueOf(hsb[2]));
+            alphaField.setInput(String.valueOf(rgba[3]));
+            redField.setInput(String.valueOf(rgba[0]));
+            greenField.setInput(String.valueOf(rgba[1]));
+            blueField.setInput(String.valueOf(rgba[2]));
+        }
+        public abstract void drawBox(long vg, int x, int y);
+
+        /** draw the color selector contents, including the box, and the input fields. If it is clicked, getColorAtPos is called. updateElements is also called to update all the input fields. */
+        public void draw(long vg, int x, int y) {
+            drawBox(vg, x + 16, y + 120);
+            if(InputUtils.isAreaHovered(x + 16, y + 120, 384, 288) && Mouse.isButtonDown(0)) {
+                selectedX = InputUtils.mouseX() - x - 16;
+                selectedY = InputUtils.mouseY() - y - 120;
+                rgba = getColorAtPos(selectedX, selectedY);
+            }           // TODO all of this
+            hueField.draw(vg, x + 104, y + 544);
+            saturationField.draw(vg, x + 312, y + 544);
+            brightnessField.draw(vg, x + 103, y + 584);
+            alphaField.draw(vg, x + 103, y + 584);
+            hexField.draw(vg, x + 96, y + 624);
+            redField.draw(vg, x + 228, y + 624);
+            greenField.draw(vg, x + 292, y + 664);
+            blueField.draw(vg, x + 356, y + 664);
+            sliderTop.draw(vg, x + 16, y + 424, drawTopSlider()[0], drawTopSlider()[1]);
+            sliderBottom.draw(vg, x + 16, y + 576, drawBottomSlider()[0], drawBottomSlider()[1]);
+            updateElements(rgba);
+            Color color1 = new Color(rgba[0], rgba[1], rgba[2], rgba[3]);
+            setColor(color1);
+            RenderManager.drawRoundedRect(vg, x + 16, y + 488, 384, 40, color1.getRGB(), 12f);
+        }
+
+        /** called to set the color of the color selector box based on the values of the input fields. */
+        public abstract void setColor(Color color);
+
+        /** return an array of two ints of the start color of the gradient and the end color of the gradient. */
+        public abstract int[] drawTopSlider();
+        /** return an array of two ints of the start color of the gradient and the end color of the gradient. */
+        public abstract int[] drawBottomSlider();
+
+        /**
+         * This method is called when the color selector is clicked. It needs to return color at the clicked position.
+         * @return color at the clicked position as a <code>float[] rgba.</code>
+         */
+        public abstract float[] getColorAtPos(int clickX, int clickY);
+
+        public float getRed() {
+            return rgba[0];
+        }
+        public float getGreen(){
+            return rgba[1];
+        }
+        public float getBlue(){
+            return rgba[2];
+        }
+        public float getAlpha(){
+            return rgba[3];
+        }
+
+        public float getHue(){
+            return hsb[0];
+        }
+
+        public float getSaturation(){
+            return hsb[1];
+        }
+
+        public float getBrightness(){
+            return hsb[2];
+        }
+
+        public String getHex() {
+            return null;
+        };
+
+        public Color getColor() {
+            return new Color(rgba[0], rgba[1], rgba[2], rgba[3]);
+        }
+
+    }
+
+    private class TextInputFieldNumber extends TextInputField {
+        private final float min, max;
+        public TextInputFieldNumber(int width, int height, String defaultValue, float min, float max) {
+            super(width, height, true, true, defaultValue);
+            this.min = min;
+            this.max = max;
+        }
+
+        @Override
+        public void draw(long vg, int x, int y) {
+            super.draw(vg, x, y);
+
+        }
+    }
+
+    private class Slider {
+        private final int style;
+
+        public Slider(int style) {
+            this.style = style;
+        }
+
+        public void draw(long vg, int x, int y, int color1, int color2) {
+
+        }
+    }
+}
+
+
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
new file mode 100644
index 0000000..4fe1524
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
@@ -0,0 +1,146 @@
+package cc.polyfrost.oneconfig.gui.elements;
+
+import cc.polyfrost.oneconfig.OneConfig;
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.data.Mod;
+import cc.polyfrost.oneconfig.config.data.ModType;
+import cc.polyfrost.oneconfig.gui.OneConfigGui;
+import cc.polyfrost.oneconfig.gui.pages.ModConfigPage;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import net.minecraft.client.Minecraft;
+import net.minecraft.command.CommandException;
+import net.minecraftforge.client.ClientCommandHandler;
+import net.minecraftforge.fml.common.ModMetadata;
+import org.jetbrains.annotations.NotNull;
+import org.jetbrains.annotations.Nullable;
+import org.lwjgl.nanovg.NanoVG;
+
+import java.util.ArrayList;
+
+public class ModCard extends BasicElement {
+    private final String iconPath;
+    private final Mod modData;
+    private final BasicElement favoriteHitbox = new BasicElement(32, 32, -2, true);
+    private boolean active, disabled, favorite;
+    private int colorGray = OneConfigConfig.GRAY_600;
+    private int colorPrimary = OneConfigConfig.BLUE_600;
+    private boolean isHoveredMain = false;
+
+    public ModCard(@NotNull Mod mod, @Nullable String iconPath, boolean active, boolean disabled, boolean favorite) {
+        super(244, 119, false);
+        this.modData = mod;
+        this.iconPath = iconPath;
+        this.active = active;
+        toggled = active;
+        this.disabled = disabled;
+        this.favorite = favorite;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        if (disabled) NanoVG.nvgGlobalAlpha(vg, 0.5f);
+        RenderManager.drawRoundedRectVaried(vg, x, y, width, 87, colorGray, 12f, 12f, 0f, 0f);
+        RenderManager.drawRoundedRectVaried(vg, x, y + 87, width, 32, colorPrimary, 0f, 0f, 12f, 12f);
+        RenderManager.drawLine(vg, x, y + 86, x + width, y + 86, 2, OneConfigConfig.GRAY_300);
+        if (iconPath != null) {
+            RenderManager.drawImage(vg, iconPath, x, y, width, 87);
+        } else {
+            RenderManager.drawImage(vg, Images.MOD_BOX, x + 98, y + 19, 48, 48);
+        }
+        favoriteHitbox.update(x + 212, y + 87);
+        favoriteHitbox.currentColor = ColorUtils.getColor(favoriteHitbox.currentColor, favoriteHitbox.colorPalette, favoriteHitbox.hovered, favoriteHitbox.clicked);
+        RenderManager.drawRoundedRectVaried(vg, x + 212, y + 87, 32, 32, favoriteHitbox.currentColor, 0f, 0f, 12f, 0f);
+        favorite = favoriteHitbox.isToggled();
+        RenderManager.drawString(vg, modData.name, x + 12, y + 103, OneConfigConfig.WHITE, 14f, Fonts.INTER_MEDIUM);
+        if (favorite) {
+            RenderManager.drawImage(vg, Images.FAVORITE, x + 220, y + 95, 16, 16);
+        } else {
+            RenderManager.drawImage(vg, Images.FAVORITE_OFF, x + 220, y + 95, 16, 16);
+        }
+        super.update(x, y);
+        isHoveredMain = InputUtils.isAreaHovered(x, y, width, 87);
+        boolean isHoveredSecondary = InputUtils.isAreaHovered(x, y + 87, width - 32, 32) && !disabled;
+        colorGray = ColorUtils.getColor(colorGray, 0, isHoveredMain, clicked && isHoveredMain);
+        if (active && !disabled) {
+            colorPrimary = ColorUtils.getColor(colorPrimary, 1, isHoveredSecondary, clicked && isHoveredSecondary);
+        } else
+            colorPrimary = ColorUtils.smoothColor(colorPrimary, OneConfigConfig.GRAY_500, OneConfigConfig.GRAY_400, isHoveredSecondary, 20f);
+
+        if (clicked && isHoveredMain) {
+            if (!active) toggled = false;
+        }
+        if (clicked && favoriteHitbox.hovered) toggled = false;
+        if (clicked && !isHoveredSecondary && active) toggled = true;
+        if (!active & disabled) toggled = false;
+        //RenderManager.drawString(vg, "active=" + active, x + 150, y + 92, OneConfigConfig.WHITE, 10f, Fonts.INTER_MEDIUM);        // debug stuff
+        //RenderManager.drawString(vg, "disabled=" + disabled, x + 150, y + 103, OneConfigConfig.WHITE, 10f, Fonts.INTER_MEDIUM);
+        //RenderManager.drawString(vg, "favorite=" + favorite, x + 150, y + 114, OneConfigConfig.WHITE, 10f, Fonts.INTER_MEDIUM);
+
+
+        active = toggled;
+        NanoVG.nvgGlobalAlpha(vg, 1f);
+    }
+
+    public void onClick() {
+        if (isHoveredMain) {
+            for (Mod data : OneConfig.loadedMods) {
+                if (data.modType != ModType.OTHER) {
+                    if (data.name.equalsIgnoreCase(modData.name)) {
+                        OneConfigGui.INSTANCE.openPage(new ModConfigPage(data.defaultPage));
+                    }
+                }
+            }
+            for (ModMetadata mod : OneConfig.loadedOtherMods) {
+                if (mod.name.equalsIgnoreCase(modData.name)) {
+                    ArrayList<String> possibleCommands = new ArrayList<>();
+                    possibleCommands.add(mod.name.toLowerCase().replace(" ", ""));
+                    possibleCommands.add(mod.modId.toLowerCase().replaceAll("[ -_]", ""));
+                    if (mod.name.split(" ").length > 1) {
+                        StringBuilder result = new StringBuilder();
+                        for (String word : mod.name.split(" ")) {
+                            if (word.length() == 0) continue;
+                            result.append(word.charAt(0));
+                        }
+                        possibleCommands.add(result.toString().toLowerCase());
+                    }
+                    for (String command : ClientCommandHandler.instance.getCommands().keySet()) {
+                        if (possibleCommands.contains(command)) {
+                            try {
+                                ClientCommandHandler.instance.getCommands().get(command).processCommand(Minecraft.getMinecraft().thePlayer, new String[]{});
+                            } catch (CommandException e) {
+                                throw new RuntimeException(e);
+                            }
+                            break;
+                        }
+                    }
+                    return;
+                }
+
+            }
+        }
+    }
+
+    public Mod getModData() {
+        return modData;
+    }
+
+    public boolean isDisabled() {
+        return disabled;
+    }
+
+    public boolean isActive() {
+        return active;
+    }
+
+    public void setDisabled(boolean disabled) {
+        this.disabled = disabled;
+    }
+
+    public boolean isFavorite() {
+        return favorite;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/SearchField.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/SearchField.java
new file mode 100644
index 0000000..6f460d6
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/SearchField.java
@@ -0,0 +1,14 @@
+package cc.polyfrost.oneconfig.gui.elements;
+
+public class SearchField extends TextInputField {
+
+    public SearchField(int width, int height, String defaultText, boolean multiLine, boolean password) {
+        super(width, height, defaultText, multiLine, password);
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        super.draw(vg, x, y);
+        // TODO
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/TextInputField.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/TextInputField.java
new file mode 100644
index 0000000..3058643
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/TextInputField.java
@@ -0,0 +1,418 @@
+package cc.polyfrost.oneconfig.gui.elements;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.Scissor;
+import cc.polyfrost.oneconfig.lwjgl.ScissorManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import net.minecraft.client.gui.GuiScreen;
+import net.minecraft.util.ChatAllowedCharacters;
+import org.jetbrains.annotations.NotNull;
+import org.lwjgl.input.Keyboard;
+import org.lwjgl.input.Mouse;
+
+import java.awt.*;
+import java.awt.datatransfer.DataFlavor;
+import java.awt.datatransfer.StringSelection;
+
+public class TextInputField extends BasicElement {
+
+    protected final String defaultText;
+    protected String input, selectedText;
+    protected final boolean multiLine;
+    protected boolean password;
+
+    protected int caretPos;
+    protected int x, y;
+    protected float start, end;
+    private long clickTimeD1;
+    protected long vg;
+    protected int prevCaret = 0;
+    protected boolean isDoubleClick = false;
+    protected boolean onlyNums = false;
+    protected boolean errored = false;
+    protected boolean centered = false;
+
+    public TextInputField(int width, int height, String defaultText, boolean multiLine, boolean password) {
+        super(width, height, false);
+        this.multiLine = multiLine;
+        this.defaultText = defaultText;
+        this.password = password;
+        this.input = "";
+    }
+
+    public TextInputField(int width, int height, boolean centered, boolean onlyNums, String defaultText) {
+        this(width, height, defaultText, false, false);
+        this.centered = centered;
+        this.onlyNums = onlyNums;
+    }
+
+    public void onlyAcceptNumbers(boolean state) {
+        onlyNums = state;
+    }
+
+    public void setInput(String input) {
+        this.input = input;
+    }
+
+    public String getInput() {
+        return input;
+    }
+
+    public void setPassword(boolean password) {
+        this.password = password;
+    }
+
+    public boolean getPassword() {
+        return password;
+    }
+
+    public void setErrored(boolean errored) {
+        this.errored = errored;
+    }
+
+    public void setCentered(boolean centered) {
+        this.centered = centered;
+    }
+
+    public boolean isErrored() {
+        return errored;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        this.x = x;
+        this.y = y;
+        this.vg = vg;
+        try {
+            Scissor scissor = ScissorManager.scissor(vg, x, y, width, height);
+            int colorOutline = errored ? OneConfigConfig.ERROR_700 : OneConfigConfig.GRAY_700;
+            RenderManager.drawHollowRoundRect(vg, x, y, width, height, colorOutline, 12f, 2f);
+            super.update(x, y);
+            if (Mouse.isButtonDown(0) && !InputUtils.isAreaHovered(x - 40, y - 20, width + 90, height + 20)) {
+                toggled = false;
+            }
+            int color = toggled ? OneConfigConfig.WHITE : OneConfigConfig.WHITE_60;
+            if (!toggled) caretPos = input.length();
+            float width;
+            StringBuilder s = new StringBuilder();
+            if (!password) {
+                width = RenderManager.getTextWidth(vg, input.substring(0, caretPos), 14f, Fonts.INTER_REGULAR);
+            } else {
+                for (int i = 0; i < input.length(); i++) {
+                    s.append("*");
+                }
+                width = RenderManager.getTextWidth(vg, s.substring(0, caretPos), 14f, Fonts.INTER_REGULAR);
+            }
+            if (hovered) {
+                while (Mouse.next()) {
+                    if (Mouse.getEventButtonState()) {
+                        if (Mouse.getEventButton() == 0) {
+                            prevCaret = calculatePos(Mouse.getX());
+                            if (System.currentTimeMillis() - clickTimeD1 < 300) {
+                                onDoubleClick();
+                                isDoubleClick = true;
+                            }
+                            clickTimeD1 = System.currentTimeMillis();
+                        }
+                    } else {
+                        if (Mouse.getEventButton() == 0) {
+                            long clickTimeU = System.currentTimeMillis();
+                            if (clickTimeU - clickTimeD1 < 200) {
+                                if (!isDoubleClick) {
+                                    start = 0;
+                                    end = 0;
+                                }
+                                prevCaret = caretPos;
+                                isDoubleClick = false;
+                            }
+
+                        }
+                    }
+                }
+            }
+            float halfTextWidth = this.getTextWidth(vg, input) / 2f;
+            if (start != 0f && end != 0f && toggled) {
+                RenderManager.drawRect(vg, start, y + height / 2f - 10, end, 20, OneConfigConfig.GRAY_300);
+            }
+            if (hovered) {
+                if (Mouse.isButtonDown(0) && !isDoubleClick) {
+                    caretPos = calculatePos(Mouse.getX());
+                    if (caretPos > prevCaret) {
+                        if (!centered) start = x + 12 + this.getTextWidth(vg, input.substring(0, prevCaret));
+                        else
+                            start = x + this.width / 2f - halfTextWidth + this.getTextWidth(vg, input.substring(0, prevCaret));
+                        end = this.getTextWidth(vg, input.substring(prevCaret, caretPos));
+                        selectedText = input.substring(prevCaret, caretPos);
+                    } else {
+                        if (!centered) start = x + 12 + this.getTextWidth(vg, input.substring(0, prevCaret));
+                        else
+                            start = x + this.width / 2f - halfTextWidth + this.getTextWidth(vg, input.substring(0, prevCaret));
+                        end = -this.getTextWidth(vg, input.substring(caretPos, prevCaret));
+                        selectedText = input.substring(caretPos, prevCaret);
+                    }
+                }
+            }
+
+
+            if (toggled) {
+                if (!centered) {
+                    RenderManager.drawLine(vg, x + width + 12, (float) y + height / 2f - 10, x + width + 12, (float) y + height / 2f + 10, 1, OneConfigConfig.WHITE);
+                } else {
+                    RenderManager.drawLine(vg, x + this.width / 2f - halfTextWidth + width, (float) y + height / 2f - 10, x + this.width / 2f - halfTextWidth + width, (float) y + height / 2f + 10, 1, OneConfigConfig.WHITE);
+                }
+            }
+
+
+            if (input.equals("")) {
+                if (!centered) {
+                    RenderManager.drawString(vg, defaultText, x + 12, y + height / 2f + 1, color, 14f, Fonts.INTER_REGULAR);
+                } else {
+                    RenderManager.drawString(vg, defaultText, x + this.width / 2f - halfTextWidth, y + height / 2f + 1, color, 14f, Fonts.INTER_REGULAR);
+                }
+            }
+
+            if (!password) {
+                if (!centered) {
+                    RenderManager.drawString(vg, input, x + 12, y + height / 2f + 1, color, 14f, Fonts.INTER_REGULAR);
+                } else {
+                    RenderManager.drawString(vg, input, x + this.width / 2f - halfTextWidth, y + height / 2f + 1, color, 14f, Fonts.INTER_REGULAR);
+                }
+            } else {
+                RenderManager.drawString(vg, s.toString(), x + 12, y + height / 2f + 1, color, 14f, Fonts.INTER_REGULAR);
+            }
+            ScissorManager.resetScissor(vg, scissor);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    public void keyTyped(char c, int key) {
+        try {
+            if (toggled) {
+                if (GuiScreen.isKeyComboCtrlC(key)) {
+                    if (selectedText != null && start != 0f && end != 0f) {
+                        Toolkit.getDefaultToolkit().getSystemClipboard().setContents(new StringSelection(selectedText), null);
+                    }
+                    return;
+                }
+                if (GuiScreen.isKeyComboCtrlV(key) || key == Keyboard.KEY_INSERT) {
+                    try {
+                        String clip = Toolkit.getDefaultToolkit().getSystemClipboard().getContents(null).getTransferData(DataFlavor.stringFlavor).toString();
+                        input = input.substring(0, caretPos) + clip + input.substring(caretPos);
+                        caretPos = caretPos + clip.length();
+                        return;
+                    } catch (Exception e) {
+                        e.printStackTrace();
+                    }
+                }
+                if (key == Keyboard.KEY_DELETE) {
+                    input = "";
+                }
+
+
+                if (GuiScreen.isCtrlKeyDown()) {
+                    if (key == Keyboard.KEY_BACK && !GuiScreen.isKeyComboCtrlX(key)) {
+                        try {
+                            input = input.substring(0, input.lastIndexOf(" "));
+                            caretPos = input.length();
+                        } catch (Exception e) {
+                            input = "";
+                            caretPos = 0;
+                        }
+                        return;
+                    }
+                    if (GuiScreen.isKeyComboCtrlA(key)) {
+                        prevCaret = 0;
+                        caretPos = input.length();
+                        start = !centered ? x + 12 : x + this.width / 2f - this.getTextWidth(vg, input) / 2f;
+                        selectedText = input;
+                        end = this.getTextWidth(vg, input);
+                        return;
+                    }
+                    if (GuiScreen.isKeyComboCtrlX(key)) {
+                        if (selectedText != null && start != 0f && end != 0f) {
+                            Toolkit.getDefaultToolkit().getSystemClipboard().setContents(new StringSelection(selectedText), null);
+                            key = Keyboard.KEY_BACK;
+                        } else return;
+                    }
+                    if (key == Keyboard.KEY_LEFT) {
+                        caretPos = input.substring(0, caretPos).lastIndexOf(' ') + 1;
+                    }
+                    if (key == Keyboard.KEY_RIGHT) {
+                        caretPos = input.indexOf(' ', caretPos);
+                        if (caretPos == -1) caretPos = input.length();
+                    }
+
+                }
+                if (key == Keyboard.KEY_BACK) {
+                    if (input.length() > 0) {
+                        if (start != 0f && end != 0f) {
+                            start = 0f;
+                            end = 0f;
+                            if (caretPos > prevCaret) {
+                                input = input.substring(0, prevCaret) + input.substring(caretPos);
+                                caretPos = prevCaret;
+                            }
+                            if (caretPos < prevCaret) {
+                                input = input.substring(0, caretPos) + input.substring(prevCaret);
+                            }
+                            return;
+                        }
+                        if (caretPos == input.length()) {
+                            input = input.substring(0, input.length() - 1);
+                        } else {
+                            input = input.substring(0, caretPos - 1) + input.substring(caretPos);
+                        }
+                        caretPos--;
+                    }
+                    return;
+                }
+                if (key == Keyboard.KEY_TAB) {
+                    if (onlyNums) return;
+                    input += "    ";
+                    caretPos += 4;
+                    return;
+                }
+
+                if (key == Keyboard.KEY_RIGHT) {
+                    caretPos++;
+                    if (caretPos > input.length()) {
+                        caretPos = input.length();
+                    }
+                    if (start != 0f && end != 0f) {
+                        start = 0f;
+                        end = 0f;
+                    }
+                    return;
+                }
+                if (key == Keyboard.KEY_LEFT) {
+                    caretPos--;
+                    if (caretPos < 0) {
+                        caretPos = 0;
+                    }
+                    if (start != 0f && end != 0f) {
+                        start = 0f;
+                        end = 0f;
+                    }
+                    return;
+                }
+                if (key == Keyboard.KEY_UP || key == 201) { // 201 = page up
+                    caretPos = 0;
+                    if (start != 0f && end != 0f) {
+                        start = 0f;
+                        end = 0f;
+                    }
+                    return;
+                }
+                if (key == Keyboard.KEY_DOWN || key == 209) {     // 209 = page down
+                    caretPos = input.length();
+                    if (start != 0f && end != 0f) {
+                        start = 0f;
+                        end = 0f;
+                    }
+                    return;
+                }
+
+
+                if (key == Keyboard.KEY_RETURN) {
+                    toggled = false;
+                    if (start != 0f && end != 0f) {
+                        start = 0f;
+                        end = 0f;
+                    }
+                }
+                if (key == Keyboard.KEY_END) {
+                    toggled = false;
+                }
+
+
+                if (key == Keyboard.KEY_LCONTROL || key == Keyboard.KEY_RCONTROL || key == Keyboard.KEY_LMENU || key == Keyboard.KEY_RMENU || key == Keyboard.KEY_LMETA || key == Keyboard.KEY_RMETA || key == Keyboard.KEY_LSHIFT || key == Keyboard.KEY_RSHIFT || key == Keyboard.KEY_RETURN || key == Keyboard.KEY_CAPITAL || key == 221 || key == Keyboard.KEY_HOME) {
+                    return;
+                }
+                if (onlyNums) {
+                    if (!Character.isDigit(c) && key != 52) return;
+                }
+                if (!Character.isDefined(key)) return;
+                if (!Character.isDefined(c)) return;
+                if (GuiScreen.isCtrlKeyDown()) return;
+                if (ChatAllowedCharacters.isAllowedCharacter(c)) {
+                    if (selectedText != null) {
+                        if (caretPos > prevCaret) {
+                            input = input.substring(0, prevCaret) + input.substring(prevCaret, caretPos);
+                            caretPos = prevCaret;
+                        } else {
+                            input = input.substring(0, caretPos) + input.substring(caretPos, prevCaret);
+                        }
+                        if (selectedText.equals(input)) {
+                            input = "";
+                        }
+                        selectedText = null;
+                    }
+                    input = addCharAtPoint(caretPos, c);
+                    caretPos++;
+                }
+                if (start != 0f && end != 0f) {
+                    start = 0f;
+                    end = 0f;
+                }
+
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    private @NotNull String addCharAtPoint(int index, char c) {
+        return input.substring(0, index) + c + input.substring(index);
+    }
+
+    @Override
+    public void onClick() {
+        toggled = true;
+    }
+
+    private void onDoubleClick() {
+        prevCaret = input.substring(0, caretPos).lastIndexOf(' ') + 1;
+        caretPos = input.indexOf(' ', caretPos);
+        if (caretPos == -1) caretPos = input.length();
+        selectedText = input.substring(prevCaret, caretPos);
+        if (!centered) start = x + 12 + this.getTextWidth(vg, input.substring(0, prevCaret));
+        else
+            start = x + this.width / 2f - this.getTextWidth(vg, input) / 2f + this.getTextWidth(vg, input.substring(0, prevCaret));
+        end = this.getTextWidth(vg, input.substring(prevCaret, caretPos));
+    }
+
+    private int calculatePos(int pos) {
+        if (centered) pos -= 12;
+        String s1 = "";
+        int i;
+        for (char c : input.toCharArray()) {
+            if (pos - x - 12 < 0) {
+                return 0;
+            }
+            if (pos - x - 12 > this.getTextWidth(vg, input)) {
+                return input.length();
+            }
+            s1 += c;
+            i = (int) this.getTextWidth(vg, s1);
+            if (i >= pos - x - 16) {
+                return s1.length();
+            }
+        }
+        return 0;
+    }
+
+    private float getTextWidth(long vg, String s) {
+        if (password) {
+            StringBuilder s1 = new StringBuilder();
+            while (s1.length() < s.length()) {
+                s1.append('*');
+            }
+            return RenderManager.getTextWidth(vg, s1.toString(), 14.0f, Fonts.INTER_REGULAR);
+        } else {
+            return RenderManager.getTextWidth(vg, s, 14.0f, Fonts.INTER_REGULAR);
+        }
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
new file mode 100644
index 0000000..990ce07
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
@@ -0,0 +1,61 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import cc.polyfrost.oneconfig.utils.MathUtils;
+
+import java.awt.*;
+import java.lang.reflect.Field;
+
+public class ConfigCheckbox extends BasicOption {
+    private int color;
+    private float percentOn = 0f;
+
+    public ConfigCheckbox(Field field, String name, int size) {
+        super(field, name, size);
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        boolean toggled = false;
+        try {
+            toggled = (boolean) get();
+        } catch (IllegalAccessException ignored) {
+        }
+        boolean hover = InputUtils.isAreaHovered(x, y + 4, 24, 24);
+
+        boolean clicked = InputUtils.isClicked() && hover;
+        if (clicked) {
+            toggled = !toggled;
+            try {
+                set(toggled);
+            } catch (IllegalAccessException e) {
+                System.err.println("failed to write config value: class=" + this + " fieldWatching=" + field + " valueWrite=" + toggled);
+                e.printStackTrace();
+            }
+        }
+        if (percentOn != 1f) {       // performance
+            RenderManager.drawRoundedRect(vg, x, y + 4, 24, 24, color, 6f);
+            RenderManager.drawHollowRoundRect(vg, x, y + 4, 23.5f, 23.5f, OneConfigConfig.GRAY_300, 6f, 1f);        // the 0.5f is to make it look better ok
+        }
+        color = ColorUtils.smoothColor(color, OneConfigConfig.GRAY_600, OneConfigConfig.GRAY_400, hover, 40f);
+        RenderManager.drawString(vg, name, x + 32, y + 17, OneConfigConfig.WHITE_90, 14f, Fonts.INTER_MEDIUM);
+        percentOn = MathUtils.clamp(MathUtils.easeOut(percentOn, toggled ? 1f : 0f, 5f));
+        if (percentOn == 0f) return;
+        if (percentOn != 1f) {
+            RenderManager.drawImage(vg, Images.CHECKMARK, x, y + 4, 24, 24, new Color(1f, 1f, 1f, percentOn).getRGB());
+        } else {       // performance, that color could cause havoc am I right definitely
+            RenderManager.drawImage(vg, Images.CHECKMARK, x, y + 4, 24, 24);
+        }
+    }
+
+    @Override
+    public int getHeight() {
+        return 32;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigColorElement.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigColorElement.java
new file mode 100644
index 0000000..2c89133
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigColorElement.java
@@ -0,0 +1,115 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.gui.OneConfigGui;
+import cc.polyfrost.oneconfig.gui.elements.BasicElement;
+import cc.polyfrost.oneconfig.gui.elements.ColorSelector;
+import cc.polyfrost.oneconfig.gui.elements.TextInputField;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+
+import java.awt.*;
+import java.lang.reflect.Field;
+
+public class ConfigColorElement extends BasicOption {
+    private float alpha;
+    private Color color = Color.BLUE;
+    private String hex;
+
+    private final TextInputField hexField = new TextInputField(104, 32, "", false, false);
+    private final TextInputField alphaField = new TextInputField(72, 32, "", false, false);
+    private final BasicElement element = new BasicElement(64, 32, false);
+
+    public ConfigColorElement(Field field, String name, int size) {
+        super(field, name, size);
+        hexField.setCentered(true);
+        alphaField.setCentered(true);
+        alphaField.onlyAcceptNumbers(true);
+        String buf = Integer.toHexString(color.getRGB());
+        hex = "#"+buf.substring(buf.length()-6);
+    }
+
+    @Override
+    public int getHeight() {
+        return 32;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        RenderManager.drawString(vg, name, x, y + 15, OneConfigConfig.WHITE_90, 18f, Fonts.INTER_MEDIUM);
+        hexField.draw(vg, x + 240, y);
+
+        if (!alphaField.isToggled()) alphaField.setInput(String.format("%.01f", alpha * 100f) + "%");
+        alphaField.setErrored(false);
+        if(alphaField.isToggled()) {
+            try {
+                float input = Float.parseFloat(alphaField.getInput());
+                if (input < 0f) {
+                    alphaField.setErrored(true);
+                    input = 100f;
+                }
+                if (input > 100f) {
+                    alphaField.setErrored(true);
+                    input = 100f;
+                }
+                alpha = input / 100f;
+            } catch (NumberFormatException e) {
+                alphaField.setErrored(true);
+            }
+        }
+        alphaField.draw(vg, x + 352, y);
+
+
+
+        if (!hexField.isToggled()) hexField.setInput(hex);
+        hexField.setErrored(false);
+        if(hexField.isToggled()) {
+            try {
+                color = HexToColor(hexField.getInput());
+                String buf = Integer.toHexString(color.getRGB());
+                hex = "#"+buf.substring(buf.length()-6);
+            } catch (NumberFormatException e) {
+                hexField.setErrored(true);
+            }
+        }
+        hexField.draw(vg, x + 352, y);
+
+        element.update(x + 432, y);
+        RenderManager.drawRoundedRect(vg, x + 432, y, 64, 32, OneConfigConfig.GRAY_300, 12f);
+        RenderManager.drawImage(vg, Images.COLOR_BASE, x + 948, y + 4, 56, 24, color.getRGB());
+        if(element.isClicked() && !element.isToggled()) {
+            OneConfigGui.INSTANCE.initColorSelector(new ColorSelector(color, InputUtils.mouseX(), InputUtils.mouseY()));
+        }
+        if(element.isToggled() && element.isClicked()) {
+            color = OneConfigGui.INSTANCE.closeColorSelector();
+            alpha = color.getAlpha() / 255f;
+            String buf = Integer.toHexString(color.getRGB());
+            hex = "#"+buf.substring(buf.length()-6);
+        }
+
+    }
+
+    // thanks stack overflow
+    public static Color HexToColor(String hex) throws NumberFormatException {
+        hex = hex.replace("#", "");
+        switch (hex.length()) {
+            case 6:
+                return new Color(
+                        Integer.valueOf(hex.substring(0, 2), 16),
+                        Integer.valueOf(hex.substring(2, 4), 16),
+                        Integer.valueOf(hex.substring(4, 6), 16));
+            case 8:
+                return new Color(
+                        Integer.valueOf(hex.substring(0, 2), 16),
+                        Integer.valueOf(hex.substring(2, 4), 16),
+                        Integer.valueOf(hex.substring(4, 6), 16),
+                        Integer.valueOf(hex.substring(6, 8), 16));
+        }
+        throw new NumberFormatException("Invalid hex string: " + hex);
+    }
+
+
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
new file mode 100644
index 0000000..c867409
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
@@ -0,0 +1,167 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import org.lwjgl.input.Mouse;
+import org.lwjgl.nanovg.NanoVG;
+
+import java.awt.*;
+import java.lang.reflect.Field;
+import java.util.Arrays;
+
+public class ConfigDropdown extends BasicOption { // TODO: chose where dividers are somehow idfk please send help
+    private final String[] options;
+    private int backgroundColor = OneConfigConfig.GRAY_500;
+    private boolean opened = false;
+    private int[] dividers;
+
+    public ConfigDropdown(Field field, String name, int size, String[] options, int [] dividers) {
+        super(field, name, size);
+        this.options = options;
+        this.dividers = dividers;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        RenderManager.drawString(vg, name, x, y + 16, OneConfigConfig.WHITE_90, 14f, Fonts.INTER_MEDIUM);
+
+        boolean hovered;
+        if (size == 1) hovered = InputUtils.isAreaHovered(x + 224, y, 256, 32);
+        else hovered = InputUtils.isAreaHovered(x + 352, y, 640, 32);
+
+        if (hovered && InputUtils.isClicked() || opened && InputUtils.isClicked() &&
+                (size == 1 && !InputUtils.isAreaHovered(x + 224, y + 40, 256, options.length * 32 + 4) ||
+                        size == 2 && !InputUtils.isAreaHovered(x + 352, y + 40, 640, options.length * 32 + 4)))
+            opened = !opened;
+        if (opened) return;
+
+        backgroundColor = ColorUtils.smoothColor(backgroundColor, OneConfigConfig.GRAY_500, OneConfigConfig.GRAY_400, hovered, 100);
+        int selected = 0;
+        try {
+            selected = (int) get();
+        } catch (IllegalAccessException ignored) {
+        }
+
+        if (hovered && Mouse.isButtonDown(0)) NanoVG.nvgGlobalAlpha(vg, 0.8f);
+        if (size == 1) {
+            RenderManager.drawRoundedRect(vg, x + 224, y, 256, 32, backgroundColor, 12);
+            RenderManager.drawString(vg, options[selected], x + 236, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.INTER_MEDIUM);
+            RenderManager.drawRoundedRect(vg, x + 452, y + 4, 24, 24, OneConfigConfig.BLUE_600, 8);
+            RenderManager.drawImage(vg, Images.DROPDOWN_ARROW, x + 459, y + 8, 10, 6);
+            NanoVG.nvgTranslate(vg, x + 469, y + 24);
+        } else {
+            RenderManager.drawRoundedRect(vg, x + 352, y, 640, 32, backgroundColor, 12);
+            RenderManager.drawString(vg, options[selected], x + 364, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.INTER_MEDIUM);
+            RenderManager.drawRoundedRect(vg, x + 964, y + 4, 24, 24, OneConfigConfig.BLUE_600, 8);
+            RenderManager.drawImage(vg, Images.DROPDOWN_ARROW, x + 971, y + 8, 10, 6);
+            NanoVG.nvgTranslate(vg, x + 981, y + 24);
+        }
+        NanoVG.nvgRotate(vg, (float) Math.toRadians(180));
+        RenderManager.drawImage(vg, Images.DROPDOWN_ARROW, 0, 0, 10, 6);
+        NanoVG.nvgResetTransform(vg);
+        NanoVG.nvgGlobalAlpha(vg, 1f);
+    }
+
+    @Override
+    public void drawLast(long vg, int x, int y) {
+        if (!opened) return;
+
+        boolean hovered;
+        if (size == 1) hovered = InputUtils.isAreaHovered(x + 224, y, 256, 32);
+        else hovered = InputUtils.isAreaHovered(x + 352, y, 640, 32);
+
+        backgroundColor = ColorUtils.smoothColor(backgroundColor, OneConfigConfig.BLUE_800, OneConfigConfig.BLUE_700, hovered, 100);
+        int selected = 0;
+        try {
+            selected = (int) get();
+        } catch (IllegalAccessException ignored) {
+        }
+
+        if (hovered && Mouse.isButtonDown(0)) NanoVG.nvgGlobalAlpha(vg, 0.8f);
+        if (size == 1) {
+            RenderManager.drawRoundedRect(vg, x + 224, y, 256, 32, backgroundColor, 12);
+            RenderManager.drawString(vg, options[selected], x + 236, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.INTER_MEDIUM);
+
+            NanoVG.nvgGlobalAlpha(vg, 1f);
+            RenderManager.drawRoundedRect(vg, x + 224, y + 40, 256, options.length * 32 + 4, OneConfigConfig.GRAY_700, 12);
+            RenderManager.drawHollowRoundRect(vg, x + 224, y + 40, 256, options.length * 32 + 4, new Color(204, 204, 204, 77).getRGB(), 8, 1);
+            int optionY = y + 56;
+            for (String option : options) {
+                int color = OneConfigConfig.WHITE_80;
+                boolean optionHovered = InputUtils.isAreaHovered(x + 224, optionY - 16, 252, 32);
+                if (optionHovered && Mouse.isButtonDown(0)) {
+                    RenderManager.drawRoundedRect(vg, x + 228, optionY - 12, 248, 28, OneConfigConfig.BLUE_700_80, 8);
+                } else if (optionHovered) {
+                    RenderManager.drawRoundedRect(vg, x + 228, optionY - 12, 248, 28, OneConfigConfig.BLUE_700, 8);
+                    color = OneConfigConfig.WHITE;
+                }
+                if (optionHovered && InputUtils.isClicked()) {
+                    try {
+                        set(Arrays.asList(options).indexOf(option));
+                    } catch (IllegalAccessException ignored) {
+                    }
+                    opened = false;
+                }
+
+                RenderManager.drawString(vg, option, x + 240, optionY + 4, color, 14, Fonts.INTER_MEDIUM);
+                if (!options[options.length - 1].equals(option))
+                    RenderManager.drawLine(vg, x + 232, optionY + 18, x + 472, optionY + 18, 1, new Color(204, 204, 204, 77).getRGB());
+                optionY += 32;
+            }
+
+            if (hovered && Mouse.isButtonDown(0)) NanoVG.nvgGlobalAlpha(vg, 0.8f);
+            RenderManager.drawRoundedRect(vg, x + 452, y + 4, 24, 24, OneConfigConfig.BLUE_600, 8);
+            RenderManager.drawImage(vg, Images.DROPDOWN_ARROW, x + 459, y + 8, 10, 6);
+            NanoVG.nvgTranslate(vg, x + 469, y + 24);
+        } else {
+            RenderManager.drawRoundedRect(vg, x + 352, y, 640, 32, backgroundColor, 12);
+            RenderManager.drawString(vg, options[selected], x + 364, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.INTER_MEDIUM);
+
+            RenderManager.drawRoundedRect(vg, x + 352, y + 40, 640, options.length * 32 + 4, OneConfigConfig.GRAY_700, 12);
+            RenderManager.drawHollowRoundRect(vg, x + 352, y + 40, 640, options.length * 32 + 4, new Color(204, 204, 204, 77).getRGB(), 8, 1);
+            int optionY = y + 56;
+            for (String option : options) {
+                int color = OneConfigConfig.WHITE_80;
+                boolean optionHovered = InputUtils.isAreaHovered(x + 352, optionY - 16, 640, 32);
+                if (optionHovered && Mouse.isButtonDown(0)) {
+                    RenderManager.drawRoundedRect(vg, x + 356, optionY - 12, 632, 28, OneConfigConfig.BLUE_700_80, 8);
+                } else if (optionHovered) {
+                    RenderManager.drawRoundedRect(vg, x + 356, optionY - 12, 632, 28, OneConfigConfig.BLUE_700, 8);
+                    color = OneConfigConfig.WHITE;
+                }
+
+                RenderManager.drawString(vg, option, x + 368, optionY + 4, color, 14, Fonts.INTER_MEDIUM);
+                if (!options[options.length - 1].equals(option))
+                    RenderManager.drawLine(vg, x + 360, optionY + 18, x + 984, optionY + 18, 1, new Color(204, 204, 204, 77).getRGB());
+
+                if (optionHovered && InputUtils.isClicked()) {
+                    try {
+                        set(Arrays.asList(options).indexOf(option));
+                    } catch (IllegalAccessException ignored) {
+                    }
+                    opened = false;
+                }
+                optionY += 32;
+            }
+
+            if (hovered && Mouse.isButtonDown(0)) NanoVG.nvgGlobalAlpha(vg, 0.8f);
+            RenderManager.drawRoundedRect(vg, x + 964, y + 4, 24, 24, OneConfigConfig.BLUE_600, 8);
+            RenderManager.drawImage(vg, Images.DROPDOWN_ARROW, x + 971, y + 8, 10, 6);
+            NanoVG.nvgTranslate(vg, x + 981, y + 24);
+        }
+        NanoVG.nvgRotate(vg, (float) Math.toRadians(180));
+        RenderManager.drawImage(vg, Images.DROPDOWN_ARROW, 0, 0, 10, 6);
+        NanoVG.nvgResetTransform(vg);
+        NanoVG.nvgGlobalAlpha(vg, 1f);
+    }
+
+    @Override
+    public int getHeight() {
+        return 32;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDualOption.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDualOption.java
new file mode 100644
index 0000000..ed908b6
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDualOption.java
@@ -0,0 +1,53 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import cc.polyfrost.oneconfig.utils.MathUtils;
+
+import java.lang.reflect.Field;
+
+public class ConfigDualOption extends BasicOption {
+    private float percentMove = 0f;
+    private final String left, right;
+
+    public ConfigDualOption(Field field, String name, int size, String[] options) {
+        super(field, name, size);
+        this.left = options[0];
+        this.right = options[1];
+
+    }
+
+    @Override
+    public int getHeight() {
+        return 32;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        boolean toggled = false;
+        try {
+            toggled = (boolean) get();
+        } catch (IllegalAccessException ignored) {
+        }
+        RenderManager.drawString(vg, name, x, y + 16, OneConfigConfig.WHITE_90, 14f, Fonts.INTER_MEDIUM);
+        RenderManager.drawRoundedRect(vg, x + 226, y, 256, 32, OneConfigConfig.GRAY_500, 12f);
+        int x1 = (int) (x + 228 + (percentMove * 128));
+        RenderManager.drawRoundedRect(vg, x1, y + 2, 124, 28, OneConfigConfig.BLUE_600, 10f);
+        RenderManager.drawString(vg, left, x + 290 - RenderManager.getTextWidth(vg, left, 12f, Fonts.INTER_MEDIUM) / 2, y + 17, OneConfigConfig.WHITE_90, 12f, Fonts.INTER_MEDIUM);
+        RenderManager.drawString(vg, right, x + 418 - RenderManager.getTextWidth(vg, right, 12f, Fonts.INTER_MEDIUM) / 2, y + 17, OneConfigConfig.WHITE_90, 12f, Fonts.INTER_MEDIUM);
+
+        if (InputUtils.isAreaClicked(x + 226, y, 256, 32)) {
+            toggled = !toggled;
+            try {
+                set(toggled);
+            } catch (IllegalAccessException e) {
+                System.err.println("failed to write config value: class=" + this + " fieldWatching=" + field + " valueWrite=" + toggled);
+                e.printStackTrace();
+            }
+        }
+        percentMove = MathUtils.clamp(MathUtils.easeOut(percentMove, toggled ? 1f : 0f, 10));
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
new file mode 100644
index 0000000..81e1dd0
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
@@ -0,0 +1,57 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.data.OptionPage;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.gui.OneConfigGui;
+import cc.polyfrost.oneconfig.gui.pages.ModConfigPage;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import org.lwjgl.input.Mouse;
+import org.lwjgl.nanovg.NanoVG;
+
+import java.lang.reflect.Field;
+
+public class ConfigPageButton extends BasicOption {
+    public final OptionPage page;
+    public final String description;
+    private int backgroundColor = OneConfigConfig.GRAY_500;
+
+    public ConfigPageButton(Field field, String name, String description, OptionPage page) {
+        super(field, name, 2);
+        this.description = description;
+        this.page = page;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        int height = description.equals("") ? 64 : 96;
+        boolean hovered = InputUtils.isAreaHovered(x - 2, y, 1024, height);
+        boolean clicked = InputUtils.isAreaClicked(x - 2, y, 1024, height);
+        backgroundColor = ColorUtils.smoothColor(backgroundColor, OneConfigConfig.GRAY_500, OneConfigConfig.GRAY_400, hovered, 100);
+
+        if (hovered && Mouse.isButtonDown(0)) NanoVG.nvgGlobalAlpha(vg, 0.8f);
+
+        RenderManager.drawRoundedRect(vg, x - 16, y, 1024, height, backgroundColor, 20);
+        RenderManager.drawString(vg, name, x + 10, y + 32, OneConfigConfig.WHITE_90, 24, Fonts.INTER_MEDIUM);
+        if (!description.equals(""))
+            RenderManager.drawString(vg, name, x + 10, y + 70, OneConfigConfig.WHITE_90, 14, Fonts.INTER_MEDIUM);
+        RenderManager.drawImage(vg, Images.CHEVRON_ARROW, x + 981f, y + (description.equals("") ? 20f : 36f), 13, 22);
+
+        if (clicked) OneConfigGui.INSTANCE.openPage(new ModConfigPage(page));
+        NanoVG.nvgGlobalAlpha(vg, 1f);
+    }
+
+    @Override
+    public int getHeight() {
+        return description.equals("") ? 64 : 96;
+    }
+
+    @Override
+    public boolean hasHalfSize() {
+        return false;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSlider.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSlider.java
new file mode 100644
index 0000000..69cb887
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSlider.java
@@ -0,0 +1,184 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import cc.polyfrost.oneconfig.utils.MathUtils;
+import cc.polyfrost.oneconfig.gui.elements.BasicElement;
+import cc.polyfrost.oneconfig.gui.elements.TextInputField;
+import org.lwjgl.input.Mouse;
+import org.lwjgl.nanovg.NanoVG;
+
+import java.lang.reflect.Field;
+
+public class ConfigSlider extends BasicOption {
+    private final BasicElement slideYBoi = new BasicElement(24, 24, false);
+    private final TextInputField inputField = new TextInputField(84, 24, "", false, false);
+    private final BasicElement upArrow = new BasicElement(12, 14, false);
+    private final BasicElement downArrow = new BasicElement(12, 14, false);
+    private final float min, max;
+    private int steps = 0;
+    private int colorTop, colorBottom;
+    private boolean isFloat = true;
+    private Float prevAsNum = null;
+    private final int step;
+
+    public ConfigSlider(Field field, String name, int size, float min, float max, int step) {
+        super(field, name, size);
+        this.min = min;
+        this.max = max;
+        this.step = step;
+        if (step > 0) {
+            steps = (int) ((max - min) / step);
+        }
+        slideYBoi.setCustomHitbox(28, 8);
+        inputField.onlyAcceptNumbers(true);
+        inputField.setCentered(true);
+    }
+
+    @Override
+    public int getHeight() {
+        return 32;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        float value = 0;
+        try {
+            Object object = get();
+            if (object instanceof Integer)
+                isFloat = false;
+            if (isFloat) value = (float) object;
+            else value = (int) object;
+            if (prevAsNum == null) prevAsNum = value;
+        } catch (IllegalAccessException ignored) {
+        }
+        float current = MathUtils.clamp((value - min) / (max - min));
+
+        float currentAsNum = current * (max - min) + min;
+        if (!inputField.isToggled()) inputField.setInput(String.format("%.01f", currentAsNum));
+        inputField.setErrored(false);
+        if (inputField.isToggled()) {
+            try {
+                float input = Float.parseFloat(inputField.getInput());
+                if (input < min) {
+                    inputField.setErrored(true);
+                    input = min;
+                }
+                if (input > max) {
+                    inputField.setErrored(true);
+                    input = max;
+                }
+                if (steps == 0) {
+                    current = MathUtils.clamp((input - min) / (max - min));
+                } else {
+                    current = toNearestStep(MathUtils.clamp((input - min) / (max - min)));
+                }
+            } catch (NumberFormatException ignored) {
+                inputField.setErrored(true);
+            }
+        }
+        inputField.draw(vg, x + 892, y);
+
+        RenderManager.drawString(vg, name, x, y + 17, OneConfigConfig.WHITE_90, 14f, Fonts.INTER_MEDIUM);
+        RenderManager.drawRoundedRect(vg, x + 352, y + 13, 512, 6, OneConfigConfig.GRAY_300, 4f);
+        slideYBoi.update(x + 340 + (int) (current * 512), y + 4);
+        if (steps != 0) {
+            for (float i = 0; i <= 1.005f; i += 1f / steps) {         // sometimes it's just more than 1, so we add a little
+                int color = current > i ? OneConfigConfig.BLUE_500 : OneConfigConfig.GRAY_300;
+                RenderManager.drawRoundedRect(vg, x + 351 + (int) (i * 512), y + 9, 4, 14, color, 2f);
+            }
+        }
+        RenderManager.drawRoundedRect(vg, x + 352, y + 13, (int) (current * 512), 6, OneConfigConfig.BLUE_500, 4f);
+        if (steps == 0)
+            RenderManager.drawRoundedRect(vg, x + 340 + (int) (current * 512), y + 4, 24, 24, OneConfigConfig.WHITE, 12f);
+        else
+            RenderManager.drawRoundedRect(vg, x + 346 + (int) (current * 512), y + 4, 8, 24, OneConfigConfig.WHITE, 4f);
+
+        int mouseX = InputUtils.mouseX() - (x + 352);
+        if (InputUtils.isAreaClicked(x + 332, y + 9, 542, 10) && !slideYBoi.isHovered()) {
+            if (steps == 0) {
+                current = MathUtils.clamp(mouseX / 512f);
+            } else current = MathUtils.clamp(toNearestStep(mouseX / 512f));
+        }
+        if (slideYBoi.isHovered() && Mouse.isButtonDown(0)) {
+            if (steps == 0) {
+                current = MathUtils.clamp(mouseX / 512f);
+            } else current = MathUtils.clamp(toNearestStep(mouseX / 512f));
+        }
+        currentAsNum = current * (max - min) + min;
+
+        RenderManager.drawRoundedRect(vg, x + 980, y, 12, 28, OneConfigConfig.GRAY_500, 6f);
+        upArrow.update(x + 980, y);
+        downArrow.update(x + 980, y + 14);
+        if (current == 1f) colorTop = OneConfigConfig.GRAY_500_80;
+        if (current == 0f) colorBottom = OneConfigConfig.GRAY_500_80;
+        colorTop = ColorUtils.getColor(colorTop, 2, upArrow.isHovered(), upArrow.isClicked());
+        colorBottom = ColorUtils.getColor(colorBottom, 2, downArrow.isHovered(), downArrow.isClicked());
+        if (upArrow.isClicked()) {
+            currentAsNum += step == 0 ? 1 : step;
+            current = MathUtils.clamp((currentAsNum - min) / (max - min));
+        }
+        if (downArrow.isClicked()) {
+            currentAsNum -= step == 0 ? 1 : step;
+            current = MathUtils.clamp((currentAsNum - min) / (max - min));
+        }
+        if (current == 1f) NanoVG.nvgGlobalAlpha(vg, 0.3f);
+        RenderManager.drawRoundedRectVaried(vg, x + 980, y, 12, 14, colorTop, 6f, 6f, 0f, 0f);
+        RenderManager.drawImage(vg, Images.UP_ARROW, x + 981, y + 2, 10, 10);
+        if (current == 1f) NanoVG.nvgGlobalAlpha(vg, 1f);
+
+        if (current == 0f) NanoVG.nvgGlobalAlpha(vg, 0.3f);
+        RenderManager.drawRoundedRectVaried(vg, x + 980, y + 14, 12, 14, colorBottom, 0f, 0f, 6f, 6f);
+        NanoVG.nvgTranslate(vg, x + 991, y + 25);
+        NanoVG.nvgRotate(vg, (float) Math.toRadians(180));
+        RenderManager.drawImage(vg, Images.UP_ARROW, 0, 0, 10, 10);
+        NanoVG.nvgResetTransform(vg);
+        NanoVG.nvgGlobalAlpha(vg, 1f);
+
+        if (currentAsNum != prevAsNum) {
+            try {
+                if (isFloat) set(currentAsNum);
+                else set(Math.round(currentAsNum));
+            } catch (IllegalAccessException ignored) {
+            }
+            prevAsNum = currentAsNum;
+        }
+    }
+
+    private float toNearestStep(float input) {
+        float stepF = 1f / steps;
+        float stepAbove = 1f, stepBelow = 0f;
+        for (float a = 0f; a <= 1f; a += stepF) {
+            if (a > input) {
+                stepAbove = a;
+                break;
+            }
+        }
+        for (float a = 1f; a >= 0f; a -= stepF) {
+            if (a <= input) {
+                stepBelow = a;
+                break;
+            }
+        }
+        if (stepAbove - input > input - stepBelow) {
+            return stepBelow;
+        } else {
+            return stepAbove;
+        }
+    }
+
+    @Override
+    public boolean hasHalfSize() {
+        return false;
+    }
+
+    @Override
+    public void keyTyped(char key, int keyCode) {
+        inputField.keyTyped(key, keyCode);
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
new file mode 100644
index 0000000..01e2f14
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
@@ -0,0 +1,54 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import cc.polyfrost.oneconfig.utils.MathUtils;
+
+import java.lang.reflect.Field;
+
+public class ConfigSwitch extends BasicOption {
+    private int color;
+    private float percentOn = 0f;
+
+    public ConfigSwitch(Field field, String name, int size) {
+        super(field, name, size);
+
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        boolean toggled = false;
+        try {
+            toggled = (boolean) get();
+        } catch (IllegalAccessException ignored) {
+        }
+        int x2 = x + 3 + (int) (percentOn * 18);
+        color = ColorUtils.smoothColor(color, OneConfigConfig.GRAY_400, OneConfigConfig.BLUE_500, toggled, 20f);
+        if (color == -15123643) {
+            color = OneConfigConfig.GRAY_400;
+        }
+        RenderManager.drawRoundedRect(vg, x, y + 4, 42, 24, color, 12f);
+        RenderManager.drawRoundedRect(vg, x2, y + 7, 18, 18, OneConfigConfig.WHITE, 9f);
+        RenderManager.drawString(vg, name, x + 50, y + 17, OneConfigConfig.WHITE, 14f, Fonts.INTER_MEDIUM);
+
+        if (InputUtils.isAreaClicked(x, y, 42, 32)) {
+            toggled = !toggled;
+            try {
+                set(toggled);
+            } catch (IllegalAccessException e) {
+                System.err.println("failed to write config value: class=" + this + " fieldWatching=" + field + " valueWrite=" + toggled);
+                e.printStackTrace();
+            }
+        }
+        percentOn = MathUtils.clamp(MathUtils.easeOut(percentOn, toggled ? 1f : 0f, 10));
+    }
+
+    @Override
+    public int getHeight() {
+        return 32;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigTextBox.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigTextBox.java
new file mode 100644
index 0000000..94ed127
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigTextBox.java
@@ -0,0 +1,61 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import cc.polyfrost.oneconfig.gui.elements.TextInputField;
+
+import java.awt.*;
+import java.lang.reflect.Field;
+
+public class ConfigTextBox extends BasicOption {
+    private final boolean secure;
+    private final boolean multiLine;
+    private final TextInputField textField;
+
+    public ConfigTextBox(Field field, String name, int size, String placeholder, boolean secure, boolean multiLine) {
+        super(field, name, size);
+        this.secure = secure;
+        this.multiLine = multiLine;
+        this.textField = new TextInputField(size == 1 && hasHalfSize() ? 256 : 640, multiLine ? 64 : 32, placeholder, multiLine, secure);
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        RenderManager.drawString(vg, name, x, y + 16, OneConfigConfig.WHITE_90, 14, Fonts.INTER_MEDIUM);
+
+        try {
+            String value = (String) get();
+            textField.setInput(value == null ? "" : value);
+        } catch (IllegalAccessException ignored) {
+        }
+
+        textField.draw(vg, x + (size == 1 && hasHalfSize() ? 224 : 352), y);
+
+        if (secure)
+            RenderManager.drawImage(vg, Images.HIDE_EYE, x + 967, y + 7, 18, 18, new Color(196, 196, 196).getRGB());
+        if (secure && InputUtils.isAreaClicked(x + 967, y + 7, 18, 18)) textField.setPassword(!textField.getPassword());
+    }
+
+    @Override
+    public void keyTyped(char key, int keyCode) {
+        textField.keyTyped(key, keyCode);
+        try {
+            set(textField.getInput());
+        } catch (IllegalAccessException ignored) {
+        }
+    }
+
+    @Override
+    public int getHeight() {
+        return multiLine ? 64 : 32;
+    }
+
+    @Override
+    public boolean hasHalfSize() {
+        return !secure && !multiLine;
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigUniSelector.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigUniSelector.java
new file mode 100644
index 0000000..0623f1e
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigUniSelector.java
@@ -0,0 +1,78 @@
+package cc.polyfrost.oneconfig.gui.elements.config;
+
+import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.Scissor;
+import cc.polyfrost.oneconfig.lwjgl.ScissorManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.InputUtils;
+import cc.polyfrost.oneconfig.utils.MathUtils;
+import org.lwjgl.nanovg.NanoVG;
+
+import java.lang.reflect.Field;
+
+public class ConfigUniSelector extends BasicOption {
+    private final String[] options;
+    private float percentMove = 1f;
+    private int previous = -1;
+
+    public ConfigUniSelector(Field field, String name, int size, String[] options) {
+        super(field, name, size);
+        this.options = options;
+    }
+
+    @Override
+    public int getHeight() {
+        return 32;
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        int selected = 0;
+        try {
+            selected = (int) get();
+        } catch (IllegalAccessException ignored) {
+        }
+        String option = options[selected] + " " + (selected + 1) + "/" + options.length;
+        RenderManager.drawString(vg, name, x, y + 16, OneConfigConfig.WHITE_90, 14f, Fonts.INTER_MEDIUM);
+
+        Scissor scissor = ScissorManager.scissor(vg, x + 256, y, 192, 32);
+        if (previous == -1) {
+            RenderManager.drawString(vg, option, x + 352 - RenderManager.getTextWidth(vg, option, 12f, Fonts.INTER_MEDIUM) / 2f, y + 15, OneConfigConfig.WHITE_90, 12f, Fonts.INTER_MEDIUM);
+        } else {
+            String prevOption = options[previous] + " " + (previous + 1) + "/" + options.length;
+            RenderManager.drawString(vg, selected < previous ? prevOption : option, x + 352 - RenderManager.getTextWidth(vg, selected < previous ? prevOption : option, 12f, Fonts.INTER_MEDIUM) / 2f + 192 * percentMove, y + 15, OneConfigConfig.WHITE_90, 12f, Fonts.INTER_MEDIUM);
+            RenderManager.drawString(vg, selected < previous ? option : prevOption, x + 352 - RenderManager.getTextWidth(vg, selected < previous ? option : prevOption, 12f, Fonts.INTER_MEDIUM) / 2f - 192 * (1 - percentMove), y + 15, OneConfigConfig.WHITE_90, 12f, Fonts.INTER_MEDIUM);
+        }
+        ScissorManager.resetScissor(vg, scissor);
+
+        // actual coordinates: 240, 7
+        NanoVG.nvgTranslate(vg, x + 248, y + 21);
+        NanoVG.nvgRotate(vg, (float) Math.toRadians(180));
+        RenderManager.drawImage(vg, Images.CHEVRON_ARROW, 0, 0, 8, 14, OneConfigConfig.BLUE_400);
+        NanoVG.nvgResetTransform(vg);
+        RenderManager.drawImage(vg, Images.CHEVRON_ARROW, x + 456, y + 7, 8, 14, OneConfigConfig.BLUE_400);
+
+        if (InputUtils.isAreaClicked(x + 235, y + 5, 18, 18) && selected > 0) {
+            previous = selected;
+            selected -= 1;
+            try {
+                set(selected);
+            } catch (IllegalAccessException ignored) {
+            }
+            percentMove = selected < previous ? 0f : 1f;
+        } else if (InputUtils.isAreaClicked(x + 451, y + 5, 18, 18) && selected < options.length - 1) {
+            previous = selected;
+            selected += 1;
+            try {
+                set(selected);
+            } catch (IllegalAccessException ignored) {
+            }
+            percentMove = selected < previous ? 0f : 1f;
+        }
+        if (previous != -1) percentMove = MathUtils.easeOut(percentMove, selected < previous ? 1f : 0f, 10);
+        if ((selected < previous ? 1f : 0f) == percentMove) previous = -1;
+    }
+}