recursal/Fanatic-Fandom huggingface dataset:
Vionet's Gen Hub

## Introduction

This is Vionet20's Generator Hub. Link to Hub.

* Character Generator
	+ Generate a Quest RPG Character based on the options from the book. (Names are from other Perchance generators).
* Scene/World Profile Generator
	+ Generate a Quest RPG World Profile/Scene based on the options from the book. (Other plot hooks are from other Perchance generators).
* Character Description with AI Generated Picture
	+ Using the Text-to-Image plugin, we try to use the generated features from the character generator to generate a portrait of the character.

### Outpost 5 Generators

These are generators for the free Lightweight Sci-Fi RPG, Outpost 5.

* Character Generator
	+ Generate a Outpost 5 Character based on the rules and options from the book. (Names are from other Perchance Generators).
* Mission Generator
	+ Generate a Outpost 5 Mission based on the tables from the book.
* Mission Map Generator
	+ Generates a Outpost 5 Mission Map based on the rules and options from the book. (Used VisJS as the network graph).
* Sector Map Generator
	+ Generates a Outpost 5 Sector Map based on the rules and options from the book. (Used P5JS as the image generator).

## Notes

* There are also random generators there.
* There are also plugins that I made.
* Reach out to me at /u/VioneT20

To see other Gen Hubs, see Generator Hubs.
Comments Plugin Slash commands

## Overview

You can now make slash commands for the comments plugin!

These are stored in a new parameter in **commentOptions** called **slashCommands** and follow this syntax:

```
commentOptions

```

```
  slashCommands

```

```
    <command>

```

```
      output = <command output>

```

to access the input after the command use **[this.input]**.

## Commands

These are some commands that work. if you make some feel free to add them.

1. Emoji. when the user types '/emoji' it'll output a random emoji
`emoji
 output = {import:emoji}`
2. Add Emoji. when the user types '/addemoji blahblah' it'll output 'blahblah <emoji>'
`addemoji
 output = [this.input] {import:emoji}`
3. allcaps. Capitalizes the input.
`allcaps
 output = [this.input.upperCase]`
4. Mock. iT dOeS tHiS To tExT
`mock
 output = [Array.from(this.input).map((char, i) => i % 2 == 0 ? char.toLowerCase() : char.toUpperCase()).join()]`
5. Format. in the message '/format \*\*hello\*\* how are \*you\*' the word 'hello' will be bold, and the word 'you' will be italic. This Command requires some extra code to place in the root of your generator.
`format
 output = [formatText(this.input)]`Put This in Root:
`formatText(text) =>
 text = text.replace(/\*\*(.*?)\*\*/g, (match, p1) => p1.split("").map(char => boldChars[normalChars.indexOf(char)] || char).join(""));
 text = text.replace(/\*(.*?)\*/g, (match, p1) => p1.split("").map(char => italicChars[normalChars.indexOf(char)] || char).join(""));
 return text;`
6. Duck. Makes a duck.
`duck
 output
 ➖➖🟨🟨
 ➖➖🟨🔳🟧
 🟨🟨🟨🟨
 🟨🟨🟨🟨
 ➖🟧🟧
 $output = ["\n"+this.joinItems("\n")]`
Perchance-logo-plugin

Link to Pluginhttps://perchance.org/perchance-logo-plugin
This plugin automatically shows a perchance logo image. Just write this in your Perchance code panel: `plogo = {import:perchance-logo-plugin}` and then write this in your HTML (bottom-right) panel: `[plogo()]` and it'll output a logo. You can change the size of the flag like this: `[plogo(2)]` Just change the `2` to the size you want. (decimal numbers work too!). It is based off the pride-plugin.
Adolfine girls

prompt:

She, Adolf Hitler is a Northerner-looking blue-eyed blonde girl atheist gymnast multiracial from Germany, Sweden and Lebanon slightly resembling James Hetfield small-nosed and with big harmonious lips of equal size the upper and lower lip; correct the face by applying the golden ratio; correct the eyes by applying trigonometry to correctly place the eye-pupils; make the irises perfectly circular and calculate rigorously the region the eyelids cover the irises in order they look correct; she mildly smiles; her ears are small and don't protrude; her hair is attractively wavy; make her nose slightly smaller and narrower; make her ears small; make her lips slightly bigger; her nose even smaller; her ears even smaller; She is totally naked Adolfite; small-nosed

antiprompt:

man, male, masculine, Christian, moustache

\_\_\_\_\_\_\_
Rpg-icon-plugin

Link to Pluginhttps://perchance.org/rpg-icon-plugin

## Basic Overview

This plugin allows the user to import RPG Themed Icons from RPG Awesome project.

### Importing

Put this in your Perchance code panel: `icon = {import:rpg-icon-plugin}`

## Example

### Usage

You can create any of ~500 RPG-themed icons by referencing its name:

`[icon("icon-name")] // Syntax`

`[icon("sword")]`

`[icon("burning-book")]`

`[icon("explosive-materials")]`

`[icon("knight-helmet")]`

`[icon("axe-swing")]`

`[icon("dragon-breath")]`

`[icon("hydra-shot")]`

### Size

Change the size of the icons:

`[icon("icon-name N")] // Syntax N = lg, 2x, 3x, 4x, 5x`

`[icon("sword lg")]`

`[icon("sword 2x")]`

`[icon("sword 3x")]`

`[icon("sword 5x")]`

### Styling

You can also add custom styling to the icon:

`[icon("dragon-breath lg", "color:red")]`

`[icon("water-drop", "color:#1b8ce8")] (use a hex color picker)`

`[icon("sword lg", "color:white; background:black; padding:2px")]`

## Notes

* All credit for this plugin goes to the RPG Awesome project.
* Check out this generator which simply generates a random rpg icon (using the full list of icon names).
A-an-plugin

