Aventura

Una aventura point-and-click de tres lugares (jardín, taller y estudio) para recuperar el cuaderno que una inventora dejó en su estudio cerrado con llave. Tiene dos puzles de inventario encadenados, y para llegar al cuaderno hay que resolver los dos.

Hecha con Kaplay, en unas 199 líneas de JavaScript.

Cómo está hecha

1. Configuración

   Se crea el juego con un tamaño fijo. El teclado solo sirve para salir de la pantalla de título, porque el resto se juega con clics, como las aventuras point-and-click.

   // Everything is played with the mouse or a finger; the keyboard only starts the game.
   // That is why there are no on-screen touch buttons: you tap the scene itself.
   kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [24, 22, 40],
     buttons: { start: { keyboard: ["space", "enter"] } },
   });
   const FLOOR_Y = 200; // height where the floor of every room begins

2. El mundo como datos

   Cada habitación es una lista de objetos con su nombre, su forma, el texto que se dice al mirarlo y, si corresponde, si se puede tomar o a qué lugar lleva. Algunos textos son funciones que cambian según el estado. Añadir un lugar o un objeto es escribir datos, no programar.

   // The world is DATA: rooms with objects. Each object has a name, a shape,
   // what you are told when you look at it and, if relevant, whether you can
   // take it ("take") or which room it leads to ("exit").
   let gameState; // created at the start of every game (region "state")
   const ROOMS = {
     garden: {
       name: { es: "Jardín", en: "Garden" },
       enter: { es: "El jardín de la casa. La puerta del estudio está al fondo.", en: "The garden of the house. The study door is at the back." },
       sky: [120, 170, 210],
       floor: [90, 140, 80],
       objects: [
         { id: "tree", shape: "tree", x: 30, y: 20, w: 150, h: 210,
           name: { es: "árbol", en: "tree" },
           look: () => gameState.keyInTree
             ? { es: "Un árbol alto. ¡Hay una llave colgada de una rama!", en: "A tall tree. There's a key hanging from a branch!" }
             : { es: "Un árbol alto. Da buena sombra.", en: "A tall tree. It gives good shade." },
           noTake: { es: "La llave está muy alta. Necesito algo largo para alcanzarla.", en: "The key is too high. I need something long to reach it." } },
         { id: "key", shape: "key", x: 196, y: 214, w: 30, h: 16, take: true, color: [250, 210, 70],
           name: { es: "llave", en: "key" }, visible: () => gameState.keyFell,
           look: { es: "Una llave de hierro.", en: "An iron key." } },
         { id: "door", shape: "door", x: 330, y: 70, w: 80, h: 140, exit: "study",
           name: { es: "puerta del estudio", en: "study door" }, locked: () => !gameState.doorOpen,
           look: { es: "La puerta del estudio. Está cerrada con llave.", en: "The study door. It's locked." } },
         { id: "to-workshop", shape: "arrow", x: 566, y: 110, w: 60, h: 60, exit: "workshop", dir: 1, name: { es: "ir al taller", en: "go to the workshop" } },
       ],
     },
     workshop: {
       name: { es: "Taller", en: "Workshop" },
       enter: { es: "El taller huele a aceite y a madera.", en: "The workshop smells of oil and wood." },
       sky: [190, 170, 140],
       floor: [110, 90, 70],
       objects: [
         { id: "bench", x: 100, y: 130, w: 150, h: 80, color: [120, 90, 60],
           name: { es: "mesa de trabajo", en: "workbench" },
           look: { es: "Una mesa llena de tornillos y engranajes.", en: "A bench covered in screws and gears." } },
         { id: "pole", shape: "pole", x: 310, y: 40, w: 20, h: 170, take: true, color: [200, 160, 80],
           name: { es: "palo largo", en: "long pole" },
           look: { es: "Un palo largo de madera, apoyado en la pared.", en: "A long wooden pole, leaning on the wall." } },
         { id: "to-garden", shape: "arrow", x: 16, y: 110, w: 60, h: 60, exit: "garden", dir: -1, name: { es: "volver al jardín", en: "back to the garden" } },
       ],
     },
     study: {
       name: { es: "Estudio", en: "Study" },
       enter: { es: "El estudio, en penumbra.", en: "The study, in the half-light." },
       sky: [90, 70, 110],
       floor: [70, 50, 60],
       objects: [
         { id: "drawer", x: 110, y: 140, w: 200, h: 70, color: [150, 100, 70],
           name: { es: "cajonera", en: "chest of drawers" },
           look: { es: "Los cajones solo guardan lápices sin punta.", en: "The drawers only hold blunt pencils." } },
         { id: "notebook", shape: "notebook", x: 410, y: 160, w: 70, h: 44, take: true, color: [70, 130, 200],
           name: { es: "cuaderno", en: "notebook" },
           look: { es: "¡El cuaderno de la inventora! Es lo que vine a buscar.", en: "The inventor's notebook! This is what I came for." } },
         { id: "to-garden", shape: "arrow", x: 16, y: 110, w: 60, h: 60, exit: "garden", dir: -1, name: { es: "volver al jardín", en: "back to the garden" } },
       ],
     },
   };

