@nativewrappers/fivem 0.0.28 → 0.0.30

package/README.md

@@ -1,37 +1,36 @@
 <h1 align="center">Monorepo for a FiveM server/client wrapper</h1>
 
 <p align="center">
-	<i>:fire: A Javascript/Typescript wrapper for the FiveM server natives :video_game:</i>
-	<br>
-	<br>
-	<a href="https://github.com/nativewrappers/fivem/blob/master/LICENSE">
-		<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat" alt="License: MIT">
-	</a>
-	<a href="https://www.npmjs.com/package/@nativewrappers/fivem">
-		<img src="https://img.shields.io/npm/v/@nativewrappers/fivem?style=flat" alt="npm version">
-	</a>
-	<a href="https://www.npmjs.com/package/@nativewrappers/fivem">
-		<img src="https://img.shields.io/npm/dm/@nativewrappers/fivem?style=flat">
-	</a>
-	<a href="https://github.com/nativewrappers/fivem/actions/workflows/config.yml">
-		<img src="https://github.com/nativewrappers/fivem/actions/workflows/config.yml/badge.svg" alt="Workflow Status">
-	</a>
-	<a href="https://github.com/nativewrappers/fivem/commits/master">
-		<img src="https://img.shields.io/github/last-commit/nativewrappers/fivem.svg?style=flat" alt="Last commit">
-	</a>
+	<i>🔥 A Javascript/Typescript package for FiveM resource development 🎮</i>
+  <br>
+  <small>This project is in no way affiliated with FiveM or the Cfx.re Collective.</small>
+  </br></br>
+  <a href="https://github.com/nativewrappers/fivem/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat" alt="License: MIT">
+  </a>
+  <a href="https://www.npmjs.com/package/@nativewrappers/fivem">
+    <img src="https://img.shields.io/npm/v/@nativewrappers/fivem?style=flat" alt="npm version">
+  </a>
+  <a href="https://www.npmjs.com/package/@nativewrappers/fivem">
+    <img src="https://img.shields.io/npm/dm/@nativewrappers/fivem?style=flat">
+  </a>
+  <a href="https://github.com/nativewrappers/fivem/actions/workflows/config.yml">
+    <img src="https://github.com/nativewrappers/fivem/actions/workflows/config.yml/badge.svg" alt="Workflow Status">
+  </a>
+  <a href="https://github.com/nativewrappers/fivem/commits/master">
+    <img src="https://img.shields.io/github/last-commit/nativewrappers/fivem.svg?style=flat" alt="Last commit">
+  </a>
 </p>
 
+<h3 align="center">This project is currently interating rapidly, there will be breaking changes.</h3>
+
 <p align="center">
-	<a href="https://fivemjs-server.avarian.dev/">Documentation</a>
-	-
+	<h2 align="center"><a href="https://github.com/nativewrappers/fivem/tree/main/docs">Documentation</a></h2>
 	<!-- <a href="https://forum.fivem.net/t/fivem-js-v1-3-2-javascript-typescript-wrapper-now-with-menu-class-nativeui/268640">Forum</a> -->
 </p>
 
-## This project is currently interating rapidly, there will be breaking changes.
-
-This project is in no way affiliated with FiveM or the Cfx.re Collective.
-
 ## Features
+
 - No runtime dependencies
 - Abstracts common used FiveM practices
 - Entity management through class objects (i.e. `Vehicle` and `Ped` entities)

package/client/ParticleEffect.js

