@nativewrappers/fivem 0.0.1

package/lib/client/ui/menu/items/panels/UIMenuColorPanel.js

@@ -0,0 +1,211 @@
+import { Color, Point, Size } from '../../../../utils';
+import { AbstractUIMenuPanel } from './';
+import { Rectangle, Sprite, Text } from '../../../';
+import { Alignment, Control, Font } from '../../../../enums';
+import { Game, Menu } from '../../../../';
+export class UIMenuColorPanel extends AbstractUIMenuPanel {
+    constructor(title, colors) {
+        super();
+        this._title = '';
+        this._colors = [];
+        this._bar = [];
+        this._lastColor = Color.empty;
+        // Pagination
+        this._min = 0;
+        this._max = 8;
+        this._total = 9;
+        this._index = 0;
+        this.background = new Sprite('commonmenu', 'gradient_bgd', new Point(), new Size(431, 112));
+        this._leftArrow = new Sprite('commonmenu', 'arrowleft', new Point(), new Size(30, 30));
+        this._rightArrow = new Sprite('commonmenu', 'arrowright', new Point(), new Size(30, 30));
+        this._selectedRectangle = new Rectangle(new Point(), new Size(44.5, 8), Color.white);
+        this._text = new Text('', new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Centered);
+        this.Title = title;
+        this.Colors = colors;
+    }
+    get Title() {
+        return this._title;
+    }
+    set Title(value) {
+        this._title = value ? value.trim() : '';
+        this._updateText();
+    }
+    get Colors() {
+        return this._colors;
+    }
+    set Colors(value) {
+        if (!value) {
+            value = [];
+        }
+        this._colors = value;
+        this._bar = [];
+        const colorRectangles = value.slice(0, this._total).map(color => {
+            return new Rectangle(new Point(0, 0), new Size(44.5, 44.5), color);
+        });
+        this._bar.push(...colorRectangles);
+        this._refreshIndex();
+        this._updateSelection(true);
+    }
+    get Color() {
+        return this._colors[this.Index];
+    }
+    set Color(value) {
+        const index = this._colors.findIndex(c => {
+            return c.a === value.a && c.r === value.r && c.g === value.g && c.b === value.b;
+        });
+        if (index !== -1) {
+            this.Index = index;
+        }
+    }
+    get Index() {
+        return this._index % this._colors.length;
+    }
+    set Index(value) {
+        value = 1000000 - (1000000 % this._colors.length) + value;
+        if (this.Index === value % this._colors.length) {
+            return;
+        }
+        this._index = value;
+        const currentSelection = this.Index;
+        if (currentSelection > this._max) {
+            this._min = currentSelection - this._total + 1;
+            this._max = currentSelection;
+        }
+        else if (currentSelection < this._min) {
+            this._min = currentSelection;
+            this._max = currentSelection + this._total - 1;
+        }
+        this._updateSelection();
+    }
+    updateParentItem() {
+        const last = this._lastColor;
+        const current = this.Color;
+        if (!last ||
+            last.a !== current.a ||
+            last.r !== current.r ||
+            last.g !== current.g ||
+            last.b !== current.b) {
+            this._lastColor = current;
+            if (this.ParentMenu)
+                this.ParentMenu.panelActivated.emit(this.parentItem, this, this.Index, current);
+            if (this.parentItem)
+                this.parentItem.panelActivated.emit(this, this.Index, current);
+        }
+    }
+    setVerticalPosition(y) {
+        super.setVerticalPosition(y);
+        this._selectedRectangle.pos.Y = y + 47;
+        this._leftArrow.pos.Y = y + 15;
+        this._rightArrow.pos.Y = y + 15;
+        this._text.pos.Y = y + 15;
+        this._bar.forEach(async (colorRect) => {
+            colorRect.pos.Y = y + 55;
+        });
+    }
+    draw() {
+        if (this.enabled) {
+            super.draw();
+            const x = (this.parentItem ? this.parentItem.offset.X : 0) +
+                (this.ParentMenu ? this.ParentMenu.WidthOffset / 2 : 0);
+            this._selectedRectangle.pos.X = x + 15 + 44.5 * (this.Index - this._min);
+            this._leftArrow.pos.X = x + 7.5;
+            this._rightArrow.pos.X = x + 393.5;
+            this._text.pos.X = x + 215.5;
+            this._leftArrow.draw(Menu.screenResolution);
+            this._rightArrow.draw(Menu.screenResolution);
+            this._text.draw(undefined, Menu.screenResolution);
+            this._selectedRectangle.draw(undefined, Menu.screenResolution);
+            this._bar.forEach(async (colorRect, index) => {
+                colorRect.pos.X = x + 15 + 44.5 * index;
+                colorRect.draw(undefined, Menu.screenResolution);
+            });
+            this._processControls();
+        }
+    }
+    _refreshIndex() {
+        if (!this._colors.length) {
+            this._index = 1000;
+        }
+        else {
+            this._index = 1000 - (1000 % this._colors.length);
+        }
+        this._max = this._total - 1;
+        this._min = 0;
+    }
+    _updateSelection(preventUpdate = false) {
+        if (!preventUpdate) {
+            this.updateParentItem();
+        }
+        this._bar.forEach(async (colorRect, index) => {
+            colorRect.color = this._colors[this._min + index];
+        });
+        this._updateText();
+    }
+    _updateText() {
+        this._text.caption = `${this._title} [${this.Index + 1 || 0} / ${this._colors.length}]`;
+    }
+    _goLeft() {
+        if (this._colors.length > this._total) {
+            if (this.Index <= this._min) {
+                if (this.Index === 0) {
+                    this._min = this._colors.length - this._total;
+                    this._max = this._colors.length - 1;
+                    this._index = 1000 - (1000 % this._colors.length);
+                    this._index += this._colors.length - 1;
+                }
+                else {
+                    this._min--;
+                    this._max--;
+                    this._index--;
+                }
+            }
+            else {
+                this._index--;
+            }
+        }
+        else {
+            this._index--;
+        }
+        this._updateSelection();
+    }
+    _goRight() {
+        if (this._colors.length > this._total) {
+            if (this.Index >= this._max) {
+                if (this.Index === this._colors.length - 1) {
+                    this._min = 0;
+                    this._max = this._total - 1;
+                    this._index = 1000 - (1000 % this._colors.length);
+                }
+                else {
+                    this._min++;
+                    this._max++;
+                    this._index++;
+                }
+            }
+            else {
+                this._index++;
+            }
+        }
+        else {
+            this._index++;
+        }
+        this._updateSelection();
+    }
+    _processControls() {
+        if (Game.isDisabledControlJustPressed(0, Control.Attack)) {
+            if (this.ParentMenu) {
+                if (this.ParentMenu.isMouseInBounds(this._leftArrow.pos, this._leftArrow.size)) {
+                    this._goLeft();
+                }
+                else if (this.ParentMenu.isMouseInBounds(this._rightArrow.pos, this._rightArrow.size)) {
+                    this._goRight();
+                }
+                this._bar.forEach(async (colorRect, index) => {
+                    if (this.ParentMenu && this.ParentMenu.isMouseInBounds(colorRect.pos, colorRect.size)) {
+                        this.Index = this._min + index;
+                    }
+                });
+            }
+        }
+    }
+}

