Display & Layouts:Room Image Widgets
Room image widgets can show an image for the current room.
// RoomImageWidget.js
/* global AdventureJS A RoomImageWidget G */
var RoomImageWidget = new AdventureJS.Game(
"RoomImageWidget",
"RoomImageWidgetContainer"
);
RoomImageWidget.settings.set({
display: "inline",
layout: "image-top",
title: "Room Image Widget",
author: "Ivan Cockrum",
description:
"Here is an example of a simple layout with a room image widget that always shows a picture of the current room. ",
version: "0.0.1",
});
RoomImageWidget.createImageLookup({
images: [
{
id: "startroom",
src: "images/startroom.png",
},
{
id: "northroom",
src: "images/northroom.png",
},
{
id: "southroom",
src: "images/southroom.png",
},
{
id: "eastroom",
src: "images/eastroom.png",
},
{
id: "westroom",
src: "images/westroom.png",
},
],
});
// Create the widget.
RoomImageWidget.createWidget({
class: "RoomImage",
id: "MyRoomImageWidget",
cssclasses: ["custom", "room"],
region: "header",
messages: {
randomize: true,
frequency: 0.33,
array: [
"{We} clicked the picture, but there's no need for that. It's just a visual reference. ",
"There's no need to click. Sorry, but this isn't a point & click game.",
"Move on, there's nothing to do in the picture. ",
"Whattaya think this is, a point & click game? ",
],
},
});
RoomImageWidget.createAsset({
class: "Player",
name: "Explorer",
place: { in: "Start Room" },
});
RoomImageWidget.createAsset({
class: "Room",
name: "Start Room",
image: "startroom",
description: `
This is the Start Room. If we had more to say about it, this
description would be longer.
`,
exits: {
east: "East Room",
west: "West Room",
north: "North Room",
south: "South Room",
},
});
RoomImageWidget.createAsset({
class: "Room",
name: "North Room",
image: "northroom",
description: `This is the North Room. We don't have much to say about it. `,
exits: {
south: "Start Room",
},
});
RoomImageWidget.createAsset({
class: "Room",
name: "South Room",
image: "southroom",
description: `This is the South Room. We don't have much to say here either.`,
exits: {
north: "Start Room",
},
});
RoomImageWidget.createAsset({
class: "Room",
name: "East Room",
image: "eastroom",
description: `This is the East Room. Brevity is the soul of wit. Or so we've been told. `,
exits: {
west: "Start Room",
},
});
RoomImageWidget.createAsset({
class: "Room",
name: "West Room",
image: "westroom",
description: `This is the West Room. The less said the better. `,
exits: {
east: "Start Room",
},
});
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: "RoomImage",
id: "MyImageWidget",
cssclasses: ["custom", "image"],
region: "header",
messages: {
randomize: true,
frequency: 0.33,
array: [
"{We} clicked the picture, but there's no need for that. It's just a visual reference. ",
"There's no need to click. Sorry, but this isn't a point & click game.",
"Move on, there's nothing to do in the picture. ",
"Whattaya think this is, a point & click game? ",
],
},
});
A room's photo is defined by setting the room.image property to an image reference that has been defined in an image lookup. [More info...]
Image Widget Properties
- messages {String|Array|Funtion} A message to print when a player clicks on the room image. This is subject to StringArrayFunction and can return a random response or a dynamic response.
- 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:
topleftrightbottom