Pre-release
AdventureJS Docs Downloads Bundler Devlog Score: 0 Moves: 0
Tutorial explaining how to create custom description widgets for AdventureJS. tutorial, custom, object description widget ObjectDescriptionWidget styles

Display & Layouts:Object Description Widgets

Object Description Widgets can show the description of the last object examined, to give players a persistent description.

 

// ObjectDescriptionWidget.js
/* global AdventureJS A ObjectDescriptionWidget G */

var ObjectDescriptionWidget = new AdventureJS.Game(
  "ObjectDescriptionWidget",
  "ObjectDescriptionWidgetContainer"
);

ObjectDescriptionWidget.settings.set({
  display: "inline",
  title: "Object Description Widget",
  author: "Ivan Cockrum",
  description:
    "Here is an example of a simple layout with an object description widget that always shows the description of the last thing examined by the player. ",
  version: "0.0.1",
});

// Create the widget.
ObjectDescriptionWidget.createWidget({
  class: "ObjectDescription",
  id: "MyObjectDescriptionWidget",
  title: "LAST EXAMINED",
  cssclasses: ["custom", "room"],
  region: "right",
});

ObjectDescriptionWidget.createAsset({
  class: "Player",
  name: "Explorer",
  place: { in: "Start Room" },
});

ObjectDescriptionWidget.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",
  },
});
ObjectDescriptionWidget.createAsset({
  class: "Paper",
  name: "indigo pencil",
  a: "an",
  adjectives: "indigo, colored",
  place: { in: "Start Room" },
  description: "It's an indigo colored pencil. ",
});
ObjectDescriptionWidget.createAsset({
  class: "Paper",
  name: "blue paper",
  synonyms: ["sheet", "sheet of blue paper"],
  indefinite_article: "a sheet of",
  adjectives: [""],
  description: "It's a sheet of blue paper. ",
  place: { in: "Start Room" },
});
ObjectDescriptionWidget.createAsset({
  class: "Chalk",
  name: "stick of pink chalk",
  synonyms: "pink chalk",
  adjectives: "pink",
  place: { in: "Start Room" },
  descriptions: { look: "It's a stick of pink chalk. " },
}); //

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

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

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

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

Demo Source files

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

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: "ObjectDescription",
  id: "MyObjectDescriptionWidget",
  cssclasses: ["custom", "description"],
  region: "right",
});

Description Widget Properties

  • 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