List Quadrant

## Basic Overview

The List Quadrant (also known as Perchance Code Panel/Editor) is where you code your lists and Perchance "code". It is one of the "quardrants" of the Editor. This is where you would spend most of your time tinkering about the logic, odds, and items that your generator will be displaying. Most of it are text (since the main goal of Perchance was "Random Text Generation") but several plugins allow you to use URLs and other JavaScript Libraries to modify your generator.

## Parts

The List Quadrant only has one part, but there is two useful toggles for when you are working with the List Quadrant. They are seen on the top right of the quadrant. These are the `fold` and `wrap` toggles.

### Fold Toggle

The `fold` toggle will collapse all the "lists" that you have in your generator. This is very helpful for generators with hundreds or thousands of lines for each list. Upon toggling this, all of your lists will collapse, and you can see the names of the "root" lists.

### Wrap Toggle

The `wrap` toggle on the other hand will prevent the overflow of text from the List Quadrant. This is helpful when you have very long text in one line, and you need to scroll every time to edit an item in that one line. Upon toggling this, all of the long single lines will wrap into a multi-line single line.

## Types of "Lists"

There are several kinds or formats of lists found in Perchance which include the following but not limited to.

* Normal
* Hierarchical
* Functions
* Properties
* Shorthand
* Objects

### Normal Lists

A Normal List is a list in which the items in the list are texts. These are the most commonly used list types in Perchance. Each item is not limited to only text, it can be a HTML formatted (with/without CSS), Numbers, or even texts that also reference other lists.

```
list
    a
    b
    c
    d
    ...
    N

```

#### List of Lists

A List of List is a list in which the items in the list are other lists.

```
list1
    aa
    ab
    ac
    ...
list2
    ba
    bb
    bc
    ...
list3
    ca
    cb
    cc
    ...

...

listN

listOfList
    [list1]
    [list2]
    [list3]
    ...
    [listN]

```

### Hierarchical Lists

A Hierarchical List is a type of Normal List with **nested** Normal Lists as its items, making a Hierarchy (or Tree).

```
list
    a
        aa
            aaa
            aab
            ...
            aaN
        ab
        ...
        aN
    b
        ba
        bb
        ...
        bN
    c
        ...
    ...
    N

```

### Functions Lists

A Functions List is a type of list that instead of items, or texts, it has functions that can be used in your generators.

```
list
    function1() => ...;
    function2() => ...;
    function3() => ...;
    function4() => ...;
    function5() => ...;
    ...
    functionN() => ...;

```

### Properties Lists

A Properties Lists is a type of list similar to Function Lists but instead of functions it consists of Properties (or Variables) that can be used in your generators.

```
list
    property1 = value
    property2 = value
    property3 = value
    property4 = value
    property5 = value
    ...
    propertyN = value

```

### Shorthand Lists

A Shorthand List is a type of list that is enclosed in curly brackets `{}` and are usually created for quick and short lists.  See more Shorthand Lists.

```
list
    {1-100} // Random number from 1 to 100
    {with text|} // Blank is without text
    {[list2]|[list3]} // Choosing between [list2] and [list3]

```

### Objects Lists

An Objects List is a type of list that **mixes** the previous lists to make a "Structure" or "Object" that is used by the generator.

```
animal
    cat
    rat
    dog
    bat
    pig

list
    name = {import:common-name}
    items
        item1
        item2
            sub-item1
            sub-item2
        item3
    class
        rogue
        warrior
        mage
        healer
    gold = {20-100} gp
    pet = [animal]
    character = [this.name] is a [this.class] that has a [this.items.selectOne], a pet [this.pet], and [this.gold]
    getCharacter() => return this.character;

```

## Notes

There are several shortcuts to speed up the editing in the List Quadrant, they are shown here.

Here are the "quadrants" of the Editor Page: **List Quadrant**, Tester Quadrant, HTML Quadrant, and Preview Quadrant.

Learn more stuff