feat(client/dui): implement dui handling (#650)

imports/dui/client.lua

@@ -0,0 +1,87 @@
+---@class DuiProperties
+---@field url string
+---@field width number
+---@field height number
+---@field debug? boolean
+
+---@class Dui : OxClass
+---@field private private { id: string, debug: boolean }
+---@field url string
+---@field duiObject number
+---@field duiHandle string
+---@field runtimeTxd number
+---@field txdObject number
+---@field dictName string
+---@field txtName string
+lib.dui = lib.class('Dui')
+
+---@type table<string, Dui>
+local duis = {}
+
+local currentId = 0
+
+---@param data DuiProperties
+function lib.dui:constructor(data)
+	local time = GetGameTimer()
+	local id = ("%s_%s_%s"):format(cache.resource, time, currentId)
+	currentId = currentId + 1
+	local dictName = ('ox_lib_dui_dict_%s'):format(id)
+	local txtName = ('ox_lib_dui_txt_%s'):format(id)
+	local duiObject = CreateDui(data.url, data.width, data.height)
+	local duiHandle = GetDuiHandle(duiObject)
+	local runtimeTxd = CreateRuntimeTxd(dictName)
+	local txdObject = CreateRuntimeTextureFromDuiHandle(runtimeTxd, txtName, duiHandle)
+	self.private.id = id
+	self.private.debug = data.debug or false
+	self.url = data.url
+	self.duiObject = duiObject
+	self.duiHandle = duiHandle
+	self.runtimeTxd = runtimeTxd
+	self.txdObject = txdObject
+	self.dictName = dictName
+	self.txtName = txtName
+	duis[id] = self
+
+	if self.private.debug then
+		print(('Dui %s created'):format(id))
+	end
+end
+
+function lib.dui:remove()
+	SetDuiUrl(self.duiObject, 'about:blank')
+	DestroyDui(self.duiObject)
+	duis[self.private.id] = nil
+
+	if self.private.debug then
+		print(('Dui %s removed'):format(self.private.id))
+	end
+end
+
+---@param url string
+function lib.dui:setUrl(url)
+	self.url = url
+	SetDuiUrl(self.duiObject, url)
+
+	if self.private.debug then
+		print(('Dui %s url set to %s'):format(self.private.id, url))
+	end
+end
+
+---@param message table
+function lib.dui:sendMessage(message)
+	SendDuiMessage(self.duiObject, json.encode(message))
+
+	if self.private.debug then
+		print(('Dui %s message sent with data :'):format(self.private.id), json.encode(message, { indent = true }))
+	end
+end
+
+AddEventHandler('onResourceStop', function(resourceName)
+	if cache.resource ~= resourceName then return end
+
+	for _, dui in pairs(duis) do
+		dui:remove()
+	end
+end)
+
+return lib.dui

package/client/resource/dui/index.ts

@@ -0,0 +1,70 @@
+import { cache } from '../cache';
+
+const duis: Record<string, Dui> = {};
+let currentId = 0;
+
+interface DuiProperties {
+  url: string;
+  width: number;
+  height: number;
+  debug?: boolean;
+}
+
+export class Dui {
+  private id: string = '';
+  private debug: boolean = false;
+  url: string = '';
+  duiObject: number = 0;
+  duiHandle: string = '';
+  runtimeTxd: number = 0;
+  txdObject: number = 0;
+  dictName: string = '';
+  txtName: string = '';
+
+  constructor(data: DuiProperties) {
+    const time = GetGameTimer();
+    const id = `${cache.resource}_${time}_${currentId}`;
+    currentId++;
+    this.id = id;
+    this.debug = data.debug || false;
+    this.url = data.url;
+    this.dictName = `ox_lib_dui_dict_${id}`;
+    this.txtName = `ox_lib_dui_txt_${id}`;
+    this.duiObject = CreateDui(data.url, data.width, data.height);
+    this.duiHandle = GetDuiHandle(this.duiObject);
+    this.runtimeTxd = CreateRuntimeTxd(this.dictName);
+    this.txdObject = CreateRuntimeTextureFromDuiHandle(this.runtimeTxd, this.txtName, this.duiHandle);
+    duis[id] = this;
+
+    if (this.debug) console.log(`Dui ${this.id} created`);
+  }
+
+  remove() {
+    SetDuiUrl(this.duiObject, 'about:blank');
+    DestroyDui(this.duiObject);
+    delete duis[this.id];
+
+    if (this.debug) console.log(`Dui ${this.id} removed`);
+  }
+
+  setUrl(url: string) {
+    this.url = url;
+    SetDuiUrl(this.duiObject, url);
+
+    if (this.debug) console.log(`Dui ${this.id} url set to ${url}`);
+  }
+
+  sendMessage(data: object) {
+    SendDuiMessage(this.duiObject, JSON.stringify(data));
+
+    if (this.debug) console.log(`Dui ${this.id} message sent with data :`, data);
+  }
+}
+
+on('onResourceStop', (resourceName: string) => {
+  if (cache.resource !== resourceName) return;
+
+  for (const dui in duis) {
+    duis[dui].remove();
+  }
+});

package/client/resource/index.ts

@@ -13,3 +13,4 @@ export * from './streaming';
 export * from './vehicleProperties';
 export * from './callback';
 export * from './points';
+export * from './dui';