Homebrew

Installed emulators (games with source: "emulator") and console games (the ones with platform: your own ROMs, homebrew, and what was downloaded from the catalogs) are not part of the PC library. They go in Homebrew, a separate view next to the library. Since 1.4.0, the kit’s visible() already leaves them out:

import { visible, roms, software, romsBySystem } from "/_sdk/kit/library.js";

visible(ejg.library.all);                  // PC games only
visible(ejg.library.all, { roms: true });  // console games too
roms(ejg.library.all);                     // console games, by name
romsBySystem(ejg.library.all);             // [{ id, name, games }] per system
software(ejg.library.all);                 // the emulators

The fast way: the kit view

/_sdk/kit/homebrew.js brings the whole view, with a controller, like a store: search and one tab per console along the top; what is downloading; your console games; rows of popular, new, and one per console from the catalogs (each console’s rows are requested as you get close); each game’s page with Download, its progress, Play and Delete; and your emulators (installed, configured by hand, and the ones that are missing). It repaints itself when the library changes, a session starts, or a download advances.

<link rel="stylesheet" href="/_sdk/kit/homebrew.css" />

import { createHomebrewView } from "/_sdk/kit/homebrew.js";

const hb = createHomebrewView({
  ejg,
  root: document.getElementById("homebrew"), // a visible container (it scrolls, or a parent does)
  focus,                                     // your createFocus()
  layout: "xbox",                            // steam | ps5 | xbox | switch | cinema | retro
  onExit: backToHome,                        // "Back"
  onChange: () => hints.set(hb.hints()),
  onGame: (g) => openPage(g.id),             // without it, A plays directly
});

// Before your own navigation:
bindNav(focus, {
  back: () => hb.nav("back") || myBack(), // closes the page, returns to the start of Homebrew, or calls onExit
  lb: () => hb.nav("lb"),   // previous / next console
  rb: () => hb.nav("rb"),
  x: () => hb.nav("x"),     // delete the focused game (the host dialog confirms)
  y: () => hb.nav("y"),     // the host emulator store
});

hb.destroy(); // on the way out

onExit is called with Back at the start of the view. Return false if there is nothing to do there. Your games’ cards carry data-game-id, so your usual shortcuts (favorite, properties…) still work on them.

The look

The layout changes the shapes: square covers on ps5, xbox and switch, posters on steam and cinema, pixel borders and inverted focus on retro. The colors are your theme’s, with these variables on .hb-view:

Variable	What it is for
`--hb-fg`, `--hb-muted`	text and secondary text
`--hb-accent`, `--hb-accent-fg`	accent (the chosen chip, buttons) and the text on it
`--hb-surface`, `--hb-surface-2`, `--hb-line`	cards, focused cards and borders
`--hb-radius`, `--hb-focus`	corners and the focus ring (`box-shadow`)
`--hb-hero`	header background
`--hb-font`, `--hb-title-font`	fonts for text and for titles
`--hb-cover`, `--hb-card`	proportion and width of your games’ covers
`--hb-item`	width of the catalog cards (16:9)
`--hb-sheet`, `--hb-input`, `--hb-input-on`	background of the page and of search (normal and focused)
`--hb-warn`, `--hb-ok`	notices (missing emulator) and updates / now playing

Moneda passes layout: "moneda". That layout opens the game as a full page (is-page) instead of a side sheet.

The catalogs

const { sources } = await ejg.catalogs.state();
// [{ id, name, hasSearch, platforms: [{ id: "ps1", system: "psx", name: "PlayStation" }] }]
await ejg.catalogs.browse({ source: "romshq", mode: "popular" });          // also "newest", "platform" and "search"
await ejg.catalogs.browse({ source: "romshq", mode: "platform", platform: "ps2", page: 2 });
await ejg.catalogs.search("zelda", { platforms: ["switch"] });          // every source at once
const page = await ejg.catalogs.detail(entry.sourceId, entry.id);       // + links and screenshots
await ejg.catalogs.download(entry.sourceId, entry.id, page.links[0].url);
ejg.catalogs.jobs;                                // { "<source>|<id>": { name, phase, received, total, gameId } }
ejg.catalogs.onJobs((jobs) => …);                 // at most once a second
ejg.catalogs.cancel("romshq|/game/…");

Each entry carries title, coverUrl (served by ejGames), platform (the catalog’s) and system (the one for game.platform), size, region, installedGameId if it is already in the library, and emulator (what would play it). download only accepts a link from the page: direct links go to the queue (they download, extract and land in the library: "queued"), a download website opens in the browser ("opened") and a torrent opens the catalogs window ("catalogs"). To delete a console game, ejg.game.uninstall(id): the host confirms and sends its files to the recycle bin.

The store’s emulators

const list = await ejg.emulators.list();
// [{ id, name, blurb, systems, platforms, installed, version, latest, update, gameId }]

platforms are the same ids as game.platform (switch, ps2, psx…) and systems are their names. gameId is its library entry (for ejg.game.launch) if it is installed, and update says whether a newer version exists. The first call of the session asks their websites for versions. To install or update them, open the host store with ejg.ui.open("software"). Import ROMs with ejg.ui.open("rom-import").

Manifest

SDK

Kit and practices

The fast way: the kit view

The look

The catalogs

The store’s emulators

​The fast way: the kit view

​The look

​The catalogs

​The store’s emulators

The fast way: the kit view

The look

The catalogs

The store’s emulators