Link to Pluginhttps://perchance.org/a-an-plugin

## Basic Overview

This plugin is an accompaniment with the tap-plugin.

## Importing and Usage

When using some plugins, like the tap-plugin, you can run into an annoying problem. Here's an example:

```
tap = {import:tap-plugin}

output
  That's {a} [tap(animal)]

animal
  antelope
  zebra
  ...

```

The tap button only randomizes the `[tap(animal)]` part when you click it, and leaves all the other parts the same. This is a problem because the {a} part doesn't get updated to match the new animal.

So, the initial sentence that was generated might have been "That's an antelope" and then you tap antelope, and it changes to "zebra" so now the sentence reads "That's an zebra" which is incorrect. The {a} part doesn't update because the whole purpose of the tap plugin is to only update the part that you tapped.

So, this plugin is a replacement for `{a}` which also works in situations like the one explained above. Here's how to use it:

```
an = {import:a-an-plugin}
tap = {import:tap-plugin}

output
  That's [an()] [tap(animal)].

```

You can use `[an().titleCase]` to get A/An and `[an().upperCase]` to get A/AN.

## Notes

* Here's an example of how to use this plugin.
Download-button-plugin

Link to Pluginhttps://perchance.org/download-button-plugin

## Basic Overview

This plugin allows easy setup of a download button for offline editing and use of your generator.

## Importing and Usage

### Importing

If you'd like to allow people to download your generator so they can use **and edit** it when they're offline, simply put this in your HTML panel:

`{import:download-button-plugin}`

Or in the Perchance List Panel: `downloadButton = {import:download-button-plugin}` and at the HTML panel: `[downloadButton()]`.

### Using the Downloaded Generator

Once you've downloaded a generator, you can **edit** it by doing the following (Here's a demonstration video):

1. Open the downloaded HTML file in your browser.
2. Add `#edit` to the end of the URL and Press Enter
3. Refresh the page.

So, if there's a "nuclear winter" scenario where perchance.org is offline, you'll still be able to use and edit your generators, and you can host them on a free service like Netlify, Cloudflare Pages, or sites like Squarespace/Wix.

### Styling the Button

If you'd like to customize the text or style of the button, put this in your HTML panel instead:

```
[downloadButton("My button text", "background:green; color:white; border:none;")]

```

The `background:green; color:white; ...` stuff is CSS.

## Notes

* You can download your generator by clicking the link in your settings menu. This plugin is just for if you want to make it super easy for other people to download your generator.
Perchance-callouts

## Basic Overview

This plugin makes HTML and CSS based callouts derived and inspired by the Obsidian Callouts. This uses the `<details>` and `<summary>` HTML tags for collapsibles, and an ordinary `<div>` for the non-collapsible.

## Importing and Usage

To use the callouts copy and paste the following in your Perchance Code Panel.

```
callout = {import:perchance-callouts}

exampleNote
  type = note
  header = This is an example callout
  data = This is the text inside the callout
  collapsible
    state = open

```

Then at the HTML Code Panel, paste the following.

```
[callout(exampleNote)]

```

## Notes

* All credits to the designer of callouts in Obsidian.
* Icons used are Bootstrap Icons, here is their website.
* This is made by **/u/Vionet20**
* Showcase of all types available at https://perchance.org/perchance-callouts
Importing Generators

In Perchance, you sometimes want pre-made lists of something, e.g. animals. You can import pre-made generators to do this and more.

To import a generator, just put `{import:animal}`, but replace `animal` with the generator you would like to import. A good place to find these generators is the useful generators list.

   Example UseYou want to do something like `animal = {import:animal}` on a new line. Then, on the output line, replace the text with "Lorem ipsum [animal]" Of course, you can put whatever you want before or after `[animal]`,
Checkout the Exporting Generators for how to export a generator.

Learn more stuff
Fullscreen-button-plugin

Link to Pluginhttps://perchance.org/fullscreen-button-plugin

## Basic Overview

This plugin lets you insert a button onto your generator's page that, when clicked, puts your generator's page in fullscreen mode.

## Importing and Usage

### Importing

Simply put this in your perchance code panel:

`fullscreenButton = {import:fullscreen-button-plugin}`

And then put this in your HTML panel (bottom-right):

`[fullscreenButton()]`

When the user is in fullscreen mode, the button text changes to "Exit fullscreen".

### Styling

If you'd like to customize the text, you can put this in your HTML panel instead:

```
[fullscreenButton("⛶ fullscreen", "exit fullscreen")]

```

You can change that text to whatever you like. You can also edit the styling of the button using a third and final input:

```
[fullscreenButton("⛶ fullscreen", "exit fullscreen", "background:red; color:white; border:none;")]

```

The `background:red; color:white; ...` stuff is CSS.

## Notes

* Check out this example which has multiple different styles that you can take a look at.
Perchance Hub

## About

The Perchance Hub is a community-run Hub for Perchance Users which allows the community to share, chat, enter a Jam, and generally connect to other Perchance Users. This community driven Perchance Content Hub inspired by this reddit post by Indigo.

## Tabs

### Home

* This is where Announcements and Prompts for discussion/contests will be displayed. Also, home for the Recent Mastodon Posts with #Perchance, and Recent Lemmy.world posts from the Perchance community.
HubTemplate

NOTEThis is a demo of the Template:HubTemplate. You can checkout the page to see the format. Use `{{subst:HubTemplate}}` to create the page at the Source Editor (Does not work at the Visual Editor) then save the page to apply the template. See this for how `{{subst:Template}}` works.

## Introduction

Explain your hub. What does it consist of? Future Updates? Main Interest/Theme.

## List of Generators

