App Review, Feedback & Bug Report

NightKnight · Oct 4, 2021

Tried the application? Feel free to write a review and rate the application from 0 to 5!
Got feedback? Feel free to express it!
Encountered a bug? Report it here!

Lovely comments really do make a difference!

FeelsGoodMan · Oct 18, 2021

When I move a frame or adjust its size the frame 'snaps' slightly towards the top right corner by maybe 2-3px. This makes precise placement of frames a hassle since I have to accomodate for the pixels the frames will be moved.

Also when undoing size adjustments (only the Y value) the position of the adjusted frame will snap to some random place.

NightKnight · Oct 18, 2021

FeelsGoodMan said:
When I move a frame or adjust its size the frame 'snaps' slightly towards the top right corner by maybe 2-3px. This makes precise placement of frames a hassle since I have to accomodate for the pixels the frames will be moved.

Also when undoing size adjustments (only the Y value) the position of the adjusted frame will snap to some random place.

That was fixed in the latest version

Varcklen · Dec 4, 2021

If you use the "Script Dialog Button" or "Browser Button" preset in a button and change the text color, then when you load a previously saved .json file containing these buttons into the Reforged UI Designer, the text color is reset to the standard (yellowish color).

Elprede · Jan 18, 2022

Whenever you make a table or circular array, the frame that you based it on is always misaligned with the rest.

FeelsGoodMan · Jan 18, 2022

The alignment in-app isn't precise in-game. I try entering the X/Y locations, but things are mis-aligned in-game. I end up having to align things manually and do 100 micro-adjustments until I get the alignment just right.

In addition to this the alignment of some elements just refuses to have the exact same values, even when doing table arrays. The initial frame will have a slightly different X/Y value than the rest of the table. If I try to change its value manually it just refuses to update, and snaps back into its mis-aligned place.

udg_Potato · Jan 25, 2022

Is this UI usable only for reforged and can it be used in classic?

If it's Reforged only, any plans on making it for classic as well?

Kick King · Apr 14, 2022

Got some bugs to note:

In Typescript Export, some syntax is incorrect.

For Example:

When I generated some random frames, this being the whole code:

TypeScript:

export class REFORGEDUIMAKER {
  Frame02: Frame
  Frame05: Frame
  BackFrame05: Frame
  Frame03: Frame
  Frame04: Frame

  constructor() {
    let t: Trigger

    this.Frame02 = new Frame('this.Frame02', Frame.fromName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
    this.Frame02.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.25734, 0.33332)
    this.Frame02.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.35762, 0.23311)
    this.Frame02.setTexture('CustomFrame.png', 0, true)

    this.BackFrame05 = new Frame('this.BackFrame05', BlzGetFrameByName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
    this.BackFrame05.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.16927, 0.4952)
    this.BackFrame05.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.59419, 0.39499)
    this.BackFrame05.setTexture('', 0, true)
    this.Frame05 = new Frame('this.Frame05', this.BackFrame05, 1, 1, 'SIMPLESTATUSBAR', '')
    this.Frame05.setTexture('CustomFrame.png', 0, true)
    this.Frame05.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.16927, 0.4952)
    this.Frame05.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.59419, 0.39499)
    BlzFrameSetValue(Frame05, 50)

    this.Frame03 = new Frame('QuestCheckBox', this.Frame02, 0, 0)
    this.Frame03.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.25, 0.35)
    this.Frame03.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.35, 0.25)
    t = new Trigger()
    t.triggerRegisterFrameEvent(this.Frame03, FRAMEEVENT_CHECKBOX_CHECKED)
    t.triggerRegisterFrameEvent(this.Frame03, FRAMEEVENT_CHECKBOX_UNCHECKED)
    t.addAction(() => {
      if (BlzGetTriggerFrameEvent() == FRAMEEVENT_CHECKBOX_CHECKED) {
        //actions
      } else {
        //actions
      }
    })

    this.Frame04 = new Frame('Frame04', this.Frame03, 0, 0, 'SIMPLESTATUSBAR', '')
    this.Frame04.setTexture('CustomFrame.png', 0, true)
    this.Frame04.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.049698, 0.37379)
    this.Frame04.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.149978, 0.27358)
    this.Frame04.value = 100
  }
}

TypeScript:

    this.Frame05 = new Frame('this.Frame05', this.BackFrame05, 1, 1, 'SIMPLESTATUSBAR', '')
    this.Frame05.setTexture('CustomFrame.png', 0, true)
    this.Frame05.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.16927, 0.4952)
    this.Frame05.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.59419, 0.39499)
    BlzFrameSetValue(Frame05, 50)

