LiquidBounce icon indicating copy to clipboard operation
LiquidBounce copied to clipboard

feat: Custom HUD, Native Theme Support and Mixing Components and Wallpapers

Open 1zun4 opened this issue 1 year ago • 10 comments

Theme Sytem

Drawing Support

  • [x] Web Drawer
  • [x] Native Drawer
  • [x] Drawer Reference System

Component Overlay

  • [x] Component Standards
  • [x] Component Factory
  • [x] Editor Boundaries Support
  • [x] Creation and Deletion of Components via Rest API
  • [ ] Serializing and Deserializing Components from Disk

Editor (Assign @SenkJu)

  • [x] Dragging Components
  • [ ] Managment Panel
  • [ ] Component Editor (Settings)

Wallpaper

  • [x] Drawing (supports .png, .frag)
  • [x] Selection via Rest API

LiquidBounce Theme

Generic Theme (Native)

  • [x] Native Theme System
  • [ ] Standarised Design
  • [ ] Title Screen
  • [ ] Alt Manager
  • [ ] Proxy Manager
  • [ ] Click GUI

1zun4 avatar Sep 06 '24 09:09 1zun4

get detekted

larryngton2 avatar Sep 06 '24 14:09 larryngton2

get detekted

If detekt complaints, the code probably sucks ;)

superblaubeere27 avatar Sep 06 '24 17:09 superblaubeere27

get detekted

If detekt complaints, the code probably sucks ;)

:fire:

larryngton2 avatar Sep 06 '24 19:09 larryngton2

get detekted

If detekt complaints, the code probably sucks ;)

detekt will complain at any code, no matter who writes it. one time detekt just shouted at me because i didn't make 17 new lines for this one really easy to use function.

liquidsquid1 avatar Sep 06 '24 20:09 liquidsquid1

get detekted

If detekt complaints, the code probably sucks ;)

detekt will complain at any code, no matter who writes it. one time detekt just shouted at me because i didn't make 17 new lines for this one really easy to use function.

stop dickriding izuna

larryngton2 avatar Sep 06 '24 20:09 larryngton2

get detekted

If detekt complaints, the code probably sucks ;)

detekt will complain at any code, no matter who writes it. one time detekt just shouted at me because i didn't make 17 new lines for this one really easy to use function.

stop dickriding izuna

"Draft", yk that?

1zun4 avatar Sep 07 '24 01:09 1zun4

@liquidsquid1

detekt will complain at any code, no matter who writes it. one time detekt just shouted at me because i didn't make 17 new lines for this one really easy to use function.

Detekt will give you warnings about symptoms of bad code style (= code smells). 99% of the complaints are legit - even though we only care about 95% because the rest is just too minor. I added it to prevent people from writing code like this which might work great but is a pain to understand and debug. I know it is annoying, but it works The number of if statements with 6 conditions, lines longer than the line limit, 4x nested loops and functions longer than two screens went down drastically.

superblaubeere27 avatar Sep 07 '24 02:09 superblaubeere27

get detekted

If detekt complaints, the code probably sucks ;)

detekt will complain at any code, no matter who writes it. one time detekt just shouted at me because i didn't make 17 new lines for this one really easy to use function.

stop dickriding izuna

"Draft", yk that?

I know it's a draft, but he should stop dickriding in general

larryngton2 avatar Sep 07 '24 08:09 larryngton2

image

3 Themes at once and CustomHUD demo (with fixed boundaries)

1zun4 avatar Sep 10 '24 08:09 1zun4

image

3 Themes at once and CustomHUD demo (with fixed boundaries)

looks both nice and goofy

larryngton2 avatar Sep 10 '24 08:09 larryngton2

A theme can now create any type of component: image

including custom settings:

{
  "name": "Text",
  "default": false,
  "alignment": {
    "horizontal": "Center",
    "horizontalOffset": 0,
    "vertical": "Center",
    "verticalOffset": 0
  },
  "settings": [
    {
      "type": "TEXT",
      "name": "Text",
      "default": "Text"
    },
    {
      "type": "COLOR",
      "name": "Color",
      "default": 4294967295
    },
    {
      "type": "TEXT",
      "name": "Font",
      "default": "Inter"
    },
    {
      "type": "INT",
      "name": "Size",
      "default": 14,
      "range": {
        "min": 1,
        "max": 100
      },
      "suffix": "px"
    },
    {
      "type": "CONFIGURABLE",
      "name": "Decorations",
      "settings": [
        {
          "type": "BOOLEAN",
          "name": "Bold",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Italic",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Underline",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Strikethrough",
          "default": false
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Shadow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "OffsetX",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "OffsetY",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "BlurRadius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4278190080
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Glow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "Radius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4294967295
        }
      ]
    }
  ]
}

which will (when ready) be displayed in the edit dialog: image (my tech demo GUI)

1zun4 avatar Oct 26 '24 21:10 1zun4

https://github.com/user-attachments/assets/6a2e2e65-d36c-4204-8442-f624a3fd1a2e

Font Changer with Fonts that are dynamically loaded from theme assets folders. Will be improved after this PR is completed and https://github.com/CCBlueX/LiquidBounce/pull/3921 is being merged since I'm looking forward to support full-varity of all system fonts by using dynamic font loading.

