Full Game Interface/Widget system refactor

data/config/widgets.json5

@@ -0,0 +1,85 @@
+{
+    characterDesign: 269,
+    furnace: {
+        widgetId: 311,
+        slots: {
+            slot0: { modelId: 4, titleId: 16 },
+            slot1: { modelId: 5, titleId: 20 },
+            slot2: { modelId: 6, titleId: 24 },
+            slot3: { modelId: 7, titleId: 28 },
+            slot4: { modelId: 8, titleId: 32 },
+            slot5: { modelId: 9, titleId: 36 },
+            slot6: { modelId: 10, titleId: 40 },
+            slot7: { modelId: 11, titleId: 44 },
+            slot8: { modelId: 12, titleId: 48 }
+        }
+    },
+    inventory: {
+        widgetId: 149,
+        containerId: 0
+    },
+    equipment: {
+        widgetId: 387,
+        containerId: 25
+    },
+    equipmentStats: {
+        widgetId: 465,
+        containerId: 103
+    },
+    equipmentStatsInventory: {
+        widgetId: 336,
+        containerId: 0
+    },
+    bank: {
+        depositBoxWidget: {
+            widgetId: 11
+        },
+        pinSettingsWidget: {
+            widgetId: 14
+        },
+        screenWidget: {
+            widgetId: 12,
+            containerId: 89
+        },
+        tabWidget: {
+            widgetId: 266,
+            containerId: 0
+        }
+    },
+    defaultCombatStyle: 92,
+    skillGuide: 308,
+    skillsTab: 320,
+    friendsList: 131,
+    ignoreList: 148,
+    logoutTab: 182,
+    settingsTab: 261,
+    emotesTab: 464,
+    musicPlayerTab: 239,
+    prayerTab: 271,
+    standardSpellbookTab: 192,
+    questTab: 274,
+    shop: {
+        widgetId: 300,
+        containerId: 75,
+        title: 76
+    },
+    shopPlayerInventory: {
+        widgetId: 301,
+        containerId: 0
+    },
+    questJournal: 275,
+    questReward: 277,
+    welcomeScreen: 378,
+    welcomeScreenChildren: {
+        cogs: 16,
+        question: 17,
+        drama: 18,
+        bankPin: 19,
+        bankPinQuestion: 20,
+        scamming: 21,
+        bankPinKey: 22,
+        christmas: 23,
+        killcount: 24
+    },
+    whatWouldYouLikeToSpin: 459
+}

package.json

@@ -37,9 +37,10 @@
         "crc-32": "^1.2.0",
         "express": "^4.17.1",
         "js-yaml": "^3.13.1",
+        "json5": "^2.1.3",
         "lodash": "^4.17.15",
         "quadtree-lib": "^1.0.9",
-        "rxjs": "^6.5.4",
+        "rxjs": "^7.0.0-beta.8",
         "source-map-support": "^0.5.16",
         "ts-node": "^8.4.1",
         "tslib": "^1.10.0",
@@ -59,6 +60,7 @@
         "@types/express": "^4.17.2",
         "@types/hapi__joi": "^16.0.6",
         "@types/js-yaml": "^3.12.1",
+        "@types/json5": "0.0.30",
         "@types/lodash": "^4.14.149",
         "@types/node": "^12.12.6",
         "@types/uuid": "^3.4.6",

src/config/index.ts

@@ -17,7 +17,8 @@ import {
 } from '@server/config/npc-config';
 import { loadNpcSpawnConfigurations, NpcSpawn } from '@server/config/npc-spawn-config';
 import { loadShopConfigurations, Shop } from '@server/config/shop-config';