Should be: Frame05 is a "Frame" not a "frame" so you can use the object notation.

TypeScript:

    this.Frame05 = new Frame('this.Frame05', this.BackFrame05, 1, 1, 'SIMPLESTATUSBAR', '')
    this.Frame05.setTexture('CustomFrame.png', 0, true)
    this.Frame05.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.16927, 0.4952)
    this.Frame05.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.59419, 0.39499)
    this.Frame05.setValue(50)

Also, made this line:

TypeScript:

this.BackFrame05 = new Frame('this.BackFrame05', BlzGetFrameByName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')

A new frame expects a "Frame" not a "frame" so it should be:

TypeScript:

this.BackFrame05 = new Frame('this.BackFrame05', Frame.fromName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')

The more I attempt to use the Typescript export option, the more issues I'm seeing. Major issues with the "Horizontal Bar + Background + Text" module. Lots of having to fix in code.

Kick King · Apr 14, 2022

Also, is there a reason the minimum height is 0.010009? I really need to make a backdrop with a smaller height than that but can't do it in the editor. I'm able to make them smaller in code without issue, and I'd rather not have to redo it when I get into the code everytime I update things.

And it would be great if the Typescript export could be set up as a singleton. (Even if as an export option. Again, just trying to figure out how to keep things from having to be specified multiple times. Would be like this:

TypeScript:

export class UI {
  protected static instance: UI

  static getInstance() {
    if (!UI.instance) UI.instance = new UI()
    return UI.instance
  }

  private constructor() {

  }
}

Kick King · Apr 15, 2022

Another issue. Custom BG should be saved and reloaded when you open the project file again. Also, a bit more concrete example of how the typescript code should be restructured.

RAW CODE FROM RUID:

TypeScript:

export class UIGenerated {
  portraitBackground: Frame
  healthBar: Frame
  BackhealthBar: Frame
  TexthealthBar: Frame
  manaBar: Frame
  BackmanaBar: Frame
  TextmanaBar: Frame

  constructor() {
    let t: Trigger

    this.portraitBackground = new Frame('this.portraitBackground', Frame.fromName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
    this.portraitBackground.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.12395, 0.15315)
    this.portraitBackground.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.17495, 0.1014)
    this.portraitBackground.setTexture('black.dds', 0, true)

    this.BackhealthBar = new Frame('this.BackhealthBar', BlzGetFrameByName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
    this.BackhealthBar.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.133626)
    this.BackhealthBar.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.1175)
    this.BackhealthBar.setTexture('black.dds', 0, true)
    this.healthBar = new Frame('this.healthBar', this.BackhealthBar, 1, 1, 'SIMPLESTATUSBAR', '')
    this.healthBar.setTexture('healthBar.dds', 0, true)
    this.healthBar.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.133626)
    this.healthBar.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.1175)
    BlzFrameSetValue(healthBar, 50)
    this.TexthealthBar = BlzCreateFrameByType('TEXT', 'name', BlzGetOriginFrame(ORIGIN_FRAME_WORLD_FRAME, 0), '', 0)
    this.TexthealthBar.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.133626)
    this.TexthealthBar.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.1175)
    this.TexthealthBar.text = '|cff00ff1e9600 / 9600|r'
    BlzFrameSetEnable(this.TexthealthBar, false)
    BlzFrameSetScale(this.TexthealthBar, 1.0)
    BlzFrameSetTextAlignment(this.TexthealthBar.handle, TEXT_JUSTIFY_CENTER, TEXT_JUSTIFY_MIDDLE)

    this.BackmanaBar = new Frame('this.BackmanaBar', BlzGetFrameByName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
    this.BackmanaBar.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.117966)
    this.BackmanaBar.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.10184)
    this.BackmanaBar.setTexture('black.dds', 0, true)
    this.manaBar = new Frame('this.manaBar', this.BackmanaBar, 1, 1, 'SIMPLESTATUSBAR', '')
    this.manaBar.setTexture('manaBar.dds', 0, true)
    this.manaBar.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.117966)
    this.manaBar.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.10184)
    BlzFrameSetValue(manaBar, 50)
    this.TextmanaBar = BlzCreateFrameByType('TEXT', 'name', BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), '', 0)
    this.TextmanaBar.setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.117966)
    this.TextmanaBar.setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.10184)
    this.TextmanaBar.text = '|cffffffff160 / 160|r'
    BlzFrameSetEnable(this.TextmanaBar, false)
    BlzFrameSetScale(this.TextmanaBar, 1.0)
    BlzFrameSetTextAlignment(this.TextmanaBar.handle, TEXT_JUSTIFY_CENTER, TEXT_JUSTIFY_MIDDLE)
  }
}