3. Los puzles

   Un puzle de inventario es un par «objeto > destino». Usar el palo en el árbol tira la llave, y usar la llave en la puerta la abre. Como un puzle prepara el siguiente, se forma una cadena de dependencias, que es el esqueleto de cualquier aventura.

   // Puzzles are "inventory item > scene object" pairs.
   // Each one changes the world state and returns what the narrator says.
   const COMBOS = {
     "pole>tree": () => {
       if (!gameState.keyInTree) return { es: "Ya no hay nada en la rama.", en: "There's nothing left on the branch." };
       gameState.keyInTree = false;
       gameState.keyFell = true;
       return { es: "Sacudes la rama con el palo... ¡la llave cae al suelo!", en: "You shake the branch with the pole... the key falls to the ground!" };
     },
     "key>door": () => {
       gameState.doorOpen = true;
       gameState.inventory = gameState.inventory.filter((i) => i !== "key");
       return { es: "La llave gira con un clic. La puerta se abre.", en: "The key turns with a click. The door opens." };
     },
   };

4. El estado del mundo

   Todo lo que cambia mientras juegas (dónde estás, qué llevas, qué tomaste y qué puertas abriste) vive en un solo objeto. Así es fácil reiniciar la partida y, más adelante, guardarla.

   // Everything that changes while you play fits in one object: that makes saving easy.
   gameState = { room: "garden", inventory: [], taken: [], keyInTree: true, keyFell: false, doorOpen: false };
   let [verb, selected] = ["look", null]; // selected: the inventory item you are using
   const value = (x) => (typeof x === "function" ? x() : x); // fixed text or text that depends on the state
   const findObject = (id) => Object.values(ROOMS).flatMap((r) => r.objects).find((o) => o.id === id);

