Configuration

The resources does not contain any config files. You can still make some modifications to the UI through the JavaScript classes.

This is the newest addition to the UI pack, currently there is no customisation options available here.

Within the class constructor you can adjust the default style for the context menu.

You can also adjust the default position of the context menu.

Example

class ContextManager {
    constructor() {
        this.default_style = { background: '#1f1e1e', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' };
        this.custom_style = {};
        this.data = null;
        this.position = { top: '150px', left: '1040px' };
        this.load_user_settings();
        $(document).ready(() => {
            $(document).keyup((e) => this.handle_exit(e));
        });
    }
...

Dialogue

Within the class constructor you can adjust the default style for the dialogue window.

Example

class DialogueManager {
    constructor() {
        this.default_style = { background: '#1f1e1e', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', vignette_colour: '#000000', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' };
        this.custom_style = {};
        this.data = null;
        this.load_user_settings();
        $(document).ready(() => {
            $(document).keyup((e) => this.handle_exit(e));
        });
    }

...

Draw Text

Within the class constructor you can adjust the default style for the draw text ui.

You can also adjust the default position.

Example

class DrawTextManager {
    constructor() {
        this.default_style = { background: '#1f1e1e', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '2s', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' },
        this.custom_style = {};
        this.draw_text_position = { top: '500px', left: '10px' };
        this.draw_text_alignment = 'flex-start';
        this.load_user_settings();
        this.create_draw_text_container();
    }
...

Notifications

For notifications the setup is slightly different. Above the class is a table to hold all notification styles.

You can modify these to change the default styles for the included notifications or you can create additionals.

Example

const notification_styles = {
    system: {
        icon: 'fa fa-gear',
        header_text: 'System Alert',
        message: 'This is a system alert notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#2a0800',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2'
        }
    },
    staff: {
        icon: 'fa fa-user-secret',
        header_text: 'Staff Message',
        message: 'This is a staff message.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#4CAF50',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4CAF50'
        }
    },
    general: {
        icon: 'fa fa-bullhorn',
        header_text: 'General',
        message: 'This is a general notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#b4b4b4',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #b4b4b4'
        }
    },
    warning: {
        icon: 'fa fa-exclamation-triangle',
        header_text: 'Warning',
        message: 'This is a warning notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#ff0000',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #ff0000'
        }
    },
    error: {
        icon: 'fa fa-times-circle',
        header_text: 'Error',
        message: 'This is an error notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#ff0000',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #ff0000'
        }
    },
    success: {
        icon: 'fa fa-check-circle',
        header_text: 'Success',
        message: 'This is a success notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#00ff00',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4CAF50'
        }
    },
    info: {
        icon: 'fa fa-info-circle',
        header_text: 'info',
        message: 'This is an info notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#800080',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #800080'
        }
    },
    police: {
        icon: 'fa fa-shield-halved',
        header_text: 'Police Alert',
        message: 'This is a police notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#0000ff',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #2196F3'
        }
    },
    ems: {
        icon: 'fa fa-ambulance',
        header_text: 'EMS Alert',
        message: 'This is an EMS notification.',
        style: {
            background: '#1f1e1e',
            border_size: '0px',
            border_style: 'solid',
            border_colour: '#ffb6c1',
            border_radius: '15px',
            text_colour: '#b4b4b4',
            animation: '1s',
            box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #E91E63'
        }
    },
};

You can also adjust the default flex and positioning of the notifications within the class constructor.

Example

class NotificationManager {
    constructor() {
        this.styles = notification_styles;
        this.notifications_enabled = true;
        this.custom_styles = {};
        this.position = { top: '10px', left: '10px' };
        this.alignment = 'flex-start';
        this.load_user_settings();
        this.create_notification_container();
    }
...

Progress Bar

You can modify the default style of the progress bar within the class constructor.

You can also adjust the default position of the bar.

Example

class Progressbar {
    constructor() {
        this.default_style = { background: '#1f1e1e', bar_background: '#ffffff', bar_fill: '#4dcbc2', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' };
        this.custom_style = {};
        this.progress_container_position = { top: '900px', left: '690px' };
        this.load_user_settings();
        this.create_progress_container();
    }
...

Settings

You can adjust the default styles used by the settings display within the class constructor.

You can also set the default positionings. If notifications should be enabled by default. And your servers language.

Example

class Settings {
    constructor() {
        this.settings = {
            dark_mode: false,
            languages: ['de', 'en', 'es', 'fr', 'hi', 'it', 'ja', 'nl', 'pl', 'pt', 'zh'],
            language: 'en',
            notification: notification_styles,
            notifications_enabled: true,
            notification_dummy: 'system',
            notification_alignment: 'left',
            notification_container_position: { top: '10px', left: '10px' },
            draw_text: { background: '#1f1e1e', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' },
            draw_text_alignment: 'left',
            draw_text_container_position: { top: '500px', left: '10px' },
            progress_container_position: { top: '850px', left: '540px' },
            progress: { background: '#1f1e1e', bar_background: '#ffffff', bar_fill: '#4dcbc2', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' },
            context_container_position: { top: '150px', left: '1040px' },
            context: { background: '#1f1e1e', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' },
            dialogue: { background: '#1f1e1e', border_size: '0px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', vignette_colour: '#000000', box_shadow: '3px 5px 5px #0d0c0c, -4px -5px 6px #4dcbc2' }
        };
...

You may want to find the function reset_to_defaults and modify the default styles in here as well to ensure if players reset they reset back to your new defaults.

Example

reset_to_defaults(section, notification_type = null) {
        const defaults = {
            dark_mode: false,
            languages: ['de', 'en', 'es', 'fr', 'hi', 'it', 'ja', 'nl', 'pl', 'pt', 'zh'],
            language: 'en',
            notification: notification_styles,
            notifications_enabled: true,
            notification_dummy: 'system',
            notification_alignment: 'flex-start',
            notification_container_position: { top: '10px', left: '10px' },
            draw_text: { background: '#1f1e1e', border_size: '3px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '2px 2px 5px #0d0c0c, -2px -2px 5px #2b2a2a' },
            draw_text_alignment: 'flex-start',
            draw_text_container_position: { top: '500px', left: '10px' },
            progress_container_position: { top: '850px', left: '540px' },
            progress: { background: '#1f1e1e', bar_background: '#ffffff', bar_fill: '#4dcbc2', border_size: '3px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '2px 2px 5px #0d0c0c, -2px -2px 5px #2b2a2a' },
            context_container_position: { top: '150px', left: '1040px' },
            context: { background: '#1f1e1e', border_size: '3px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', box_shadow: '2px 2px 5px #0d0c0c, -2px -2px 5px #2b2a2a' },
            dialogue: { background: '#1f1e1e', border_size: '3px', border_style: 'solid', border_colour: '#b4b4b4', border_radius: '15px', text_colour: '#b4b4b4', animation: '1s', vignette_colour: '#000000', box_shadow: '2px 2px 5px #0d0c0c, -2px -2px 5px #2b2a2a' }
        };
...

PreviousInstallation NextUsage Guide

Last updated 7 months ago

Configuration

Action Menu

Context Menu

Example

Dialogue

Example

Draw Text

Example

Notifications

Example

Example

Progress Bar

Example

Settings

Example

Example