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

# index.html and the first main.js

> The page, a little style, and the first data from the SDK.

## The page

This is the theme's complete `index.html`. It will not change for the rest of the
guide, so here it is in full:

```html theme={null}
<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Mi primer tema</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <header class="barra" data-ejg-drag>
      <h1>Mis juegos <span id="total" class="total"></span></h1>
      <nav class="acciones" data-ejg-nodrag>
        <button data-focus data-ui="search">Buscar</button>
        <button data-focus data-ui="settings">Ajustes</button>
      </nav>
    </header>

    <main id="rejilla" class="rejilla" data-focus-group="rejilla"></main>

    <section id="ficha" class="ficha" hidden data-focus-trap></section>

    <footer id="pistas" class="pistas"></footer>
  </body>
</html>
```

What matters:

* **Leave the `<head>` tag as it is**, with no attributes. ejGames inserts the SDK
  (`<script src="/_sdk/ejg.js">`) right after `<head>`, before your scripts. If it
  cannot find the tag, it puts the script at the very start, ahead of the
  `<!doctype>`, and the page drops into *quirks* mode.
* **`type="module"`** on your script, so you can use `import` and `await` outside
  functions.
* **`data-ejg-drag`** turns the bar into the handle for dragging the window
  (double-click maximizes). Anything that should not drag, such as the buttons,
  gets **`data-ejg-nodrag`**.
* `#rejilla` will hold the covers, `#ficha` will be the game page ([step 6](https://ej3mplo.mintlify.site/guia/ficha.md)) and
  `#pistas` the control bar ([step 5](https://ej3mplo.mintlify.site/guia/mando.md)). The `data-focus…` attributes are
  explained in [step 5](https://ej3mplo.mintlify.site/guia/mando.md).

The visible strings (`Buscar`, `Ajustes`, and the ones in later steps) stay in Spanish. That text is the translation key. See [Languages](https://ej3mplo.mintlify.site/referencia/idiomas.md).

## A little style

Start `style.css` with the base: colors in variables, the page fullscreen, and the top bar.

```css theme={null}
:root {
  --fondo: #12141b;
  --panel: #1c1f29;
  --texto: #eceef4;
  --tenue: #9aa0ae;
  --acento: #7c5cff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; background: var(--fondo); }
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, sans-serif;
  user-select: none;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* Leave a strip free at the top: the launcher's window buttons appear there. */
.barra { display: flex; align-items: center; gap: 16px; padding: 40px 32px 14px; }
.barra h1 { margin: 0; font-size: 1.6em; font-weight: 600; }
.total { margin-left: 6px; font-size: 0.6em; font-weight: 400; color: var(--tenue); }
.acciones { margin-left: auto; display: flex; gap: 6px; }
.acciones button { padding: 6px 14px; border-radius: 8px; color: var(--tenue); }
```

That free strip is there because ejGames draws **minimize, maximize and close**
in the top-right corner (they appear when the mouse passes over) and that area
receives the clicks. In [step 8](https://ej3mplo.mintlify.site/guia/sonidos-colores.md) you will see how to draw them yourself if you prefer.

## The first `main.js`

```js theme={null}
const ejg = await window.ejg.ready();
const rejilla = document.querySelector("#rejilla");

function pintar() {
  document.querySelector("#total").textContent = ejg.library.all.length;
  rejilla.replaceChildren(
    ...ejg.library.all.map((g) => {
      const p = document.createElement("p");
      p.textContent = g.title;
      return p;
    }),
  );
}

ejg.library.onChange(pintar);
pintar();
```

* **`await window.ejg.ready()`** waits until ejGames has sent the data (library,
  profile, options). Always start this way.
* **`ejg.library.all`** is the list of games, already sorted by name. It is an
  in-memory copy: reading it costs nothing.
* **`ejg.library.onChange(fn)`** tells you when something changes: new games, a
  favorite, a cover that just finished downloading… Here we draw everything
  again. In the next step we will do it without rebuilding what did not change.

Save, choose the theme, and you should see your games' names. Each game (`Game`)
carries, among other things:

| Field | What it is |
| - | - |
| `id`, `title` | identifier and name |
| `source` | where it came from: `folder` (a folder), `manual` (an `.exe` added by hand) or `repack` (Downloads) |
| `favorite`, `hidden` | favorite / hidden by the user |
| `playtime`, `lastPlayed` | seconds played, and the last session (Unix time, in seconds) |
| `developer`, `releaseDate`, `genres` | page data |
| `media` | art URLs: `coverThumb`/`cover` (2:3 cover), `heroThumb`/`hero` (wide background), `logo`, `header`, `icon`… |

The full list is in the [reference](https://ej3mplo.mintlify.site/referencia/biblioteca.md).


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