What it could, (And should be):

TypeScript:

export class UIGenerated {
  protected static instance: UIGenerated

  static getInstance() {
    if (!UIGenerated.instance) UIGenerated.instance = new UIGenerated()
    return UIGenerated.instance
  }

  portraitBackground: Frame
  healthBar: Frame
  BackhealthBar: Frame
  TexthealthBar: Frame
  manaBar: Frame
  BackmanaBar: Frame
  TextmanaBar: Frame

  private constructor() {
    let t: Trigger

    this.portraitBackground = new Frame('this.portraitBackground', Frame.fromName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
      .setAbsPoint(FRAMEPOINT_TOPLEFT, 0.12395, 0.15315)
      .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.17495, 0.1014)
      .setTexture('black.dds', 0, true)

    this.BackhealthBar = new Frame('this.BackhealthBar', Frame.fromName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
      .setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.133626)
      .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.1175)
      .setTexture('black.dds', 0, true)
    this.healthBar = new Frame('this.healthBar', this.BackhealthBar, 1, 1, 'SIMPLESTATUSBAR', '')
      .setTexture('healthBar.dds', 0, true)
      .setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.133626)
      .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.1175)
      .setValue(50)
    this.TexthealthBar = new Frame('name', Frame.fromOrigin(ORIGIN_FRAME_GAME_UI, 0), 0, 0, 'TEXT', '')
      .setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.133626)
      .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.1175)
      .setText('|cff00ff1e9600 / 9600|r')
      .setEnabled(false)
      .setScale(1.0)
    // WHY NO TEXT ALIGNMENT IN FRAME?????
    BlzFrameSetTextAlignment(this.TexthealthBar.handle, TEXT_JUSTIFY_CENTER, TEXT_JUSTIFY_MIDDLE)

    this.BackmanaBar = new Frame('this.BackmanaBar', Frame.fromName('ConsoleUIBackdrop', 0), 1, 1, 'BACKDROP', '')
      .setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.117966)
      .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.10184)
      .setTexture('black.dds', 0, true)
    this.manaBar = new Frame('this.manaBar', this.BackmanaBar, 1, 1, 'SIMPLESTATUSBAR', '')
      .setTexture('manaBar.dds', 0, true)
      .setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.117966)
      .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.10184)
      .setValue(50)
    this.TextmanaBar = new Frame('name', Frame.fromOrigin(ORIGIN_FRAME_GAME_UI, 0), 0, 0, 'TEXT', '')
      .setAbsPoint(FRAMEPOINT_TOPLEFT, 0.17915, 0.117966)
      .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, 0.274225, 0.10184)
      .setText('|cffffffff160 / 160|r')
      .setEnabled(false)
      .setScale(1.0)
    // AGAIN WHY DO I HAVE TO DO THIS THE DUMB WAY??
    BlzFrameSetTextAlignment(this.TextmanaBar.handle, TEXT_JUSTIFY_CENTER, TEXT_JUSTIFY_MIDDLE)
  }
}

If you could make these changes that would be SUPER helpful and I could keep the project live longer before I have to start tweaking in code.

Also, if there was a "Push to File" button, it would just overwrite a typescript file you chose with the latest whenever you push it out or hit the save button without you having to manually do it, or select the file.

One more note, but I feel like variable names should be generated by [baseName][descriptor] instead of [descriptor][basename]. So, "TextmanaBar" would become "manaBarText". That allows you to easily follow camelcase and looks cleaner in code in my opinion.

I would be super happy to help beta test stuff. I'm working on a UI (as I've mentioned, and having this be more solid, would make things even easier than they are with this tool. Don't get me wrong, using this vs trying to guess and check my way through setting stuff up, is night and day faster but with a few more tweaks, it could be soooo much more helpful.

Kick King · Apr 16, 2022

Sooo, I may have gotten a bit too into this. I found your git repository and fixed the typescript exporting issues I was seeing at least and it's working now when I'm running from source. Only made changes in the src/ts/Templates/Templates.ts file. Here is the updated code for that file. I didn't widely test it with all of the frame types but fixed the issues I was seeing in the typescript side of things.

