start on color selector

16 files changed, 195 insertions, 220 deletions

diff --git a/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java b/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java
index 73f5821..0fe06ab 100644
--- a/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java
+++ b/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java
@@ -17,6 +17,7 @@ public class OneConfigConfig extends Config {
     // TODO i dont know how this works so this is just gonna be here for now
     public static final int TRANSPARENT = new Color(0, 0, 0, 0).getRGB();                // Transparent      // button sidebar normal
 
+    public static final int BLACK = new Color(0,0,0,255).getRGB();                     // Black
     public static final int GRAY_900 = new Color(13, 14, 15, 255).getRGB();           // Gray 900
     public static final int GRAY_900_80 = new Color(13, 14, 15, 204).getRGB();         // Gray 900 80%
     public static final int GRAY_800 = new Color(21, 22, 23, 255).getRGB();           // Gray 800
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java b/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java
index 88bf59b..b3c59b0 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java
@@ -132,9 +132,6 @@ public class OneConfigGui extends GuiScreen {
                 currentPage.scrollWithDraw(vg, (int) (x - pageProgress), y + 72);
             }
             ScissorManager.resetScissor(vg, scissor);
-            if (currentColorSelector != null) {
-                currentColorSelector.draw(vg);
-            }
 
             float breadcrumbX = x + 336;
             for (int i = 0; i < parents.size(); i++) {
@@ -156,6 +153,9 @@ public class OneConfigGui extends GuiScreen {
             long end = System.nanoTime() - start;
             String s = (" draw: " + end / 1000000f + "ms");
             RenderManager.drawString(vg, s, x + 1170, y + 790, OneConfigConfig.GRAY_300, 10f, Fonts.MEDIUM);
+            if (currentColorSelector != null) {
+                currentColorSelector.draw(vg);
+            }
         });
         mouseDown = Mouse.isButtonDown(0);
     }
