Role based Customization Help

[cherubim]

Hi,

I saw another post on the forums asking about this, but I didn't want to necro it to ask for further help.
I am trying to use the role booleans to color the border and box colors, but no matter what I do, I'm unable to get it to work.

 

[Zaytri]

Hi,

I saw another post on the forums asking about this, but I didn't want to necro it to ask for further help.
I am trying to use the role booleans to color the border and box colors, but no matter what I do, I'm unable to get it to work.

can you share what your modified code looks like and which widget you're trying to edit?

 

[Flared_the_Cat]

I too would like to an answer regarding this.

I've been tinkering with the leafy-chat widget today, and I would like to know if there's any advice/tutorial I could be linked to so I could set up the same for individuals depending on their role on twitch in my chat (subscriber, mods, etc.) or a specific username (for "VIPs" I would like them to have their own colour scheme each).

I am somewhat new to most forms of coding, but I have my head around some of the bare-bones basics.

 

[Flared_the_Cat]

can you share what your modified code looks like and which widget you're trying to edit?

---

This wouldn't let me quote you properly so I hope you see this soon.
I've tried making different setting definitions like so:
Original code:

---

/************************

 * Standard Setting Definitions *

 ************************/


const boxColorSettings = defineSetting('Box Colors', 'boxColor', 'group', {
  settings: [
    defineSetting('Border Color', 'border', 'color-input', {
      defaultValue: '#0026ff',
    }),
    defineSetting('Border Width', 'borderWidth', 'number-input', {
      defaultValue: 4,
      step: 1,
      min: 0,
      max: 20,
      slider: true,
    }),
    defineSetting('Username Box Color', 'usernameBoxColor', 'color-input',{
      defaultValue: '#e5ff00',
    }),
    defineSetting('Message Color', 'message', 'color-input', {
      defaultValue: '#00625f',
    })
  ]
}
)



const textSettings = defineSetting('Text Styles', 'textStyles', 'group', {
  settings: [
    defineSetting('Custom Font Name', 'font', 'font-input'),
    defineSetting('Font Size (px)', 'size', 'number-input', {
      defaultValue: 30,
      min: 0,
      step: 1,
    }),
    defineSetting('Font Weight', 'weight', 'select-input', {
      defaultValue: 800,
      options: defineOptions(
        ['Normal', 'Bold']
          .map(label => [label, label.toLowerCase()])
          .concat(
            [100, 200, 300, 400, 500, 600, 700, 800, 900].map(value => [
              value.toString(),
              value,
            ]),
          ),
      ),
    }),
    defineSetting('Username Size (px)', 'usernameSize', 'number-input', {
      defaultValue: 30,
      min: 0,
      step: 1,
    }),
    defineSetting('Username Color', 'usernameColorOption', 'select-input', {
      defaultValue: 'Custom',
      options: defineOptions([
        ['Twitch Light', 'user-light'],
        ['Twitch Dark', 'user-dark'],
        ['Twitch', 'user'],
        ['Custom', 'custom'],
      ]),
      description:
        'Twitch Light/Dark are lightened/darkened versions of the username colors people have chosen in chat.',
    }),
    defineSetting('Custom Username Color', 'usernameColor', 'color-input', {
      defaultValue: '#ffa200',
      description: 'This will only be applied when you select "Custom" above.',
    }),
    defineSetting('Message Text Color', 'textColor', 'color-input', {
      defaultValue: '#09ff00',
      description: 'This will only be applied when you select "Custom" above.',
    }),
    defineSetting('Edge Style', 'edge', 'select-input', {
      defaultValue: 'none',
      options: defineOptions(
        [
          'Outline 1',
          'Outline 2',
          'Bottom Shadow 1',
          'Bottom Shadow 2',
          'Bottom Right Shadow 1',
          'Bottom Right Shadow 2',
          'None',
        ].map(label => [label, label.replaceAll(' ', '-').toLowerCase()]),
      ),
    }),
    defineSetting('Edge Color', 'edgeColor', 'color-input', {
      defaultValue: 'black',
    }),
  ],
})

---

Modified code below:

---

/************************
 * Standard Setting Definitions *
 ************************/

const boxColorSettings = defineSetting('Box Colors', 'boxColor', 'group', {
  settings: [
    defineSetting('Border Color', 'border', 'color-input', {
      defaultValue: '#0026ff',
    }),
    defineSetting('Border Width', 'borderWidth', 'number-input', {
      defaultValue: 4,
      step: 1,
      min: 0,
      max: 20,
      slider: true,
    }),
    defineSetting('Username Box Color', 'usernameBoxColor', 'color-input',{
      defaultValue: '#e5ff00',
    }),
    defineSetting('Message Color', 'message', 'color-input', {
      defaultValue: '#00625f',
    })
  ]
}
)