Here is the updated code. Let me know if you would like me to contribute in another way or just go away.

TypeScript:

export class Typescript implements I_Templates {
  static classDeclare =
    'export class FRlib {\n  protected static instance: FRlib\n\n  static getInstance(){\n    if (!FRlib.instance) FRlib.instance = new FRlib()\n    return FRlib.instance\n  }\n'

  static globals = '\n'

  static declares = '   FRvar: Frame\n'
  // static declaresArray = "   FRvar: Frame[] = []\n"
  static declaresBUTTON = '   FRvar: Frame\n   BackdropFRvar: Frame \n'
  // static declaresBUTTONArray = "   FRvar: Frame[] = []\n   BackdropFRvar: Frame[] = [] \n"
  static declaresHorBarBack = 'FRvar: Frame \nFRvarBack: Frame \n'
  static declaresHorBarText = 'FRvar: Frame \nFRvarText: Frame \n'
  static declaresHorBarBack_Text = 'FRvar: Frame \nFRvarBack: Frame \nFRvarText: Frame \n'

  static endglobals = '\n'

  static constructorInit = '  private constructor() {\n      let t: Trigger;\n\n'

  static backdrop =
    '\nthis.FRvar = new Frame("this.FRvar", OWNERvar, 1, 1, "BACKDROP", "") \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setTexture(PATHvar, 0, true) \n'

  static button =
    '\nthis.FRvar = new Frame("ScriptDialogButton", OWNERvar, 0, 0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \nthis.BackdropFRvar = new Frame(" this.BackdropFRvar ", this.FRvar, 1, 1, "BACKDROP", "") \nthis.BackdropFRvar.setAllPoints(this.FRvar) \nthis.BackdropFRvar.setTexture(PATHvar, 0, true) \n'

  static ScriptDialogButton =
    '\nthis.FRvar = new Frame("ScriptDialogButton", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setText(TEXTvar) \n  .setScale(FRscale) \n '
  static BrowserButton =
    '\nthis.FRvar = new Frame("BrowserButton", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setText(TEXTvar) \n  .setScale(FRscale) \n'
  static CheckListBox =
    '\nthis.FRvar = new Frame("CheckListBox", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static EscMenuBackdrop =
    '\nthis.FRvar = new Frame("EscMenuBackdrop", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static OptionsPopupMenuBackdropTemplate =
    '\nthis.FRvar = new Frame("OptionsPopupMenuBackdropTemplate", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static QuestButtonBaseTemplate =
    '\nthis.FRvar = new Frame("QuestButtonBaseTemplate", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static QuestButtonDisabledBackdropTemplate =
    '\nthis.FRvar = new Frame("QuestButtonDisabledBackdropTemplate", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static QuestButtonPushedBackdropTemplate =
    '\nthis.FRvar = new Frame("QuestButtonPushedBackdropTemplate", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static QuestCheckBox =
    '\nthis.FRvar = new Frame("QuestCheckBox", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static InvisButton =
    '\nthis.FRvar = new Frame("FRvar", OWNERvar, 0,0, "GLUEBUTTON", "") \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n'
  static TextFrame = `\nthis.FRvar = new Frame("FRvar", OWNERvar, 0,0, "TEXT", "") \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setText(TEXTvar) \n  .setEnabled(false) \n  .setScale(FRscale) \nBlzFrameSetTextAlignment(this.FRvar.handle, ALIGN_VER, ALIGN_HOR) \n`
  static HorizontalBar =
    '\nthis.FRvar = new Frame("FRvar", OWNERvar, 0,0, "SIMPLESTATUSBAR", "") \n  .setTexture(PATHvar, 0, true) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setValue(100) \n'
  static HorizontalBarWiBackground =
    '\nthis.FRvarBack = new Frame("this.FRvarBack", Frame.fromOrigin(ORIGIN_FRAME_GAME_UI, 0), 1, 1, "BACKDROP", "") \n   .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n   .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n   .setTexture(BACKvar, 0, true) \nthis.FRvar = new Frame("this.FRvar", this.FRvarBack, 1, 1, "SIMPLESTATUSBAR", "") \n  .setTexture(PATHvar, 0, true) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setValue(50) \n'
  static HorizontalBarWiText =
    '\nthis.FRvar = new Frame("FRvar", Frame.fromOrigin(ORIGIN_FRAME_GAME_UI, 0), 0, 0, "SIMPLESTATUSBAR", "") \n  .setTexture(PATHvar, 0, true) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \nBlzFrameSetValue(FRvar, 100) \nthis.FRvarText = new Frame("name", Frame.fromOrigin( ORIGIN_FRAME_GAME_UI, 0), 0, 0, "TEXT", "") \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setText(TEXTvar) \n  .setEnabled(false) \n  .setScale(FRscale) \nBlzFrameSetTextAlignment(this.FRvarText.handle, ALIGN_VER, ALIGN_HOR) \n'
  static HorizontalBarWiBackground_Text =
    '\nthis.FRvarBack = new Frame("this.FRvarBack", Frame.fromOrigin(ORIGIN_FRAME_GAME_UI, 0), 1, 1, "BACKDROP", "") \n   .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n   .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n   .setTexture(BACKvar, 0, true) \nthis.FRvar = new Frame("this.FRvar", this.FRvarBack, 1, 1, "SIMPLESTATUSBAR", "") \n  .setTexture(PATHvar, 0, true) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setValue(50) \nthis.FRvarText = new Frame("name", Frame.fromOrigin( ORIGIN_FRAME_GAME_UI, 0), 0, 0, "TEXT", "") \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setText(TEXTvar) \n  .setEnabled(false) \n  .setScale(FRscale) \nBlzFrameSetTextAlignment(this.FRvarText.handle, ALIGN_VER, ALIGN_HOR) \n'
  static TextArea = `\nthis.FRvar = new Frame("FRvar", OWNERvar, 0,0, "TEXTAREA", "EscMenuTextAreaTemplate") \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setText(TEXTvar) \n`
  static EditBox =
    '\nthis.FRvar = new Frame("EscMenuEditBoxTemplate", OWNERvar,0,0) \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setText(TEXTvar)\n'

