pull username from message?

[flowersnax he/it/pup/star/plush]

hi! i'm trying to figure out how to pull the username of whoever sent a message, but i'm not having any luck-- i'm guessing its because the js is looking at the templates and not seeing the usernames, because i have the widget working fine otherwise... this is the code i have for the icons, what am i missing?

//icon array
// iconName["USERNAMEHERE"] = "assets/ICONHERE.png;"

const iconName = [];

    iconName["arcadearia"] = "assets/aria.png;"
    iconName["arlydarkfire"] = "assets/arly.png;"
    iconName["banchavt"] = "assets/bancha.png;"
    iconName["streamsbene"] = "assets/bene.png;"
    iconName["cadmuslochlan"] = "assets/cadmus.png;"
    iconName["kalmia_amanita"] = "assets/kalmia.png;"
    iconName["lionelvt"] = "assets/lionel.png;"
    iconName["misadeluxe"] = "assets/misa.png;"
    iconName["nebpunk"] = "assets/neb.png;"
    iconName["nekomancyenv"] = "assets/riko.png;"
    iconName["starbornstarlight"] = "assets/star.png;"


// insert icon
function buildIcon(icon) {

    const image = iconName[name.textContent]

    const iconClone = $(slime2.cloneTemplate('icon-template'))
    iconClone.find('.icon-pic').attr('src', image)

  return iconClone
}

 

[Zaytri she/her]

So firstly, that code is trying to refer to name.textContent which doesn't even exist in the scope of that function (from what I can see in the code you've shown at least). You don't need to try to pull the username from the HTML.

Can you show me where you're calling the buildIcon function? You'll want to pass user data into it from the message data.

 

[flowersnax he/it/pup/star/plush]

So firstly, that code is trying to refer to name.textContent which doesn't even exist in the scope of that function (from what I can see in the code you've shown at least). You don't need to try to pull the username from the HTML.

Can you show me where you're calling the buildIcon function? You'll want to pass user data into it from the message data.

i've got it right here in the chat handler:

function onMessage(message) {
  if (!evaluateFilters(message)) return
  const { animations, sound } = slime2.widget.getData()

  // extract the necessary data from the message
  const { parts, user } = message

  // clone the main message template to insert the message data into
  // the templates are all defined in the HTML file
  const messageClone = $(slime2.cloneTemplate('message-template'))

  // create the elements for the user and message content within the clone
  // this uses the element builder functions defined below
  messageClone.find('.user').append(buildUser(user))
  messageClone.find('.content').append(buildContent(parts))
  messageClone.find('.icon').append(buildIcon(parts))

 

[Zaytri she/her]

i've got it right here in the chat handler:

function onMessage(message) {
  if (!evaluateFilters(message)) return
  const { animations, sound } = slime2.widget.getData()

  // extract the necessary data from the message
  const { parts, user } = message

  // clone the main message template to insert the message data into
  // the templates are all defined in the HTML file
  const messageClone = $(slime2.cloneTemplate('message-template'))

  // create the elements for the user and message content within the clone
  // this uses the element builder functions defined below
  messageClone.find('.user').append(buildUser(user))
  messageClone.find('.content').append(buildContent(parts))
  messageClone.find('.icon').append(buildIcon(parts))

Alright so you might want to look thru this to know the message data structure: https://docs.slime2.stream/twitch/message

Currently you're passing parts into buildIcon, and you're not using them in the function itself anyway.
parts is an array of text/emotes/cheermotes, splitting up the message text.

What you need is the person's username, so pass user into there instead.

messageClone.find('.icon').append(buildIcon(user))

Then in the function itself, use that user data to extract the username to use.

function buildIcon(user) {
  const image = iconName[user.userName]
 
  const iconClone = $(slime2.cloneTemplate('icon-template'))
  iconClone.find('.icon-pic').attr('src', image)

  return iconClone
}

 

[flowersnax he/it/pup/star/plush]

Alright so you might want to look thru this to know the message data structure: https://docs.slime2.stream/twitch/message

Currently you're passing parts into buildIcon, and you're not using them in the function itself anyway.
parts is an array of text/emotes/cheermotes, splitting up the message text.

What you need is the person's username, so pass user into there instead.

messageClone.find('.icon').append(buildIcon(user))

Then in the function itself, use that user data to extract the username to use.

function buildIcon(user) {
  const image = iconName[user.userName]
 
  const iconClone = $(slime2.cloneTemplate('icon-template'))
  iconClone.find('.icon-pic').attr('src', image)

  return iconClone
}

AHH gotcha thank you! ive had the documentation pulled up but honestly i can't fully wrap my head around it atm... i think i need to learn JS from the ground up instead of this stubborn reverse-engineer-frankencode thing ive been doing. sorry for the potentially dumb questions and thanks again for your help!

 

[Zaytri she/her]

AHH gotcha thank you! ive had the documentation pulled up but honestly i can't fully wrap my head around it atm... i think i need to learn JS from the ground up instead of this stubborn reverse-engineer-frankencode thing ive been doing. sorry for the potentially dumb questions and thanks again for your help!

You'll also want to change how you're setting up iconName, you're using an array like an object so might as well use an object instead, and you can set it up like this:

const iconName = {
  arcadearia: 'assets/aria.png',
  arlydarkfire: 'assets/arly.png',
  banchavt: 'assets/bancha.png',
  streamsbene: 'assets/bene.png',
  cadmuslochlan: 'assets/cadmus.png',
  kalmia_amanita: 'assets/kalmia.png',
  lionelvt: 'assets/lionel.png',
  misadeluxe: 'assets/misa.png',
  nebpunk: 'assets/neb.png',
  nekomancyenv: 'assets/riko.png',
  starbornstarlight: 'assets/star.png',
}

(also those semicolons within the image strings would've broken it anyway)

 

[flowersnax he/it/pup/star/plush]

noted, thanks! (and i caught the semicolons after the icon was broken when i tested, LOL)