Display & Layouts:Verb List Widgets w/ Images

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

var VerbListWidgetImages = new AdventureJS.Game(
  "VerbListWidgetImages",
  "VerbListWidgetImagesContainer"
);

VerbListWidgetImages.settings.set({
  display: "inline",
  title: "Verb List Widget w/ Images",
  author: "Ivan Cockrum",
  description:
    "Here is an example of a simple layout with a fixed verb list widget that shows images. ",
  version: "0.0.1",
});

// Important Note
// These image URLs are relative to the root of the AdventureJS website.
// If you've downloaded this example code to modify for your own project,
// mind that you'll need to use urls relative to the folder your game
// code is in, for example: src: "images/icon_look.png",
VerbListWidgetImages.createImageLookup({
  images: [
    {
      id: "look",
      src: "images/icon_look.png",
    },
    {
      id: "listen",
      src: "images/icon_listen.png",
    },
    {
      id: "smell",
      src: "images/icon_smell.png",
    },
    {
      id: "save",
      src: "images/icon_save.png",
    },
    {
      id: "restore",
      src: "images/icon_restore.png",
    },
  ],
});

// Create the widget.
VerbListWidgetImages.createWidget({
  class: "VerbList",
  id: "MyVerbListWidget",
  title: "VERBS",
  cssclasses: ["my-custom-class", "my-verb-class"],
  region: "footer",
  verbs: [
    "look",
    "listen",
    "smell",
    { verb: "save", parse: true, cssclasses: ["admin"] },
    { verb: "restore", parse: true, cssclasses: ["admin"] },
  ],
  print_images: true,
  // hide_labels: true,
});

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

VerbListWidgetImages.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",
  },
});
VerbListWidgetImages.createAsset({
  class: "Pencil",
  name: "yellow pencil",
  article: "a",
  adjectives: "yellow, colored",
  place: { in: "Start Room" },
  description: "It's a yellow colored pencil. ",
});

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

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

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

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