The UI (main screen) - ThePix/QuestJS GitHub Wiki

You can customise the UI in two places. The first is the CSS file in your game folder (the name of which you set with settings.styleFile); that controls thee colours, the fonts and stuff like that, and is discussed here.

The second is the "settings.js" file, which controls whether the various elements are displayed and the actual text that will appear there (and other things unrelated to the interface). Other options in the "settings.js" file are discussed here.

For options for the side panes, see here.

Options

These are pretty self-explanatory.

settings.textInput = true       // user types commands
settings.cursor = ">"           // prompt for the commands
settings.cmdEcho = true         // input commands are repeated on screen
settings.typewriter = false     // if true there is a delay between each character when text is printed
settings.typewriterDelay = 25
settings.funcForDisambigMeny = 'showMenuWithNumbers'  // style for the disambiguation menu (a string)

This less so:

settings.roomTemplate = [
  "{hereDesc}",
  "{objectsHere:You can see {objects} here.}",
  "{exitsHere:You can go {exits}.}",
]

This defines what the user sees when the player enters a room (or types LOOK). Each entry in the array will be a paragraph of text, and they all use the text processor. The first line gives the description for the room (the text processor directive hereDesc should not be used in any other context). The second line is a list of objects here, the third line a list of possible exits (but the text processor directives mean that these are only used if there is something to list).

This alternative adds the room name as a heading, allows TERSE/BRIEF and VERBOSE to control the room description, and has no exit list.

settings.roomTemplate = [
  "#{cap:{hereName}}",
  "{terse:{hereDesc}}",
  "{objectsHere:You can see {objects} here.}",
]

You can do a lot with this. How about displaying the "todo" attribute of the location, to flag it still needs work, using the "todo" class, but not when in "play" mode:

settings.roomTemplate = [
  "#{cap:{hereName}}",
  "{terse:{hereDesc}}",
  "{objectsHere:She can see {objects} here.}",
  "{ifNot:settings:playMode:play:{ifExists:currentLocation:todo:{class:todo:{show:currentLocation:todo}}}}",
]

If you decide to turn off text input for your game, it can be useful to have it open during development so you can access debugging commands. Rather than leave it to later, you can have it conditionally depend on the play mode. When the play mode is "dev", settings.textInput will be true, otherwise it will be false.

settings.textInput = settings.playMode === 'dev'