### Topic 1 or Generators in the same theme

explanation of theme

* generator-1
	+ Description
* generator-2
	+ Description

## Notes

* How to reach out
* ...
The createInstance Plugin

NoteThis section was written before the createInstance plugin page had a decent explanation on it. There's a good explanation over there now, so if you head over to the plugin page and read it first, it may be easier to understand, since it starts off with a more simple example.

## Introduction

This page talks about a simple example of the create-instance-plugin.

## Example

### The Blueprint

Let's create a simple `person` "list":

```
person
	height = {10-20}0
	eyeColor = {brown^3|blue|grey^0.2|green^0.3}
	sex = {male|female}
	pronoun
		she ^[this.getParent.sex == "female"]
		he ^[this.getParent.sex == "male"]

```

The above `person` "list" not really a list, because it doesn't have any items - it only has "properties", and a sub-list. So we can write `person.eyeColor` and we'll get a random eye color, or `person.height`, and we'll get a random person height.

> As a side node: Notice that we're using *dynamic* odds to determine the probability of each pronoun. If you haven't learned about dynamic odds notation yet, you can scroll up the Dynamic Odds section on this page to learn about it. The special `this` keyword always refers to the item's parent (see The 'this' Keyword to know about the `this`). So, in this case, `this` refers to the `pronoun` item. So, `this.getParent` refers to the parent of the `pronoun` item: `person`. If this all sounds too complicated, don't worry too much about that for now - you don't need to know this stuff to use the plugin. Just know that the odds of each item in the `person.pronoun` list depends on what `person.sex` evaluates to.
>
>

Okay, so what if we wanted to use this `person` "list" as a sort of "blueprint" to generate a random person that we could store in a variable and reference multiple times? So if we could create a particular random "instance" of this `person` blueprint, and store it in a variable `p`, then each time we evaluate `p.eyeColor` we should get the *same* eye color, and each time we evaluate `p.name` we should get the *same* name.

### Using `createInstance`

To do this, we need to use the `createInstance` plugin, and we'd use it like so:

```
createInstance = {import:create-instance-plugin}

person
	height = {10-20}0
	eyeColor = {brown^3|blue|grey^0.2|green^0.3}
	sex = {male|female}
	pronoun
		she ^[this.getParent.sex == "female"]
		he ^[this.getParent.sex == "male"]

output
	[p = createInstance(person), ""]If I recall correctly [p.pronoun] was about [p.height]cm tall. Yes, and [p.pronoun] definitely had [p.eyeColor] eyes.

```

You can create as many instances of the `person` blueprint as you want, and just store them in separate variables like so:

```
[p1 = createInstance(person), p2 = createInstance(person), ""]

```

Each instance will have its own set of randomly selected values. The `createInstance` plugin essentially runs `selectOne` on each of the properties of the list that you pass it, and then "fixes" those values in place. But note that it doesn't change the original list in any way - it creates a completely new one each time.

Check out this generator for another example of how to use the `createInstance` plugin.
Generator Hubs

Many Perchance users have a page with links to all of their generators. These are unofficially called generator hubs.

Here are some images of hubs:

Bluepower Generator HubEatham's Generator HubVionet20 Generator HubRaggedflight's Generator Hub
## Generator Hub Pages

This page shows all the Generator Hubs that exists in the Wiki: Gen Hub Category on the Wiki

Here are some of them: (you should add yours if you make a page)

* Eatham's Gen Hub
* Vionet's Gen Hub
* Ryebread's Page
* MoonwatcherLover’s homepage
* alliterator's page

## Generator Hub Collection

This is a collection of Generator Hubs.

Bluepower's Generator Hub Collection

Perchance Hub
Aryeh

Aryeh is the main protagonist of the story Ailuros 9 lives *the origins.*

Aryeh originally was named Itty Bitty by his Yi’at owner, Aryehis a black furred ailuros who was formally a pet of a Yi’at he has a maroon red belled silver collar that is hard to take off, Aryeh has round an bright yellow eyes that said to be like those of the sun. Aryeh is a round bodied ailuros with a dark pink nose and pink paw pads

## Early life

Ever since Aryeh himself could ever remember he was originally a yi'at's pet, and was called Itty Bitty since he is small and always was fed with plenty of food but ate so little of of it

he didnt knew how to hunt even if his instincts calling out to him are there in his blood

When Aryeh first seen the first ailuros who were killing a fire pig beast deep within Itty bitty he wanted to come but was extremely shy when he seen his own kind as he doesn't even know how to interact with his own kin and lived by himself for a few days.

Sometimes like a pet he can be a bit behind and little slow, when Dusken led Aryeh to joined the wild clan, his abilities as an ailuros became apparent Itty Bitty became a quick and agile ailuros with training with both Dusken and Cinder. Once he found a special strange pebble that was shiny and swirled different colors within it, the pebble is connected to the old ruins Cinder realizing this helped Aryeh by giving an old pouch found nearby an yi'at dump

the name Aryeh means lion in Hebrew
Random-image-plugin

Link to Pluginhttps://perchance.org/random-image-plugin

## Basic Overview

This plugin allows you to add a random image based on a keyword/topic that you provide. It uses Unsplash.com's API which is a bit "hit and miss", so it won't be perfect.

## Importing and Usage

### Importing

Just paste this in your Perchance code panel: `image = {import:random-image-plugin}`

Then write this in your HTML (bottom-right) panel: `[image("cat")]`

Note that sometimes it will output an irrelevant image because unfortunately some Unsplash users add irrelevant tags to their images.

### Resizing Image

You can resize/crop the output to a certain width and height like this: `[image("cat", 200, 100)]`

That outputs an image that's 200 pixels wide, and 100 pixels high.