5. Dibujar los lugares

   Cada objeto se dibuja con formas simples y encima lleva un rectángulo invisible que recibe los clics: el hotspot, la zona sensible. Al cambiar el estado, la habitación se borra y se vuelve a construir, así lo que se ve siempre coincide con los datos.

   // Each object is an invisible rectangle that receives clicks (the "hotspot")
   // plus a few simple shapes that draw it.
   function draw(o, open) {
     const c = rgb(...(o.color ?? [140, 100, 70]));
     const d = (comps) => add([...comps, "room"]);
     const { x, y, w, h } = o;
     if (o.shape === "tree") {
       d([rect(26, h - 90), pos(x + w / 2 - 13, y + 90), color(110, 75, 45)]);
       d([circle(68), pos(x + w / 2, y + 70), color(60, 130, 70)]);
       if (gameState.keyInTree) d([rect(18, 8), pos(x + w - 40, y + 40), color(250, 210, 70)]);
     } else if (o.shape === "door") {
       d([rect(w + 140, h + 20), pos(x - 70, y - 20), color(190, 180, 170)]); // house wall
       d([rect(w, h), pos(x, y), color(open ? rgb(20, 15, 25) : rgb(120, 70, 40))]);
       if (!open) d([circle(5), pos(x + w - 14, y + h / 2), color(240, 200, 80)]);
     } else if (o.shape === "arrow") {
       const p = o.dir > 0 ? [vec2(0, 0), vec2(w, h / 2), vec2(0, h)] : [vec2(w, 0), vec2(0, h / 2), vec2(w, h)];
       d([polygon(p), pos(x, y), color(255, 255, 255), opacity(0.6)]);
     } else if (o.shape === "pole") {
       d([rect(8, h), pos(x + w / 2 - 4, y), color(c)]);
     } else if (o.shape === "key") {
       d([circle(7), pos(x + 7, y + 8), color(c)]);
       d([rect(w - 10, 5), pos(x + 10, y + 6), color(c)]);
     } else if (o.shape === "notebook") {
       d([rect(w, h), pos(x, y), color(c)]);
       d([rect(6, h), pos(x, y), color(40, 70, 120)]); // spine
     } else {
       d([rect(w, h), pos(x, y), color(c), outline(2, rgb(0, 0, 0))]);
     }
   }
   
   function buildRoom() {
     destroyAll("room");
     const room = ROOMS[gameState.room];
     add([rect(640, FLOOR_Y), color(...room.sky), "room"]);
     add([rect(640, 270 - FLOOR_Y), pos(0, FLOOR_Y), color(...room.floor), "room"]);
     add([text(t(room.name), { size: 14, font: FONT }), pos(628, 60), anchor("topright"), opacity(0.8), "room"]);
     for (const o of room.objects) {
       if ((o.visible && !o.visible()) || gameState.taken.includes(o.id)) continue;
       draw(o, o.locked && !o.locked()); // fill: false → invisible, but its area still receives clicks
       add([rect(o.w, o.h, { fill: false }), pos(o.x, o.y), area(), "room", "hotspot", { data: o }]);
     }
   }

6. Verbos e inventario

   Abajo están los verbos y las casillas del inventario, y arriba el texto de la narración. Es la interfaz clásica de las point-and-click, en la que primero dices qué hacer y luego con qué.

   // Bottom: the verbs (look, take) and the inventory. Top: the narration.
   add([rect(640, 90), pos(0, 270), color(30, 28, 50), z(5)]);
   add([rect(624, 44), pos(8, 8), color(0, 0, 0), opacity(0.6), z(5)]);
   const message = add([text("", { size: 15, font: FONT, width: 604 }), pos(18, 14), z(6)]);
   const statusLine = add([text("", { size: 14, font: FONT }), pos(320, 252), anchor("center"), z(6), color(255, 240, 180)]);
   const say = (txt) => (message.text = t(txt));
   
   const VERBS = [{ id: "look", name: { es: "Mirar", en: "Look" } }, { id: "take", name: { es: "Tomar", en: "Take" } }];
   VERBS.forEach((v, i) => {
     const b = add([rect(96, 32, { radius: 6 }), pos(14, 280 + i * 38), color(70, 70, 120), area(), z(6), "verb", { verb: v.id }]);
     b.add([text(t(v.name), { size: 16, font: FONT }), pos(48, 16), anchor("center")]);
   });
   
   function drawInventory() {
     destroyAll("slot");
     gameState.inventory.forEach((id, i) => {
       const o = findObject(id);
       const s = add([rect(110, 60, { radius: 6 }), pos(130 + i * 120, 285), color(selected === id ? rgb(120, 110, 40) : rgb(55, 52, 85)), area(), z(6), "slot", { item: id }]);
       s.add([circle(12), pos(55, 22), color(...o.color)]);
       s.add([text(t(o.name), { size: 13, font: FONT }), pos(55, 46), anchor("center")]);
     });
   }

