Display & Layouts:Object List Widgets

Object List Widgets can display a list of objects in the current room.

// ObjectListWidget.js
/* global AdventureJS A Game */

var ObjectListWidget = new AdventureJS.Game(
  "ObjectListWidget",
  "ObjectListWidgetContainer"
);

ObjectListWidget.settings.set({
  display: "inline",
  title: "Object List Widget",
  author: "Ivan Cockrum",
  description:
    "Here is an example of a simple layout with a fixed object list widget that always shows a list of objects in the room. ",
  version: "0.0.1",
});

// Create the widget.
ObjectListWidget.createWidget({
  class: "ObjectList",
  id: "MyObjectListWidget",
  title: "OBJECTS",
  cssclasses: ["custom", "object"],
  verb: "examine",
  region: "left",
});

ObjectListWidget.createAsset({
  class: "Player",
  name: "Explorer",
  place: { in: "Start Room" },
});
ObjectListWidget.createAsset({
  class: "Pencil",
  name: "indigo pencil",
  a: "an",
  adjectives: "indigo, colored",
  place: { in: "Start Room" },
  description: "It's an indigo colored pencil. ",
});
ObjectListWidget.createAsset({
  class: "Pencil",
  name: "violet pencil",
  article: "a",
  adjectives: "violet, colored",
  place: { in: "Start Room" },
  description: "It's a violet colored pencil. ",
});
ObjectListWidget.createAsset({
  class: "Entity",
  name: "paint brush",
  article: "a",
  // adjectives: "",
  place: { in: "Start Room" },
  description: "It's a number 12 paint brush. ",
});

ObjectListWidget.createAsset({
  class: "Room",
  name: "Start Room",
  description: `
    This is the Start Room.
  `,
  exits: {
    east: "East Room",
    west: "West Room",
    north: "North Room",
    south: "South Room",
  },
});
ObjectListWidget.createAsset({
  class: "Pencil",
  name: "yellow pencil",
  article: "a",
  adjectives: "yellow, colored",
  place: { in: "Start Room" },
  description: "It's a yellow colored pencil. ",
});

ObjectListWidget.createAsset({
  class: "Room",
  name: "North Room",
  description: `This is the North Room. `,
  exits: {
    south: "Start Room",
  },
});
ObjectListWidget.createAsset({
  class: "Pencil",
  name: "blue pencil",
  article: "a",
  adjectives: "blue, colored",
  place: { in: "North Room" },
  description: "It's a colored pencil, zinc blue. ",
});
ObjectListWidget.createAsset({
  class: "Crayon",
  name: "pink crayon",
  article: "a",
  adjectives: "pink, colored",
  place: { in: "North Room" },
  description: "It's a pink crayon. ",
});

ObjectListWidget.createAsset({
  class: "Room",
  name: "South Room",
  description: `This is the South Room. `,
  exits: {
    north: "Start Room",
  },
});
ObjectListWidget.createAsset({
  class: "Pencil",
  name: "red pencil",
  article: "a",
  adjectives: "red, colored",
  place: { in: "South Room" },
  description: "It's a red colored pencil. ",
});
ObjectListWidget.createAsset({
  class: "Crayon",
  name: "white crayon",
  article: "a",
  adjectives: "white, colored",
  place: { in: "South Room" },
  description: "It's a white crayon. ",
});

ObjectListWidget.createAsset({
  class: "Room",
  name: "East Room",
  description: `This is the East Room. `,
  exits: {
    west: "Start Room",
  },
});
ObjectListWidget.createAsset({
  class: "Pencil",
  name: "orange pencil",
  // article: "a",
  adjectives: "orange, colored",
  place: { in: "East Room" },
  description: "It's an orange colored pencil. ",
});
ObjectListWidget.createAsset({
  class: "Crayon",
  name: "maroon crayon",
  article: "a",
  adjectives: "maroon, colored",
  place: { in: "East Room" },
  description: "It's a maroon crayon. ",
});

ObjectListWidget.createAsset({
  class: "Room",
  name: "West Room",
  description: `This is the West Room. `,
  exits: {
    east: "Start Room",
  },
});
ObjectListWidget.createAsset({
  class: "Pencil",
  name: "green pencil",
  article: "a",
  adjectives: "green, colored",
  place: { in: "West Room" },
  description: "It's a green colored pencil. ",
});
ObjectListWidget.createAsset({
  class: "Crayon",
  name: "plum crayon",
  article: "a",
  adjectives: "plum, colored",
  place: { in: "West Room" },
  description: "It's a plum crayon. ",
});

Demo Source files

Right-click and choose "Save as..." to download source files.

ObjectListWidget.zip

index.html

Notes:

Demo games are set to a small size to fit doc pages. They can easily be enlarged via display settings.
Demo games all use the same theme. Colors and fonts can be changed via custom CSS.
Demo games don't include the core AdventureJS code. To run downloaded games locally, you'll need to also download copies of the core JS and CSS and set up this local folder structure.

AdventureJS
└── js
|   └── adventure.min.js
└── css
|   └── adventurejs.min.css
└── games
    ├── demogame01
    ├── demogame02
    └── demogame03

Example Code

MyGame.createWidget({
  class: "ObjectList",
  id: "MyObjectListWidget",
  cssclasses: ["custom", "objects"],
  region: "left",
});

If a player clicks an object in the list without having typed anything in the input field, the click will perform a verb action on the object. The default verb action is examine, meaning that if a player clicks an item in the list, they will automatically examine it. Authors can specify the verb to be used.
If a player clicks an object in the list while there is text in the input field, the name of the inventory object will be appended to the input field, leaving it up to the player to input.

Object List Widget Properties

verb {String} Optionally provide a verb to apply to the clicked asset if the player clicks an item while the input field is empty. If the player has already entered input to the input field, the item's name will be appended to it rather than calling a verb action. The default verb is examine.
id {String} The ID to be given to the widget. If an HTML element with this ID already exists on the page, that element will be used. Otherwise an element with this ID will be created at game initialization.
cssclasses {Array} Optional custom CSS classes to apply to the widget.
region {String}
The region to place the widget in. Valid options are:
- top
- left
- right
- bottom