const textSettings = defineSetting('Text Styles', 'textStyles', 'group', {
  settings: [
    defineSetting('Custom Font Name', 'font', 'font-input'),
    defineSetting('Font Size (px)', 'size', 'number-input', {
      defaultValue: 30,
      min: 0,
      step: 1,
    }),
    defineSetting('Font Weight', 'weight', 'select-input', {
      defaultValue: 800,
      options: defineOptions(
        ['Normal', 'Bold']
          .map(label => [label, label.toLowerCase()])
          .concat(
            [100, 200, 300, 400, 500, 600, 700, 800, 900].map(value => [
              value.toString(),
              value,
            ]),
          ),
      ),
    }),
    defineSetting('Username Size (px)', 'usernameSize', 'number-input', {
      defaultValue: 30,
      min: 0,
      step: 1,
    }),
    defineSetting('Username Color', 'usernameColorOption', 'select-input', {
      defaultValue: 'Custom',
      options: defineOptions([
        ['Twitch Light', 'user-light'],
        ['Twitch Dark', 'user-dark'],
        ['Twitch', 'user'],
        ['Custom', 'custom'],
      ]),
      description:
        'Twitch Light/Dark are lightened/darkened versions of the username colors people have chosen in chat.',
    }),
    defineSetting('Custom Username Color', 'usernameColor', 'color-input', {
      defaultValue: '#ffa200',
      description: 'This will only be applied when you select "Custom" above.',
    }),
    defineSetting('Message Text Color', 'textColor', 'color-input', {
      defaultValue: '#09ff00',
      description: 'This will only be applied when you select "Custom" above.',
    }),
    defineSetting('Edge Style', 'edge', 'select-input', {
      defaultValue: 'none',
      options: defineOptions(
        [
          'Outline 1',
          'Outline 2',
          'Bottom Shadow 1',
          'Bottom Shadow 2',
          'Bottom Right Shadow 1',
          'Bottom Right Shadow 2',
          'None',
        ].map(label => [label, label.replaceAll(' ', '-').toLowerCase()]),
      ),
    }),
    defineSetting('Edge Color', 'edgeColor', 'color-input', {
      defaultValue: 'black',
    }),
  ],
})


/************************
 * Mod Setting Definitions *
 ************************/


const modtextSettings = defineSetting('Text Styles', 'textStyles', 'group', {
  settings: [
    defineSetting('Custom Font Name', 'font', 'font-input'),
    defineSetting('Font Size (px)', 'size', 'number-input', {
      defaultValue: 30,
      min: 0,
      step: 1,
    }),
    defineSetting('Font Weight', 'weight', 'select-input', {
      defaultValue: 800,
      options: defineOptions(
        ['Normal', 'Bold']
          .map(label => [label, label.toLowerCase()])
          .concat(
            [100, 200, 300, 400, 500, 600, 700, 800, 900].map(value => [
              value.toString(),
              value,
            ]),
          ),
      ),
    }),
    defineSetting('Username Size (px)', 'usernameSize', 'number-input', {
      defaultValue: 30,
      min: 0,
      step: 1,
    }),
    defineSetting('Username Color', 'usernameColorOption', 'select-input', {
      defaultValue: 'Custom',
      options: defineOptions([
        ['Twitch Light', 'user-light'],
        ['Twitch Dark', 'user-dark'],
        ['Twitch', 'user'],
        ['Custom', 'custom'],
      ]),
      description:
        'Twitch Light/Dark are lightened/darkened versions of the username colors people have chosen in chat.',
    }),
    defineSetting('Custom Username Color', 'usernameColor', 'color-input', {
      defaultValue: '#005eff',
      description: 'This will only be applied when you select "Custom" above.',
    }),
    defineSetting('Message Text Color', 'textColor', 'color-input', {
      defaultValue: '#99ff00',
      description: 'This will only be applied when you select "Custom" above.',
    }),
    defineSetting('Edge Style', 'edge', 'select-input', {
      defaultValue: 'none',
      options: defineOptions(
        [
          'Outline 1',
          'Outline 2',
          'Bottom Shadow 1',
          'Bottom Shadow 2',
          'Bottom Right Shadow 1',
          'Bottom Right Shadow 2',
          'None',
        ].map(label => [label, label.replaceAll(' ', '-').toLowerCase()]),
      ),
    }),
    defineSetting('Edge Color', 'edgeColor', 'color-input', {
      defaultValue: 'black',
    }),
  ],
})



const modboxColorSettings = defineSetting('Box Colors', 'boxColor', 'group', {
  settings: [
    defineSetting('Border Color', 'border', 'color-input', {
      defaultValue: '#dd00ff',
    }),
    defineSetting('Border Width', 'borderWidth', 'number-input', {
      defaultValue: 4,
      step: 1,
      min: 0,
      max: 20,
      slider: true,
    }),
    defineSetting('Username Box Color', 'usernameBoxColor', 'color-input',{
      defaultValue: '#008bbe',
    }),
    defineSetting('Message Color', 'message', 'color-input', {
      defaultValue: '#404c4c',
    })
  ]
}
)

but still couldn't figure out how to figure out how to make the 'script' JavaScript file call for moderators in specific to choose the alt colour scheme

 

[Flared_the_Cat]

Managed to figure it out. Long and short of it is I needed to make where it says textStyles in the modtextsettings box as modTextStyles, and so same with boxColor to modBoxColor,

Then added those to places where it calls this info in the script file, and made an else if tree that checks the roles for moderator.

I then repeated this for all roles I needed, and also some specific usernames.

It's a non trivial issue to sort initially but I imagine if someone knew what they were doing it could take 30-40 minutes depending on how much colour picking you do.

This of course breaks the web widget's save settings option, but I imagine a better coder than myself could fix that.