Adding Class(es) to slime2-event ?

[DrekiOrmur He/Him]

Is there a way to interact with slime-event directly? Referencing the Simple Chat, it has examples of adding classes/setting CSS variables to #slime2-event-list but I could not find a way to similarly call slime2-event for adding a class or setting variables. I've found a workaround, but I thought I'd ask if anyone with a better understanding could point me in a direction.

My workaround:

CSS Snippet

JS Snippet

#slime2-event-list { --eventMargin: var(--messageMargin); --screenPosition: inherit; --screenInset: inherit; --screenOverflow: inherit; display: flex; overflow: hidden; flex-direction: column; justify-content: flex-end; align-items: flex-start; align-content: flex-start; height: 100%; width: 100%; } .slime2-event{ --padding-v: 1em; padding-bottom: calc(var(--padding-v) * var(--eventMargin)); position: var(--screenPosition); inset: var(--screenInset); overflow: var(--screenOverflow); }

if (messageLayout.messagePosition === 'screen') { eventList.css({ '--screenPosition': 'absolute', '--screenInset': 0, '--screenOverflow': 'hidden', }) }

Originally I was just wanting to add a '.screen' class as, from my testing of where to put it, '.slime2-event' is the only place where position/inset/overflow fwill have messages show up randomly in places on screen. I can't hardcode it as it would break 'normal' layout of the widget messages. So far, it seems having them be inherit is causing no issues and then I can set them when its in 'random on screen mode'

 

[Zaytri she/her]

oh right I added that in via v1.1.0 but never updated the documentation for it since I also needed access to that element in Villager Chat

in the object returned to onEvent, the documentation only lists the properties fragment and callback, but it now also accepts parentProps

you can use it to insert React HTML attributes into the parent, such as className and style

so like

slime2.onEvent(event => {
  const fragment = buildFragment()
 
    
  return {
    fragment,
    parentProps: {
      className: 'customClass'
      style: {
        '--variableName': 'value'
      }
    }
  }
})