Pre-release
AdventureJS Docs Downloads Bundler Devlog Score: 0 Moves: 0
Tutorial explaining the layout styles of AdventureJS. tutorial, layout styles, regions

Display & Layouts:Layout Styles

AdventureJS uses a responsive CSS grid to create regions for header, footer, main content, left side and right side. These are intentionally similar to the basic HTML semantic elements of <header>, <footer>, <main>, and <aside>.

The main region, meaning the game output panel, always expands to fill the available space. If no widgets are present, the output panel fills the entire display. This is kind of an important point: if you don't add widgets, your layout won't show any widget regions. So if you don't want to use the other regions, you don't need to do anything about them. If you do want widgets, just start adding them to regions, and they'll automatically show up.

Once you add widgets, the main region will shrink to accommodate the other regions, according to the layout you've used. Regions can hold more than one widget, so you could for instance stack up three widgets inside the left or right side region, or split the top or bottom region into two widgets. AdventureJS includes a bunch of built-in layout options. You can tweak the widths and heights of grid regions in these layouts. You can also override the grid entirely to create your own layouts if you're comfortable working with CSS.

Classic

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "classic",
});

Image Top

AKA Scott Adams, Level 9

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "image-top",
});

Image Bottom

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "image-bottom",
});

Image Right

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "image-right",
});

Image Left

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "image-left",
});

Rows

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "rows",
});

Columns

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "columns",
});

Text Left

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "text-left",
});

Text Right

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "text-right",
});

Single Left

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "single-left",
});

Single Right

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "single-right",
});

Double Left

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "double-left",
});

Double Right

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "double-right",
});

Hangover Left

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "hangover-left",
});

Hangover Right

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "hangover-right",
});

Image and Columns

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "image-and-columns",
});

Image and Rows

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "image-and-rows",
});

Columns and Image

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "columns-and-image",
});

Rows and Image

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "rows-and-image",
});

Legend

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "legend",
});

MacVenture

Statusbar

Game Output 

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "macventure",
});