Display & Layouts:Room Exits Widgets w/ List

Room Exit Widgets can display a list of the current room's exits as clickable buttons.

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

var RoomExitsWidgetList = new AdventureJS.Game(
  "RoomExitsWidgetList",
  "RoomExitsWidgetListContainer"
);

RoomExitsWidgetList.settings.set({
  display: "inline",
  title: "Room Exits Widget List",
  author: "Ivan Cockrum",
  description:
    "Here is an example of a simple layout with an exits widget that displays the current room's exits as a list. ",
  version: "0.0.1",
});

// Create the widget.
RoomExitsWidgetList.createWidget({
  class: "RoomExits",
  id: "MyRoomExitsWidgetList",
  title: "EXITS",
  cssclasses: ["custom", "exits"],
  region: "right",
  format: "list",
  foo: "bar",
});

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

RoomExitsWidgetList.createAsset({
  class: "Room",
  name: "Start Room",
  description: `
    This is the Start Room. (If we had more to say about it, this
    description would be longer.) You can go north, south, east, or west from here. 
  `,
  exits: {
    east: "East Room",
    west: "West Room",
    north: "North Room",
    south: "South Room",
  },
});

RoomExitsWidgetList.createAsset({
  class: "Room",
  name: "North Room",
  description: `This is the North Room. (If we had more to say about it, this
    description would be longer.) You can go south to the Start Room from here. `,
  exits: {
    south: "Start Room",
  },
});

RoomExitsWidgetList.createAsset({
  class: "Room",
  name: "South Room",
  description: `This is the South Room. (If we had more to say about it, this
    description would be longer.) You can go north to the Start Room from here. `,
  exits: {
    north: "Start Room",
  },
});

RoomExitsWidgetList.createAsset({
  class: "Room",
  name: "East Room",
  description: `This is the East Room. (If we had more to say about it, this
    description would be longer.) You can go west to the Start Room from here. `,
  exits: {
    west: "Start Room",
  },
});

RoomExitsWidgetList.createAsset({
  class: "Room",
  name: "West Room",
  description: `This is the West Room. (If we had more to say about it, this
    description would be longer.) You can go east to the Start Room from here. `,
  exits: {
    east: "Start Room",
  },
});

Demo Source files

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

RoomExitsWidgetList.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: "RoomExits",
  id: "MyRoomExitsWidgetList",
  cssclasses: ["custom", "exit"],
  region: "right",
  format: "list",
});

Room Exit Widgets can display a list of the current room's exits. By default, this will print a sentence, the same as appears in the room's description. It can also be set to show a list of buttons.

Exit Widget Properties

format {String} Optional property. By default, Room Exit Widgets print exits in a sentence. Setting format: list will print a list of buttons.
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