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, the same in the Personal workspace:

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
Groups	the Groups page with your private groups; the arrow next to the row folds out the list of them, and the `+` beside it asks for a new group
Brands	the Brands page; under the row the list of your brands, the arrow folds it up, and the `+` asks for a new brand
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

In an organisation’s workspace the global menu is different: Games, Members and Roles, without Groups and Brands. See Organisations.

Under Groups, when folded out, every private group of yours is a row of its own. The list is closed by default, and the Builder remembers whether you left it open. The list under Brands is open by default and remembers its state the same way. If you have no brand yet, a New Brand row stands where the list would be.

You cannot put a game into a group from the sidebar: a group’s page has no game rows in it either. You do that 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 (`Details reach players at once, Rules when published`)	Overview, Details, Access (owner only), Rules, Parties (only for whoever has the `See past parties` right, see Parties)	on save, or on publish for the rules
Components (`Reach players when you make a version playable`)	Sets (with the game’s sets under them; the `+` beside the row asks for a new set, if you can edit the sets), Images, Versions	only in a version you make playable

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 at the top of the sidebar, beside the logo (Collapse the menu), collapses it. Collapsed, a narrow strip of icons remains: the labels go, you get the name by holding the mouse over an icon, and the button (Expand the menu) moves under the logo. 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, and it survives a reload, but only on the device and browser where you set it.

The top bar

From left to right:

the menu button (on a narrow screen only: it opens the drawer, see 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;
every yes/no question: deleting, publishing, deprecating, loading a version 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, the set editor’s right-hand panel and the magnetic dots editor all live on the page (the last one opens in the set editor’s place, as a page of its own), 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 comes in three languages: English, Hungarian and German (Deutsch). Every label is translated into German, in the informal du form, and the icon picker finds an icon by its German name. 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. A German browser still starts the Builder in English.
The help badge (?) opens the help in the interface language, in German on the Anleitung site.
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 title and description, the interface language decides which version is shown, and if that one is empty it falls back to the game’s default language.