Display & Layouts:Verb List Widgets
Verb List Widgets can show any list of verbs set by the author.
// VerbListWidget.js
/* global AdventureJS A Game */
var VerbListWidget = new AdventureJS.Game(
"VerbListWidget",
"VerbListWidgetContainer"
);
VerbListWidget.settings.set({
display: "inline",
title: "Verb Widget List",
author: "Ivan Cockrum",
description:
"Here is an example of a simple layout with a fixed verb list widget that always shows a list of verbs. ",
version: "0.0.1",
});
// Create the widget.
VerbListWidget.createWidget({
class: "VerbList",
id: "MyVerbListWidget",
title: "VERBS",
cssclasses: ["custom", "verb"],
region: "footer",
verbs: [
"attach",
"attack",
"close",
"drop",
"examine",
"feel",
"go",
"hit",
"kill",
"listen",
"lock",
"look",
"open",
"put",
"remove",
"take",
"throw",
"unlock",
"use",
],
});
VerbListWidget.createAsset({
class: "Player",
name: "Explorer",
place: { in: "Start Room" },
});
VerbListWidget.createAsset({
class: "Pencil",
name: "indigo pencil",
a: "an",
adjectives: "indigo, colored",
place: { in: "Start Room" },
description: "It's an indigo colored pencil. ",
});
VerbListWidget.createAsset({
class: "Pencil",
name: "violet pencil",
article: "a",
adjectives: "violet, colored",
place: { in: "Start Room" },
description: "It's a violet colored pencil. ",
});
VerbListWidget.createAsset({
class: "Entity",
name: "paint brush",
article: "a",
// adjectives: "",
place: { in: "Start Room" },
description: "It's a number 12 paint brush. ",
});
VerbListWidget.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",
},
});
VerbListWidget.createAsset({
class: "Pencil",
name: "yellow pencil",
article: "a",
adjectives: "yellow, colored",
place: { in: "Start Room" },
description: "It's a yellow colored pencil. ",
});
VerbListWidget.createAsset({
class: "Room",
name: "North Room",
description: `This is the North Room. `,
exits: {
south: "Start Room",
},
});
VerbListWidget.createAsset({
class: "Pencil",
name: "blue pencil",
article: "a",
adjectives: "blue, colored",
place: { in: "North Room" },
description: "It's a colored pencil, zinc blue. ",
});
VerbListWidget.createAsset({
class: "Crayon",
name: "pink crayon",
article: "a",
adjectives: "pink, colored",
place: { in: "North Room" },
description: "It's a pink crayon. ",
});
VerbListWidget.createAsset({
class: "Room",
name: "South Room",
description: `This is the South Room. `,
exits: {
north: "Start Room",
},
});
VerbListWidget.createAsset({
class: "Pencil",
name: "red pencil",
article: "a",
adjectives: "red, colored",
place: { in: "South Room" },
description: "It's a red colored pencil. ",
});
VerbListWidget.createAsset({
class: "Crayon",
name: "white crayon",
article: "a",
adjectives: "white, colored",
place: { in: "South Room" },
description: "It's a white crayon. ",
});
VerbListWidget.createAsset({
class: "Room",
name: "East Room",
description: `This is the East Room. `,
exits: {
west: "Start Room",
},
});
VerbListWidget.createAsset({
class: "Pencil",
name: "orange pencil",
// article: "a",
adjectives: "orange, colored",
place: { in: "East Room" },
description: "It's an orange colored pencil. ",
});
VerbListWidget.createAsset({
class: "Crayon",
name: "maroon crayon",
article: "a",
adjectives: "maroon, colored",
place: { in: "East Room" },
description: "It's a maroon crayon. ",
});
VerbListWidget.createAsset({
class: "Room",
name: "West Room",
description: `This is the West Room. `,
exits: {
east: "Start Room",
},
});
VerbListWidget.createAsset({
class: "Pencil",
name: "green pencil",
article: "a",
adjectives: "green, colored",
place: { in: "West Room" },
description: "It's a green colored pencil. ",
});
VerbListWidget.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.
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: "VerbList",
id: "MyVerbListWidget",
cssclasses: ["custom", "verb"],
region: "left",
verbs: [
"look",
"listen",
"smell",
{ verb: "save", parse: true, cssclasses: ["admin"] },
{ verb: "restore", parse: true, cssclasses: ["admin"] },
],
});
Verb Images
Verbs in verb list widgets can display images instead of text, so that you can, for instance, show a panel with graphical verb buttons, as seen in Sam & Max Hit the Road.
To display images for verbs, first, create an image lookup.
[More info...]
Then add the verbs to the lookup.
[More info...]
Verb List Widget Properties
-
verbs
{Array}
An array of verbs to present in the widget. Different verb widgets can
have different verbs, so you might have separate verb widgets for
inventory verbs (get, take, put) vs administrative verbs (save, restore).
Verbs can be strings or objects. Use an object to apply more granular
control per verb. Verb objects have these additional properties.
- verb {String} The name of this verb.
- parse {Boolean} If parse is set true, clicking this verb will send the verb action directly to the parser rather than copying to the input field.
- cssclasses {Array} Each verb can have unique CSS classes. This allows authors to apply custom CSS effects per verb button
- 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 verb list in. Valid options are:
topleftrightbottom