1zun4 avatar Oct 27 '24 07:10 1zun4

It should be noted that the GUI design is not fixed; these are just demonstrations created by me. I'm neither a designer nor a web developer, so the visuals are likely to be unappealing. They are included as a proof of concept.

1zun4 avatar Oct 27 '24 07:10 1zun4

A theme can now create any type of component: image

including custom settings:

{
  "name": "Text",
  "default": false,
  "alignment": {
    "horizontal": "Center",
    "horizontalOffset": 0,
    "vertical": "Center",
    "verticalOffset": 0
  },
  "settings": [
    {
      "type": "TEXT",
      "name": "Text",
      "default": "Text"
    },
    {
      "type": "COLOR",
      "name": "Color",
      "default": 4294967295
    },
    {
      "type": "TEXT",
      "name": "Font",
      "default": "Inter"
    },
    {
      "type": "INT",
      "name": "Size",
      "default": 14,
      "range": {
        "min": 1,
        "max": 100
      },
      "suffix": "px"
    },
    {
      "type": "CONFIGURABLE",
      "name": "Decorations",
      "settings": [
        {
          "type": "BOOLEAN",
          "name": "Bold",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Italic",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Underline",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Strikethrough",
          "default": false
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Shadow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "OffsetX",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "OffsetY",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "BlurRadius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4278190080
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Glow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "Radius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4294967295
        }
      ]
    }
  ]
}

which will (when ready) be displayed in the edit dialog: image (my tech demo GUI)

finally custom blur radius :pray:

larryngton2 avatar Oct 27 '24 15:10 larryngton2

A theme can now create any type of component: image including custom settings:

{
  "name": "Text",
  "default": false,
  "alignment": {
    "horizontal": "Center",
    "horizontalOffset": 0,
    "vertical": "Center",
    "verticalOffset": 0
  },
  "settings": [
    {
      "type": "TEXT",
      "name": "Text",
      "default": "Text"
    },
    {
      "type": "COLOR",
      "name": "Color",
      "default": 4294967295
    },
    {
      "type": "TEXT",
      "name": "Font",
      "default": "Inter"
    },
    {
      "type": "INT",
      "name": "Size",
      "default": 14,
      "range": {
        "min": 1,
        "max": 100
      },
      "suffix": "px"
    },
    {
      "type": "CONFIGURABLE",
      "name": "Decorations",
      "settings": [
        {
          "type": "BOOLEAN",
          "name": "Bold",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Italic",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Underline",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Strikethrough",
          "default": false
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Shadow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "OffsetX",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "OffsetY",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "BlurRadius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4278190080
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Glow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "Radius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4294967295
        }
      ]
    }
  ]
}

which will (when ready) be displayed in the edit dialog: image (my tech demo GUI)

finally custom blur radius 🙏

this does not change HUD shaders, its only component settings (CSS)

1zun4 avatar Oct 27 '24 16:10 1zun4

A theme can now create any type of component: image including custom settings:

{
  "name": "Text",
  "default": false,
  "alignment": {
    "horizontal": "Center",
    "horizontalOffset": 0,
    "vertical": "Center",
    "verticalOffset": 0
  },
  "settings": [
    {
      "type": "TEXT",
      "name": "Text",
      "default": "Text"
    },
    {
      "type": "COLOR",
      "name": "Color",
      "default": 4294967295
    },
    {
      "type": "TEXT",
      "name": "Font",
      "default": "Inter"
    },
    {
      "type": "INT",
      "name": "Size",
      "default": 14,
      "range": {
        "min": 1,
        "max": 100
      },
      "suffix": "px"
    },
    {
      "type": "CONFIGURABLE",
      "name": "Decorations",
      "settings": [
        {
          "type": "BOOLEAN",
          "name": "Bold",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Italic",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Underline",
          "default": false
        },
        {
          "type": "BOOLEAN",
          "name": "Strikethrough",
          "default": false
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Shadow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "OffsetX",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "OffsetY",
          "default": 0,
          "range": {
            "min": -10,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "INT",
          "name": "BlurRadius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4278190080
        }
      ]
    },
    {
      "type": "TOGGLEABLE",
      "name": "Glow",
      "default": false,
      "settings": [
        {
          "type": "INT",
          "name": "Radius",
          "default": 0,
          "range": {
            "min": 0,
            "max": 10
          },
          "suffix": "px"
        },
        {
          "type": "COLOR",
          "name": "Color",
          "default": 4294967295
        }
      ]
    }
  ]
}

which will (when ready) be displayed in the edit dialog: image (my tech demo GUI)

finally custom blur radius 🙏

this does not change HUD shaders, its only component settings (CSS)

(edit) nvm i didnt see that this was shadow blur radius

larryngton2 avatar Oct 27 '24 19:10 larryngton2

I think on devices that don't support chromium, it shouldn't be loaded and the native theme should be applied automatically.

ccetl avatar Oct 29 '24 17:10 ccetl

I think on devices that don't support chromium, it shouldn't be loaded and the native theme should be applied automatically.

thats the reason why izuna made the native theme in the first place

larryngton2 avatar Oct 30 '24 15:10 larryngton2