#sugarcube coding

Usage

To use it, you must use the link macro WITHOUT an additional argument for the passage name you want to go to. Instead, include that in the passagefade macro that comes with the Javascript code.

The new macro above uses the following arguments: how long it takes to fade in the black screen, how long it stays, and how long it fades out in miliseconds.

Simplified how?

When you want to section off portions of the text as it has sensitive content, you may use an if condition to check if the reader is sensitive to it, followed by a linkreplace.

However, doing this multiple times can be exhaustive. It also likely requires you to copy the text twice, for both in the case the reader is sensitive, and the case they are not. This can be unwieldy if you have a lot of paragraphs or a big one. See example below.

Using the macro, however, you can shorten it to this:

Not only is this much more readable, it does not artificially inflate the word count of your game and take up space, and it is also much quicker to write!

And some other neat features...

Can section off only parts of a paragraph!

Content warning text is generated automatically, but can optionally be rewritten!

Setup

Copy and paste this Pastebin to your Story JavaScript.

Copy and paste this Pastebin to your Story Stylesheet.

Make a new passage titled exactly as "black_fade". Add the passage tag, "black-fade". Inside, write <div id="black"></div>. Super important! Copy below identically.

After this, your installment of the macro should be complete!

Usage

In the passages where you will be fading from and where you will be fading to, tag it as "passage-fade". For example, I want to transition from "p1" to "p2" with a black fade. Thus, both p1 and p2 should have the tag.

In the passage where you will be fading from, write <<fadestart>>.

Use the <<link>> macro to link to your destination. Inside the link macro, use <<passagefade "[passage name]" [fade time]>> where [passage name] is the passage you want to go to, and fade time is how long the black fade will be in miliseconds. (1000ms = 1s). However, do NOT put the passage you will be going to in the <> macro itself. See below:

Here, I want to go to the passage "p2". Do NOT write <<link "Next passage" "p2">><</link>>. Do not provide the destination passage in the link macro itself. The macro <<passagefade>> will handle it for you if you specify the passage name in the first argument.

Once you do all this, you should be able to sit back and happily use it as you please!

Problems?

Make sure you have the passage "black_fade" titled exactly like that.

Also make sure it has <div id="black"></div> and nothing more!

Make sure "black_fade" is tagged with "black-fade".

Make sure you used <<fadestart>> in the passage you are transitioning from.

Make sure you are correctly using the macro <<passagefade>>. You specify time in miliseconds; it should not have "ms" or "s" included in the argument. It should just be the number (e.g. 4000 for 4 seconds).

Make sure the passages you are fading from and to are tagged with "passage-fade".

There may be CSS/HTML that is interfering with the look of the fade!

There may be other JavaScript code interering with the current code.

If you are having problems, please let me take a look at your Stylesheet or let me know what template you are using! However, I highly recommend looking at the playable and downloadable demo.

First of all, credit to HiEv because I got the base code from them! I just can't find what thread I found it in.

Code?

First—I've uploaded the EXACT passage for eye colors from the IF (even the writing is included...) to itch.io. I've made it restricted to avoid it clogging up my list of projects + notifying all my followers. However, you can play + download it there!

Link / Password: edelle008

Feel free to copy the code exactly, but in this post, I'll be explaining every single thing if you're still confused looking at the code.

Your Passage

Make a passage for where you want the radio buttons to appear. On that passage, have this code:

Red - Make sure to have a ((silently)) macro to not create unnecessary white space. I recommend to end ((silently)) immediately before your writing.

Orange - copy the code exactly (again, I highly recommend downloading the code off itch.io if you just want to copy and paste it!)

Yellow (no yellow on mobile editor...) - This is jQuery. It detects for any "changes" in a ((radiobutton)) macro in that passage. Make sure you don't have multiple radiobutton macros in the same passage.

Green - Replace #summary with the ID you're going to enclose your radio buttons in. If you don't know what I mean, this'll make more sense later.

Blue - When jQuery detects a change in the radio buttons in the passage, it's going to execute this widget called ((eye_color)), which I made solely to check and display different text for eye_color depending on what radio button is selected. Again, if this doesn't make sense, it will later.

So this where the actual radio buttons come. Please disregard the black strikethroughs, that's the code I used to organize the radio buttons into side by side columns.

I'm not covering how you do that here because the way I do it is incredibly scuffed, and only supports three radio buttons side by side. It also only looks good if the number of choices are the same on both sides. I don't want to teach you whatever won't work flexibly.

Above the red line, make a div and assign it an ID. I called my ID #summary, which is why in the previous screenshot, I made it so that the code updates whatever is inside a (span) or (div) with an ID of #summary. Hence, please change #summary into whatever you'd like!

Now you can also style any text within the (div) to anything you want in your Stylesheet.

Inside the div, I put the widget ((eye_color)). You can change this into any text you want to display initially, and it will be updated/written over once someone selects a radio button. The reason I let this stay as ((eye_color)) is so that it first shows the text for the first option, brown eye color (I do this by initializing $eye_color to "brown" in StoryInit, or else it might not show anything when you first look at it.)

Red - Below the red line, please add your radio buttons as normal. Again, disregard the black strikethroughs.

Widget

The reason I made a widget is so that it automatically checks and updates the text depending on the $eye_color variable, or any variable your radiobutton is changing. A widget is essentially a custom macro you make.

Make a separate passage (I called mine "eye_color" for consistency), tag it with "widget". You may copy the code below exactly as base (available for download on itch.io):

Here I made a widget called eye_color. You will enclose all the code inside this passage within the ((widget)) macro.

Yellow - I would use ((nobr)) macro from the beginning of the widget to the end to avoid unnecessary whitespace. This will put everything in one line unless you use (br) to force a line break.

Orange - I made a div for the entire text. The style="(code for transition)" is how there's going to be that transition between texts so it doesn't change it immediately, but gives it that slight fade in effect as it changes. Feel free to change the transition if you know how to. I assign it an ID of #text1 because I'm uncreative, but remember what ID you assign it.

Also, maybe you could test using (span) instead of (div). I don't know why I didn't, and haven't tried it.

Pink - In between the pink dashes, you will write your if statements. This is straightforward -- write an if statement for all the eye colors you want. The (div) for Orange ends when you use your closing ((if)).

Brown - The Orange makes the text have 0 opacity. What this does is make it have 1 opacity. In English, this means the text is originally invisible and this turns it visible.

Purple - Enclose Brown in a ((timed 0s))((/timed)). Usually, Orange and Brown are executed almost simultaneously; that leaves your text invisible. What Purple does is make Orange execute before Brown, so that Brown is able to make the text visible.

Test it