  static TooltipOwnerButton = `OWNERvar.setTooltip(this.FRvar) \n`
  static TooltipOwnerOther = `const TooltipFRvar = new Frame("this.FRvar", OWNERvar, 1, 1, "FRAME", "") \nTooltipFRvar.setAllPoints(OWNERvar) \nTooltipFRvar.setTooltip(this.FRvar) \n`

  static ButtonTriggerSetup =
    't = new Trigger() \nt.triggerRegisterFrameEvent(this.FRvar, FRAMEEVENT_CONTROL_CLICK) \nt.addAction( () => {\nthis.FRvar.enabled = false \nthis.FRvar.enabled = true \n})\n'
  static TriggerVariableCheckbox =
    't = new Trigger() \nt.triggerRegisterFrameEvent(this.FRvar, FRAMEEVENT_CHECKBOX_CHECKED) \nt.triggerRegisterFrameEvent(this.FRvar, FRAMEEVENT_CHECKBOX_UNCHECKED) \nt.addAction( () => {\nif(BlzGetTriggerFrameEvent() == FRAMEEVENT_CHECKBOX_CHECKED) {\n//actions\n} else {\n//actions\n}\n})\n'

  static endconstructor_library = '}\n\n}\n'
}

Also, I may, (because I'm feeling spicy), go through and restructure this one so instead of having to manually enter in everything for all three languages, build basically a wrapper class that includes basically a copy of Frame but instead of running the command, gives you back the output in whatever language you specify. That'd make this whole process soooo much simpler and much less error-prone. Plus supporting future elements becomes super simple to support in each class because the heavy lifting is already done. But again, if you'd just like me to disappear let me know and I'll stop.

NightKnight · Apr 16, 2022

Thanks for the bug reports!
Will definitely save your suggestions. Sorry for the late response, was busy with RL stuff.

Kick King said:
Here is the updated code. Let me know if you would like me to contribute in another way or just go away.

So I saw the code you send after I fixed the issues. I like the code formatting done, and will use your code with edits. Thanks for that!

Kick King said:
static getInstance() {
if (!UI.instance) UI.instance = new UI()
return UI.instance
}

private constructor() {

}
}
[/code]

Normally I make 2 classes for 1 single UI system, a separate class for all the functionality, and that class has a member that stores an instance of the RUID UI creation class. This is especially helpful for multiplayer (basically I create an instance of the UI for each player, to avoid going into much more complex stuff which may include desyncs).

But this idea is really helpful for UI that are created only once. However, a change like this will be breaking for already-made TS projects, so the best thing that can be done is having an option to turn this on or off. Can include it in the planned "Typescript Export options" idea.
- Same for variable namings. Your naming is much better, but at this point it's a breaking change to all existing projects.