package/lib/client/ui/menu/items/panels/UIMenuGridPanel.d.ts

@@ -0,0 +1,40 @@
+import { Point } from '../../../../utils';
+import { AbstractUIMenuPanel } from './';
+import { Sprite } from '../../../';
+export declare class UIMenuGridPanel extends AbstractUIMenuPanel {
+    protected readonly background: Sprite;
+    private _isCircleLocked;
+    private _pressed;
+    private _lockXAxis;
+    private _lockYAxis;
+    private _topText;
+    private _leftText;
+    private _rightText;
+    private _bottomText;
+    private _lastCirclePosition;
+    private readonly _grid;
+    private readonly _circle;
+    private readonly _setCirclePosition;
+    constructor(topText?: string, leftText?: string, rightText?: string, bottomText?: string, circlePosition?: Point);
+    get TopText(): string;
+    set TopText(value: string);
+    get LeftText(): string;
+    set LeftText(value: string);
+    get RightText(): string;
+    set RightText(value: string);
+    get BottomText(): string;
+    set BottomText(value: string);
+    get CirclePosition(): Point;
+    set CirclePosition(position: Point);
+    set CirclePositionX(x: number);
+    set CirclePositionY(y: number);
+    get LockXAxis(): boolean;
+    set LockXAxis(value: boolean);
+    get LockYAxis(): boolean;
+    set LockYAxis(value: boolean);
+    updateParentItem(): void;
+    setVerticalPosition(y: number): void;
+    draw(): void;
+    private _setText;
+    private _processControls;
+}

