Interaction menu class

source/client/assets/CEFPages.asset.ts

@@ -14,4 +14,5 @@ export const CEFPages: ICefPages = {
     creator: { blur: false, radar: false, pause: false, controls: true, close: true },
     selectcharacter: { blur: true, radar: false, pause: false, controls: true, close: false },
     hud: { blur: false, radar: true, pause: false, controls: true, close: false },
+    interactionMenu: { blur: false, radar: true, pause: false, controls: false, close: true }
 };

source/client/classes/InteractMenu.class.ts

@@ -0,0 +1,59 @@
+import BrowserClass from "./Browser.class";
+
+interface IMenuItems {
+    id: number;
+    text: string;
+    type: number;
+    subItems?: IMenuItems[];
+}
+
+interface IInteractionMenu {
+    isActive: boolean;
+    items: IMenuItems[];
+}
+class _Interaction {
+    acceptEvent: EventMp | null = null;
+    refuseEvent: EventMp | null = null;
+
+    constructor() {}
+
+    new(data: IInteractionMenu) {
+        return new Promise<number | undefined>((resolve, reject) => {
+            if (!mp.players.exists(mp.players.local)) return;
+            BrowserClass.startPage("interactionMenu");
+            BrowserClass.processEvent("cef::hud:setInteraction", JSON.stringify(data));
+
+            const onAccept = (answer: number) => {
+                this.clearPromiseEvents();
+                resolve(answer);
+            };
+            const onReject = (cef: string) => {
+                this.closeMenu();
+                resolve(undefined);
+            };
+            this.setPromiseEvents(onAccept, onReject);
+        });
+    }
+
+    setPromiseEvents(accept: (answer: number) => void, reject: (cef: string) => void) {
+        this.acceptEvent = new mp.Event("client::hud:interactResult", accept);
+        this.refuseEvent = new mp.Event("server::player:closeCEF", reject);
+    }
+
+    clearPromiseEvents() {
+        if (this.acceptEvent) this.acceptEvent.destroy();
+        if (this.refuseEvent) this.refuseEvent.destroy();
+    }
+
+    closeMenu() {
+        if (!mp.players.exists(mp.players.local)) return;
+        this.clearPromiseEvents();
+        mp.events.call("client::cef:close");
+    }
+
+    destroyCamera(player: PlayerMp) {
+        player.call("client::dialog:destroyForwardCamera");
+    }
+}
+
+export const InteractionMenu = new _Interaction();

source/client/clientevents/Player.event.ts

@@ -1,3 +1,6 @@
+import { Utils } from "../../shared/Utils.module";
+import { InteractionMenu } from "../classes/InteractMenu.class";
+
 mp.events.add("playerReady", () => {
     mp.players.local.setCanRagdoll(true);
 
@@ -25,3 +28,10 @@ mp.events.add("playerReady", () => {
 
     mp.game.weapon.unequipEmptyWeapons = false;
 });
+
+mp.events.add("client::interaction:showMenu", async (data: any) => {
+    const response = await InteractionMenu.new(Utils.parseObject(data));
+
+    mp.console.logInfo(`Response is: ${response}`);
+    InteractionMenu.closeMenu();
+});

source/server/commands/Dev.commands.ts

@@ -11,8 +11,17 @@ RAGERP.commands.add({
 });
 
 RAGERP.commands.add({
-    name: "setpage",
+    name: "interact",
     run: (player: PlayerMp, fulltext) => {
-        player.outputChatBox("!{green}TEst?");
+        const data = {
+            isActive: true,
+            items: [
+                { type: 0, id: 0, text: "Whatever" },
+                { type: 0, id: 1, text: "Whatever 1" },
+                { type: 0, id: 2, text: "Whatever 2" }
+            ]
+        };
+
+        player.call("client::interaction:showMenu", [JSON.stringify(data)]);
     }
 });