script.tis

if (view.connectToInspector) {
  //view.connectToInspector(rootElement, inspectorIpAddress);
}

function self.ready() {
  const w = self.intrinsicWidthMax();
  const h = self.intrinsicHeight(w);
  const (sw, sh) = view.screenBox(#frame, #dimension);
  view.move((sw / 2) - (w / 2), (sh / 2) - (h / 2), w, h, true);
  view.windowResizable = false;
}

view << event statechange { 
  view.windowTopmost = true;
};

const factions = {
  Unknown: [],
  'Blue-Dragon': ['Priest', 'Sheriff', 'Noble', 'Mystic', 'Prince', 'Court Wizard', 'Princess', 'Paladin', 'Knight', 'Observer', 'Maid', 'Butler', 'Physician', 'Hunter', 'Drunk', 'Chronomancer' ],
  Unseen: ['Mastermind', 'Assassin', 'Marshal', 'Nightwatch', 'Aristocrat',  'Illusionist', 'Duchess', 'Timesnatcher', 'Sage', 'Alcoholic', 'Servant','Poacher', 'Handmaiden', 'Enforcer', 'Herbalist' ],
  Neutral: ['Alchemist', 'Inquisitor', 'Fool', 'Scorned', 'Mercenary', 'Sellsword', 'Pretender' ],
  'Neutral-Killer' : ['Psycho King', 'Reaper', 'Sorcerer', 'Possessor'],
  Cult: ['Cult Leader', 'Ritualist', 'Apostle', 'Invoker', 'Seeker'],
};

for (var i = 0; i < 16; i++) {
  const li = new Element("li");
  const select = li.$append(<select|dropdown size="16"></select>);
  const faction_keys = Object.keys(factions);
  select.options.$append(<option value=" "><Unknown> <Unknown></option>);
  select.value = "Unknown";

  for (var faction in faction_keys) {
    for (var role in factions[faction].sort()) {
      const option = select.options.$append(<option value={role}><{faction}>{role}</{faction}></option>);
    }
  }
  $(ul).append(li);

  li.on("change", function(e) {
    for (var img in e.owner.$$(img)) {
      img.remove();
    }
  });

  li.onControlEvent = function(event) {
  if (event.type == Event.MENU_ITEM_CLICK)  {
      const item = event.target.attributes["id"]; 
      const srcs = [];
      if (["killer_offensive", "special_investigative", "social_support"].indexOf(item) != -1) {
        for (var src in item.split("_")) {
          srcs.push(src);
        }
      } else if (["bleeding", "disconnected"].indexOf(item) != -1) {
        if (item == "bleeding") {
          li.attributes.toggleClass("bleeding");
        } else if (item == "disconnected") {
          li.attributes.toggleClass("disconnected");
        }
      } else {
        srcs.push(item);
      }
      const imgs = srcs.map(function(src) {
        return String.$(<img src="./icons/{src}.png" />);
      }).join("");
    
      event.owner.outerHtml = String.$({event.owner.outerHtml}{imgs});
      return;
  }
}
}

$(.info).on("click", function() {
  view.msgbox(
    #information,
    "This application uses Sciter Engine (https://sciter.com), © Terra Informatica Software, Inc.",
    "About ToL Tool"
  );
});