feat: Simple start to client hooks

src/js/client.ts

@@ -83,9 +83,10 @@ export abstract class Client extends GameShell {
     static oplogic8: number = 0;
     static oplogic9: number = 0;
 
-    public onLoginScreenLoaded: () => void = (): void => {};
+    public onLoginScreenLoaded: () => Promise<void> = async (): Promise<void> => {};
     public onWorldLoaded: () => Promise<void> = async (): Promise<void> => {};
-    public onTick: () => Promise<void> = async (): Promise<void> => {};
+    public onClientTick: () => Promise<void> = async (): Promise<void> => {};
+    public onUpdateStat: (stat: number, xp: number, level: number) => void = (): void => {};
     public onLogout: () => Promise<void> = async (): Promise<void> => {};
 
     static setHighMemory = (): void => {

src/js/game.ts

@@ -330,7 +330,7 @@ export class Game extends Client {
             World3D.init(512, 334, 500, 800, distance);
             WordFilter.unpack(wordenc);
             this.initializeLevelExperience();
-            this?.onLoginScreenLoaded();
+            await this?.onLoginScreenLoaded();
             // try {
             //     Renderer.renderer = await RendererWebGPU.init(canvasContainer, this.width, this.height);
             // } catch (e) {
@@ -347,7 +347,7 @@ export class Game extends Client {
             return;
         }
         this.loopCycle++;
-        await this.onTick();
+        await this.onClientTick();
         if (this.ingame) {
             await this.updateGame();
         } else {
@@ -6006,6 +6006,7 @@ export class Game extends Client {
                         this.skillBaseLevel[stat] = i + 2;
                     }
                 }
+                this.onUpdateStat(stat, xp, level);
                 this.packetType = -1;
                 return true;
             }

src/js/jagex2/renderer/webgpu/RendererWebGPU.ts

@@ -28,7 +28,7 @@ interface QueuedRenderPixMapCommand {
 
 export class RendererWebGPU extends Renderer {
     device: GPUDevice;
-    context: GPUCanvasContext;
+    context: GPUCanvasContext | RenderingContext;
 
     defaultSampler!: GPUSampler;
     samplerTextureGroupLayout!: GPUBindGroupLayout;
@@ -129,22 +129,23 @@ export class RendererWebGPU extends Renderer {
         canvas.style.height = '100%';
         container.appendChild(canvas);
 
-        const context: GPUCanvasContext | null = canvas.getContext('webgpu');
+        const context: GPUCanvasContext | RenderingContext | null = canvas.getContext('webgpu');
         if (!context) {
             canvas.remove();
             throw new Error('Could not create WebGPU context');
         }
         const presentationFormat: GPUTextureFormat = navigator.gpu.getPreferredCanvasFormat();
-        context.configure({
-            device,
-            format: presentationFormat,
-            alphaMode: 'opaque'
-        });
-
+        if (context instanceof GPUCanvasContext && 'configure' in context) {
+            context.configure({
+                device,
+                format: presentationFormat,
+                alphaMode: 'opaque'
+            });
+        }
         return new RendererWebGPU(canvas, device, context);
     }
 
-    constructor(canvas: HTMLCanvasElement, device: GPUDevice, context: GPUCanvasContext) {
+    constructor(canvas: HTMLCanvasElement, device: GPUDevice, context: GPUCanvasContext | RenderingContext) {
         super(canvas);
         this.device = device;
         this.context = context;
@@ -413,22 +414,24 @@ export class RendererWebGPU extends Renderer {
             ]
         });
 
-        this.frameRenderPassDescriptor = {
-            label: 'frame render pass',
-            colorAttachments: [
-                {
-                    view: this.context.getCurrentTexture().createView(),
-                    clearValue: {
-                        r: 0.0,
-                        g: 0.0,
-                        b: 0.0,
-                        a: 1.0
-                    },
-                    loadOp: 'load',
-                    storeOp: 'store'
-                }
-            ]
-        };
+        if ('getCurrentTexture' in this.context) {
+            this.frameRenderPassDescriptor = {
+                label: 'frame render pass',
+                colorAttachments: [
+                    {
+                        view: this.context.getCurrentTexture().createView(),
+                        clearValue: {
+                            r: 0.0,
+                            g: 0.0,
+                            b: 0.0,
+                            a: 1.0
+                        },
+                        loadOp: 'load',
+                        storeOp: 'store'
+                    }
+                ]
+            };
+        }
         this.renderPassDescriptor = {
             label: 'main render pass',
             colorAttachments: [
@@ -476,7 +479,9 @@ export class RendererWebGPU extends Renderer {
         this.mainPass.end();
 
         for (const colorAttachment of this.frameRenderPassDescriptor.colorAttachments) {
-            colorAttachment!.view = this.context.getCurrentTexture().createView();
+            if ('getCurrentTexture' in this.context) {
+                colorAttachment!.view = this.context.getCurrentTexture().createView();
+            }
         }
 
         const framePass: GPURenderPassEncoder = this.encoder.beginRenderPass(this.frameRenderPassDescriptor);

src/js/lostlite/LostLite.ts

@@ -4,7 +4,7 @@ import {Game} from '../game';
 import {Renderer} from '../jagex2/renderer/Renderer';
 import {RendererWebGPU} from '../jagex2/renderer/webgpu/RendererWebGPU';
 import {canvasContainer} from '../jagex2/graphics/Canvas';
-import Plugins from '../plugin/Plugins';
+import Plugins, {usePluginRegistry, PluginRegistryType} from '../plugin/Plugins';
 
 declare global {
     interface Window {
@@ -258,7 +258,7 @@ class UIManager {
                 const lootTrackerHeader = document.querySelector('.section-header[data-section="loot"]');
                 lootTrackerSection?.classList.remove('expanded');
                 lootTrackerHeader?.classList.remove('active');
-                
+
                 // Update visibility of content wrapper
                 const contentWrapper = document.querySelector('.section-content-wrapper');
                 const listContainer = document.querySelector('.list-container');
@@ -286,7 +286,7 @@ class UIManager {
                 const xpTrackerHeader = document.querySelector('.section-header[data-section="xp"]');
                 xpTrackerSection?.classList.remove('expanded');
                 xpTrackerHeader?.classList.remove('active');
-                
+
                 // Update visibility of content wrapper
                 const contentWrapper = document.querySelector('.section-content-wrapper');
                 const listContainer = document.querySelector('.list-container');
@@ -339,11 +339,7 @@ class UIManager {
             const pluginItem = this.nodragToggle.closest('.plugin-item');
             pluginItem?.classList.toggle('active', this.nodragToggle.checked);
             localStorage.setItem('nodragEnabled', this.nodragToggle.checked.toString());
-
-            if (this.game.ingame) {
-                this.game.chatTyped = '::nodrag';
-                this.game.onkeydown(new KeyboardEvent('keydown', {key: 'Enter', code: 'Enter'}));
-            }
+            this.sendCommand('nodrag');
         });
 
         // Tile markers toggle
@@ -411,6 +407,14 @@ class UIManager {
         }
     }
 
+    private sendCommand(command: string): void {
+        if (!this.game.ingame) {
+            return;
+        }
+        this.game.chatTyped = `::${command}`;
+        this.game.onkeydown(new KeyboardEvent('keydown', {key: 'Enter', code: 'Enter'}));
+    }
+
     private async onGpuChange(): Promise<void> {
         const pluginItem = this.gpuToggle.closest('.plugin-item');
         pluginItem?.classList.toggle('active', this.gpuToggle.checked);
@@ -488,7 +492,7 @@ class UIManager {
                 const lootTrackerHeader = document.querySelector('.section-header[data-section="loot"]');
                 lootTrackerSection?.classList.remove('expanded');
                 lootTrackerHeader?.classList.remove('active');
-                
+
                 // Update visibility of content wrapper
                 const contentWrapper = document.querySelector('.section-content-wrapper');
                 const listContainer = document.querySelector('.list-container');
@@ -517,7 +521,7 @@ class UIManager {
                 const xpTrackerHeader = document.querySelector('.section-header[data-section="xp"]');
                 xpTrackerSection?.classList.remove('expanded');
                 xpTrackerHeader?.classList.remove('active');
-                
+
                 // Update visibility of content wrapper
                 const contentWrapper = document.querySelector('.section-content-wrapper');
                 const listContainer = document.querySelector('.list-container');
@@ -579,7 +583,7 @@ class UIManager {
                     // Close all other sections first
                     const allSectionContents = document.querySelectorAll('.section-content');
                     const allSectionHeaders = document.querySelectorAll('.section-header');
-                    allSectionContents.forEach((otherContent) => {
+                    allSectionContents.forEach(otherContent => {
                         if (otherContent !== content) {
                             otherContent.classList.remove('expanded');
                             const otherSectionId = otherContent.getAttribute('data-section');
@@ -588,7 +592,7 @@ class UIManager {
                             }
                         }
                     });
-                    allSectionHeaders.forEach((otherHeader) => {
+                    allSectionHeaders.forEach(otherHeader => {
                         if (otherHeader !== header) {
                             otherHeader.classList.remove('active');
                         }
@@ -618,7 +622,7 @@ class UIManager {
                     // Close all other sections first
                     const allSectionContents = document.querySelectorAll('.section-content');
                     const allSectionHeaders = document.querySelectorAll('.section-header');
-                    allSectionContents.forEach((otherContent) => {
+                    allSectionContents.forEach(otherContent => {
                         if (otherContent !== content) {
                             otherContent.classList.remove('expanded');
                             const otherSectionId = otherContent.getAttribute('data-section');
@@ -627,7 +631,7 @@ class UIManager {
                             }
                         }
                     });
-                    allSectionHeaders.forEach((otherHeader) => {
+                    allSectionHeaders.forEach(otherHeader => {
                         if (otherHeader !== header) {
                             otherHeader.classList.remove('active');
                         }
@@ -677,13 +681,14 @@ class UIManager {
 
 export const LostLite = async (): Promise<void> => {
     console.log(`Lost Lite Launching w/ user client - release #${Client.clientversion}`);
-
     // Initialize loading UI
     const loadingOverlay = document.querySelector('.loading-overlay') as HTMLElement;
     const loadingProgressBar = document.getElementById('loading-progress-bar') as HTMLElement;
     const loadingText = document.querySelector('.loading-text') as HTMLElement;
     let progress = 0;
 
+    const { loadedPlugins, loadPlugins }: PluginRegistryType = usePluginRegistry();
+
     const updateLoadingProgress = (text: string, newProgress: number) => {
         progress = newProgress;
         loadingProgressBar.style.width = `${progress}%`;
@@ -694,21 +699,22 @@ export const LostLite = async (): Promise<void> => {
     try {
         // Setup configuration (33%)
         updateLoadingProgress('Setting up configuration...', 0);
-    await setupConfiguration();
+        await setupConfiguration();
         updateLoadingProgress('Configuration loaded', 33);
-    console.log('Configuration has been setup. Launching game.');
+        console.log('Configuration has been setup. Launching game.');
 
         // Initialize game (66%)
         updateLoadingProgress('Initializing game engine...', 33);
-    const game: Game = new Game();
+        const game: Game = new Game();
         updateLoadingProgress('Game engine initialized', 66);
-
-    let uiManager: UIManager | null = null;
+        let uiManager: UIManager | null = null;
 
         // Setup login screen (100%)
-    game.onLoginScreenLoaded = (): void => {
+        game.onLoginScreenLoaded = async (): Promise<void> => {
             updateLoadingProgress('Loading interface...', 66);
-        uiManager = new UIManager(game);
+            uiManager = new UIManager(game);
+            updateLoadingProgress('Loading plugins...', 75);
+            await loadPlugins(game);
             updateLoadingProgress('LostLite Loaded!', 100);
 
             // Hide loading overlay
@@ -719,21 +725,27 @@ export const LostLite = async (): Promise<void> => {
         };
 
         // World loading doesn't affect loading screen since it happens after login
-    game.onWorldLoaded = async (): Promise<void> => {
-        await uiManager?.initializeToggles2();
-        uiManager?.test();
-    };
+        game.onWorldLoaded = async (): Promise<void> => {
+            await uiManager?.initializeToggles2();
+            uiManager?.test();
+        };
 
-    game.onTick = async (): Promise<void> => {
-        const polled: (() => Promise<void>) | undefined = uiManager?.commands?.pop();
-        if (polled) {
-            await polled();
-        }
-    };
+        game.onClientTick = async (): Promise<void> => {
+            const polled: (() => Promise<void>) | undefined = uiManager?.commands?.pop();
+            if (polled) {
+                await polled();
+            }
 
-    game.onLogout = async (): Promise<void> => {
-        uiManager?.onLogout();
-    };
+            loadedPlugins.forEach((plugin): void => plugin.onClientTick())
+        };
+
+        game.onLogout = async (): Promise<void> => {
+            uiManager?.onLogout();
+        };
+
+        game.onUpdateStat = (stat: number, xp: number, level: number): void => {
+            loadedPlugins.forEach((plugin): void => plugin.onUpdateStat(stat, xp, level))
+        }
 
         await game.run();
         console.log('Finished.');

src/js/plugin/LostLitePlugin.ts

@@ -0,0 +1,15 @@
+import {Client} from '../client';
+
+export abstract class LostLitePlugin implements ClientHook {
+    private client: Client;
+
+    public constructor(client: Client) {
+        this.client = client;
+    }
+
+    onClientTick(): void {}
+    onUpdateStat(stat: number, xp: number, level: number): void {}
+
+    abstract getName(): string;
+
+}

src/js/plugin/Plugins.ts

@@ -1,3 +1,7 @@
+import {LostLitePlugin} from './LostLitePlugin';
+import {DebugPlugin} from './plugins/DebugPlugin';
+import {Client} from '../client';
+
 export default class Plugins {
     static DRAW_DISTANCE: number = 50; // default 25
     static ZOOM: number = 3; // default 3
@@ -12,3 +16,22 @@ export default class Plugins {
     static LOOT_TRACKER: boolean = false; // default false
     static XP_TRACKER: boolean = false; // default false
 }
+
+export type PluginRegistryType = {
+    loadPlugins: (client: Client) => Promise<Map<string, LostLitePlugin>>;
+    loadedPlugins: Map<string, LostLitePlugin>
+}
+
+export const usePluginRegistry = (): PluginRegistryType => {
+    const loadedPlugins: Map<string, LostLitePlugin> = new Map<string, LostLitePlugin>();
+
+    const loadPlugins = async (client: Client): Promise<Map<string, LostLitePlugin>> => {
+        loadedPlugins.set('debug_plugin', new DebugPlugin(client));
+        return Promise.resolve(loadedPlugins);
+    }
+
+    return {
+        loadPlugins,
+        loadedPlugins
+    }
+}

src/js/plugin/hooks/ClientHook.ts

@@ -0,0 +1,4 @@
+interface ClientHook {
+    onClientTick(): void;
+    onUpdateStat(stat: number, xp: number, level: number): void;
+}

src/js/plugin/plugins/DebugPlugin.ts

@@ -0,0 +1,11 @@
+import {LostLitePlugin} from '../LostLitePlugin';
+
+export class DebugPlugin extends LostLitePlugin {
+    onUpdateStat(stat: number, xp: number, level: number): void {
+        console.log(`Stat updated: Stat=${stat} XP=${xp} Level=${level}`)
+    }
+
+    getName(): string {
+        return 'DebugPlugin';
+    }
+}