-
+import json5 from 'json5';
+require('json5/lib/register');
 
 export async function loadConfigurationFiles(configurationDir: string): Promise<any[]> {
     const files = [];
@@ -47,6 +48,7 @@ export let npcIdMap: { [key: number]: string };
 export let npcPresetMap: NpcPresetConfiguration;
 export let npcSpawns: NpcSpawn[] = [];
 export let shopMap: { [key: string]: Shop };
+export const widgets: { [key: string]: any } = require('../../data/config/widgets.json5');
 
 
 export async function loadConfigurations(): Promise<void> {

src/config/shop-config.ts

@@ -1,7 +1,6 @@
 import { ItemContainer } from '@server/world/items/item-container';
-import { findItem, loadConfigurationFiles } from '@server/config/index';
+import { findItem, loadConfigurationFiles, widgets } from '@server/config/index';
 import { Player } from '@server/world/actor/player/player';
-import { widgets } from '@server/world/config/widget';
 import { ItemDetails } from '@server/config/item-config';
 
 
@@ -96,12 +95,14 @@ export class Shop {
         player.outgoingPackets.sendUpdateAllWidgetItems(widgets.shop, this.container);
         player.outgoingPackets.sendUpdateAllWidgetItems(widgets.shopPlayerInventory, player.inventory);
 
-        player.activeWidget = {
-            widgetId: widgets.shop.widgetId,
-            secondaryWidgetId: widgets.shopPlayerInventory.widgetId,
-            type: 'SCREEN_AND_TAB',
-            closeOnWalk: true
-        };
+        player.interfaceState.openWidget(widgets.shop.widgetId, {
+            slot: 'screen',
+            multi: true
+        });
+        player.interfaceState.openWidget(widgets.shopPlayerInventory.widgetId, {
+            slot: 'tabarea',
+            multi: true
+        });
     }
 
 }

src/net/inbound-packets/button-click-packet.js

@@ -1,17 +1,11 @@
 import { actionHandler } from '../../world/action';
 
-const ignoreButtons = [
-    '269:99' // character design accept button
-];
-
 const buttonClickPacket = (player, packet) => {
     const { buffer } = packet;
     const widgetId = buffer.get('SHORT');
     const buttonId = buffer.get('SHORT');
 
-    if(ignoreButtons.indexOf(`${widgetId}:${buttonId}`) === -1) {
-        actionHandler.call('button', player, widgetId, buttonId);
-    }
+    actionHandler.call('button', player, widgetId, buttonId);
 };
 
 export default {

src/net/inbound-packets/character-design-packet.js

@@ -1,4 +1,4 @@
-import { widgets } from '../../world/config/widget';
+import { widgets } from '../../config';
 
 const characterDesignPacket = (player, packet) => {
     if(!player.activeWidget || player.activeWidget.widgetId !== widgets.characterDesign) {
@@ -38,7 +38,7 @@ const characterDesignPacket = (player, packet) => {
     };
 
     player.updateFlags.appearanceUpdateRequired = true;
-    player.closeActiveWidgets();
+    player.player.interfaceState.closeAllSlots();
 };
 
 export default {

src/net/inbound-packets/item-on-item-packet.js

@@ -1,6 +1,6 @@
-import { widgets } from '../../world/config/widget';
 import { logger } from '@runejs/core';
 import { actionHandler } from '../../world/action';
+import { widgets } from '../../config';
 
 const itemOnItemPacket = (player, packet) => {
     const { buffer } = packet;

src/net/inbound-packets/item-on-npc-packet.js

@@ -1,8 +1,8 @@
-import { widgets } from '../../world/config/widget';
 import { logger } from '@runejs/core';
 import { world } from '../../game-server';
 import { World } from '../../world';
 import { actionHandler } from '../../world/action';
+import { widgets } from '../../config';
 
 const itemOnNpcPacket = (player, packet) => {
     const { buffer } = packet;

src/net/inbound-packets/item-on-object-packet.js

@@ -1,8 +1,8 @@
-import { widgets } from '../../world/config/widget';
 import { logger } from '@runejs/core';
 import { Position } from '../../world/position';
 import { cache, world } from '../../game-server';
 import { actionHandler } from '../../world/action';
+import { widgets } from '../../config';
 
 const itemOnObjectPacket = (player, packet) => {
     const { buffer } = packet;

src/net/inbound-packets/widgets-closed-packet.js

@@ -1,5 +1,5 @@
 export default {
     opcode: 176,
     size: 0,
-    handler: player => player.closeActiveWidgets(false)
+    handler: player => player.interfaceState.closeAllSlots()
 };

src/net/outbound-packets.ts

@@ -312,10 +312,15 @@ export class OutboundPackets {
         this.queue(new Packet(180));
     }
 
-    public showScreenWidget(widgetId: number): void {
-        const packet = new Packet(118);
+    public showScreenOverlayWidget(widgetId: number): void {
+        const packet = new Packet(56);
         packet.put(widgetId, 'SHORT');
+        this.queue(packet);
+    }
 
+    public showStandaloneScreenWidget(widgetId: number): void {
+        const packet = new Packet(118);
+        packet.put(widgetId, 'SHORT');
         this.queue(packet);
     }
 
@@ -407,6 +412,12 @@ export class OutboundPackets {
         this.queue(packet);
     }
 
+    public showTabWidget(widgetId: number): void {
+        const packet = new Packet(237);
+        packet.put(widgetId, 'SHORT');
+        this.queue(packet);
+    }
+
     public sendTabWidget(tabIndex: number, widgetId: number | null): void {
         if(widgetId < 0) {
             return;
@@ -443,6 +454,12 @@ export class OutboundPackets {
         this.queue(packet);
     }
 
+    public showChatDialogue(widgetId: number): void {
+        const packet = new Packet(185);
+        packet.put(widgetId, 'SHORT');
+        this.queue(packet);
+    }
+
     public updateCarryWeight(weight: number): void {
         const packet = new Packet(171);
         packet.put(weight, 'SHORT');

src/plugins/buttons/logout-button-plugin.ts

@@ -1,6 +1,6 @@
 import { buttonAction } from '@server/world/action/button-action';
-import { widgets } from '@server/world/config/widget';
 import { world } from '@server/game-server';
+import { widgets } from '@server/config';
 
 export const action: buttonAction = (details) => {
     const { player } = details;

src/plugins/buttons/player-emotes-plugin.ts

@@ -1,7 +1,7 @@
 import { buttonAction } from '@server/world/action/button-action';
-import { widgets } from '@server/world/config/widget';
 import { Player } from '@server/world/actor/player/player';
 import { itemIds } from '@server/world/config/item-ids';
+import { widgets } from '@server/config';
 
 interface Emote {
     animationId: number;

src/plugins/buttons/player-setting-button-plugin.ts

@@ -1,5 +1,5 @@
 import { buttonAction } from '@server/world/action/button-action';
-import { widgets } from '@server/world/config/widget';
+import { widgets } from '@server/config';
 
 const buttonIds: number[] = [
     0, // walk/run

src/plugins/combat/combat-styles.ts

@@ -1,8 +1,8 @@
 import { equipAction, EquipActionData } from '@server/world/action/equip-action';
 import { ItemDetails, WeaponStyle, weaponWidgetIds } from '@server/config/item-config';
-import { widgets, widgetScripts } from '@server/world/config/widget';
+import { widgetScripts } from '@server/world/config/widget';
 import { Player, playerInitAction } from '@server/world/actor/player/player';
-import { findItem } from '@server/config';
+import { findItem, widgets } from '@server/config';
 import { buttonAction } from '@server/world/action/button-action';
 import { combatStyles } from '@server/world/actor/combat';
 import { serverConfig } from '@server/game-server';