Display & Layouts:Message Widgets

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

var MessageWidget = new AdventureJS.Game(
  "MessageWidget",
  "MessageWidgetContainer"
);

MessageWidget.settings.set({
  display: "inline",
  // layout: "classic",
  title: "Message Widget",
  author: "Ivan Cockrum",
  description: "Today we are working with message widgets",
  version: "0.0.1",
});

// Create the widget.
// Unlike most widget types, message widgets don't update
// automatically. It's up to the author to send messages
// to them and clear them when necessary. So, we need to
// keep a reference to them, which is our <code>var messages</code>.
var messages = MessageWidget.createWidget({
  class: "Message",
  id: "MyMessageWidget",
  cssclasses: [],
  region: "header",
});
// Now we can print to the message widget like this:
messages.print(`
  Welcome to the Message Widget demo. This demo shows 
  how to set up a message widget and print to it.
`);
// We can clear it like this:
// messages.clear();
// We can have multiple message widgets and print different
// messages to them.
// We can use our <code>messages</code> var from any code block
// which means we can print to it from any function.

// --------------------------------------------------
// Player
// --------------------------------------------------

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

// --------------------------------------------------
// Rooms
// --------------------------------------------------

MessageWidget.createAsset({
  class: "Room",
  name: "Start Room",
  description: `
    Welcome to the Message Widget demo. This demo shows 
    how to set up a message widget and print to it. 
    You're in the Start Room now!
  `,
  exits: {
    east: "East Room",
    west: "West Room",
    north: "North Room",
    south: "South Room",
  },
  doPlayerEnter: function () {
    let msg =
      "Welcome to the Start Room of the Message Widget demo. This demo shows how to set up a message widget and print to it. ";
    messages.print(msg);
  },
});

MessageWidget.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",
  },
  doPlayerEnter: function () {
    let msg =
      "Welcome to the North Room! We printed this message to this widget. ";
    messages.print(msg);
  },
});

MessageWidget.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",
  },
  doPlayerEnter: function () {
    let msg =
      "Hey, now you're in the South Room! We're printing these messages to this widget as you travel. ";
    messages.print(msg);
  },
});

MessageWidget.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",
  },
  doPlayerEnter: function () {
    let msg = "You've moved to the East Room, so we're printing a message! ";
    messages.print(msg);
  },
});

MessageWidget.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",
  },
  doPlayerEnter: function () {
    let msg =
      "Oh ho, now you've moved to the West Room! We're printing these messages to this widget as you travel. ";
    messages.print(msg);
  },
});

// --------------------------------------------------
// Update messages per turn
// --------------------------------------------------

// We're setting a game variable to keep track of turns.
MessageWidget.setVar("turns", 0);

// This interval calls a function after every turn.
MessageWidget.startInterval({
  id: "MessageWidget",
  callback: "update",
});

// This function does whatever we tell it.
// In this case we're leaving it blank,
// but it could print a new message every turn.
MessageWidget.update = function () {
  MessageWidget.incVar("turns");
  let turns = MessageWidget.getVar("turns");
  // do something...
};