By default the image is cropped to the height and width that you specify, but you can opt to "contain" the full image within the width and height you specify like this: `[image("cat", 600, 400, "contain")]`

### From List

You can input a list and it will randomly select an item from that list: `[image(myAnimalList)]`

## Notes

* Here's a simple example of a generator that uses this plugin.
* This plugin uses the Unsplash Source API.
* **Important note:** The Unsplash API may return the wrong images sometimes because on unsplash people tag their images with tags that sometimes don't match the exact topic. E.g. it may be a cat photo but their cat's name is "lizard", and so you get a cat photo displayed when you actually searched "lizard".
* The default dimensions are 600x400.
* `[image("cat")]` generates an actual image (i.e. the HTML `<img>` tag), but if you just want to generate the URL of the image, then you can instead write `[image("cat").src]`.
* Unsplash has hundreds of thousands of images, but there are still many topics that don't have any images, so if you request an image for "charmander" (for example), you'll get a "not found" placeholder image.
* Since all images are from Unsplash, they're completely free to use for any purpose (e.g. even if you are selling your generator, or something).
HTML Quadrant

## Basic Overview

The HTML Quadrant is where you put everything displayed in the Preview Quadrant. It is one of the four "quadrants" of the Editor. The HTML Quadrant, as the name suggests, uses the HTML Language to create the generator's webpage. Aside from HTML, CSS or Cascading Stylesheets, is used to stylize the HTML that can separate the look of your generator from others. If you have little knowledge with HTML, you can use Perchance's available templates to stylize your generator.

## Example

Consider the following Perchance code. It is a `list` with four items and an `output` taking an item from the `list` and enclosing it in a `<b>`.

```
// Perchance Code
list
    a
    b
    c
    d

output
    <b>[list]</b>

```

Then with the following HTML code, we can output the `output` from the Perchance code in a `<h1>` tag. Aside from the square `[]` brackets, we can also use the shorthand lists and import functions that uses curly `{}` brackets.

```
<!--Inside a Tag-->
<h1>[output]</h1>

<!--Equivalent-->
<h1><b>[list]</b></h1>

<!--Outside a Tag-->
[output]

<!--Equivalent-->
<b>[list]</b>

<!--Shorthand Lists-->
{10-100}

<!--Imports-->
{import:generator-name}

```

## Notes

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

Learn more stuff

1. ↑ HTML Reference (w3schools.com)
Baralho de Fris

O Baralho de Fris foi uma forma de prever o futuro dos envolvidos com Frida na batalha contra Cleber.

#### Como funciona ?

```
22 pessoas serão escolhidas, cada uma irá escolher* um dos arcanos maiores do Tarot.

```

```
dependendo de sua escolha seu destino estará selado.

```

#### As Cartas

* O Louco
* O Mago
* A Sacerdotisa
* A Imperatriz
* O Imperador
* O Papa
* Os Amantes
* O Carro
* A Força
* O Eremita
* A Roda da Fortuna
* A Justiça
* O Enforcado
* A Morte
* A Temperança
* O Diabo
* A Torre
* A Estrela
* A Lua
* O Sol
* O Julgamento
* O MUNDO
Quinton Skyfair

Quintonskyfair, often referred to as Quinton or Skyfair, portrays Lord Skyfair on the Kaspia SMP.

Quinton is an actor and stage combatant who brings his love of all things whimsical and fantastical to the screen through Twitch. When playing Minecraft, Quinton considers himself a builder and storyteller above all else.

## Platforms

* Twitter - quintonskyfair
* Twitch - quintonskyfair

## Trivia

* Quinton is involved with a podcast, Operation Aurora, along with a few other SMP members.
Ryebread's Page

## Introduction

Ryebread's Page is currently Ryebread's own generator hub, featuring generators they have made and generators they plan to make. It was made using the Timeline template. You can find it here.

## Features

The icons used indicate the progress of the generator.

* Tick
	+ The generator has been completed and no more updates are planned
* Blue circle
	+ The generator is mostly complete, with all necessary features working, but some minor updates may still occur
* Yellow clock
	+ The generator is not fully complete, and some necessary features do not work as intended. The url may or may not be public.
* Grey circle
	+ The generator hasn't been made yet.

## List of Generators

### Usable Generators

These are all the usable generators on the Hub.

* OTP Angst Generator
	+ Generate a angsty romance-leaning prompt between two people that can be used to write a story.
* NPC Makers
	+ Generate a description of a character from one of my stories. Generally intended to be used for me personally but other people can still benefit from this one.

### Unusable Generators

These are all the generators on the Hub that aren't usable

* OT3+ Angst Generator
	+ A planned variation of the OTP Angst Generator that could be used for more than two people and/or for more platonic purposes.
* Solarian/Lunarian simulator game
	+ An idea that I had based around my own original species that may or may not go ahead.

## Notes

* There's also the Crow, which is just there.
* There is an About Me section where I talk about myself for a moment.
* To reach out to me, you can use the comment section at the bottom of the hub.

To see other Gen Hubs, see Generator Hubs.
Title-case-plugin

Link to Pluginhttps://perchance.org/title-case-plugin

## Basic Overview

This plugin is a "smarter" version of the built-in `.titleCase` (example in Perchance Methods). For example, it doesn't capitalize "a", "an", "the" and other words as defined here.

## Example

You can use it like this:

```
titleCase = {import:title-case-plugin}

output
  INPUT: [t = titles.selectOne] <br> OUTPUT: [titleCase(t)]

titles
  this is an example          // → This Is an Example
  an example headline         // → An Example Headline
  this is the third example   // → This Is the Third Example
  the fourth and last example // → The Fourth and Last Example

```

## Notes

* This plugin is based on this GitHub repo.
* If there is demand for it, I can make it so there's the option for different capitalization styles when using this plugin.
Eatham's Gen Hub

