Community guides

ejGames brings each game’s Steam community guides (by the game’s appid: the emulator’s, or the one found when the game was identified). They arrive as blocks, never as HTML. Your theme decides how each title, paragraph, list, table or image looks, and no theme receives third-party code. If your theme paints its own guides, declare it in theme.json:

"features": { "explore": true, "guides": true }

and the host (the quick menu, or a guide link) will ask you to open them:

ejg.ui.onView(({ view, gameId, guideId }) => {
  if (view === "guides") openGuides(gameId, guideId); // guideId: open that guide now (or null)
});

Without features.guides, the host has its own window. Open it with ejg.ui.open("guides", { id: gameId }).

The fast way: the kit view

/_sdk/kit/guides.js brings the complete view (a list with filters, saved guides, “keep reading”, a reader with a table of contents, image zoom and a controller). You provide the place and the look:

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

import { createGuideView } from "/_sdk/kit/guides.js";

const view = createGuideView({
  ejg,
  root: document.getElementById("guias"), // a visible container, with a height
  focus,                                  // your createFocus()
  gameId,
  gameTitle: game.title,
  layout: "grid",                          // "list" (rows) | "grid" (cards)
  guide: guideId,                          // optional: open a guide immediately
  labels: { title: "Ayuda del juego" },    // any text can be changed
  onExit: closeGuides,                     // "Back" from the list
  onChange: () => hints.set(view.hints()),
});

// Before your own navigation: the view uses the controller first.
bindNav(focus, {
  back: () => view.nav("back") || myBack(),
  up: () => view.nav("up"),
  down: () => view.nav("down"),
  lb: () => view.nav("lb") || myTab(-1),
  rb: () => view.nav("rb") || myTab(1),
  x: () => view.nav("x"),
  y: () => view.nav("y"),
});

// On the way out (it remembers where you were):
view.destroy();

In the reader, up/down scroll the text, LB/RB jump between sections, Y saves the guide, X opens it on Steam and Back returns to the list (or leaves, if it was opened directly). The look is changed with variables on .g-view (--g-fg, --g-muted, --g-accent, --g-bg, --g-surface, --g-surface-2, --g-line, --g-radius, --g-focus, --g-body-font, --g-body-size) and, if you want to go further, with rules on its g-… classes (g-item, g-chip, g-rbar, g-section-title…). The built-in themes are good examples: each one dresses it like its platform.

The API

await ejg.guides.list(gameId, { page: 1, sort: "toprated", query: "", category: "", allLanguages: false });
// { appid, items: [{ id, title, desc, author, stars, preview, lang }], page, pages, total, next, filtered }

await ejg.guides.get(id);
// { id, title, authors, stars, ratings, published, updated, preview, intro: Block[],
//   sections: [{ id, title, blocks: Block[] }], lang, url, pinned, progress }

await ejg.guides.shelf(gameId);            // { pinned: [...], recent: [...] } for the profile
await ejg.guides.pin(gameId, guide, true); // save (it is listed first and can be read offline)
await ejg.guides.progress(gameId, guide, section, 0.4); // where you are (0..1 inside the section)
ejg.guides.openInBrowser(id);              // the guide on Steam's website
ejg.guides.openLink(span.href);            // a link from a guide you already read

appid: null means the game is not identified on Steam: there are no guides to search.
sort: toprated (highest rated), trend (popular) or mostrecent (newest).
category: one of Steam’s categories. The kit has the list with its Spanish name (GUIDE_CATEGORIES).
Steam does not filter by language without a session, so ejGames guesses from the text. Without allLanguages, only Spanish and English guides come back (and the ones it cannot tell). Ask for the next page from the response to continue.

The blocks

`t`	What it is
`h`	a title inside a section (`level` 1–3) with `spans`
`p`	a paragraph. `"\n"` in the text are line breaks
`list`	`ordered` and `items: [{ depth, spans }]` (sublists use `depth` 1, 2…)
`quote` / `code`	a quote (`spans`) and code (`text`)
`img`	`src` served by ejg-media. `thumb`: the author made it small, off to the side
`table`	`rows` of cells (each cell is `spans`). `head`: the first row is a header
`video`	a YouTube video: `thumb` and `url` (open it with `openLink`)
`hr`	a separator

Each span is { text, b, i, u, s, spoiler, href, guide }. href is a website (open it with ejg.guides.openLink(href)) and guide is another guide (open it in your reader). If you do not want to paint them by hand, the kit’s renderBlocks(blocks, { onLink, onGuide, onImage }) and renderGuide(guide) turn them into DOM nodes with g-… classes.

Manifest

SDK

Kit and practices

Community guides

The fast way: the kit view

The API

The blocks

​The fast way: the kit view

​The API

​The blocks

The fast way: the kit view

The API

The blocks