youmakeai
/

Future-HTML

Flair

English

code

Model card Files Files and versions

xet

youmakeai commited on May 27, 2025

Commit

8375abb

verified ·

1 Parent(s): 0c78ab4

Delete How perchance works for beginners.txt

Browse files

Files changed (1) hide show

How perchance works for beginners.txt +0 -342

How perchance works for beginners.txt DELETED Viewed

@@ -1,342 +0,0 @@
-- // Note: Text that comes after "//" is ignored, which allows
-// you to write notes - like the one you're reading now!
-//  - Below is an example of an EDITOR PANEL
-//  - title comes after plugins, plug-in start line number one.
-title
-  Your Generator's Title
-output
-  {This|That} [animal] is so [adjective]!
-  I wish I could [verb] that [animal].
-  Aren't [animal.pluralForm] just so [adjective]?
-  There must be at least {1-10} [animal]{s} [location]!
-  THE [animal.upperCase]! It's eating the {import:common-noun}!
-  {A} [animal] is a bit like {a} {import:common-noun}. // {A} and {a} will automatically choose "a" and "an" as appropriate
-animal
-  pig
-  cow
-  chicken
-  zebra
-  crayfish
-  jellyfish^0.5  // this item is HALF as likely as the others
-  worm^2         // this item is TWICE as likely as the others
-adjective
-  small
-  big
-  cute
-  sneaky
-  unusual
-  helpful
-  mean
-verb
-  pat
-  befriend
-  help
-location
-  on {the|this|that} island
-  in {the|this|that} valley
-  {around|in} here
-  over there
-  under this {thing^2|thingie}
-// Tips:
-//  - Highlight multiple lines and press Tab or Shift+Tab to indent and un-indent them all an once
-//  - You can change the URL of your generator by clicking the "settings" button in the top-right
-//  - You can use the sparkle button in the lower-right of the screen to ask the AI to adjust the visual design of your generator.
-//  - Add background images, fonts, and other stuff with plugins:  perchance.org/plugins
-//  - Here are some generators you might like to import:  perchance.org/useful-generators
-//  - Read this page after reading the tutorial:  perchance.org/examples
-//  - There's a gear button in the top-left which you can use to make the lines wrap around when they reach the edge of the screen, and to change the font size. Also, if you add   $output=[this.joinItems("<br>")]   as the first or last item in your list, then writing [yourListName] will magically output all of the items joined together with <br> (which means "line break" in HTML - i.e. a line separator), rather than outputting a random item from the "yourListName" list.
-//  - Ask our friendly community members if you need help:  lemmy.world/c/perchance
-//  - Below is an example of an HTML PANEL
-<!-- Learn 'HTML' here:  https://www.khanacademy.org/computing/computer-programming/html-css    -->
-<h1>[title]</h1>
-<p style="margin:1em auto; padding:0 1em; max-width:700px;">[output]</p>
-<button onclick="update()">randomize</button>
-<br>
-<!-- The line below makes it so if your device is in dark mode, then the default text color is switched to white, and the default background color is switch to black. -->
-<style> html { color-scheme: light dark; } </style>
-//  - this was an actual sample of how perchance works.
-//  editor panel below
-$meta
-  title = Create a Random Generator
-pride = {import:pride-plugin}
-// Yep, even the Perchance homepage is technically a "generator", but all the content is in the HTML code in the lower-right editor.
-//  html below
-<h1 style="position:fixed; top:-1000px;">Create a Random Generator</h1>
-<h2 id="header" style="font-size:200%; margin-top:1em;">[pride()] Welcome to Perchance! [pride()]</h2>
-<main>
-	<p>Perchance is a platform for creating and sharing random generators. To create a random generator you simply create lists which reference other lists:</p>
-	<div style="position:relative;">
-<pre>output
-  Your \[pack\] contains \[item\], \[item\] and \[item\].
-item
-  a few coins
-  an old \{silver|bronze\} ring
-  a handkerchief
-  a shard of bone
-  some lint
-  a tin of tea leaves
-pack
-  purse
-  backpack
-  bag
-  pack
-  knapsack
-  rucksack
-</pre>
-	<a href="/rg4m14ri#edit"><div style="position:absolute;bottom:1em;right:1em;background: #14b914; background:light-dark(#14b914, #038003); color:white;padding: 0.5em;width:max-content;border-radius: 2px; box-shadow: 0px 2px 2px #0000005c;">try this example</div></a>
-	</div>
-	<p>So, for example, whenever you write <code>\[pack\]</code>, a random item from the "pack" list will be put in its place — as shown in <a href="https://user-uploads.perchance.org/file/bc63c883358b59575af1b8a142b90834.mp4" target="_blank">this animation</a> by <a href="https://perchance.org/vionet20-gens" target="_blank">Vionet20</a>.</p>
-  <p><a href="/rg4m14ri#edit">Here's a link</a> to a minimal perchance generator based on the above code. You can edit it, save your own version, and share it.</p>
-  <p>You can change the odds of items like so:</p>
-<pre>
-pack
-  purse
-  backpack ^2
-  bag
-	...
-</pre>
-	<p>That makes "backpack" twice as likely as the others to be chosen when we write <code>\[pack\]</code>. You can import other peoples' generators like this:</p>
-<pre>
-sentence
-	I need a new \{import:noun\}.
-	Quickly, \{import:verb\}!
-</pre>
-	<p>You can also alter the capitalisation, pluralisation, tense, and other properties of your word lists. Here's how to play around with capitalisation, for example:</p>
-<pre>
-sentence
-	\[name.titleCase\], can you hear me?
-	HELLO, \[name.upperCase\]!
-name
-  patricia
-	khalid
-	anaya
-	...
-</pre>
-	<p>There are a bunch of different shorthand notations to make common tasks easier:</p>
-<pre>
-sentence
-	\{She|He\} was about \{15-20\}0cm tall and was carrying \{1-3\} \{import:concrete-noun\}\{s\}.
-</pre>
-  <p>If you prefer to learn via video, here's a great unofficial introduction video by YouTuber <a href="https://www.youtube.com/@Chaoclypse" target="_blank">Chaoclypse</a> who is using Perchance to create RPG generators:</p>
-  <p style="text-align:center; margin-bottom:0.1rem;"><iframe width="560" height="315" style="max-width:100%;" src="https://www.youtube-nocookie.com/embed/2DRSuHDPU6I?si=_Ih0m9pR5qt-2b0h&autoplay=0&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p>
-  <p style="text-align:center; margin-top:0.1rem; font-size:70%;">(btw, feel free to share your own Perchance video tutorials on <a href="https://lemmy.world/c/perchance" target="_blank">the community forum</a> - you might get featured here!)</p>
-	<p>The above examples only show the <b>absolute basics</b> of Perchance! If you'd like to learn more, check out the <a href="/tutorial">tutorial</a>, and start playing around with a <a href="/minimal#edit">minimal example</a> (or the <a href="/basic-template#edit">basic template</a>). Check out the <a href="/examples">examples</a> page and this <a href="/aqr03wn1#edit">somewhat complexified version</a> of the previous backpack example for some demonstration of advanced features.</p>
-	<div id="next-step-buttons-ctn" style="display:flex; justify-content:center;">
-		<a href="/generators" style="display:inline-block; text-decoration:none; color:white; background: #ea8616; background:light-dark(#ea8616, #cd730f); border:0; outline:none; padding:0.5em 1em; border-radius:3px; font-size:120%; margin:1em; box-shadow: 0px 2px 2px #00000029;">View Creations 🔧</a>
-		<a href="/minimal#edit" style="display:inline-block; text-decoration:none; color:white; background: #00a3ce; background:light-dark(#ea8616, #0084a7); border:0; outline:none; padding:0.5em 1em; border-radius:3px; font-size:120%; margin:1em; box-shadow: 0px 2px 2px #00000029;">Start Creating ⚄</a>
-		<a href="/tutorial" style="display:inline-block; text-decoration:none; color:white; background: #4abe4a; background:light-dark(#4abe4a, #0f8e0f); border:0; outline:none; padding:0.5em 1em; border-radius:3px; font-size:120%; margin:1em; box-shadow: 0px 2px 2px #00000029;">Keep Learning 📚</a>
-	</div>
-	<style>
-	@media screen and (max-width: 800px) {
-		#next-step-buttons-ctn {
-			 flex-direction:column;
-		}
-	}
-	</style>
-	<p>Once you've created a generator, you can <b>share it</b> with others by simply sharing the URL. You can change the URL in the "settings" menu. You can also <b>download it</b> as a single HTML file so that you can run it offline, or even turn it into a <a href="https://perchance.org/create-a-twitter-bot" target="_blank" style="font-weight:bold;">Twitter bot</a> or a <a href="https://perchance.org/create-a-tumblr-bot" target="_blank" style="font-weight:bold;">Tumblr bot</a>. It's also easy to <b>embed it</b> in your own website:</p>
-<pre>
-&lt;iframe src="https://null.perchance.org/my-generator-name" style="width:100%; height:600px; border:none;"&gt;&lt;/iframe&gt;
-</pre>
-	<p>And a note to coders: It's also possible to <a href="/diy-perchance-api">set up an API server</a> for your generator, even though Perchance doesn't have an "official" API at this point. It's also possible to <a href="/perchance-discord-bot" target="_blank" style="font-weight:bold;">set up a Discord bot</a> which will respond to messages with the output of a generator that you choose.</p>
-	<p>We have a <a href="https://lemmy.world/c/perchance">Lemmy community</a> which you might like to join. Feel free to share your creations there or ask questions if you need some help building your generator. Also check out the work-in-progress <a href="/useful-generators">useful generators</a> list which might have some generators that you'd find useful for importing into your own generator.</p>
-	<p>If you're looking for a simple random generator maker that just randomly selects one of several different items that you specify, then you can still use Perchance, but it might be a bit excessive for such a simple task. That said, the advantage of using Perchance for something like this is that it makes it really easy to add different weights/chances to each item and to extend it with some additional complexity later if needed. Perchance is designed to allow you to create random generators that have a lot of complexity, without requiring any existing coding knowledge, and with a fairly simple interface.</p>
-  <p>Perchance is based on <a href="https://www.khanacademy.org/computing/computer-programming/html-css" target="_blank">HTML/CSS</a>, and <a href="https://www.khanacademy.org/computing/computer-programming/programming" target="_blank">JavaScript</a>, and my secret mission with Perchance is to get people interested in coding with a smooth, fun learning-curve. If you enjoy using Perchance and want to take your coding skills to the next level, you might like to learn to code on <a href="https://www.khanacademy.org/computing/computer-programming" target="_blank">Khan Academy</a>, or <a href="https://scratch.mit.edu/" target="_blank">Scratch</a>.</p>
-	<p>Finally, Perchance's structure is based on other awesome random text languages like <a href="http://orteil.dashnet.org/randomgen">randomgen</a> by Orteil and <a href="https://github.com/rant-lang/rant">Rant</a> by TheBerkin. Many thanks to these and other <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSL</a> creators which inspired Perchance's syntax and functionality. You might also like to check out <a href="https://chartopia.d12dev.com/">Chartopia</a> - another website which allows you to make random generators. If you like the HTML/JS coding aspect of Perchance, and don't really need the generator stuff, then <a href="https://neocities.org/">neocities.org</a> may also be interesting to you.</p>
-  <p>Thanks to the contributors behind these open source software projects:</p>
-	<ul style="text-align:left;">
-		<li><a href="https://github.com/nlp-compromise/compromise">Compromise</a>: A JavaScript natural language library that powers <code>pastTense</code> and <code>pluralForm</code> and the like.</li>
-		<li><a href="https://nathancahill.github.io/Split.js/">Split.js</a>: A library that allows you to easily split the screen up into resizable quadrants.</li>
-		<li><a href="https://mongodb.com">MongoDB</a>: A great document/NoSQL database. I use it for everything.</li>
-		<li><a href="https://expressjs.com">Express.js</a>: Helps serve you this webpage and power the internal APIs of Perchance.</li>
-	</ul>
-	<p>Thanks for checking out Perchance! •ᴗ•</p>
-</main>
-<p style="text-align:center; font-size:200%; opacity:0.2; margin-top:0.5em;"><span>⚄&#xFE0E;</span></p>
-<p style="margin-bottom:2rem; font-size:80%; color:grey; text-align:center;"><a style="color:inherit; text-decoration:none;" href="/privacy-policy" target="_blank">Privacy Policy</a></p>
-<br/>
-<style>
-	ul li {
-		margin-top:0.5em;
-	}
-	main {
-		max-width:900px;
-		margin:0 auto;
-		background: #fff;
-		background: light-dark(#fff, #101010);
-		padding:1em;
-		border-radius:3px;
-		box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
-		box-shadow: 0 0.5px 0 0 light-dark(#fff, #060606) inset, 0 1px 2px 0 light-dark(#B3B3B3, #2c2c2c);
-	}
-  main p:first-child {
-    margin-top:0;
-  }
-	p { text-align:left; line-height: 1.4em; }
-	body {
-		background-color:#f6f6f6;
-		background-color: light-dark(#f6f6f6, #000);
-    color: black;
-    color: light-dark(black, #d6d6d6);
-	}
-	pre {
-		text-align:left;
-		background: #333;
-    background: light-dark(#333, #212121);
-    color: #e2e2e2;
-    padding: 1em;
-    border-radius: 2px;
-		tab-size: 2;
-		-moz-tab-size: 2;
-		-o-tab-size: 2;
-		-webkit-tab-size: 2;
-	}
-	code {
-		background: #eff0f1;
-    background:  light-dark(#eff0f1, #272727);
-    padding: 1px 5px;
-		white-space: nowrap;
-	}
-	h2 {
-		margin-top: 1.5em;
-	}
-	@media screen and (max-width: 600px) {
-		#header {
-			font-size:1.6rem !important;
-		}
-	}
-  html { color-scheme: dark light }
-</style>
-pride = {import:pride-plugin}
-hubData = {import:hub-external-card}
-// Here's the code for the comments section.
-// If you want a similar comment section on your generator,
-// then copy this code, and the "comments section" code in the
-// HTML editor (bottom-right panel).
-commentsPlugin = {import:comments-plugin}
-commentOptions
-  width = 100%
-  height = 100%
-  commentPlaceholderText = Add a friendly comment.
-  submitButtonText = Submit
-  adminPasswordHash = 98a407adbe9b5f82e04743052c96700b32b41fbd0b086c1508e632538ed5c948
-  bannedUsers
-    63597638cc2c54e646c0
-    bd2b6e549d9265095875
-    8d773b11eb09b74fcef6
-    453d45538bab1c684dfc
-    8f0373f1b3987207c2c6
-    2b48d8482b43363e186a
-    0c6b24e958846cb48540
-    428f8fe038bd2208455a
-    G3UB-88b3244b8bd110819eb7
-// Every page on perchance is a "generator", even this one!
-// But since there's no need for random stuff on this page
-// (it's just a list of recently updated generators), most
-// of the code for this page is in the HTML panel (the
-// bottom-right text editor).
-<h1><a target="_blank" href="/pride-plugin">[pride()]</a>[new Date().getDate() === 19 ? "🕯️" : ""] Recently Updated Generators [new Date().getDate() === 19 ? "🕯️" : ""]<a target="_blank" href="/pride-plugin">[pride()]</a></h1>
-<p style="opacity:0.4; margin:0;" class="subtitle">(You can remove your generator from this list by clicking "make private" in your generator's settings)</p>
-<!-- comments section-->
-<div style="position:fixed; bottom:0; right:0; height:max-content; width:min(100%, 400px); z-index:100; max-height:100vh;">
-  <div style="background:#1a1a1a;color:white;border: 1px solid #303030;border-top-left-radius:3px;border-top-right-radius:3px;cursor:pointer;padding:0.25rem;border-bottom: none;" data-visible="false" onclick="commentsCtnEl.style.display = JSON.parse(this.dataset.visible) ? 'none' : ''; this.dataset.visible = !JSON.parse(this.dataset.visible);">💬 Comments</div>
-  <div id="commentsCtnEl" style="display:none; height:min(600px, 80vh); ">[commentsPlugin(commentOptions)]</div>
-</div>
-<div class="suggested-links">
-  <a href="/plugins" style="font-weight:bold;">plugins</a>
-  <a href="/templates" style="font-weight:bold;">templates</a>
-  <a href="/resources" style="font-weight:bold;">resources</a>
-  <a href="/text-to-image-plugin">text-to-image-plugin</a>
-  <a href="/ai-text-plugin" class="highlighted-suggested-link">ai-text-plugin</a>
-  <a href="/comments-plugin">comments-plugin</a>
-  <a href="/pattern-maker-plugin">pattern-maker-plugin</a>
-  <a href="/image-layer-combiner-plugin">image-layer-combiner-plugin</a>
-  <a href="/layout-maker-plugin">layout-maker-plugin</a>
-  <a href="/create-instance-plugin">create-instance-plugin</a>
-  <a href="/popular-generators">popular-generators</a>
-  <a href="/create-a-twitter-bot">create-a-twitter-bot</a>
-  <a href="/diy-perchance-api">diy-perchance-api</a>
-  <a href="/perchance-discord-bot">perchance-discord-bot</a>
-  <a href="/tap-plugin">tap-plugin</a>
-  <a href="/wheel-plugin">wheel-plugin</a>
-  <a href="/tooltip-plugin">tooltip-plugin</a>
-  <a href="/background-image-plugin">background-image-plugin</a>
-  <a href="/font-plugin">font-plugin</a>
-  <a href="/generator-stats-plugin">generator-stats-plugin</a>
-</div>
-<style>
-  .suggested-links {
-    display:flex;
-    padding:1rem;
-    justify-content:center;
-    flex-wrap:wrap;
-  }
-  .suggested-links a {
-    margin:0.25rem;
-    background:#f2f2f2;
-    padding:0.25rem;
-    box-shadow: 0px 1px 2px 0px #e3e3e3;
-    border: 1px solid #bbb;
-  }
-</style>
-<!--
-To make this work, you want to map your items twice in .marquee, and halve the total width of .marquee to create the "infinite" wraparound
--->
-<!--<div class="marquee-container" style="margin-bottom:2rem; display:none">
-  <div class="marquee">
-    <div class="item">
-      <div class="card">🤪</div>
-    </div>
-    <div class="item">
-      <div class="card">🤪🤪</div>
-    </div>
-    <div class="item">
-      <div class="card">🤪🤪🤪</div>
-    </div>
-    <div class="item">
-      <div class="card">🤪🤪🤪🤪</div>
-    </div>
-    <div class="item">
-      <div class="card">🤪🤪🤪🤪🤪</div>
-    </div>
-  </div>
-</div>
-// these are just some examples on how perchance.org works.