## Introduction

This hub is for all the generators made by Ethan Grobin (Eatham).

## Notes

Link: https://perchance.org/eathams-generators

Templates: https://perchance.org/eathams-templates

Preprocessors: https://perchance.org/eathams-preprocessors

Plugins: https://perchance.org/eathams-plugins

Other Stuff: https://perchance.org/eathams-other

To see other Gen Hubs, see Generator Hubs.
Preview Quadrant

## Basic Overview

The Preview Quadrant is where all the items from the List Quadrant and the HTML Quadrant comes together. It is one of the "quadrants" of the Editor. The Preview Quadrant displays converts the HTML to be displayed in the webpage. It is the main look of the generator that you will be creating so make sure it can give an impression to your user.

While having your generator visually appealing, make sure that it is also functional; Checkout this website for tips in designing a website (in this case a Random Text Generator).

## Examples

The following examples are using the Minimal Template from Perchance.

### Simple Example

```
// Perchance Code @ Lists Quadrant
title
    Your Generator's Name

animal
    pig
    cow
    chicken
    zebra
    crayfish
    jellyfish^0.5
    worm^2

```

```
// HTML Code @ HTML Quadrant
<h1>[title]</h1>
<p style="margin:1em auto; padding:0 1em; max-width:700px;">[animal]</p>
<button onclick="update()">randomize</button>
<br>

```

### Stylized Output

```
// Perchance Code @ Lists Quadrant
title
    Your Generator's Name

animal
    pig
    cow
    chicken
    zebra
    crayfish
    jellyfish^0.5
    worm^2

```

```
// HTML Code @ HTML Quadrant
<h1>[title]</h1>
<p style="margin:1em auto; padding:0 1em; max-width:700px;">
    <span style="font-size: 24pt; font-variant: small-caps;font-weight: 800;">
        [animal.sentenceCase] {1-1000}
    </span>
</p>
<button onclick="update()">randomize</button>
<br>

```

### Multiple Outputs

```
// Perchance Code @ Lists Quadrant
title
    Your Generator's Name

verb = {import:verb}

animal
    pig
    cow
    chicken
    zebra
    crayfish
    jellyfish^0.5
    worm^2

adjective
    small
    big
    cute
    sneaky
    unusual
    helpful
    mean

```

```
// HTML Code @ HTML Quadrant
<h1>[title]</h1>
<div style="margin:1em auto; padding:0 1em; max-width:700px;">
    <div style="font-size: 24pt; font-variant: small-caps;font-weight: 800;">
        [x = animal.sentenceCase] {1-1000}
    </div>
    <div style="font-family: serif;
 font-size: 24pt;
 font-variant: small-caps;
 font-style: italic;">
        A [adjective] [x] [verb.presentTense] {import:noun}
    </div>
</div>
<button onclick="update()">randomize</button>
<br>

```

## Notes

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

Learn more stuff
The $output keyword

## Introduction

This page talks about how to use the `$output` keyword to manipulate the output of a list.

## Examples

### Normal Use

We can use the `$output` keyword to "export" a specific list within our generator:

```
$output = [material]

material
	wood
	metal
	plastic
	...

```

So now when people "import" your generator with `{import:your-generators-name}`, they'll get a random item from the `material` list.

### Using in a List

But we can also use the `$output` keyword *within lists* so the list "exports" something when we evaluate it. Here's a simple usage example:

```
person
	age = 68
	name = Anita
	$output = My name is [this.name] and I'm [this.age]

```

Now when you write `[person]` it'll output `My name is Anita and I'm 68`. Try it out. See how it works? We can use `$output` to *change* what a list outputs! Note that we can still write `[person.age]` and `[person.name]` to get "68" and "Anita", respectively.

If you think about it, when we use `$output` for exporting a certain list (so people can `import` it) we're doing the same thing, except we're changing what the *whole generator* outputs.

You might be thinking: "Is `$output` *really* necessary in the above example?" And you're right - we could have just wrote this:

```
person
	age = 68
	name = Anita
	description = My name is [this.name] and I'm [this.age]