package/lib/client/ui/menu/items/panels/UIMenuGridPanel.js

@@ -0,0 +1,215 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Color, Point, Size, Wait } from '../../../../utils';
+import { AbstractUIMenuPanel } from './';
+import { Menu, Sprite, Text } from '../../../';
+import { Alignment, Control, Font } from '../../../../enums';
+import { Game } from '../../../../Game';
+export class UIMenuGridPanel extends AbstractUIMenuPanel {
+    constructor(topText, leftText, rightText, bottomText, circlePosition) {
+        super();
+        this._isCircleLocked = false;
+        this._pressed = false;
+        this._lockXAxis = false;
+        this._lockYAxis = false;
+        this._setCirclePosition = circlePosition || new Point(0.5, 0.5);
+        this.background = new Sprite('commonmenu', 'gradient_bgd', new Point(), new Size(431, 275));
+        this._grid = new Sprite('pause_menu_pages_char_mom_dad', 'nose_grid', new Point(), new Size(200, 200));
+        this._circle = new Sprite('mpinventory', 'in_world_circle', new Point(), new Size(20, 20));
+        this.TopText = topText ?? '';
+        this.LeftText = leftText ?? '';
+        this.RightText = rightText ?? '';
+        this.BottomText = bottomText ?? '';
+        this._lastCirclePosition = this._setCirclePosition;
+    }
+    get TopText() {
+        return this._topText ? this._topText.caption : '';
+    }
+    set TopText(value) {
+        this._setText('_topText', value);
+    }
+    get LeftText() {
+        return this._leftText ? this._leftText.caption : '';
+    }
+    set LeftText(value) {
+        this._setText('_leftText', value);
+    }
+    get RightText() {
+        return this._rightText ? this._rightText.caption : '';
+    }
+    set RightText(value) {
+        this._setText('_rightText', value);
+    }
+    get BottomText() {
+        return this._bottomText ? this._bottomText.caption : '';
+    }
+    set BottomText(value) {
+        this._setText('_bottomText', value);
+    }
+    get CirclePosition() {
+        return new Point(Math.round(((this._circle.pos.X - (this._grid.pos.X + 20) + this._circle.size.width / 2) /
+            (this._grid.size.width - 40)) *
+            100) / 100, Math.round(((this._circle.pos.Y - (this._grid.pos.Y + 20) + this._circle.size.height / 2) /
+            (this._grid.size.height - 40)) *
+            100) / 100);
+    }
+    set CirclePosition(position) {
+        this.CirclePositionX = position.X;
+        this.CirclePositionY = position.Y;
+    }
+    set CirclePositionX(x) {
+        if (this._isCircleLocked && this._lockXAxis) {
+            return;
+        }
+        x = x >= 0 && x <= 1 ? x : 0;
+        this._setCirclePosition.X = x;
+        this._circle.pos.X =
+            this._grid.pos.X + 20 + (this._grid.size.width - 40) * x - this._circle.size.width / 2;
+    }
+    set CirclePositionY(y) {
+        if (this._isCircleLocked && this._lockYAxis) {
+            return;
+        }
+        y = y >= 0 && y <= 1 ? y : 0;
+        this._setCirclePosition.Y = y;
+        this._circle.pos.Y =
+            this._grid.pos.Y + 20 + (this._grid.size.height - 40) * y - this._circle.size.height / 2;
+    }
+    get LockXAxis() {
+        return this._lockXAxis;
+    }
+    set LockXAxis(value) {
+        this._lockXAxis = value;
+        if (value) {
+            if (this._lockYAxis) {
+                this._lockYAxis = false;
+            }
+            this.CirclePositionX = 0.5;
+        }
+    }
+    get LockYAxis() {
+        return this._lockYAxis;
+    }
+    set LockYAxis(value) {
+        this._lockYAxis = value;
+        if (value) {
+            if (this._lockXAxis) {
+                this._lockXAxis = false;
+            }
+            this.CirclePositionY = 0.5;
+        }
+    }
+    updateParentItem() {
+        const last = this._lastCirclePosition;
+        const current = this.CirclePosition;
+        if (!last || last.X !== current.X || last.Y !== current.Y) {
+            this._lastCirclePosition = current;
+            if (this.ParentMenu && this.parentItem) {
+                this.ParentMenu.panelActivated.emit(this.parentItem, this, current);
+                this.parentItem.panelActivated.emit(this, current);
+            }
+        }
+    }
+    setVerticalPosition(y) {
+        super.setVerticalPosition(y);
+        this._grid.pos.Y = y + 37.5;
+        if (this._topText) {
+            this._topText.pos.Y = y + 5;
+        }
+        if (this._leftText) {
+            this._leftText.pos.Y = y + 120;
+        }
+        if (this._rightText) {
+            this._rightText.pos.Y = y + 120;
+        }
+        if (this._bottomText) {
+            this._bottomText.pos.Y = y + 240;
+        }
+    }
+    draw() {
+        if (this.enabled) {
+            super.draw();
+            const x = this.parentItem?.offset.X ?? 0 + (this.ParentMenu?.WidthOffset ?? 0) / 2;
+            this._grid.pos.X = x + 115.5;
+            if (!this._isCircleLocked) {
+                this.CirclePosition = this._setCirclePosition;
+                this._isCircleLocked = true;
+            }
+            this._grid.draw(Menu.screenResolution);
+            this._circle.draw(Menu.screenResolution);
+            if (this._topText) {
+                this._topText.pos.X = x + 215.5;
+                this._topText.draw(undefined, Menu.screenResolution);
+            }
+            if (this._leftText) {
+                this._leftText.pos.X = x + 57.75;
+                this._leftText.draw(undefined, Menu.screenResolution);
+            }
+            if (this._rightText) {
+                this._rightText.pos.X = x + 373.25;
+                this._rightText.draw(undefined, Menu.screenResolution);
+            }
+            if (this._bottomText) {
+                this._bottomText.pos.X = x + 215.5;
+                this._bottomText.draw(undefined, Menu.screenResolution);
+            }
+            this._processControls();
+        }
+    }
+    _setText(name, value) {
+        if (value && value.trim() !== '') {
+            // @ts-ignore
+            if (!this[name]) {
+                // @ts-ignore
+                this[name] = new Text(value, new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Centered);
+            }
+            else {
+                // @ts-ignore
+                this[name].caption = value;
+            }
+            // @ts-ignore
+        }
+        else if (this[name]) {
+            // @ts-ignore
+            delete this[name];
+        }
+    }
+    _processControls() {
+        if (!this._pressed &&
+            Game.isDisabledControlJustPressed(0, Control.Attack) &&
+            this.ParentMenu?.isMouseInBounds(this._grid.pos, this._grid.size)) {
+            this._pressed = true;
+            (async () => {
+                const drawOffset = this.ParentMenu?.DrawOffset ?? new Point(0, 0);
+                while (Game.isDisabledControlPressed(0, Control.Attack)) {
+                    await Wait(0);
+                    let cX = (GetControlNormal(0, Control.CursorX) - drawOffset.X) * Menu.screenWidth;
+                    let cY = (GetControlNormal(0, Control.CursorY) - drawOffset.Y) * Menu.screenHeight;
+                    cX -= this._circle.size.width / 2;
+                    cY -= this._circle.size.height / 2;
+                    this._circle.pos.X =
+                        cX > this._grid.pos.X + 10 + this._grid.size.width - (this._lockXAxis ? 120 : 40)
+                            ? this._grid.pos.X + 10 + this._grid.size.width - (this._lockXAxis ? 120 : 40)
+                            : cX < this._grid.pos.X + (this._lockXAxis ? 100 : 20) - this._circle.size.width / 2
+                                ? this._grid.pos.X + (this._lockXAxis ? 100 : 20) - this._circle.size.width / 2
+                                : cX;
+                    this._circle.pos.Y =
+                        cY > this._grid.pos.Y + 10 + this._grid.size.height - (this._lockYAxis ? 120 : 40)
+                            ? this._grid.pos.Y + 10 + this._grid.size.height - (this._lockYAxis ? 120 : 40)
+                            : cY < this._grid.pos.Y + (this._lockYAxis ? 100 : 20) - this._circle.size.height / 2
+                                ? this._grid.pos.Y + (this._lockYAxis ? 100 : 20) - this._circle.size.height / 2
+                                : cY;
+                }
+                this.updateParentItem();
+                this._pressed = false;
+            })();
+            const interval = setInterval(async () => {
+                if (Game.isDisabledControlPressed(0, Control.Attack)) {
+                    this.updateParentItem();
+                }
+                else {
+                    clearInterval(interval);
+                }
+            }, 75);
+        }
+    }
+}