7. Qué pasa al hacer clic

   Un solo manejador de clics decide qué tocaste y la función interact resuelve la acción: combinar un objeto, cruzar una salida, tomar o mirar. La línea de estado anticipa lo que harías («Usar palo largo con árbol»), una ayuda pequeña que evita muchos clics a ciegas.

   // A single click handler decides what you touched: a verb, the inventory
   // or an object in the scene (the topmost one if they overlap).
   function interact(o) {
     if (selected) {
       const combo = COMBOS[`${selected}>${o.id}`];
       say(combo ? combo() : { es: "Eso no sirve ahí.", en: "That doesn't work there." });
       selected = null;
     } else if (o.exit && !(o.locked && o.locked())) {
       gameState.room = o.exit;
       say(ROOMS[o.exit].enter);
     } else if (verb === "take" && o.take) {
       gameState.taken.push(o.id);
       if (o.id === "notebook") return go("end");
       gameState.inventory.push(o.id);
       say({ es: `Tomas: ${t(o.name)}.`, en: `You take: ${t(o.name)}.` });
     } else if (verb === "take") {
       say(o.noTake ?? { es: "No puedo llevarme eso.", en: "I can't take that." });
     } else {
       say(value(o.look) ?? o.name);
     }
     buildRoom();
     drawInventory();
   }
   
   onClick(() => {
     const verbButton = get("verb").find((b) => b.isHovering());
     const slot = get("slot").find((s) => s.isHovering());
     const hotspot = get("hotspot").reverse().find((h) => h.isHovering());
     if (verbButton) [verb, selected] = [verbButton.verb, null];
     else if (slot) selected = selected === slot.item ? null : slot.item;
     else if (hotspot) return interact(hotspot.data);
     else selected = null;
     drawInventory();
   });
   
   // The status line says what a click would do: "Use long pole with tree".
   onUpdate(() => {
     const hotspot = get("hotspot").reverse().find((h) => h.isHovering());
     for (const b of get("verb")) b.color = b.verb === verb && !selected ? rgb(110, 110, 190) : rgb(70, 70, 120);
     const name = hotspot ? t(hotspot.data.name) : "";
     if (selected) statusLine.text = t({ es: "Usar ", en: "Use " }) + t(findObject(selected).name) + t({ es: " con ", en: " with " }) + name;
     else statusLine.text = hotspot?.data.exit ? name : `${t(VERBS.find((v) => v.id === verb).name)} ${name}`;
     setCursor(hotspot || get("verb").concat(get("slot")).some((b) => b.isHovering()) ? "pointer" : "default");
   });
   
   say({ es: "La inventora dejó su cuaderno en el estudio, y la puerta está cerrada. ¿Dónde estará la llave?", en: "The inventor left her notebook in the study, and the door is locked. Where could the key be?" });
   buildRoom();
   drawInventory();

8. Escenas

   El juego tiene tres escenas (title, game y end). Tomar el cuaderno lleva a la escena de fin, y desde ahí se puede empezar de nuevo.

   function screen(title, subtitle, next) {
     add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 40)), anchor("center")]);
     add([text(subtitle, { size: 16, font: FONT, align: "center", width: 560 }), pos(center().add(0, 30)), anchor("center"), color(200, 210, 255)]);
     onButtonPress("start", next);
     onClick(next);
   }
   
   scene("title", () => screen(t({ es: "La casa de la inventora", en: "The inventor's house" }),
     t({
       es: "Elige un verbo (Mirar o Tomar) y haz clic en las cosas. Para usar algo del inventario, tócalo y luego toca dónde quieres usarlo.\nHaz clic o pulsa espacio para empezar.",
       en: "Pick a verb (Look or Take) and click on things. To use something from your inventory, tap it and then tap where you want to use it.\nClick or press space to start.",
     }),
     () => go("game")));
   
   scene("end", () => screen(t({ es: "¡Encontraste el cuaderno!", en: "You found the notebook!" }),
     t({ es: "Ahora se puede terminar el invento. Haz clic o pulsa espacio para jugar otra vez.", en: "Now the invention can be finished. Click or press space to play again." }),
     () => go("game")));
   
   go("title");

