Guide to use ingame functionality to reduce size of scripts

[Shinko to Kuma]

I'm making a compilation of ingame functions that can be used in scripting to reduce the size and requirements of work. This is purely a guide for scripters and has no functionality on it's own.
I'll try and categorize them as much as I can, and update this list over time.

Spoiler: UI Dialogs and Alerts

Spoiler: Confirmation dialog

// function to open a confirm box with confirm or cancel and confirmation callback

UI.addConfirmBox( `htmlString`, callbackFunction);

Spoiler: Banner message

// Banner message (fancy)

UI.BanneredRewardMessage("String", duration);

Spoiler: Error message

// Error message (red)

UI.ErrorMessage("String", duration)

Spoiler: Info message

// Info message
// NOTE: String can be HTML as well
// type:
// null (neutral)
// "success" (green)
// "error" (red)
// appendTarget : which DOM element you want to attach to (you can leave this null)

UI.InfoMessage("String",duration,type,appendTarget)

Spoiler: Complex html dialog box with title

// Draggable dialog box with title, own content and close icon. second parameter is the ID so you can target it and it's content/title

UI.AjaxPopup(null, "dialog_id", `htmlString`, "Title", null, { dataType: "prerendered" }, widthOfDialog, "auto",leftPosition,topPosition);

Spoiler: OMG message

// targetElement example: $(".visual-anim.anim-building-stone-prod")
UI.OmgMessage(targetElement,`String`,"customClassName")

Spoiler: Ingame notification system

// Ingame notification system, including callback when notification is clicked. Example with redirect to awards page

callbackFunction = ()=>{
    TribalWars.redirect("info_player", {
        mode: "awards"
    })
}
// change Notification duration (Note, this will overwrite the default, so any other notifications they'd get without a page reload would be this duration)
UI.Notification.SHOW_TIME = 1000

UI.Notification.show(imgUrl,"Title","Description",callbackFunction)

Spoiler: Widgets on village overview

$("#leftcolumn").append(`
<div id="show_custom_widget" class="vis moveable widget ">
    <h4 class="head with-button ui-sortable-handle">
        <img class="widget-button" onclick="return VillageOverview.toggleWidget( 'show_custom_widget', this );"
            src="graphic/minus.png"> Custom widget
    </h4>
    <div class="widget_content" style="display: block;">
        <table width="100%">
            <tbody>
                <tr id="custom_widget_content">
                    <td>
                        <span>Put your widget content here</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>`)

 

[otavio]

Hello @Shinko to Kuma !

We also have the option to create a fixed Dialog Box with a close button, similar to the one used to display missions.

Dialog.show('MyDialogId', 'HTML String');

//Optionally, it is also possible to execute a callback when clicking the close button
Dialog.show('MyDialogId', 'HTML String', onCloseCallback);