> ## 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.

# Explore and downloads

> Open the store, show what is downloading, or draw your own store.

The launcher includes a repack store (**Explore**) and a download queue with a
built-in torrent client (**Downloads**). Your theme does not have to do anything
for them to work: the quick menu, **Ctrl+E** and **Ctrl+J** open the launcher's
windows on top of your theme. It looks much better if the theme at least shows
what is downloading and has a button that goes to the store.

## A button that opens the store

```js theme={null}
// Opens the launcher windows (for themes without their own views).
botonTienda.addEventListener("click", () => ejg.downloads.open("explore"));
botonDescargas.addEventListener("click", () => ejg.downloads.open("downloads"));
// If the user turns Explore off in settings, hide it:
const pintarBoton = () => (botonTienda.hidden = !ejg.explore.enabled);
ejg.explore.onEnabled(pintarBoton);
pintarBoton();
```

## What is downloading

`ejg.downloads.all` is the list of downloads and `ejg.downloads.onChange` fires
when it changes (at most once a second, so you can repaint without worry). The
kit has the formatters:

```js theme={null}
import { bytes, speed, percent, downloadLabel } from "/_sdk/kit/store.js";

const tira = document.querySelector("#descargas");
function pintarDescargas() {
  const ahora = ejg.downloads.all.filter((d) => d.state === "downloading");
  tira.hidden = !ahora.length;
  if (!ahora.length) return;
  const d = ahora[0];
  tira.textContent = `${d.title} · ${percent(d.progress)} · ${speed(d.downBps)} · ${bytes(d.doneBytes)} de ${bytes(d.totalBytes)}`;
}
ejg.downloads.onChange(pintarDescargas);
pintarDescargas();
tira.addEventListener("click", () => ejg.downloads.open("downloads"));
```

`downloadLabel(d)` gives a short text for any state ("Paused while you play",
"Ready to install", "Installing…").

## Discovering games

`ejg.explore.browse()` returns the whole catalog with filters (genres, sort,
size and "hide the ones I already have") and `ejg.explore.genres()` returns the
genres. With the kit it is almost free:

```js theme={null}
import { createExplore, SORTS } from "/_sdk/kit/store.js";

const tienda = createExplore(ejg, pintar);
tienda.loadGenres();
tienda.browse({ genres: [47], sort: "date" }); // Role-playing, newest first
// More as you reach the bottom:
lista.addEventListener("scroll", () => lista.scrollTop + lista.clientHeight > lista.scrollHeight - 400 && tienda.browseMore());

function pintar(s) {
  const c = s.catalog; // { filters, items, total, filtered, loading, error, … }
  // …paint c.items and some buttons from s.genres that call tienda.toggleGenre(id)
}
```

On a game page, `tienda.similar(repack)` gives similar games for a "More like
this" row.

## Games with a hypervisor crack (HV)

Repacks with `hypervisor: true` ask you to turn off Windows' security for a
while in order to play. Mark them next to the name and explain it on the page.
The kit has the text and the pieces:

```js theme={null}
import { repackName, hypervisorInfo } from "/_sdk/kit/store.js";

tarjeta.append(repackName(repack));              // "Name" or "Name HV"
ficha.append(hypervisorInfo(ejg, repack) ?? "");  // the collapsible notice (nothing if it is not HV)
```

The classes and the rest are in [the reference](https://ej3mplo.mintlify.site/referencia/explorar.md#hypervisor-cracks-hv).

## Your own store

If you want the store and the queue to look like your theme, declare this in
`theme.json`:

```json theme={null}
"features": { "explore": true }
```

From then on, the launcher no longer opens its windows. It asks your theme to
open its view with `ejg.ui.onView(({ view, slug }) => …)` (`explore`, `downloads`
or `repack`, a game page). The hard logic is already done in `/_sdk/kit/store.js`
(the front page, search, file selection, states…). The **Steam** theme
(`themes/steam/store.js`) is a complete example, and the reference is in
[the reference](https://ej3mplo.mintlify.site/referencia/explorar.md).


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