snagov Posts - Answer Overflow

snagov

LOELeague of Extraordinary FoundryVTT Developers

•Created by snagov on 4/28/2024 in #system-development

changing id for messages in the chat

Hello, I'm trying to build a system for foundry and i'm facing a issue when i create more than one message in the chat. those messages are cards that show options for a skill. the options are some radio buttons, and i'm using labels with the radios. basically the radio has an id, and the label has that id in the tag for. when more than one message is in the chat, since the for is always the same, i can't select items for the old message. is there an option to call new ChatMessage() and only after that create the message? i would like to grab the timestamp from ChatMessage to make each id unique. example:

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}" name="field" value="{{fd.value}}">
    <label for="{{key}}">{{fd.label}}</label>
{{/each}}

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}" name="field" value="{{fd.value}}">
    <label for="{{key}}">{{fd.label}}</label>
{{/each}}

I would like to have something like

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}-{{timestamp}}" name="field" value="{{fd.value}}">
    <label for="{{key}}-{{timestamp}}">{{fd.label}}</label>
{{/each}}

{{#each fields as |fd key|}}
    <input type="radio" class="field-option" data-key="{{key}}" id="{{key}}-{{timestamp}}" name="field" value="{{fd.value}}">
    <label for="{{key}}-{{timestamp}}">{{fd.label}}</label>
{{/each}}

in the JS I have the line below

ChatMessage.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

ChatMessage.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

i'm wondering if it's possible to have something like:

  const msg = new ChatMessage()
  ...
  i will add the timestamp to the tag elements here
  ...
  msg.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

  const msg = new ChatMessage()
  ...
  i will add the timestamp to the tag elements here
  ...
  msg.create({
    speaker: ChatMessage.getSpeaker({ actor: this.actor }),
    flavor: html
  })

of course, if there is a best practice for this and it's different from my approach please let me know, otherwise i would like to validate i can create the class before the message. thank you

7 replies

Gaming

Programming