```

And then used `[person.description]` instead. It's a bit longer than just writing `[person]`, but at least we don't need to use quirky and potentially confusing features. But `$output` actually turns out to be really helpful for some more advanced techniques. For example, we normally use the `<br>` tag to insert a new line in our text (to generate multi-line content), but that can get a little messy because you can end up with really long lines. Using `$output` we can automatically combine all the items in a list together, rather than selecting a random one. Here's an explanation of how that works.

As you start to learn these more advanced features, you'll do well to think of your generator as a **hierarchy**, rather than just a bunch of lists. Perchance allows you to go as many levels deep as you want, and you can alter the `$output`s at each level.
Dice-plugin

Link to Pluginhttps://perchance.org/dice-plugin
This is a plugin that gives the result of a random dice expression.

## Importing

Put this in your Perchance code panel: `dice = {import:dice-plugin}`

Name it whatever you want: `roll = {import:dice-plugin}`

## Usage

Syntax: `[dice(notation)]`

Example: `[dice("3d12")]` would roll 3 12-sided dice

Add and subtract: `[dice("3d12+4")]`  `[dice("2d6+1d8")]`  `[dice("4d6-3d4+2")]`

Multiply and combine with variables: `[dice("3d12") * dice("1d20") - 50 + characterAge]`

Roll a number of dice based on a variable: `[dice(numDice+"d6")]`

Roll a dice size based on a variable: `[dice("2d"+diceSize)]`

Dynamic number and size: `[dice(numDice+"d"+diceSize)]`
PluginPageTemplate

NOTEThis is a demo of the Template:PluginPageTemplate. You can checkout the page to see the format. Use `{{subst:PluginPageTemplate}}` to create the page at the Source Editor (Does not work at the Visual Editor) then save the page to apply the template. See this for how `{{subst:Template}}` works.
Link to Pluginhttps://perchance.org/
Abutment Light Transit

**Abutment Light Transit** is the Light Rail System on Abutment Island.

## Station List

Currently, Abutment Light Transit has one line with five stations as follows:

* Unnamed Line
	+ Mabel Club House Station
	+ Kasu-Abu. Joint Station
	+ East Mabel Terrace Station
	+ Abutment Transport Interchange Station
	+ Gila Gala (S) Station (Not yet Open)

## Citations and References

 Public Railways
 Cable Cars
Preprocessors

## Overview

Preprocessors allow you to change the perchance syntax. To use one, place this at the top of your code **$preprocess = {import:name-of-the-preprocessor}** but replace **name-of-the-preprocessor** with the name of the preprocessor.

Note: On the official preocessors page, the preprocessors link to admin copies of them so if the og breaks generators using it won't.

## List of preprocessors

### Shorthand Preprocessors

These preprocessors add certain shorthand syntax to perchance

eatham-shorthand-preprocessor: a type of shorthand syntax based off inferno-shorthand-preprocessor(made by **Geebs#0098** on Discord)

inferno-shorthand-preprocessor: a type of short-hand syntax (made by **Infernity#3671** on Discord)

### Other

eatham-emoji-preprocessor: swaps text for emoji equivalent (made by **Geebs#0098** on Discord)

inline-dent-preprocessor: allows you to use "inline" property syntax
Link-plugin

Link to Pluginhttps://perchance.org/link-plugin
This plugin lets you make links easily without knowing HTML.

To import it, put `link = {import:link-plugin}` on a new line anywhere in the editor, and you will be able to make links like this:

```
[link("https://perchance.org/tutorial/", "Tutorial")]

```

And that will make this: Tutorial

If you wanted to make it open in a new tab when clicked, then add a third parameter, called "newTab", like so:

```
[link("https://perchance.org/tutorial/", "Example Link", "newTab")]

```

The format for this plugin is:

```
[link(url, placeholder, tab)]

```

This plugin was made by Raggedflight.
Random-dice-icon-plugin

Link to Pluginhttps://perchance.org/random-dice-icon-plugin
This plugin is similar to dice-plugin but results in a randomized (and specified) dice icons.

## Importing

Put this in your Perchance code panel:

`diceIcon = {import:random-dice-icon-plugin}`

Name it whatever you want:

`rIcon = {import:random-dice-icon-plugin}`

`[rIcon.randomDice()]`

## Usage

### Random

Syntax: `[diceIcon.randomDice(notation="1d6", size="3", style="normal", css="")]`

Now you can use dice icon: `[diceIcon.randomDice("3d12")]`

Roll a number of dice based on a variable: `[diceIcon.randomDice(numDice+"d6")]`

Roll a dice size based on a variable: `[diceIcon.randomDice("2d"+diceSize)]`

Dynamic number and size: `[diceIcon.randomDice(numDice+"d"+diceSize)]`

d6 Styles: `[diceIcon.randomDice("2d6",1,"solid")] [diceIcon.randomDice("2d6",1,"dots")]`

### Specific Icon

Syntax: `[diceIcon.getDiceIcon(dice="d6", value="1", size="3", style="normal")]`

Get specific icon: `[rIcon.getDiceIcon("d20", 20)]` for d6, no need to set "d6Solid" but specify in the style i.e., `[rIcon.getDiceIcon("d6", 4, 3, "solid")]`

## **Notes**

* See this example for the demonstration of the plugin.
* Default Values for **random dice** are: `notation="1d6", size=3, style="normal", css="".`
* Default Values for **specific dice** are: `dice="1d6", value=1, size=3, style="normal".`
* Icon stylesheet from dicefont, an open-source dice icon and css by Franco Ponticelli. Checkout the usage page to know how to use the icons.
* Took inspiration from the reddit thread (Thanks u/eonflare\_14 and u/winterrpenny), dice plugin, and rpg icons.
* Made by u/Vionet20.
* Only supports Polyhedral Dice and Coin (d2,d4,d6,d8,d10,d12,d20).
* Scale is based on CSS `font-size`, if the icon is placed in a style with existing `font-size`, the icon will take that scale, and if any scale is provided, it will be multiplied.
Background-audio-plugin

Discontinued PluginThis plugin no longer functions

## Basic Overview

This plugin allows you to play background music

## Importing and Usage

Put this in your Perchance code panel: `backgroundAudio = {import:background-audio-plugin}`

Now find a YouTube URL with the sound that you want. Let's say you chose this URL: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`

To play this video in the background, put this in your bottom-right (HTML) panel: `[backgroundAudio("https://www.youtube.com/watch?v=dQw4w9WgXcQ")]`

You can change the volume like this: `[backgroundAudio("https://www.youtube.com/watch?v=dQw4w9WgXcQ", volume)],` , Just replace volume with a volume level between 0-100.

## Notes

* In general, unsolicited website background music can be annoying to users, especially when there's no "mute" button. So probably only use this for silly generators or where the audio has some important purpose.
* In modern browsers, the audio won't start until the user has interacted with the page (e.g. by clicking somewhere).
* THIS PLUGIN IS DISCONTINUED AND WONT WORK
Random-integer-plugin

Link to Pluginhttps://perchance.org/random-integer-plugin

## Basic Overview

This plugin allows you to generate a random integer (a whole number - i.e. not a decimal number) between two numbers that you provide. The built-in `{1-10}` (shorthand list) type syntax is fine for most cases, but what if you wanted to choose a random number between two randomly chosen numbers? That's where this plugin would come in handy.

