> ## Documentation Index
> Fetch the complete documentation index at: https://ej3mplo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Homebrew

> Console games as a store: the kit's createHomebrewView, ejg.catalogs and ejg.emulators.

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:

```js theme={null}
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.

```html theme={null}
<link rel="stylesheet" href="/_sdk/kit/homebrew.css" />
```

```js theme={null}
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

```js theme={null}
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

```js theme={null}
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")`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.