@@ -14,7 +14,7 @@ export class ParticleEffect {
     constructor(asset, effectName) {
         this.offset = new Vector3(0, 0, 0);
         this.rotation = new Vector3(0, 0, 0);
-        this.color = Color.empty;
+        this.color = Color.Transparent;
         this.scale = 1.0;
         this.range = 1.0;
         this.invertAxis = { flags: InvertAxisFlags.None };

package/client/cfx/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@citizenfx/client" />
 export { StateBagChangeHandler } from './StateBagChangeHandler';
 declare const _default: {
     Entity: typeof Entity;

package/client/models/BaseEntity.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@citizenfx/client" />
 import { Blip } from '../Blip';
 import { ForceType } from '../enums';
 import { MaterialHash, WeaponHash } from '../hashes';
@@ -133,12 +132,36 @@ export declare class BaseEntity {
     isNearEntity(entity: BaseEntity, bounds: Vector3): boolean;
     isTouching(entity: BaseEntity): boolean;
     isTouchingModel(model: Model): boolean;
+    /**
+      * @deprecated use [[getAbsolutePositionOffset]]
+      */
+    getOffsetPosition(offset: Vector3): Vector3;
     /**
      * @param offset: the amount to offset from the entity
      * @returns the offset position from the entity in world coords
      */
-    getOffsetPosition(offset: Vector3): Vector3;
+    getAbsolutePositionOffset(offset: Vector3): Vector3;
+    /**
+     * @deprecated use [[getRelativePositionOffset]] instead
+     */
     getPositionOffset(worldCoords: Vector3): Vector3;
+    /**
+      * @example
+      * ```typescript
+      * const ply = Game.PlayerPed;
+      * const plyPos = ply.Position;
+      * const bag = await World.createProp(new Model('ba_prop_battle_bag_01b'), plyPos, true, true, true);
+      * bag.attachToBone(
+      *     ply.Bones.getBone(64113),
+      *     new Vector3(0.12, -0.25, 0.0),
+      *     new Vector3(105.0, 50.0, 190.0)
+      * )
+      * const offset = bag.getRelativePositionOffset(plyPos);
+      * ```
+      * @param worldCoords: the offset given the world coords
+      * @returns the offset position from the entity in relative coords
+      */
+    getRelativePositionOffset(worldCoords: Vector3): Vector3;
     attachTo(entity: BaseEntity, position: Vector3, rotation: Vector3, collisions?: boolean, unk9?: boolean, useSoftPinning?: boolean, rotationOrder?: number): void;
     attachToBone(entityBone: EntityBone, position: Vector3, rotation: Vector3, collisions?: boolean, unk9?: boolean, useSoftPinning?: boolean, rotationOrder?: number): void;
     detach(): void;

package/client/models/BaseEntity.js

@@ -362,14 +362,43 @@ export class BaseEntity {
     isTouchingModel(model) {
         return IsEntityTouchingModel(this.handle, model.Hash);
     }
+    /**
+      * @deprecated use [[getAbsolutePositionOffset]]
+      */
+    getOffsetPosition(offset) {
+        return Vector3.fromArray(GetOffsetFromEntityInWorldCoords(this.handle, offset.x, offset.y, offset.z));
+    }
     /**
      * @param offset: the amount to offset from the entity
      * @returns the offset position from the entity in world coords
      */
-    getOffsetPosition(offset) {
+    getAbsolutePositionOffset(offset) {
         return Vector3.fromArray(GetOffsetFromEntityInWorldCoords(this.handle, offset.x, offset.y, offset.z));
     }
+    /**
+     * @deprecated use [[getRelativePositionOffset]] instead
+     */
     getPositionOffset(worldCoords) {
+        return this.getRelativePositionOffset(worldCoords);
+    }
+    // TODO: Better example
+    /**
+      * @example
+      * ```typescript
+      * const ply = Game.PlayerPed;
+      * const plyPos = ply.Position;
+      * const bag = await World.createProp(new Model('ba_prop_battle_bag_01b'), plyPos, true, true, true);
+      * bag.attachToBone(
+      *     ply.Bones.getBone(64113),
+      *     new Vector3(0.12, -0.25, 0.0),
+      *     new Vector3(105.0, 50.0, 190.0)
+      * )
+      * const offset = bag.getRelativePositionOffset(plyPos);
+      * ```
+      * @param worldCoords: the offset given the world coords
+      * @returns the offset position from the entity in relative coords
+      */
+    getRelativePositionOffset(worldCoords) {
         return Vector3.fromArray(GetOffsetFromEntityGivenWorldCoords(this.handle, worldCoords.x, worldCoords.y, worldCoords.z));
     }
     attachTo(entity, position, rotation, collisions = false, unk9 = true, useSoftPinning = true, rotationOrder = 1) {

package/client/models/Player.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@citizenfx/client" />
 import { Model, Color } from '..';
 import { StateBagChangeHandler } from '../cfx';
 import { BaseEntity, Ped } from './';

package/client/ui/Screen.js

@@ -47,7 +47,7 @@ export class Screen {
         });
         return new Notification(DrawNotification(blinking, true));
     }
-    static showAdvancedNotification(message, title, subtitle, iconSet, icon, bgColor = HudColor.NONE, flashColor = Color.empty, blinking = false, type = NotificationType.Default, showInBrief = true, sound = true) {
+    static showAdvancedNotification(message, title, subtitle, iconSet, icon, bgColor = HudColor.NONE, flashColor = Color.Transparent, blinking = false, type = NotificationType.Default, showInBrief = true, sound = true) {
         const strings = String.stringToArray(message);
         SetNotificationTextEntry('CELL_EMAIL_BCON');
         strings.forEach(element => {
@@ -56,7 +56,7 @@ export class Screen {
         if (bgColor !== HudColor.NONE) {
             SetNotificationBackgroundColor(Number(bgColor));
         }
-        if (flashColor !== Color.empty && blinking) {
+        if (flashColor !== Color.Transparent && blinking) {
             SetNotificationFlashColor(flashColor.r, flashColor.g, flashColor.b, flashColor.a);
         }
         if (sound) {

package/client/ui/Sprite.js

@@ -1,13 +1,13 @@
 import { Color, Point, Size } from '../utils';
 import { Screen } from './';
 export class Sprite {
-    constructor(textureDict, textureName, pos, size, heading = 0, color = Color.white) {
+    constructor(textureDict, textureName, pos, size, heading = 0, color = Color.White) {
         this._textureDict = textureDict;
         this.textureName = textureName;
         this.pos = pos || new Point();
         this.size = size || new Size();
         this.heading = heading || 0;
-        this.color = color || Color.white;
+        this.color = color || Color.White;
         this.visible = true;
     }
     loadTextureDictionary() {

package/client/ui/Text.js

@@ -2,7 +2,7 @@ import { Alignment, Font } from '../enums';
 import { Color, Point, Size } from '../utils';
 import { Screen } from './';
 export class Text {
-    static draw(caption, pos, scale = 1, color = Color.white, font = Font.ChaletLondon, alignment = Alignment.Left, dropShadow = false, outline = false, wordWrap, resolution) {
+    static draw(caption, pos, scale = 1, color = Color.White, font = Font.ChaletLondon, alignment = Alignment.Left, dropShadow = false, outline = false, wordWrap, resolution) {
         resolution = resolution || new Size(Screen.ScaledWidth, Screen.Height);
         const x = pos.X / resolution.width;
         const y = pos.Y / resolution.height;
@@ -36,6 +36,7 @@ export class Text {
     static addLongString(str) {
         const strLen = 99;
         for (let i = 0; i < str.length; i += strLen) {
+            // TODO: Fix deprecation warning
             const substr = str.substr(i, Math.min(strLen, str.length - i));
             AddTextComponentSubstringPlayerName(substr);
         }
@@ -52,7 +53,7 @@ export class Text {
      * @param outline
      * @param wordWrap
      */
-    constructor(caption, pos, scale = 1, color = Color.white, font = Font.ChaletLondon, alignment = Alignment.Left, dropShadow = false, outline = false, wordWrap = new Size(500, 300)) {
+    constructor(caption, pos, scale = 1, color = Color.White, font = Font.ChaletLondon, alignment = Alignment.Left, dropShadow = false, outline = false, wordWrap = new Size(500, 300)) {
         this.caption = caption;
         this.pos = pos;
         this.scale = scale;

package/client/ui/Timerbar.js

@@ -87,7 +87,7 @@ export class Timerbar {
         const safeZone = GetSafeZoneSize();
         const safeZoneX = (1.0 - safeZone) * 0.5;
         const safeZoneY = (1.0 - safeZone) * 0.5;
-        this.sprite = new Sprite('timerbars', 'all_black_bg', new Point(Screen.ScaledWidth * 0.918 - safeZoneX, Screen.Height * 0.984 - safeZoneY), new Size(Screen.ScaledWidth * 0.165, Screen.Height * 0.035), 0, new Color(160, 255, 255, 255));
+        this.sprite = new Sprite('timerbars', 'all_black_bg', new Point(Screen.ScaledWidth * 0.918 - safeZoneX, Screen.Height * 0.984 - safeZoneY), new Size(Screen.ScaledWidth * 0.165, Screen.Height * 0.035), 0, new Color(255, 255, 255, 160));
         if (!this.sprite.IsTextureDictionaryLoaded) {
             this.sprite.loadTextureDictionary();
         }

package/client/ui/menu/Menu.js

@@ -38,26 +38,26 @@ export class Menu {
         this._settings = new MenuSettings();
         this._offset = offset;
         // Create everything
-        this._mainMenu = new Container(new Point(), new Size(700, 500), Color.transparent);
+        this._mainMenu = new Container(new Point(), new Size(700, 500), Color.Transparent);
         this._logo = new Sprite(spriteLibrary || '', spriteName || '', new Point(this._offset.X, this._offset.Y), new Size(431, 107));
         this._mainMenu.addItem([
-            (this._title = new Text(title || '', new Point(431 / 2 + this._offset.X, 20 + this._offset.Y), 1.15, Color.white, 1, Alignment.Centered)),
-            (this._subtitleResRectangle = new Rectangle(new Point(this._offset.X, 107 + this._offset.Y), new Size(431, 37), Color.black)),
-            (this._subtitle = new Text(subtitle || '', new Point(8 + this._offset.X, 110 + this._offset.Y), 0.35, Color.white, 0, Alignment.Left)),
+            (this._title = new Text(title || '', new Point(431 / 2 + this._offset.X, 20 + this._offset.Y), 1.15, Color.White, 1, Alignment.Centered)),
+            (this._subtitleResRectangle = new Rectangle(new Point(this._offset.X, 107 + this._offset.Y), new Size(431, 37), Color.Black)),
+            (this._subtitle = new Text(subtitle || '', new Point(8 + this._offset.X, 110 + this._offset.Y), 0.35, Color.White, 0, Alignment.Left)),
         ]);
         if (this._subtitle.caption.startsWith('~')) {
             this._counterPretext = this._subtitle.caption.substr(0, 3);
         }
-        this._counterText = new Text('', new Point(425 + this._offset.X, 110 + this._offset.Y), 0.35, Color.white, 0, Alignment.Right);
+        this._counterText = new Text('', new Point(425 + this._offset.X, 110 + this._offset.Y), 0.35, Color.White, 0, Alignment.Right);
         this._upAndDownSprite = new Sprite('commonmenu', 'shop_arrows_upanddown', new Point(), new Size(50, 50));
         const extraRectanglePos = new Point(this._offset.X);
         const extraRectangleSize = new Size(431, 18);
-        const extraRectangleColor = new Color(200, 0, 0, 0);
+        const extraRectangleColor = new Color(0, 0, 0, 200);
         this._extraRectangleUp = new Rectangle(extraRectanglePos, extraRectangleSize, extraRectangleColor);
         this._extraRectangleDown = new Rectangle({ ...extraRectanglePos }, { ...extraRectangleSize }, { ...extraRectangleColor });
-        this._descriptionBar = new Rectangle(new Point(this._offset.X), new Size(431, 4), Color.black);
+        this._descriptionBar = new Rectangle(new Point(this._offset.X), new Size(431, 4), Color.Black);
         this._descriptionRectangle = new Sprite('commonmenu', 'gradient_bgd', new Point(this._offset.X), new Size(431, 30));
-        this._descriptionText = new Text('Description', new Point(this._offset.X + 8), 0.35, Color.white, Font.ChaletLondon, Alignment.Left);
+        this._descriptionText = new Text('Description', new Point(this._offset.X + 8), 0.35, Color.White, Font.ChaletLondon, Alignment.Left);
         this._background = new Sprite('commonmenu', 'gradient_bgd', new Point(this._offset.X, 144 + this._offset.Y), new Size(290, 25));
         setTick(() => {
             this._render();
@@ -560,7 +560,7 @@ export class Menu {
             }
         }
         else {
-            this._extraRectangleUp.color = new Color(200, 0, 0, 0);
+            this._extraRectangleUp.color = new Color(0, 0, 0, 200);
         }
         if (this._mousePressed) {
             return;
@@ -581,7 +581,7 @@ export class Menu {
             }
         }
         else {
-            this._extraRectangleDown.color = new Color(200, 0, 0, 0);
+            this._extraRectangleDown.color = new Color(0, 0, 0, 200);
         }
     }
     _processControl() {

package/client/ui/menu/items/UIMenuCheckboxItem.js

@@ -52,6 +52,6 @@ export class UIMenuCheckboxItem extends UIMenuItem {
         return `shop_box_${name}${this.selected ? 'b' : ''}`;
     }
     _getSpriteColor() {
-        return this.enabled ? Color.white : Color.fromRgb(109, 109, 109);
+        return this.enabled ? Color.White : Color.fromRgb(109, 109, 109);
     }
 }

package/client/ui/menu/items/UIMenuItem.js

@@ -1004,10 +1004,10 @@ export class UIMenuItem {
             case BadgeStyle.BrandRune:
                 return selected
                     ? enabled
-                        ? Color.black
+                        ? Color.Black
                         : Color.fromRgb(50, 50, 50)
                     : enabled
-                        ? Color.white
+                        ? Color.White
                         : Color.fromRgb(109, 109, 109);
             case BadgeStyle.GlobeBlue:
                 return enabled ? Color.fromRgb(10, 103, 166) : Color.fromRgb(11, 62, 117);
@@ -1020,7 +1020,7 @@ export class UIMenuItem {
             case BadgeStyle.GlobeYellow:
                 return enabled ? Color.fromRgb(232, 207, 14) : Color.fromRgb(131, 133, 12);
             default:
-                return enabled ? Color.white : Color.fromRgb(109, 109, 109);
+                return enabled ? Color.White : Color.fromRgb(109, 109, 109);
         }
     }
     setVerticalPosition(y) {
@@ -1050,7 +1050,7 @@ export class UIMenuItem {
                 : this.hovered
                     ? UIMenuItem.defaultHoveredForeColor
                     : this._foreColor
-            : new Color(255, 163, 159, 148);
+            : new Color(163, 159, 148);
         if (this.supportsLeftBadge && this._leftBadge !== BadgeStyle.None) {
             const widthOffset = UIMenuItem.getBadgeSpriteWidthOffset(this.badgeLeft);
             this.badgeLeft.pos.X = this.offset.X + widthOffset;
@@ -1082,9 +1082,9 @@ export class UIMenuItem {
         this.text.draw(undefined, Menu.screenResolution);
     }
 }
-UIMenuItem.defaultBackColor = Color.empty;
-UIMenuItem.defaultHighlightedBackColor = Color.white;
-UIMenuItem.defaultHoveredBackColor = new Color(20, 255, 255, 255);
-UIMenuItem.defaultForeColor = Color.whiteSmoke;
+UIMenuItem.defaultBackColor = Color.Transparent;
+UIMenuItem.defaultHighlightedBackColor = Color.White;
+UIMenuItem.defaultHoveredBackColor = new Color(255, 255, 255, 25);
+UIMenuItem.defaultForeColor = Color.WhiteSmoke;
 UIMenuItem.defaultHoveredForeColor = UIMenuItem.defaultForeColor;
-UIMenuItem.defaultHighlightedForeColor = Color.black;
+UIMenuItem.defaultHighlightedForeColor = Color.Black;

package/client/ui/menu/items/UIMenuListItem.js

@@ -15,7 +15,7 @@ export class UIMenuListItem extends UIMenuItem {
         this._textWidth = 0;
         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._itemText = new Text('', new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Right);
+        this._itemText = new Text('', new Point(), 0.35, Color.White, Font.ChaletLondon, Alignment.Right);
         this.ArrowOnlyOnSelected = arrowOnlyOnSelected;
         this.Items = items;
         this.Index = startIndex;
@@ -89,7 +89,7 @@ export class UIMenuListItem extends UIMenuItem {
             ? this.selected
                 ? this.HighlightedForeColor
                 : this.ForeColor
-            : new Color(255, 163, 159, 148);
+            : new Color(163, 159, 148);
         if (this._arrowOnlyOnSelected && !this.selected) {
             this._itemText.pos.X += this._rightArrow.size.width / 2;
         }

package/client/ui/menu/items/UIMenuSliderItem.js

@@ -15,9 +15,9 @@ export class UIMenuSliderItem extends UIMenuItem {
         this._arrowOnlyOnSelected = false;
         this._leftSliderBadge = BadgeStyle.None;
         this._rightSliderBadge = BadgeStyle.None;
-        this._background = new Rectangle(new Point(), new Size(150, 9), new Color(255, 4, 32, 57));
-        this._slider = new Rectangle(new Point(), new Size(75, 9), new Color(255, 57, 116, 200));
-        this._divider = new Rectangle(new Point(), new Size(2.5, 20), Color.whiteSmoke);
+        this._background = new Rectangle(new Point(), new Size(150, 9), new Color(4, 32, 57));
+        this._slider = new Rectangle(new Point(), new Size(75, 9), new Color(57, 116, 200));
+        this._divider = new Rectangle(new Point(), new Size(2.5, 20), Color.WhiteSmoke);
         this._leftArrow = new Sprite('commonmenutu', 'arrowleft', new Point(), new Size(15, 15));
         this._rightArrow = new Sprite('commonmenutu', 'arrowright', new Point(), new Size(15, 15));
         this._leftSliderBadgeSprite = new Sprite('', '');
@@ -58,19 +58,19 @@ export class UIMenuSliderItem extends UIMenuItem {
         return this._background.color;
     }
     set BackgroundColor(value) {
-        this._background.color = value || new Color(255, 4, 32, 57);
+        this._background.color = value || new Color(4, 32, 57);
     }
     get SliderColor() {
         return this._slider.color;
     }
     set SliderColor(value) {
-        this._slider.color = value || new Color(255, 57, 116, 200);
+        this._slider.color = value || new Color(57, 116, 200);
     }
     get DividerColor() {
         return this._divider.color;
     }
     set DividerColor(value) {
-        this._divider.color = value || Color.whiteSmoke;
+        this._divider.color = value || Color.WhiteSmoke;
     }
     get LeftSliderBadge() {
         return this._leftSliderBadge;
@@ -153,9 +153,9 @@ export class UIMenuSliderItem extends UIMenuItem {
         this._slider.pos.X = this._background.pos.X + sliderXOffset;
         this._leftArrow.color = this.enabled
             ? this.selected
-                ? Color.black
-                : Color.whiteSmoke
-            : new Color(255, 163, 159, 148);
+                ? Color.Black
+                : Color.WhiteSmoke
+            : new Color(163, 159, 148);
         this._rightArrow.color = this._leftArrow.color;
         this._background.draw(undefined, Menu.screenResolution);
         this._slider.draw(undefined, Menu.screenResolution);

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

@@ -9,7 +9,7 @@ export class UIMenuColorPanel extends AbstractUIMenuPanel {
         this._title = '';
         this._colors = [];
         this._bar = [];
-        this._lastColor = Color.empty;
+        this._lastColor = Color.Transparent;
         // Pagination
         this._min = 0;
         this._max = 8;
@@ -18,8 +18,8 @@ export class UIMenuColorPanel extends AbstractUIMenuPanel {
         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._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;
     }

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

@@ -160,7 +160,7 @@ export class UIMenuGridPanel extends AbstractUIMenuPanel {
             // @ts-ignore
             if (!this[name]) {
                 // @ts-ignore
-                this[name] = new Text(value, new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Centered);
+                this[name] = new Text(value, new Point(), 0.35, Color.White, Font.ChaletLondon, Alignment.Centered);
             }
             else {
                 // @ts-ignore

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

@@ -11,9 +11,9 @@ export class UIMenuPercentagePanel extends AbstractUIMenuPanel {
         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 = 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%';

package/client/ui/menu/items/panels/UIMenuStatisticsPanel.js

@@ -6,7 +6,7 @@ export class UIMenuStatisticsPanel extends AbstractUIMenuPanel {
         super();
         this._divider = true;
         this._items = [];
-        this.background = new Rectangle(new Point(), new Size(431, 47), new Color(170, 0, 0, 0));
+        this.background = new Rectangle(new Point(), new Size(431, 47), new Color(0, 0, 0, 170));
         if (item) {
             this.addItem(item);
         }

package/client/ui/menu/items/panels/UIMenuStatisticsPanelItem.js

@@ -5,11 +5,11 @@ export class UIMenuStatisticsPanelItem {
     constructor(name, percentage = 0) {
         this.id = Crypto.uuidv4();
         this.divider = [];
-        this.text = new Text('', new Point(), 0.35, Color.white, Font.ChaletLondon, Alignment.Left);
+        this.text = new Text('', new Point(), 0.35, Color.White, Font.ChaletLondon, Alignment.Left);
         this.backgroundBar = new Rectangle(new Point(), new Size(200, 10), Color.fromArgb(100, 87, 87, 87));
-        this.activeBar = new Rectangle(new Point(), new Size(0, 10), Color.white);
+        this.activeBar = new Rectangle(new Point(), new Size(0, 10), Color.White);
         for (let i = 1; i <= 4; i++) {
-            this.divider.push(new Rectangle(new Point(), new Size(2, 10), Color.black));
+            this.divider.push(new Rectangle(new Point(), new Size(2, 10), Color.Black));
         }
         this.Name = name;
         this.Percentage = percentage;

package/client/utils/index.d.ts

@@ -4,7 +4,6 @@ export { PointF } from './PointF';
 export { Crypto } from './Crypto';
 export { Point } from './Point';
 export { Size } from './Size';
-export { Color } from './Color';
-export { Vector2, Vector3, Vector4, Maths, Quaternion, Delay, enumValues, getStringFromUInt8Array, getUInt32FromUint8Array, } from '../../common/utils/index';
+export { Vector2, Vector3, Vector4, Maths, Color, Quaternion, Delay, enumValues, getStringFromUInt8Array, getUInt32FromUint8Array, } from '../../common/utils/index';
 export declare const Wait: (milliseconds: number) => Promise<void>;
 export * from './Animations';

package/client/utils/index.js

@@ -4,7 +4,6 @@ export { PointF } from './PointF';
 export { Crypto } from './Crypto';
 export { Point } from './Point';
 export { Size } from './Size';
-export { Color } from './Color';
-export { Vector2, Vector3, Vector4, Maths, Quaternion, Delay, enumValues, getStringFromUInt8Array, getUInt32FromUint8Array, } from '../../common/utils/index';
+export { Vector2, Vector3, Vector4, Maths, Color, Quaternion, Delay, enumValues, getStringFromUInt8Array, getUInt32FromUint8Array, } from '../../common/utils/index';
 export const Wait = (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds));
 export * from './Animations';

package/common/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/node" />
 import type { Buffer } from 'buffer';
 export type MsgpackBuffer = {
     buffer: Buffer;

package/common/utils/Color.d.ts

@@ -1,4 +1,8 @@
 export declare class Color {
+    static Transparent: Color;
+    static Black: Color;
+    static White: Color;
+    static WhiteSmoke: Color;
     static fromArgb(a: number, r: number, g: number, b: number): Color;
     static fromRgb(r: number, g: number, b: number): Color;
     static fromArray(primitive: [number, number, number] | number[]): Color;

package/common/utils/Color.js

@@ -1,9 +1,9 @@
 export class Color {
     static fromArgb(a, r, g, b) {
-        return new Color(a, r, g, b);
+        return new Color(r, g, b, a);
     }
     static fromRgb(r, g, b) {
-        return new Color(255, r, g, b);
+        return new Color(r, g, b);
     }
     static fromArray(primitive) {
         return new Color(primitive[0], primitive[1], primitive[2], 255);
@@ -15,3 +15,7 @@ export class Color {
         this.a = a;
     }
 }
+Color.Transparent = new Color(0, 0, 0, 0);
+Color.Black = new Color(0, 0, 0);
+Color.White = new Color(255, 255, 255);
+Color.WhiteSmoke = new Color(245, 245, 245);

package/package.json

@@ -4,7 +4,7 @@
   "author": "Remco Troost <d0p3t>",
   "license": "MIT",
   "type": "module",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "publishConfig": {
     "directory": "lib"
   },
@@ -33,23 +33,24 @@
     "./**/*.d.ts"
   ],
   "devDependencies": {
-    "@citizenfx/client": "2.0.7604-1",
-    "@citizenfx/server": "2.0.7604-1",
-    "@types/node": "^16.18.87",
+    "@citizenfx/client": "^2.0.7604-1",
+    "@citizenfx/server": "^2.0.7604-1",
+    "@types/node": "^16.18.103",
     "buffer": "^6.0.3",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "prettier-linter-helpers": "^1.0.0",
-    "typedoc": "^0.25.11",
+    "tsc-alias": "^1.8.10",
+    "typedoc": "^0.26.5",
     "typedoc-fivemjs-theme": "^0.2.7",
-    "typescript": "^5.4.2",
-    "tsc-alias": "^1.8.8"
+    "typedoc-plugin-markdown": "^4.2.1",
+    "typescript": "^5.5.3"
   },
   "scripts": {
     "delete": "rm -rf lib",
     "build": "pnpm run delete && tsc --build && tsc-alias && pnpm run copy-data",
     "copy-data": "cp package.json lib/package.json && cp README.md lib/README.md",
     "watch": "tsc --watch",
-    "ci": "pnpm run prettier && pnpm run build",
+    "ci": "pnpm run prettier && pnpm run build && pnpm typedoc",
     "prettier": "prettier */**/*.ts --check",
     "prettier-fix": "prettier */**/*.ts --write"
   }

package/server/cfx/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@citizenfx/server" />
 export { StateBagChangeHandler } from './StateBagChangeHandler';
 declare const _default: {
     Entity: typeof Entity;

package/server/entities/BaseEntity.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@citizenfx/server" />
 import { ClassTypes } from '../../common/utils/ClassTypes';
 import { eEntityType } from '../enum/eEntityType';
 import { PopulationType } from '../enum/PopulationType';

package/server/entities/Player.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@citizenfx/server" />
 import { ClassTypes } from '../../common/utils/ClassTypes';
 import { Vector3 } from '../utils';
 import { Ped } from './Ped';

package/client/utils/Color.d.ts

@@ -1,15 +0,0 @@
-export declare class Color {
-    static empty: Color;
-    static transparent: Color;
-    static black: Color;
-    static white: Color;
-    static whiteSmoke: Color;
-    static fromArgb(a: number, r: number, g: number, b: number): Color;
-    static fromRgb(r: number, g: number, b: number): Color;
-    static fromArray(primitive: [number, number, number] | number[]): Color;
-    a: number;
-    r: number;
-    g: number;
-    b: number;
-    constructor(a: number | undefined, r: number, g: number, b: number);
-}

package/client/utils/Color.js

@@ -1,22 +0,0 @@
-export class Color {
-    static fromArgb(a, r, g, b) {
-        return new Color(a, r, g, b);
-    }
-    static fromRgb(r, g, b) {
-        return new Color(255, r, g, b);
-    }
-    static fromArray(primitive) {
-        return new Color(255, primitive[0], primitive[1], primitive[2]);
-    }
-    constructor(a = 255, r, g, b) {
-        this.a = a;
-        this.r = r;
-        this.g = g;
-        this.b = b;
-    }
-}
-Color.empty = new Color(0, 0, 0, 0);
-Color.transparent = new Color(0, 0, 0, 0);
-Color.black = new Color(255, 0, 0, 0);
-Color.white = new Color(255, 255, 255, 255);
-Color.whiteSmoke = new Color(255, 245, 245, 245);