V11 Dialog Choose background

main.js

const backgrounds = [
  "/full/path/to/file.webp",
  "https://or.even.urls"
  // ... list of images here
]

// Generate the dialog content
let content = '<form><div class="form-group" style="display: flex">';

backgrounds.forEach((bg, index) => {
  content += `
    <div style="flex:none">
      <input type="radio" name="background" value="${index}" id="bg-${index}">
      <img src="${bg}" width="300" height="200" style="margin: 1px;">
    </div>`
})

content += '</div></form>'

// Create and render the dialog
const dialog = new Dialog({
  title: "Choose a Scene Background",
  content,
  buttons: {
    select: {
      label: "Select",
      callback: html => {
        const selected = html.find('input[name="background"]:checked').val()
        if (!selected) return
        // Get the selected background image
        const background = backgrounds[selected]

        // Update the scene's background
        canvas.scene.update({ "background.src": background })
      }
    }
  },
  default: "select"
}).render(true);


  
setTimeout(() => {
  dialog.setPosition({
    width: window.innerWidth * .8,
    height: window.innerHeight * .8,
  })
}, 200)