## Importing and Usage

### Importing

To use this plugin, you'll first need to import it by putting this code in your Perchance code panel:
randomInteger = {import:random-integer-plugin}

### Usage

And here's a simple example of how to use it:

```
output
	Between the numbers [s = small.selectOne] and [b = big.selectOne], there is the number [randomInteger(s, b)].

small = {10-20}
big = {50-100}

```

Note that the random number generated is "inclusive" of the two numbers you give it, so if you wrote `[randomInteger(1,3)]` you'd get either 1, 2 or 3. Also note that you can do all the normal stuff with this plugin, like assigning the resulting number to a variable like this:

```
output
	The winning number is [n = randomInteger(10, 20)], which is [50-n] less than 50.

```

And remember that you can name your plugin variable whatever you like, so if writing randomInteger a lot becomes tiresome, you can import it like this:
`rand = {import:random-integer-plugin}`

And now you can just write `[rand(from, to)]`.

## Notes

* Here's an example of a generator that uses this plugin.
* The first number doesn't need to be smaller than the other, and you can input negative numbers too. It will always just randomly select a whole number between the two numbers you give it.
Multi-Line Output & Formatting

## Introduction

This page talks about the formatting of text and multi-line outputs.

## Examples

What if we want to output text that isn't just on one long line, but is instead broken into multiple lines? We can do this by inserting `<br>` wherever we want to start a new line (a line **br**eak). For an example, let's say we're making a random character creator:

```
output = Character <br> Name: [name] <br> Eye color: [eyeColor] <br> Height: [height]

name = {import:chocobo-name}
height = {100-300}cm
...

```

Checkout the result of that here. So, we've got multiple lines happening, but it could do with a bit of formatting. Let's bold the "Character" title:

```
output = <b>Character</b> <br> Name: [name] <br> Eye color: [eyeColor] <br> Height: [height]

```

See what we've done there?

We've wrapped "Character" in the `b` tag: `<b>Character</b> = **Character**`.

If we wrap text with the `i` tag, we can make text italic: `<i>Character</i> = *Character*`.

You can underline text by wrapping it in these tags: `<u>Character</u> = Character`.

These "tags" are just a couple of the many HTML tags that you can use to format the output of your generator. In this example I've made "Character" bold and made the `name`, `eyeColor` and `height` values italic.

> Side note: If you want to take your Perchance skills to the next level, you should learn about `$output` (it's not just for exporting!), the `this` keyword, and special properties like `joinItems`. These are outside the scope of this simple guide, but if you learn them, you can create multi-line stuff like a pro (here's a simplified version of that).
>
>

If you'd like to have your generator output in a neat table format, then check out this HTML table example. If you stare at the code in the HTML panel for a bit, you should be able to see how you can add extra rows and columns to the table. The general idea is that each row must start with `<tr>` and end with `<tr/>`. Within each row you can add column values that must be wrapped in `<td>` and `<td/>` like so: `<td>hello<td/>`.
Print-button-plugin

Link to Pluginhttps://perchance.org/print-button-plugin

## Basic Overview

This plugin allows easy setup for printing the generator.

## Importing and Usage

### Importing

If you'd like to allow people to print the page that they've generated using your generator, simply put this in your HTML panel:

`{import:print-button-plugin}`

### Styling

If you'd like to customize the text or style of the button, you'll need to know a bit of CSS and HTML, which you can learn by clicking here. Once you've learned the basics, you can put this in your HTML panel:

```
<button onclick="window.print()" style="background:lightcoral">print the page</button>
<style> \* { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; } </style>

```

The second line just tells the web browser to print background colors and images as well. You can leave it out if you just want it to print in black and white.

You can edit the `style` attribute to create the look that you want.

If you don't want it to print background images and background colors, then you should use just the following code (no need to import this plugin):

```
<button onclick="window.print()">Print</button>

```

### Removing Elements from Print

If you don't want certain elements to show up in the printed version of your generator, you can add the `hideDuringPrint` class to your element:

```
<div>This is shown during print</div>
<div class="hideDuringPrint">This is hidden during print</div>

```

If you want to add other custom CSS rules for use during printing only (e.g. changing colored text to black), paste this in your HTML editor:

```
<style>
 @media print {
 /\*(put your custom printing rules here) \*/
 }
</style>

```
Select-range-plugin

Link to Pluginhttps://perchance.org/select-range-plugin

## Basic Overview

This plugin allows for selecting ranges of items from a list specifically by indexing, meaning it will not be randomized.

## Importing and Usage

### Importing

Put this in your Perchance code panel: `selectRange = {import:select-range-plugin}`

### Usage

So, the notation is `[selectRange(list, start, end)]`.

Now you select specific ranges of items from your list:

* 3rd to 7th item: `[selectRange(animal, 3, 7)]`
* 12th to 30th item: `[selectRange(animal, 12, 30)]`
* 4th item onwards: `[selectRange(animal, 4)]`
* 26th item onwards: `[selectRange(animal, 26)]`

If you omit `end`, it'll assume you want all the rest of the items.

Both numbers in the range are **inclusive** (start and end items are included).

### Using Negative Indexing

You can also reference items counting **from the end of the list** using the minus sign:

* last 5 items: `[selectRange(animal, -5)]`
* only the last item: `[selectRange(animal, -1)]`
* last 3 items: `[selectRange(animal, -3)]`
* 2nd item up to the 4th last item: `[selectRange(animal, 2, -4)]`
* 5th last item up to the 3th last item: `[selectRange(animal, -5, -3)]`
* all items except the last one: `[selectRange(animal, 1, -2)]`
* all items except the last 3: `[selectRange(animal, 1, -4)]`

### Sublisting

You can use the "sublist" like it's a normal list:

* `[sublist = selectRange(animal, 3, 8), ""]` and then later:
* `[selectRange(sublist, 3, 5)]`
* etc.

## Notes

* Here's an example of how to use it.
* Perchance might get a "native" `selectRange` eventually. It'll probably look like this: `[animal.selectRange(3, 9)]`, but until then you can use this plugin.
* Remember that you can always ask for help on the forum.
Goto-plugin

Link to Pluginhttps://perchance.org/goto-plugin

## Basic Overview

This plugin is similar to the tap-plugin but instead of re-randomizing the output, it redirects into another output. It is used for making simple text adventures with different paths.

## Importing and Usage

### Importing

Put this in your Perchance code panel: `goto = {import:goto-plugin}`

Syntax: `[goto(destination, "text to display")]`

### Usage

Now you can create simple text adventures:

```
darkroom = You're in a dark room. You can [goto(lightroom, "turn on the light")] or [goto(tavern, "exit through the door")].
lightroom = You switch the light on. There are mops and buckets here. Seems like you're in a cleaning cupboard. You can [goto(darkroom, "turn off the light")] or [goto(tavern, "exit through the door")].
tavern = You open the door and walk out. You're standing in an old dusty tavern. There's no one here. You can [goto(tavernexit, "look for an exit")] or [goto(tavernbar, "have a look at the bar")].
tavernexit = ...
tavernbar = ...

```

Here's a link to a generator with the above code.

You can obviously harness all the normal Perchance features within your story to make it wonderful and random.

## Notes

* Want to allow people to **save their game** so they can close the browser tab and pick up where they left off later? Then check out the remember-plugin, and here's an example of how to use the remember and goto plugins together.
* Here's a more complex example.
* Have a look at the HTML panel in the example above to see how to edit the text color.
* Here's another simple example that uses a grid-style world layout.
Background-image-plugin

Link to Pluginhttps://perchance.org/background-image-plugin

## Basic Overview

This plugin lets you easily add a background image to your generator.

 `background = {import:background-image-plugin}`

Change the image URL to one of your choosing. Just make sure to keep the quotation marks around it.

### Random Image

You can randomize the image every time the randomize button is clicked by using code like this:

```
// in lists editor:
backgroundImage = {import:background-image-plugin}

imageUrl
  https://i.imgur.com/64c6NnI.jpg
  https://i.imgur.com/Hvb6HTy.jpg
  https://i.imgur.com/ecKzF9F.jpg
  https://i.imgur.com/785rHFl.jpg

// in HTML editor:
[backgroundImage(imageUrl)]

```

## Notes

* Use images that you're legally allowed to use (Unsplash is awesome - all the images are free)
* Upload your image to a place where it wont be deleted (e.g. Imgur)
* Your image url must end in `.jpg`, `.png`, etc. (i.e. must be a **direct** link - right-click on the image and click "Copy image address" or "Copy image location", depending on your browser)
* Ideally your image would be at least 1500px wide
* Lowering the opacity a bit and adding blur can help bring your content forward
* Using images that aren't super bright and saturated helps
* Here are some backgrounds to try out:

```
pastel tiles:       https://i.imgur.com/0CWEecq.jpg
books:              https://i.imgur.com/Hvb6HTy.jpg
pine forest:        https://i.imgur.com/ecKzF9F.jpg
dark leaves:        https://i.imgur.com/785rHFl.jpg
rocky coastline:    https://i.imgur.com/E4a7yi0.jpg
night building:     https://i.imgur.com/9hrHir1.jpg
jelly fish:         https://i.imgur.com/EyLiFMs.jpg
cloud sunset:       https://i.imgur.com/M3wXrLE.jpg
summer sunset:      https://i.imgur.com/YRUgc7j.jpg
desert dunes:       https://i.imgur.com/P4FoRy2.jpg
jagged mountains:   https://i.imgur.com/mSarpKO.jpg

```
Bay Façade Station

**Bay Façade Station** is a station on **Xofa Line**. It is operated by Nazca Railway (Los Sengas Division), and is located at Los Sengas Xofa. Passengers may also use this station to change to Mushroom Transit **Northward Line** (Bay Façade Station).

## Station Floors and Facilities

Platforms (L1, Y=85)

 ← **Xofa Line**
 to Intus Occident (Silver Plateau)

Concourse (G, Y=75)
* Exits A-B
* Station Facilities
* NR Shops X 13

## Fun Facts

* When **Xofa Line** was named **Xofa Crescent**, the Station Number of this station was (5C)-02. However, as **Xofa Crescent** was renamed **Xofa Line** due to changes in development plans, the Station Number is now (5A)-02.
* This Station is the second Station in Nazca Railway Los Sengas Division in which the English Name of this station features Diacritic Marks, with the first Station being Calmé Station. In this station's case, the Cedilla is used.
* Due to mountainous terrain between Silver Plateau Station and this station, several tunnels were built.
* The Design of this station resembles Season 1 Stations, in particular Katadelphia Station.

## History

* July 8 2019: This Station began construction.
* July 10 2019: This Station began services.
* May 13 2021: Due to changes in development plans, **Xofa Crescent** is renamed **Xofa Line**, and the Station Number of **Xofa Line** has changed.

## Citations and References

1. ↑ Formerly **5C**-02.
2. ↑ The Number of Shops are counted individually.
3. ↑ https://www.facebook.com/nazcarailway/posts/pfbid02kmteriTAnBKC6cced5pFPcf5Vv9i5WYm1tLcyZybTtFFsEFeHrgEtbgep1Li9cr8l
4. ↑ https://www.youtube.com/watch?v=wQ0AutTiryY&t=1325s
5. ↑ https://www.youtube.com/watch?v=wQ0AutTiryY&t=1463s