Qué simplificamos

• Solo hay dos verbos, Mirar y Tomar, más usar objetos. Las aventuras clásicas de Lucasfilm tenían una docena o más.
• No hay protagonista que camine por la escena ni diálogos con personajes; el clic actúa al instante.
• Los lugares y objetos son formas simples, sin ilustraciones, y no se puede guardar la partida.

Para modificarla

• Agrega un tercer puzle, por ejemplo una regadera del taller que hay que llenar en un grifo del jardín para regar una planta que esconde algo.
• Traduce todos los textos a un tercer idioma. Añade una clave nueva (por ejemplo fr o qu) a cada texto y haz que la función t la use cuando la URL lo pida.
• Añade un personaje con el que se pueda hablar y que dé una pista cuando el jugador lleve un rato sin avanzar.

// Adventure demo
// Engine: Kaplay 3001 (https://kaplayjs.com). MIT licence.
import kaplay from "../../vendor/kaplay.mjs";
import { t, FONT, pixelDensity } from "../common.js";

// #region setup
// Everything is played with the mouse or a finger; the keyboard only starts the game.
// That is why there are no on-screen touch buttons: you tap the scene itself.
kaplay({
  width: 640,
  height: 360,
  letterbox: true, pixelDensity,
  background: [24, 22, 40],
  buttons: { start: { keyboard: ["space", "enter"] } },
});
const FLOOR_Y = 200; // height where the floor of every room begins
// #endregion

