Display & Layouts:Multi Widget Example 2
Widgets can be stacked in rows or columns. This example shows a compass widget with a room description widget and an inventory widget.
Demo Game
// MultiWidgets01.js
/* global AdventureJS A MultiWidgets01 G */
var G = (MultiWidgets02 = new AdventureJS.Game(
"MultiWidgets02",
"MultiWidgets02Container"
));
// --------------------------------------------------
// Settings
// --------------------------------------------------
G.settings.set({
display: "inline",
title: "Multi Widgets 02",
author: "Ivan Cockrum",
description: "Here is an example of a layout with multiple widgets. ",
version: "0.0.1",
});
// --------------------------------------------------
// Widgets
// --------------------------------------------------
// Create the widget.
G.createWidget({
class: "Compass",
id: "MyCompassWidget",
cssclasses: ["custom", "compass"],
region: "left",
});
// Create the widget.
G.createWidget({
class: "RoomDescription",
id: "MyRoomDescriptionWidget",
cssclasses: ["custom", "room"],
region: "header",
print_name: false,
print_description: true,
print_room_exits: false,
print_room_contents: false,
});
// Create the widget.
G.createWidget({
class: "ObjectList",
id: "MyObjectListWidget",
title: "OBJECTS",
cssclasses: ["custom", "object"],
region: "right",
});
// Create the widget.
G.createWidget({
class: "InventoryList",
id: "MyInventoryListWidget",
title: "INVENTORY",
cssclasses: ["custom", "inventory"],
region: "left",
});
// --------------------------------------------------
// Player
// --------------------------------------------------
G.createAsset({
class: "Player",
name: "Explorer",
place: { in: "Start Room" },
});
// --------------------------------------------------
// Rooms
// --------------------------------------------------
G.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",
},
});
G.createAsset({
class: "Room",
name: "North Room",
description: `This is the North Room. `,
exits: {
south: "Start Room",
},
});
G.createAsset({
class: "Room",
name: "South Room",
description: `This is the South Room. `,
exits: {
north: "Start Room",
},
});
G.createAsset({
class: "Room",
name: "East Room",
description: `This is the East Room. `,
exits: {
west: "Start Room",
},
});
G.createAsset({
class: "Room",
name: "West Room",
description: `This is the West Room. `,
exits: {
east: "Start Room",
},
});
// --------------------------------------------------
// Objects
// --------------------------------------------------
G.createAsset({
class: "Pencil",
name: "indigo pencil",
article: "an",
adjectives: "indigo, colored",
place: { in: "Start Room" },
description: "It's an indigo colored pencil. ",
});
G.createAsset({
class: "Pencil",
name: "violet pencil",
article: "a",
adjectives: "violet, colored",
place: { in: "Start Room" },
description: "It's a violet colored pencil. ",
});
G.createAsset({
class: "Entity",
name: "paint brush",
article: "a",
// adjectives: "",
place: { in: "Explorer" },
description: "It's a number 12 paint brush. ",
});
G.createAsset({
class: "Pencil",
name: "yellow pencil",
article: "a",
adjectives: "yellow, colored",
place: { in: "Explorer" },
description: "It's a yellow colored pencil. ",
});
G.createAsset({
class: "Pencil",
name: "blue pencil",
article: "a",
adjectives: "blue, colored",
place: { in: "North Room" },
description: "It's a colored pencil, zinc blue. ",
});
G.createAsset({
class: "Crayon",
name: "pink crayon",
article: "a",
adjectives: "pink, colored",
place: { in: "North Room" },
description: "It's a pink crayon. ",
});
G.createAsset({
class: "Pencil",
name: "red pencil",
article: "a",
adjectives: "red, colored",
place: { in: "South Room" },
description: "It's a red colored pencil. ",
});
G.createAsset({
class: "Crayon",
name: "white crayon",
article: "a",
adjectives: "white, colored",
place: { in: "South Room" },
description: "It's a white crayon. ",
});
G.createAsset({
class: "Pencil",
name: "orange pencil",
// article: "a",
adjectives: "orange, colored",
place: { in: "East Room" },
description: "It's an orange colored pencil. ",
});
G.createAsset({
class: "Crayon",
name: "maroon crayon",
article: "a",
adjectives: "maroon, colored",
place: { in: "East Room" },
description: "It's a maroon crayon. ",
});
G.createAsset({
class: "Pencil",
name: "green pencil",
article: "a",
adjectives: "green, colored",
place: { in: "West Room" },
description: "It's a green colored pencil. ",
});
G.createAsset({
class: "Crayon",
name: "plum crayon",
article: "a",
adjectives: "plum, colored",
place: { in: "West Room" },
description: "It's a plum crayon. ",
});
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.js └── css | └── adventurejs.css └── games ├── demogame01 ├── demogame02 └── demogame03