package/lib/client/ui/menu/items/panels/UIMenuPercentagePanel.d.ts

@@ -0,0 +1,26 @@
+import { AbstractUIMenuPanel } from './';
+import { Sprite } from '../../../';
+export declare class UIMenuPercentagePanel extends AbstractUIMenuPanel {
+    protected readonly background: Sprite;
+    private _pressed;
+    private _lastPercentage;
+    private readonly _title;
+    private readonly _minText;
+    private readonly _maxText;
+    private readonly _activeBar;
+    private readonly _backgroundBar;
+    constructor(title?: string, percentage?: number, minText?: string, maxText?: string);
+    get Title(): string;
+    set Title(value: string);
+    get MinText(): string;
+    set MinText(value: string);
+    get MaxText(): string;
+    set MaxText(value: string);
+    get Percentage(): number;
+    set Percentage(value: number);
+    updateParentItem(): void;
+    setVerticalPosition(y: number): void;
+    draw(): void;
+    private _processControls;
+    private _getProgress;
+}

package/lib/client/ui/menu/items/panels/UIMenuPercentagePanel.js

@@ -0,0 +1,115 @@
+import { Color, Point, Size } from '../../../../utils';
+import { AbstractUIMenuPanel } from './';
+import { Menu, Rectangle, Sprite, Text } from '../../../';
+import { Alignment, Control, Font } from '../../../../enums';
+import { Game, Wait } from '../../../../';
+export class UIMenuPercentagePanel extends AbstractUIMenuPanel {
+    constructor(title = '', percentage = 0, minText, maxText) {
+        super();
+        this._pressed = false;
+        this.background = new Sprite('commonmenu', 'gradient_bgd', new Point(), new Size(431, 76));
+        const barSize = new Size(413, 10);
+        this._activeBar = new Rectangle(new Point(), barSize, Color.fromRgb(245, 245, 245));
+        this._backgroundBar = new Rectangle(new Point(), { ...barSize }, Color.fromRgb(87, 87, 87));
+        this._title = new Text('', new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Centered);
+        this._minText = new Text('', new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Centered);
+        this._maxText = new Text('', new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Centered);
+        this.Title = title;
+        this.MinText = minText || '0%';
+        this.MaxText = maxText || '100%';
+        this.Percentage = percentage;
+        this._lastPercentage = percentage;
+    }
+    get Title() {
+        return this._title.caption;
+    }
+    set Title(value) {
+        this._title.caption = value ? value.trim() : '';
+    }
+    get MinText() {
+        return this._minText.caption;
+    }
+    set MinText(value) {
+        this._minText.caption = value ? value.trim() : '';
+    }
+    get MaxText() {
+        return this._maxText.caption;
+    }
+    set MaxText(value) {
+        this._maxText.caption = value ? value.trim() : '';
+    }
+    get Percentage() {
+        const progress = this._activeBar.size.width / this._backgroundBar.size.width;
+        return Math.round(progress * 100) / 100;
+    }
+    set Percentage(value) {
+        value = value || 0;
+        value = value < 0 ? 0 : value > 1 ? 1 : value;
+        this._activeBar.size.width = this._backgroundBar.size.width * value;
+    }
+    updateParentItem() {
+        const last = this._lastPercentage;
+        const current = this.Percentage;
+        if (last !== current) {
+            this._lastPercentage = current;
+            if (this.ParentMenu && this.parentItem) {
+                this.ParentMenu.panelActivated.emit(this.parentItem, this, current);
+                this.parentItem.panelActivated.emit(this, current);
+            }
+        }
+    }
+    setVerticalPosition(y) {
+        super.setVerticalPosition(y);
+        this._activeBar.pos.Y = y + 50;
+        this._backgroundBar.pos.Y = y + 50;
+        y += 15;
+        this._minText.pos.Y = y;
+        this._title.pos.Y = y;
+        this._maxText.pos.Y = y;
+    }
+    draw() {
+        if (this.enabled) {
+            super.draw();
+            const x = this.parentItem?.offset.X ?? 0 + (this.ParentMenu?.WidthOffset ?? 0) / 2;
+            this._activeBar.pos.X = x + 9;
+            this._backgroundBar.pos.X = x + 9;
+            this._minText.pos.X = x + 25;
+            this._title.pos.X = x + 215.5;
+            this._maxText.pos.X = x + 398;
+            this._backgroundBar.draw(undefined, Menu.screenResolution);
+            this._activeBar.draw(undefined, Menu.screenResolution);
+            this._minText.draw(undefined, Menu.screenResolution);
+            this._title.draw(undefined, Menu.screenResolution);
+            this._maxText.draw(undefined, Menu.screenResolution);
+            this._processControls();
+        }
+    }
+    _processControls() {
+        if (!this._pressed &&
+            Game.isDisabledControlJustPressed(0, Control.Attack) &&
+            this.ParentMenu?.isMouseInBounds(new Point(this._backgroundBar.pos.X, this._backgroundBar.pos.Y - 4), new Size(this._backgroundBar.size.width, this._backgroundBar.size.height + 8))) {
+            this._pressed = true;
+            (async () => {
+                while (Game.isDisabledControlPressed(0, Control.Attack)) {
+                    await Wait(0);
+                    this._activeBar.size.width = this._getProgress();
+                }
+                this.updateParentItem();
+                this._pressed = false;
+            })();
+            const interval = setInterval(async () => {
+                if (Game.isDisabledControlPressed(0, Control.Attack)) {
+                    this.updateParentItem();
+                }
+                else {
+                    clearInterval(interval);
+                }
+            }, 75);
+        }
+    }
+    _getProgress() {
+        const drawOffset = this.ParentMenu?.DrawOffset ?? new Point(0, 0);
+        const progress = (GetControlNormal(0, 239) - drawOffset.X) * Menu.screenWidth - this._activeBar.pos.X;
+        return progress < 0 ? 0 : progress > 413 ? 413 : progress;
+    }
+}

package/lib/client/ui/menu/items/panels/UIMenuStatisticsPanel.d.ts

@@ -0,0 +1,16 @@
+import { AbstractUIMenuPanel, UIMenuStatisticsPanelItem } from './';
+import { Rectangle } from '../../../';
+export declare class UIMenuStatisticsPanel extends AbstractUIMenuPanel {
+    protected readonly background: Rectangle;
+    private _divider;
+    private _items;
+    constructor(item?: UIMenuStatisticsPanelItem[] | UIMenuStatisticsPanelItem, divider?: boolean);
+    get Divider(): boolean;
+    set Divider(value: boolean);
+    get Items(): UIMenuStatisticsPanelItem[];
+    set Items(value: UIMenuStatisticsPanelItem[]);
+    addItem(item: UIMenuStatisticsPanelItem | UIMenuStatisticsPanelItem[]): void;
+    removeItem(itemOrIndex: UIMenuStatisticsPanelItem | number): void;
+    setVerticalPosition(y: number): void;
+    draw(): void;
+}