// #region world
// The world is DATA: rooms with objects. Each object has a name, a shape,
// what you are told when you look at it and, if relevant, whether you can
// take it ("take") or which room it leads to ("exit").
let gameState; // created at the start of every game (region "state")
const ROOMS = {
  garden: {
    name: { es: "Jardín", en: "Garden" },
    enter: { es: "El jardín de la casa. La puerta del estudio está al fondo.", en: "The garden of the house. The study door is at the back." },
    sky: [120, 170, 210],
    floor: [90, 140, 80],
    objects: [
      { id: "tree", shape: "tree", x: 30, y: 20, w: 150, h: 210,
        name: { es: "árbol", en: "tree" },
        look: () => gameState.keyInTree
          ? { es: "Un árbol alto. ¡Hay una llave colgada de una rama!", en: "A tall tree. There's a key hanging from a branch!" }
          : { es: "Un árbol alto. Da buena sombra.", en: "A tall tree. It gives good shade." },
        noTake: { es: "La llave está muy alta. Necesito algo largo para alcanzarla.", en: "The key is too high. I need something long to reach it." } },
      { id: "key", shape: "key", x: 196, y: 214, w: 30, h: 16, take: true, color: [250, 210, 70],
        name: { es: "llave", en: "key" }, visible: () => gameState.keyFell,
        look: { es: "Una llave de hierro.", en: "An iron key." } },
      { id: "door", shape: "door", x: 330, y: 70, w: 80, h: 140, exit: "study",
        name: { es: "puerta del estudio", en: "study door" }, locked: () => !gameState.doorOpen,
        look: { es: "La puerta del estudio. Está cerrada con llave.", en: "The study door. It's locked." } },
      { id: "to-workshop", shape: "arrow", x: 566, y: 110, w: 60, h: 60, exit: "workshop", dir: 1, name: { es: "ir al taller", en: "go to the workshop" } },
    ],
  },
  workshop: {
    name: { es: "Taller", en: "Workshop" },
    enter: { es: "El taller huele a aceite y a madera.", en: "The workshop smells of oil and wood." },
    sky: [190, 170, 140],
    floor: [110, 90, 70],
    objects: [
      { id: "bench", x: 100, y: 130, w: 150, h: 80, color: [120, 90, 60],
        name: { es: "mesa de trabajo", en: "workbench" },
        look: { es: "Una mesa llena de tornillos y engranajes.", en: "A bench covered in screws and gears." } },
      { id: "pole", shape: "pole", x: 310, y: 40, w: 20, h: 170, take: true, color: [200, 160, 80],
        name: { es: "palo largo", en: "long pole" },
        look: { es: "Un palo largo de madera, apoyado en la pared.", en: "A long wooden pole, leaning on the wall." } },
      { id: "to-garden", shape: "arrow", x: 16, y: 110, w: 60, h: 60, exit: "garden", dir: -1, name: { es: "volver al jardín", en: "back to the garden" } },
    ],
  },
  study: {
    name: { es: "Estudio", en: "Study" },
    enter: { es: "El estudio, en penumbra.", en: "The study, in the half-light." },
    sky: [90, 70, 110],
    floor: [70, 50, 60],
    objects: [
      { id: "drawer", x: 110, y: 140, w: 200, h: 70, color: [150, 100, 70],
        name: { es: "cajonera", en: "chest of drawers" },
        look: { es: "Los cajones solo guardan lápices sin punta.", en: "The drawers only hold blunt pencils." } },
      { id: "notebook", shape: "notebook", x: 410, y: 160, w: 70, h: 44, take: true, color: [70, 130, 200],
        name: { es: "cuaderno", en: "notebook" },
        look: { es: "¡El cuaderno de la inventora! Es lo que vine a buscar.", en: "The inventor's notebook! This is what I came for." } },
      { id: "to-garden", shape: "arrow", x: 16, y: 110, w: 60, h: 60, exit: "garden", dir: -1, name: { es: "volver al jardín", en: "back to the garden" } },
    ],
  },
};
// #endregion

// #region puzzles
// Puzzles are "inventory item > scene object" pairs.
// Each one changes the world state and returns what the narrator says.
const COMBOS = {
  "pole>tree": () => {
    if (!gameState.keyInTree) return { es: "Ya no hay nada en la rama.", en: "There's nothing left on the branch." };
    gameState.keyInTree = false;
    gameState.keyFell = true;
    return { es: "Sacudes la rama con el palo... ¡la llave cae al suelo!", en: "You shake the branch with the pole... the key falls to the ground!" };
  },
  "key>door": () => {
    gameState.doorOpen = true;
    gameState.inventory = gameState.inventory.filter((i) => i !== "key");
    return { es: "La llave gira con un clic. La puerta se abre.", en: "The key turns with a click. The door opens." };
  },
};
// #endregion

