Made of little things.

/**
 * Scenes: ready-made experiments, each a Lua script for the game
 * (src/scenes/*.lua). A script starts with a header of `-- key: value` lines
 * (title, icon, blurb, hint, view; thumb and snap for scripts/scene-thumbs.mjs)
 * and builds its scene with the game's own Lua API plus the helpers in KIT
 * (src/ui/scene-meta.js). Thumbnails are pictures of the running scene
 * (src/scenes/thumbs/).
 */
import { parseScene, sceneScript } from './scene-meta.js';

export { sceneScript };

const sources = import.meta.glob('../scenes/*.lua', { eager: true, query: '?raw', import: 'default' });
const thumbs = import.meta.glob('../scenes/thumbs/*.webp', { eager: true, import: 'default' });

export const SCENES = Object.entries(sources)
  .sort(([a], [b]) => a.localeCompare(b))
  .map(([path, source]) => parseScene(path, source, thumbs));

/** The gallery's cards; `onPick` loads the scene. */
export function renderGallery(grid, onPick) {
  grid.replaceChildren(...SCENES.map((scene) => {
    const card = document.createElement('button');
    card.type = 'button';
    card.className = 'scene-card';
    card.dataset.scene = scene.id;
    let picture;
    if (scene.thumb) {
      picture = document.createElement('img');
      picture.src = scene.thumb;
      picture.alt = '';
      picture.loading = 'lazy';
    } else {
      picture = document.createElement('span');
      picture.className = 'no-thumb';
    }
    const body = document.createElement('span');
    body.className = 'scene-body';
    const title = document.createElement('h3');
    title.textContent = `${scene.icon} ${scene.title}`.trim();
    const blurb = document.createElement('p');
    blurb.textContent = scene.blurb;
    body.append(title, blurb);
    card.append(picture, body);
    card.addEventListener('click', () => onPick(scene));
    return card;
  }));
}