Using Images:Widget Images

Images can be appear in widgets in several ways: they can represent assets in Object Lists and Inventory Lists; they can represent verbs in Verb Lists; they can show images in Room Image widgets. This demo shows all of the above in one game.

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

var WidgetImages = new AdventureJS.Game(
  "WidgetImages",
  "WidgetImagesContainer"
);

WidgetImages.settings.set({
  display: "inline",
  layout: "rows",
  title: "Widget Images",
  author: "Ivan Cockrum",
  description: "Here is an example of using images in widgets. ",
  version: "0.0.1",
});

WidgetImages.createImageLookup({
  images: [
    { id: "bakery", src: "images/bakery.jpg" },
    { id: "storeroom", src: "images/storeroom.jpg" },
    {
      id: "chocolate",
      src: "images/chocolate-cake.png",
    },
    {
      id: "cinnamon",
      src: "images/cinnamon-roll.png",
    },
    { id: "cookie", src: "images/cookie.png" },
    { id: "croissant", src: "images/croissant.png" },
    { id: "cupcake", src: "images/cupcake.png" },
    { id: "doughnut", src: "images/doughnut.png" },
    { id: "pretzel", src: "images/pretzel.png" },
    { id: "tiramisu", src: "images/tiramisu.png" },
    { id: "cat", src: "images/cat.png" },
    {
      id: "knapsack",
      src: "images/icon_knapsack.png",
    },
    {
      id: "lantern",
      src: "images/icon_brass-lantern.png",
    },
    {
      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",
    },
  ],
});

WidgetImages.createAsset({
  class: "Player",
  name: "Explorer",
  place: { in: "Bakery" },
});

// --------------------------------------------------
// Create the room image widget.
// --------------------------------------------------
WidgetImages.createWidget({
  class: "RoomImage",
  id: "MyRoomImageWidget",
  cssclasses: [],
  region: "header",
});

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

// --------------------------------------------------
// Create the object list widget.
// --------------------------------------------------
WidgetImages.createWidget({
  class: "ObjectList",
  id: "MyObjectListWidgetImages",
  title: "OBJECTS",
  cssclasses: ["custom", "object"],
  verb: "examine",
  region: "left",
  print_images: true,
  hide_labels: true,
});

// --------------------------------------------------
// Create the inventory list widget.
// --------------------------------------------------
WidgetImages.createWidget({
  class: "InventoryList",
  id: "MyInventoryListWidgetImages",
  title: "INVENTORY",
  cssclasses: ["custom", "inventory"],
  region: "right",
  verb: "examine",
  print_images: true,
  hide_labels: true,
});

// --------------------------------------------------
// Create the rooms.
// --------------------------------------------------
WidgetImages.createAsset({
  class: "Room",
  name: "Bakery",
  image: "bakery",
  description: `
    Welcome to the Bakery. All images have been loaded into an image lookup. 
  `,
  exits: {
    north: "Storeroom",
  },
});

WidgetImages.createAsset({
  class: "Room",
  name: "Storeroom",
  image: "storeroom",
  description: `It's a cramped storeroom full of flours. `,
  exits: {
    south: "Bakery",
  },
});

// --------------------------------------------------
// Create the objects.
// --------------------------------------------------
WidgetImages.createAsset({
  class: "Edible",
  name: "chocolate cake",
  image: "chocolate",
  place: { in: "Bakery" },
  description: `{ [image] chocolate }<br/>Mmm, yummy chocolate cake. `,
});

WidgetImages.createAsset({
  class: "Edible",
  name: "cinnamon roll",
  image: "cinnamon",
  place: { in: "Bakery" },
  description: `{ [image] cinnamon }<br/>You got to roll with it, baby. `,
});

WidgetImages.createAsset({
  class: "Edible",
  name: "chocolate chip cookie",
  image: "cookie",
  place: { in: "Bakery" },
  description: `{ [image] cookie }<br/>That's how it crumbles. `,
});

WidgetImages.createAsset({
  class: "Edible",
  name: "croissant",
  image: "croissant",
  place: { in: "Bakery" },
  description: `{ [image] croissant }<br/>Crisp and flakey. `,
});

WidgetImages.createAsset({
  class: "Edible",
  name: "cupcake",
  image: "cupcake",
  place: { in: "Bakery" },
  description: `{ [image] cupcake }<br/>It's mah berfday! It's mah berfday! `,
});

WidgetImages.createAsset({
  class: "Edible",
  name: "doughnut",
  image: "doughnut",
  place: { in: "Bakery" },
  description: `{ [image] doughnut }<br/>Yay, sprinkles! `,
});

WidgetImages.createAsset({
  class: "Edible",
  name: "pretzel",
  image: "pretzel",
  place: { in: "Bakery" },
  description: `{ [image] pretzel }<br/>It looks soft and chewy. `,
});

WidgetImages.createAsset({
  class: "Edible",
  name: "tiramisu",
  image: "tiramisu",
  place: { in: "Bakery" },
  description: `{ [image] tiramisu }<br/>It looks ultra creamy. `,
});

WidgetImages.createAsset({
  class: "NPC",
  name: "bakery cat",
  image: "cat",
  pronouns: "nonhuman",
  gender: "male",
  place: { in: "Storeroom" },
  description: `{ [image] cat }<br/>Kitty! `,
});

WidgetImages.createAsset({
  class: "Knapsack",
  name: "knapsack",
  image: "knapsack",
  place: { in: "Explorer" },
  description:
    "It's {our} trusty old canvas knapsack, worn to the shape of {our} back. It's been on many adventures with {us}. ",
  adjectives: ["worn"],
  is: { worn: true, known: true, seen: true },
});

WidgetImages.createAsset({
  class: "Lantern",
  name: "brass lantern",
  image: "lantern",
  place: { in: "Explorer" },
  is: { known: true, seen: true },
  description:
    "It's {our} trusty old brass lantern. An honest to goodness antique! {We} never leave home without it. ",
  adjectives: [],
});

Demo Source files

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

WidgetImages.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

To place images inline in widgets, you can create an image lookup and then assign the image IDs to assets via their asset.image property. In this example we're defining an image for candle and then assigning it to our occult candle asset.

MyGame.createImageLookup({
  images: [
    { id: "candle", src: "images/candle.jpg" },
    { id: "brasskey", src: "images/brass-key.png" },
  ],
});

MyGame.createAsset({
  class: "Candle",
  name: "occult candle",
  // On this line we're assigning an image ID 
  // to this asset for use in widget lists.
  image: "candle",
});

Then, when defining a widget, set print_images: true, and optionally set hide_labels: true.

MyGame.createWidget({
  class: "ObjectList",
  id: "MyObjectList",
  cssclasses: [],
  verb: "examine", /* sets a default action on click */
  region: "left",
  print_images: true,
  hide_labels: true,
});

You can find more examples per widget type on these pages: