Quickstart

pnpm i @overlayed/app @overlayed/electron --save-exact

npm i @overlayed/app @overlayed/electron --save-exact

yarn add @overlayed/app @overlayed/electron --exact

pnpm i -g @overlayed/cli

npm i -g @overlayed/cli

yarn add -g @overlayed/cli

import { overlayed } from "@overlayed/app";
import * as Siege from "@overlayed/app/siege";
import electron from "electron";

export const overlay = overlayed({
	electron,
	applicationId: "APPLICATION_ID_GOES_HERE", // You'll receive this from the Overlayed Dashboard
	modules: [Siege.module()],
	keybinds: {
		toggleMainWindow: {
			keys: ["AltLeft", "KeyX"],
			mode: "toggle",
		},
	},
});

import { defineConfig } from "@overlayed/app";

export default defineConfig({
	applicationId: "APPLICATION_ID_GOES_HERE", // You'll receive this from the Overlayed Dashboard
	app: {
		include: [], // Only necessary for building, configure this later
	},
	site: {
		include: [], // Only necessary for building, configure this later
	},
});

import { overlay } from "./overlayed.ts";
import type { RenderWindow, RenderWindowConstructorOptions } from "@overlayed/app";

export class AppWindow {
	private renderWindow: RenderWindow | null = null;

	public create(options?: RenderWindowConstructorOptions) {
		this.renderWindow = overlay.windows.createInGameWindow(options);

		// Load your site - local dev server in dev, deployed site in production
		if (import.meta.env.DEV) {
			// Point this to your local dev server
			this.renderWindow.loadURL("http://localhost:5173");
		} else {
			const siteUrl = overlay.windows.getProductionSiteUrl();
			this.renderWindow.loadURL(siteUrl.toString());
		}
	}
}

import { AppWindow } from "./appWindow.ts";

function setup() {
	const appWindow = new AppWindow();
	appWindow.create();
}

import { overlay } from "./overlayed.ts";

export class AppWindow {
	private renderWindow: RenderWindow | null = null;

	public create(options?: RenderWindowConstructorOptions) {
		this.renderWindow = overlay.windows.createInGameWindow(options ?? {});
		this.registerKeybinds(this.renderWindow);
	}

	public destroy() {
		this.renderWindow?.destroy();
	}

	private registerKeybinds(renderWindow: RenderWindow) {
		overlay.keybinds.toggleMainWindow.on("toggle", () => {
			if (renderWindow.isVisible()) {
				renderWindow.hide();
			} else {
				renderWindow.show();
			}
		});
	}
}

import { AppWindow } from "./appWindow.ts";
import { overlay } from "./overlayed.ts";

function start() {
	const appWindow = new AppWindow();
	overlay.on("gameReady", () => appWindow.create());
	overlay.on("gameClose", () => appWindow.destroy());
}

app.on("ready", start);

import { AppWindow } from "./appWindow.ts";
import { overlay } from "./overlayed.ts";
import { siegeStateManager } from "./siegeStateManager.ts";
import { SiegeEvent } from "@overlayed/app/siege";

function setup() {
	const appWindow = new AppWindow();
	appWindow.create();

	overlay.on("gameReady", ({ game, inGameRenderingSupported }) => {
		if (game === "siege") {
			// Start receiving game events when the game is ready
			overlay.siege.readyForGameEvents();
			overlay.siege.onAny((event: SiegeEvent) => {
				overlay.log.info(event);
			});
		}
	});

	overlay.siege.on("player_joined", (event) => {
		overlay.log.info(event.content);
	});
}

setup();

  {
    // ...
    "scripts": {
      "start": "tsc && ogg-electron ."
    }
  }

{
	"compilerOptions": {
		"module": "NodeNext",
		"moduleResolution": "NodeNext",
		"noImplicitAny": true,
		"strict": true,
		"outDir": "dist",
		"baseUrl": ".",
		"skipLibCheck": true,
		"allowImportingTsExtensions": true,
		"noEmit": true
	},
	"include": ["src"],
	"exclude": ["node_modules", "dist"]
}