The screen

This page is about how the Builder’s screen is divided: what sits where, what the sidebar shows, what goes into the top bar, and where the forms open. Whoever has read this knows where to look for the navigation, for the state of a save, and for the confirmations.

How the interface is divided

There are three parts, and all three stay where they are:

The sidebar, on the left: the navigation. The logo, the workspace switcher, the global menu items, the open game’s menu, and your account row right at the bottom.
A thin bar at the top: the breadcrumb, the state of the save, the language chooser and the Changes button.
The page’s content, in the middle: this is what changes depending on where you are.

The Builder was built for a desktop machine, but it is usable below 1024 pixels too: there the sidebar becomes a collapsed drawer and the page becomes a single column. In detail: On a narrow screen.

From top to bottom, always the same:

Part	What it does
Logo	takes you back to the Games page
Workspace switcher	the word `Workspace`, and under it the current one: `Personal` or the name of an organisation. This decides whose games stand on the Games page
Games	the Games page, the Builder’s starting point
Playtest groups	the list of groups and organisations, with each one listed underneath
Brands	your brands, with the `New Brand` row under them
The open game’s menu	only once you have opened a game, see below
Your account row	your picture, your name, your plan’s tag. Clicking it opens the account menu

Under Playtest groups every group and organisation of yours is a row of its own, with the New group row at the end. If you happen to be on a group’s page, the group’s games are listed underneath as well, and so are the games of yours that are not in it yet, as faint rows with a plus sign.

⚠ The faint row with the plus sign does not navigate, it adds straight away. One click puts the game in the group, with no question and no confirmation. You set the permissions afterwards, on the game’s Access page.

The open game’s menu

The moment you open a game, the game’s cover, its title, and under it the game’s pages in two groups appear beneath the global menu items. The names of the two groups say the most important rule by themselves:

Group	What is in it	When it reaches players
Game page (`Updates for players straight away`)	Overview, Details, Access (owner only), Rules	on save, or on publish for the rules
Components (`Reach players with a new release`)	Sets (with the game’s sets and the `New set` row under them), Images, Releases	only in a release

You can drop things onto the set rows: images, and items from another set. Each one becomes a new item in the target set, see Items.

The button on the left edge of the top bar collapses the sidebar. Collapsed, a narrow strip of icons remains: the labels go, and you get the name by holding the mouse over an icon. The page’s content is wider while it is like that.

The state stays until you switch it back. It does not reset by itself when you change page.

The top bar

From left to right:

the sidebar toggle (the menu button on a narrow screen);
the breadcrumb: the path to where you are, for example Games › Harbour Lights › Details. On a narrow screen only the last two levels show;
the state of the save (inside a game only), see Draft and versions;
the language chooser, the globe icon, see The interface language;
the Changes button (inside a game only): it shows what is still waiting to reach the players, see Draft and versions.

Forms and confirmations: a modal

Every short form and every confirmation opens in a pop-up window, a modal. The modal appears in the middle of the page, the interface behind it dims, and you cannot work on it while the modal is open.

There are three ways to close one: the Cancel button, the Escape key, or a click on the dark backdrop beside the modal. All three do the same thing: they throw away what you typed.

A modal opens for, among others:

the New game, New set, New group, New Brand and New Rule forms;
Edit set, renaming a rule, adding a domain;
the invite code panel;
the magnetic dots editor (the largest modal of all);
every yes/no question: deleting, publishing, deprecating, loading a release into the editor.

On the dangerous questions (deleting, overwriting) the confirming button is red, and the text spells out what disappears. Read it, do not go by where the button sits.

What is not a modal: the longer editing. The game’s details page, the rules editor, a brand’s page and the set editor’s right-hand panel all live on the page, and save themselves.

The set editor’s right-hand panel

On a set’s page a panel stands on the right, beside the gallery. It is the only panel of its kind in the Builder, and it is not a modal: it stays open while you select and edit in the gallery.

It has two views, and you switch between them at the top of the panel:

Properties: the details of the selected item or items, or the set’s defaults;
Images: the game’s images, which you drag from here onto items and frames.

The last button on the set’s toolbar shows and hides the panel. The detail is on the Items page.

On a narrow screen

The interface is designed down to 390 pixels, so it works on a phone, only differently:

Below 1024 pixels the sidebar disappears and comes out of a drawer, opened with the menu button on the left edge of the top bar. It closes itself once you navigate.
The modals appear as a sheet coming up from the bottom, not in the middle of the screen.
The set editor’s right-hand panel is not a column but a sliding page: selecting an item brings it in, the Back button takes it away.
Below 640 pixels the set’s gallery is two columns wide, Edit set is icon only, and the thumbnail size slider disappears.
The side by side view in the rules editor is not available below 1280 pixels.

The mouse-driven actions (rearranging by dragging, Ctrl and Shift selection, placing a magnetic dot) have no substitute on a touch screen, so serious work still needs a desktop machine. See Tips.

The interface language

The Builder’s interface is bilingual throughout: English and Hungarian. You choose by clicking the globe icon in the top bar; on a narrow screen the same menu is a Language row in the drawer.

What to know about it:

Switching reloads the page. It is not a repaint, it is a real reload.
The choice stays in your browser, not in your account. On another machine, in another browser or in a private window it starts from scratch.
It starts in English by default, until you switch it over once.
It is not the language of the game’s data. The bilingual title, description and rules are independent of it, see The game’s details.

Your own data does not translate when you switch: the names of your games, sets, rules and groups are what you wrote. On the bilingual fields, the interface language decides which version is shown, and if that one is empty it falls back to the other.