@@ -165,6 +165,7 @@ public class OneConfigGui extends GuiScreen {
         try {
             super.keyTyped(key, keyCode);
             textInputField.keyTyped(key, keyCode);
+            if(currentColorSelector != null) currentColorSelector.keyTyped(key, keyCode);
             currentPage.keyTyped(key, keyCode);
         } catch (Exception e) {
             System.out.println("this should literally never happen");
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
index 84fda67..4a7fb8c 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
@@ -8,7 +8,7 @@ public class BasicElement {
     protected int width, height;
     protected int colorPalette;
     protected int hitBoxX, hitBoxY;
-    protected final boolean hoverFx;
+    protected boolean hoverFx;
     protected boolean hovered = false;
     protected boolean clicked = false;
     protected boolean toggled = false;
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
index fcd96b2..b972d40 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
@@ -1,266 +1,173 @@
 package cc.polyfrost.oneconfig.gui.elements;
 
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.gui.OneConfigGui;
+import cc.polyfrost.oneconfig.gui.elements.text.NumberInputField;
+import cc.polyfrost.oneconfig.gui.elements.text.TextInputField;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
-import cc.polyfrost.oneconfig.utils.InputUtils;
-import org.lwjgl.input.Mouse;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.Images;
+import cc.polyfrost.oneconfig.utils.MathUtils;
 
 import java.awt.*;
-import java.util.ArrayList;
 
 public class ColorSelector {
+    private final int x;
+    private final int y;
+    private Color color;
+    private float percentMove = 0f;
+    private final BasicElement hsbBtn = new BasicElement(124, 28, 2,true);
+    private final BasicElement rgbBtn = new BasicElement(124, 28, 2,true);
+    private final BasicElement chromaBtn = new BasicElement(124, 28, 2,true);
+    private final BasicElement closeBtn = new BasicElement(32, 32, true);
 
-    public ColorSelector(Color color, int mouseX, int mouseY) {
+    private final BasicElement copyBtn = new BasicElement(32, 32, 2,true);
+    private final BasicElement pasteBtn = new BasicElement(32, 32, 2,true);
+    private final BasicButton guideBtn = new BasicButton(112, 32, "Guide", null, null, 0, BasicButton.ALIGNMENT_CENTER);
 
-    }
+    private final NumberInputField hueInput = new NumberInputField(90, 32, 0, 0, 255, 1);
+    private final NumberInputField saturationInput = new NumberInputField(90, 32, 0, 0, 255, 1);
+    private final NumberInputField brightnessInput = new NumberInputField(90, 32, 0, 0, 100, 1);
+    private final NumberInputField alphaInput = new NumberInputField(90, 32, 0, 0, 100, 1);
+    private final TextInputField hexInput = new TextInputField(88, 32, true, "");
 
-    public void draw(long vg) {
+    private final ColorSlider topSlider = new ColorSlider(384, 0, 255, 127);
+    private final ColorSlider bottomSlider = new ColorSlider(384, 0, 255, 127);
+    private final Slider speedSlider = new Slider(384, 1, 60, 20);
 
-    }
-
-    public Color getColor() {
-
-        return null;
-    }
-}
-
-/*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;
-
+        this.y = mouseY - 776;
     }
 
     public void draw(long vg) {
-        RenderManager.drawRoundedRect(vg, x, y, width, height, OneConfigConfig.GRAY_800, 20f);
+        int width = 416;
+        int height = 768;
+        int mode = 1;
 
-    }
-
-    public Color getColor() {
-        return color;
-    }
-
-
-
-    private class HSBSelector extends ColorSelectorBase {
-
-
-        public HSBSelector(Color color) {
-            super(color);
+        RenderManager.drawHollowRoundRect(vg, x - 3, y - 3, width + 4, height + 4, new Color(204, 204, 204, 77).getRGB(), 20f, 2f);
+        RenderManager.drawRoundedRect(vg, x, y, width, height, OneConfigConfig.GRAY_800, 20f);
+        RenderManager.drawString(vg, "Color Selector", x + 16, y + 32, OneConfigConfig.WHITE_90, 18f, Fonts.SEMIBOLD);
+        closeBtn.draw(vg, x + 368, y + 16);
+        RenderManager.drawImage(vg, Images.CLOSE, x + 369, y + 17, 30, 30);
+        if(closeBtn.isClicked()) {
+            OneConfigGui.INSTANCE.closeColorSelector();
         }
 
-        @Override
-        public void drawBox(long vg, int x, int y) {
+        RenderManager.drawRoundedRect(vg, x + 16, y + 64, 384, 32, OneConfigConfig.GRAY_500, 12f);
+        RenderManager.drawRoundedRect(vg, x + 18 + (percentMove * 128), y + 66, 124, 28, OneConfigConfig.BLUE_600, 10f);
+        percentMove = MathUtils.easeOut(percentMove, mode, 20f);
+        hsbBtn.draw(vg, x + 18, y + 66);
+        rgbBtn.draw(vg, x + 146, y + 66);
+        chromaBtn.draw(vg, x + 274, y + 66);
+        RenderManager.drawString(vg, "HSB Box", x + 55, y + 81, OneConfigConfig.WHITE, 12f, Fonts.MEDIUM);
+        RenderManager.drawString(vg, "Color Wheel", x + 165, y + 81, OneConfigConfig.WHITE, 12f, Fonts.MEDIUM);
+        RenderManager.drawString(vg, "Chroma", x + 307, y + 81, OneConfigConfig.WHITE, 12f, Fonts.MEDIUM);
 
-        }
+        RenderManager.drawString(vg, "Saturation", x + 224, y + 560, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
+        saturationInput.draw(vg, x + 312, y + 544);
+        RenderManager.drawString(vg, "Brightness", x + 16, y + 599, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
+        brightnessInput.draw(vg, x + 104, y + 584);
+        RenderManager.drawString(vg, "Alpha (%)", x + 224, y + 599, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
+        alphaInput.draw(vg, x + 312, y + 584);
+        RenderManager.drawString(vg, "Hex (RGBA)", x + 16, y + 641, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
+        hexInput.draw(vg, x + 104, y + 624);
 
-        @Override
-        public void setColor(Color color) {
+        copyBtn.draw(vg, x + 204, y + 624);
+        pasteBtn.draw(vg, x + 244, y + 624);
+        RenderManager.drawImage(vg, Images.COPY, x + 211, y + 631, 18, 18);
+        RenderManager.drawImage(vg, Images.PASTE, x + 251, y + 631, 18, 18);
 
-        }
+        guideBtn.draw(vg, x + 288, y + 624);
+        RenderManager.drawImage(vg, Images.HELP, x + 301, y + 631, 18, 18);
+        RenderManager.drawImage(vg, Images.LAUNCH, x + 369, y + 631, 18, 18);
 
-        @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];
-        }
-    }
 
+        switch (mode) {
+            default:
+            case 0:
+                break;
+            case 1:
+                RenderManager.drawRoundedRect(vg, x + 64, y + 120, 288, 288, OneConfigConfig.WHITE, 144f);
 
-    private class RGBSelector extends ColorSelectorBase {
+                RenderManager.drawString(vg, "Hue", x + 16, y + 560, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
+                hueInput.draw(vg, x + 104, y + 544);
 
-        public RGBSelector(Color color) {
-            super(color);
-        }
+                Color colorMax = new Color(color.getRed(), color.getGreen(), color.getBlue(), 255);
+                float[] hsbColor = new float[3];
+                Color.RGBtoHSB(colorMax.getRed(), colorMax.getGreen(), colorMax.getBlue(), hsbColor);
+                hsbColor[2] = topSlider.getValue() / 255f;
+                color = new Color(Color.HSBtoRGB(hsbColor[0], hsbColor[1], hsbColor[2]), true);
+                bottomSlider.setGradient(new Color(color.getRed(), color.getGreen(), color.getBlue(), 25), colorMax);
+                topSlider.setGradient(Color.BLACK, colorMax);
+                color = new Color(color.getRed(), color.getGreen(), color.getBlue(), (int) bottomSlider.getValue());
 
-        @Override
-        public void drawBox(long vg, int x, int y) {
+                //RenderManager.drawRoundedRect(vg, bottomSlider.currentDragPoint - 8, y + 456, 16, 16, color.getRGB(), 16f);
 
+                topSlider.draw(vg, x + 16, y + 424);
+                RenderManager.drawImage(vg, Images.COLOR_BASE_LONG, x + 16, y + 456, 384, 16);
+                bottomSlider.draw(vg, x + 16, y + 456);
+                break;
+            case 2:
+                break;
         }
 
-        @Override
-        public void setColor(Color color) {
+        float[] hsbColor = new float[3];
+        Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), hsbColor);
+        hueInput.setInput(String.format("%.01f", hsbColor[0] * 360f));
+        saturationInput.setInput(String.format("%.01f", hsbColor[1] * 100f));
+        brightnessInput.setInput(String.format("%.01f", hsbColor[2] * 100f));
+        alphaInput.setInput(String.format("%.01f", color.getAlpha() / 255f * 100f));
 
-        }
 
-        @Override
-        public int[] drawTopSlider() {
-            return new int[0];
-        }
+        RenderManager.drawHollowRoundRect(vg, x + 15, y + 487, 384, 40, OneConfigConfig.GRAY_300, 12f, 2f);
+        RenderManager.drawImage(vg, Images.COLOR_BASE_LARGE, x + 20, y + 492, 376, 32);
+        RenderManager.drawRoundedRect(vg, x + 20, y + 492, 376, 32, color.getRGB(), 8f);
 
-        @Override
-        public int[] drawBottomSlider() {
-            return new int[0];
-        }
 
 
-        @Override
-        public float[] getColorAtPos(int clickX, int clickY) {
-            return new float[0];
-        }
     }
 
+    public Color getColor() {
+        return color;
+    }
 
+    public void keyTyped(char typedChar, int keyCode) {
+        hexInput.keyTyped(typedChar, keyCode);
+        saturationInput.keyTyped(typedChar, keyCode);
+        brightnessInput.keyTyped(typedChar, keyCode);
+        alphaInput.keyTyped(typedChar, keyCode);
+        hueInput.keyTyped(typedChar, keyCode);
+    }
 
-    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 static class ColorSlider extends Slider {
+        protected Color gradColorStart, gradColorEnd;
 
-    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;
+        public ColorSlider(int length, float min, float max, float startValue) {
+            super(length, min, max, startValue);
+            super.height = 16;
         }
 
         @Override
         public void draw(long vg, int x, int y) {
-            super.draw(vg, x, y);
-
+            update(x, y);
+            RenderManager.drawHollowRoundRect(vg, x - 1.5f, y - 1.5f, width + 2, height + 2, new Color(204, 204, 204, 77).getRGB(), 8f, 1f);
+            RenderManager.drawGradientRoundedRect(vg, x, y, width, height, gradColorStart.getRGB(), gradColorEnd.getRGB(), 8f);
+            RenderManager.drawHollowRoundRect(vg, currentDragPoint - 9, y - 2, 18, 18, OneConfigConfig.WHITE, 7f, 1f);
         }
-    }
-
-    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) {
 
+        public void setGradient(Color start, Color end) {
+            gradColorStart = start;
+            gradColorEnd = end;
         }
     }
 }
-*/
 
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/Slider.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/Slider.java
new file mode 100644
index 0000000..15293a5
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/Slider.java
@@ -0,0 +1,57 @@
+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;
+
+public class Slider extends BasicElement {
+    private final float min, max;
+    protected float value;
+    protected float currentDragPoint;
+
+    public Slider(int length, float min, float max, float startValue) {
+        super(length, 8, false);
+        this.min = min;
+        this.max = max;
+        setValue(startValue);
+    }
+
+    @Override
+    public void draw(long vg, int x, int y) {
+        update(x, y);
+        RenderManager.drawRoundedRect(vg, x, y + 2, width, height - 4, OneConfigConfig.GRAY_300, 3f);
+        RenderManager.drawRoundedRect(vg, x, y + 2, width * value, height - 4, OneConfigConfig.BLUE_500, 3f);
+        RenderManager.drawRoundedRect(vg, currentDragPoint - 12, y - 8, 24, 24, OneConfigConfig.WHITE, 12f);
+
+
+    }
+
+    public void update(int x, int y) {
+        super.update(x, y);
+        if (InputUtils.isAreaHovered((int) ((x + width * value) - 8f), y - 12, 32, 32)) {
+            boolean drag = Mouse.isButtonDown(0);
+            if (drag) {
+                value = ((float) InputUtils.mouseX() - x) / width;
+            }
+        } else if (InputUtils.isAreaHovered(x - 20, y - 4, width + 40, height + 8)) {
+            if (InputUtils.isClicked()) {
+                value = ((float) InputUtils.mouseX() - x) / width;
+            }
+        }
+
+        if (value < 0) value = 0;
+        if (value > 1) value = 1;
+
+        currentDragPoint = x + width * value;
+
+    }
+
+    public float getValue() {
+        return value * (max - min) + min;
+    }
+
+    public void setValue(float value) {
+        this.value = (value - min) / (max - min);
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/TextInputField.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/TextInputField.java
index 02ebe86..59897c6 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/TextInputField.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/TextInputField.java
@@ -88,7 +88,7 @@ public class TextInputField extends BasicElement {
         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);
+            RenderManager.drawHollowRoundRect(vg, x, y, width - 0.5f, height - 0.5f, colorOutline, 12f, 2f);
             super.update(x, y);
             if (Mouse.isButtonDown(0) && !InputUtils.isAreaHovered(x - 40, y - 20, width + 90, height + 20)) {
                 onClose();
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java b/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java
index 13f8fd8..85ebb9d 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java
@@ -1,10 +1,15 @@
 package cc.polyfrost.oneconfig.gui.pages;
 
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.gui.OneConfigGui;
 import cc.polyfrost.oneconfig.gui.elements.BasicButton;
+import cc.polyfrost.oneconfig.gui.elements.ColorSelector;
 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.awt.*;
 
@@ -21,6 +26,9 @@ public class HomePage extends Page {
         RenderManager.drawRoundedRect(vg, x + 350, y + 310, 300, 200, OneConfigConfig.BLUE_600, 14f);
         //RenderManager.drawRoundedRect(vg);
         btn.draw(vg, x + 432, y + 658);
+        if(btn.isClicked()) {
+            OneConfigGui.INSTANCE.initColorSelector(new ColorSelector(new Color(255, 228, 155), InputUtils.mouseX(), InputUtils.mouseY()));
+        }
     }
 
     @Override
diff --git a/src/main/java/cc/polyfrost/oneconfig/lwjgl/RenderManager.java b/src/main/java/cc/polyfrost/oneconfig/lwjgl/RenderManager.java
index b596e0c..5f18e5f 100644
--- a/src/main/java/cc/polyfrost/oneconfig/lwjgl/RenderManager.java
+++ b/src/main/java/cc/polyfrost/oneconfig/lwjgl/RenderManager.java
@@ -15,14 +15,8 @@ import org.lwjgl.nanovg.NVGColor;
 import org.lwjgl.nanovg.NVGPaint;
 import org.lwjgl.opengl.Display;
 import org.lwjgl.opengl.GL11;
-import sun.font.Font2D;
-import sun.font.FontManagerFactory;
-import sun.font.StrikeMetrics;
-import sun.font.TrueTypeFont;
 
 import java.awt.*;
-import java.io.File;
-import java.util.Arrays;
 import java.util.function.LongConsumer;
 
 import static org.lwjgl.nanovg.NanoVG.*;
@@ -87,7 +81,7 @@ public final class RenderManager {
         nvgRoundedRect(vg, x, y, width, height, radius);
         NVGColor nvgColor = color(vg, color);
         NVGColor nvgColor2 = color(vg, color2);
-        nvgFillPaint(vg, nvgLinearGradient(vg, x, y + height, x + width, y, nvgColor, nvgColor2, bg));
+        nvgFillPaint(vg, nvgLinearGradient(vg, x, y, x + width, y, nvgColor, nvgColor2, bg));
         nvgFill(vg);
         nvgColor.free();
         nvgColor2.free();
@@ -99,7 +93,7 @@ public final class RenderManager {
         nvgRect(vg, x, y, width, height);
         NVGColor nvgColor = color(vg, color);
         NVGColor nvgColor2 = color(vg, color2);
-        nvgFillPaint(vg, nvgLinearGradient(vg, x + height, y + height, x + height, y, nvgColor, nvgColor2, bg));
+        nvgFillPaint(vg, nvgLinearGradient(vg, x, y, x, y + width, nvgColor, nvgColor2, bg));
         nvgFillPaint(vg, bg);
         nvgFill(vg);
         nvgColor.free();
@@ -191,6 +185,7 @@ public final class RenderManager {
             NVGPaint imagePaint = NVGPaint.calloc();
             cc.polyfrost.oneconfig.lwjgl.image.Image image = ImageLoader.INSTANCE.getImage(filePath);
             nvgBeginPath(vg);
+
             nvgImagePattern(vg, x, y, width, height, 0, image.getReference(), 1, imagePaint);
             nvgRect(vg, x, y, width, height);
             nvgFillPaint(vg, imagePaint);
diff --git a/src/main/java/cc/polyfrost/oneconfig/lwjgl/image/Images.java b/src/main/java/cc/polyfrost/oneconfig/lwjgl/image/Images.java
index f5e4213..370b4f0 100644
--- a/src/main/java/cc/polyfrost/oneconfig/lwjgl/image/Images.java
+++ b/src/main/java/cc/polyfrost/oneconfig/lwjgl/image/Images.java
@@ -14,6 +14,9 @@ public enum Images {
 
     // TODO color picker ones
     COLOR_BASE("/assets/oneconfig/textures/gui/general/color/color_base.png"),
+    COLOR_BASE_LONG("/assets/oneconfig/textures/gui/general/color/color_base_long.png"),
+    COLOR_BASE_LARGE("/assets/oneconfig/textures/gui/general/color/color_base_large.png"),
+    COLOR_WHEEL("/assets/oneconfig/textures/gui/general/color/color_wheel.png"),
 
 
     SHARE("/assets/oneconfig/textures/gui/general/nav/share.png"),
@@ -21,6 +24,9 @@ public enum Images {
     SEARCH("/assets/oneconfig/textures/gui/general/nav/search.png"),
     MINIMIZE("/assets/oneconfig/textures/gui/general/nav/minimize.png"),
     CLOSE("/assets/oneconfig/textures/gui/general/nav/close.png"),
+    HELP("/assets/oneconfig/textures/gui/general/nav/help.png"),
+    COPY("/assets/oneconfig/textures/gui/general/nav/copy.png"),
+    PASTE("/assets/oneconfig/textures/gui/general/nav/paste.png"),
 
     LOGO("/assets/oneconfig/textures/gui/general/logo.png"),
 
diff --git a/src/main/resources/assets/oneconfig/textures/gui/general/color/color_base_large.png b/src/main/resources/assets/oneconfig/textures/gui/general/color/color_base_large.png
new file mode 100644
index 0000000..079f5e8
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/textures/gui/general/color/color_base_large.png
diff --git a/src/main/resources/assets/oneconfig/textures/gui/general/color/color_base_long.png b/src/main/resources/assets/oneconfig/textures/gui/general/color/color_base_long.png
new file mode 100644
index 0000000..5eb9881
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/textures/gui/general/color/color_base_long.png
diff --git a/src/main/resources/assets/oneconfig/textures/gui/general/color/colorspectrum.png b/src/main/resources/assets/oneconfig/textures/gui/general/color/colorspectrum.png
deleted file mode 100644
index c687a12..0000000
--- a/src/main/resources/assets/oneconfig/textures/gui/general/color/colorspectrum.png
+++ /dev/null
diff --git a/src/main/resources/assets/oneconfig/textures/gui/general/color/huegradient.png b/src/main/resources/assets/oneconfig/textures/gui/general/color/huegradient.png
deleted file mode 100644
index f0ab0a1..0000000
--- a/src/main/resources/assets/oneconfig/textures/gui/general/color/huegradient.png
+++ /dev/null
diff --git a/src/main/resources/assets/oneconfig/textures/gui/general/nav/copy.png b/src/main/resources/assets/oneconfig/textures/gui/general/nav/copy.png
new file mode 100644
index 0000000..00ffc0b
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/textures/gui/general/nav/copy.png
diff --git a/src/main/resources/assets/oneconfig/textures/gui/general/nav/help.png b/src/main/resources/assets/oneconfig/textures/gui/general/nav/help.png
new file mode 100644
index 0000000..1b91ad5
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/textures/gui/general/nav/help.png
diff --git a/src/main/resources/assets/oneconfig/textures/gui/general/nav/paste.png b/src/main/resources/assets/oneconfig/textures/gui/general/nav/paste.png
new file mode 100644
index 0000000..a5f97f9
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/textures/gui/general/nav/paste.png