scene("game", () => {
  // #region state
  // Everything that changes while you play fits in one object: that makes saving easy.
  gameState = { room: "garden", inventory: [], taken: [], keyInTree: true, keyFell: false, doorOpen: false };
  let [verb, selected] = ["look", null]; // selected: the inventory item you are using
  const value = (x) => (typeof x === "function" ? x() : x); // fixed text or text that depends on the state
  const findObject = (id) => Object.values(ROOMS).flatMap((r) => r.objects).find((o) => o.id === id);
  // #endregion

  // #region drawing
  // Each object is an invisible rectangle that receives clicks (the "hotspot")
  // plus a few simple shapes that draw it.
  function draw(o, open) {
    const c = rgb(...(o.color ?? [140, 100, 70]));
    const d = (comps) => add([...comps, "room"]);
    const { x, y, w, h } = o;
    if (o.shape === "tree") {
      d([rect(26, h - 90), pos(x + w / 2 - 13, y + 90), color(110, 75, 45)]);
      d([circle(68), pos(x + w / 2, y + 70), color(60, 130, 70)]);
      if (gameState.keyInTree) d([rect(18, 8), pos(x + w - 40, y + 40), color(250, 210, 70)]);
    } else if (o.shape === "door") {
      d([rect(w + 140, h + 20), pos(x - 70, y - 20), color(190, 180, 170)]); // house wall
      d([rect(w, h), pos(x, y), color(open ? rgb(20, 15, 25) : rgb(120, 70, 40))]);
      if (!open) d([circle(5), pos(x + w - 14, y + h / 2), color(240, 200, 80)]);
    } else if (o.shape === "arrow") {
      const p = o.dir > 0 ? [vec2(0, 0), vec2(w, h / 2), vec2(0, h)] : [vec2(w, 0), vec2(0, h / 2), vec2(w, h)];
      d([polygon(p), pos(x, y), color(255, 255, 255), opacity(0.6)]);
    } else if (o.shape === "pole") {
      d([rect(8, h), pos(x + w / 2 - 4, y), color(c)]);
    } else if (o.shape === "key") {
      d([circle(7), pos(x + 7, y + 8), color(c)]);
      d([rect(w - 10, 5), pos(x + 10, y + 6), color(c)]);
    } else if (o.shape === "notebook") {
      d([rect(w, h), pos(x, y), color(c)]);
      d([rect(6, h), pos(x, y), color(40, 70, 120)]); // spine
    } else {
      d([rect(w, h), pos(x, y), color(c), outline(2, rgb(0, 0, 0))]);
    }
  }

  function buildRoom() {
    destroyAll("room");
    const room = ROOMS[gameState.room];
    add([rect(640, FLOOR_Y), color(...room.sky), "room"]);
    add([rect(640, 270 - FLOOR_Y), pos(0, FLOOR_Y), color(...room.floor), "room"]);
    add([text(t(room.name), { size: 14, font: FONT }), pos(628, 60), anchor("topright"), opacity(0.8), "room"]);
    for (const o of room.objects) {
      if ((o.visible && !o.visible()) || gameState.taken.includes(o.id)) continue;
      draw(o, o.locked && !o.locked()); // fill: false → invisible, but its area still receives clicks
      add([rect(o.w, o.h, { fill: false }), pos(o.x, o.y), area(), "room", "hotspot", { data: o }]);
    }
  }
  // #endregion

  // #region interface
  // Bottom: the verbs (look, take) and the inventory. Top: the narration.
  add([rect(640, 90), pos(0, 270), color(30, 28, 50), z(5)]);
  add([rect(624, 44), pos(8, 8), color(0, 0, 0), opacity(0.6), z(5)]);
  const message = add([text("", { size: 15, font: FONT, width: 604 }), pos(18, 14), z(6)]);
  const statusLine = add([text("", { size: 14, font: FONT }), pos(320, 252), anchor("center"), z(6), color(255, 240, 180)]);
  const say = (txt) => (message.text = t(txt));

  const VERBS = [{ id: "look", name: { es: "Mirar", en: "Look" } }, { id: "take", name: { es: "Tomar", en: "Take" } }];
  VERBS.forEach((v, i) => {
    const b = add([rect(96, 32, { radius: 6 }), pos(14, 280 + i * 38), color(70, 70, 120), area(), z(6), "verb", { verb: v.id }]);
    b.add([text(t(v.name), { size: 16, font: FONT }), pos(48, 16), anchor("center")]);
  });

  function drawInventory() {
    destroyAll("slot");
    gameState.inventory.forEach((id, i) => {
      const o = findObject(id);
      const s = add([rect(110, 60, { radius: 6 }), pos(130 + i * 120, 285), color(selected === id ? rgb(120, 110, 40) : rgb(55, 52, 85)), area(), z(6), "slot", { item: id }]);
      s.add([circle(12), pos(55, 22), color(...o.color)]);
      s.add([text(t(o.name), { size: 13, font: FONT }), pos(55, 46), anchor("center")]);
    });
  }
  // #endregion

  // #region actions
  // A single click handler decides what you touched: a verb, the inventory
  // or an object in the scene (the topmost one if they overlap).
  function interact(o) {
    if (selected) {
      const combo = COMBOS[`${selected}>${o.id}`];
      say(combo ? combo() : { es: "Eso no sirve ahí.", en: "That doesn't work there." });
      selected = null;
    } else if (o.exit && !(o.locked && o.locked())) {
      gameState.room = o.exit;
      say(ROOMS[o.exit].enter);
    } else if (verb === "take" && o.take) {
      gameState.taken.push(o.id);
      if (o.id === "notebook") return go("end");
      gameState.inventory.push(o.id);
      say({ es: `Tomas: ${t(o.name)}.`, en: `You take: ${t(o.name)}.` });
    } else if (verb === "take") {
      say(o.noTake ?? { es: "No puedo llevarme eso.", en: "I can't take that." });
    } else {
      say(value(o.look) ?? o.name);
    }
    buildRoom();
    drawInventory();
  }

  onClick(() => {
    const verbButton = get("verb").find((b) => b.isHovering());
    const slot = get("slot").find((s) => s.isHovering());
    const hotspot = get("hotspot").reverse().find((h) => h.isHovering());
    if (verbButton) [verb, selected] = [verbButton.verb, null];
    else if (slot) selected = selected === slot.item ? null : slot.item;
    else if (hotspot) return interact(hotspot.data);
    else selected = null;
    drawInventory();
  });

  // The status line says what a click would do: "Use long pole with tree".
  onUpdate(() => {
    const hotspot = get("hotspot").reverse().find((h) => h.isHovering());
    for (const b of get("verb")) b.color = b.verb === verb && !selected ? rgb(110, 110, 190) : rgb(70, 70, 120);
    const name = hotspot ? t(hotspot.data.name) : "";
    if (selected) statusLine.text = t({ es: "Usar ", en: "Use " }) + t(findObject(selected).name) + t({ es: " con ", en: " with " }) + name;
    else statusLine.text = hotspot?.data.exit ? name : `${t(VERBS.find((v) => v.id === verb).name)} ${name}`;
    setCursor(hotspot || get("verb").concat(get("slot")).some((b) => b.isHovering()) ? "pointer" : "default");
  });

  say({ es: "La inventora dejó su cuaderno en el estudio, y la puerta está cerrada. ¿Dónde estará la llave?", en: "The inventor left her notebook in the study, and the door is locked. Where could the key be?" });
  buildRoom();
  drawInventory();
  // #endregion
});

// #region scenes
function screen(title, subtitle, next) {
  add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 40)), anchor("center")]);
  add([text(subtitle, { size: 16, font: FONT, align: "center", width: 560 }), pos(center().add(0, 30)), anchor("center"), color(200, 210, 255)]);
  onButtonPress("start", next);
  onClick(next);
}

scene("title", () => screen(t({ es: "La casa de la inventora", en: "The inventor's house" }),
  t({
    es: "Elige un verbo (Mirar o Tomar) y haz clic en las cosas. Para usar algo del inventario, tócalo y luego toca dónde quieres usarlo.\nHaz clic o pulsa espacio para empezar.",
    en: "Pick a verb (Look or Take) and click on things. To use something from your inventory, tap it and then tap where you want to use it.\nClick or press space to start.",
  }),
  () => go("game")));

scene("end", () => screen(t({ es: "¡Encontraste el cuaderno!", en: "You found the notebook!" }),
  t({ es: "Ahora se puede terminar el invento. Haz clic o pulsa espacio para jugar otra vez.", en: "Now the invention can be finished. Click or press space to play again." }),
  () => go("game")));

go("title");
// #endregion