Kick King said:
Also, I may, (because I'm feeling spicy), go through and restructure this one so instead of having to manually enter in everything for all three languages, build basically a wrapper class that includes basically a copy of Frame but instead of running the command, gives you back the output in whatever language you specify. That'd make this whole process soooo much simpler and much less error-prone. Plus supporting future elements becomes super simple to support in each class because the heavy lifting is already done.

I don't quite imagine how that works, but sure go for it!

Kick King said:
But again, if you'd just like me to disappear let me know and I'll stop.

Nah i actually really do appreciate the help, thank you! :thumbs_up:

Kick King · Apr 16, 2022

Totally get it on the breaking changes. For the singleton thing, I totally agree, if it was an option that you could toggle on and off per project, that'd totally satisfy it for me. The Variable naming thing is not a huge deal, it just satisfies my OCD.

I'm working on the multilanguage thing right now. Basically, the goal is to type in the syntax for a frame one time using the normal W3TS syntax and it would generate all three languages for you in text form that you could then choose between. I'm building the class now, and am going to initially rebuild the Typescript class using it, so it won't break anything for you down the chain, but ideally, you'd be able to have one class that would generate definitions for all three languages while only specifying it once. Once you have that object, you could just pass it around and reference it via multilanguage.ts or .lua to get the language you want.

I'll let you know once I have something to show you.

Kick King · Apr 16, 2022

Here is an example of what it can do. This one is currently working. Just need to will out the methods more to cover a few more functions and then rewrite what you have in the Static classes. So you write it out once and then call the version you want to use.

TypeScript:

const BackdropText = FrameMLText.newFrameByType('FRvar', 'BACKDROP', 'OWNERvar', 1, 1, 'BACKDROP', '')
  .setAbsPoint('FRAMEPOINT_TOPLEFT', 'TOPLEFTXvar', 'TOPLEFTYvar')
  .setAbsPoint('FRAMEPOINT_BOTTOMRIGHT', 'BOTRIGHTXvar', 'BOTRIGHTYvar')
  .setTexture('PATHvar', 0, true)

const backdropJass = BackdropText.jass()
const backdropLua = BackdropText.lua()
const backdropTS = BackdropText.ts('  ') // You can custom set the prefix and suffix of lines.  This sets each line to have 2 spaces at the head.

This is equivalant to:

TypeScript:

const backdropJass = '\nset FRvar = BlzCreateFrameByType("BACKDROP", "FRvar", OWNERvar, "", 1) \n call BlzFrameSetAbsPoint(FRvar, FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n call BlzFrameSetAbsPoint(FRvar, FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n call BlzFrameSetTexture(FRvar, PATHvar, 0, true) \n'
const backdropLua = '\nFRvar = BlzCreateFrameByType("BACKDROP", "FRvar", OWNERvar, "", 1) \nBlzFrameSetAbsPoint(FRvar, FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \nBlzFrameSetAbsPoint(FRvar, FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \nBlzFrameSetTexture(FRvar, PATHvar, 0, true) \n'
const backdropTS = '\nthis.FRvar = new Frame("this.FRvar", OWNERvar, 1, 1, "BACKDROP", "") \n  .setAbsPoint(FRAMEPOINT_TOPLEFT, TOPLEFTXvar, TOPLEFTYvar) \n  .setAbsPoint(FRAMEPOINT_BOTTOMRIGHT, BOTRIGHTXvar, BOTRIGHTYvar) \n  .setTexture(PATHvar, 0, true) \n'

Kick King · Apr 17, 2022

Okay, I have this finished. Let me know what you think. I'm attaching 2 files here. A replacement for the Templates.ts file with the new syntax and a new class "FrameMLText" (Multi-Language Text) that does all of the heavy lifting. I did quite a few tests on my own and everything seems to be working properly in all three languages. I went through and rebuilt all of your static objects that build frames using the new methodology. You'll notice everything is actually defined at the top of the doc currently and then referenced in the individual static classes you specified below to get its specific language definitions. It should be MUCH easier to add additional functionality now without having to create it 3 separate times. Only need to create once using logic and methods similar to how things work in typescript and it will create definitions in all three languages automatically. I may go through and make a similar thing for the few stragglers in there that are still manually defined but I'm pretty happy with how this has so far turned out.

Let me know what you think! I hope this all makes sense and works for you. I can keep adding more functionality to this or change how something works if you run into issues or like the direction this goes.

App Review, Feedback & Bug Report

Attachments

Similar threads