#liveblock

[altblock-tm]

oh my god it’s so fucking funny how Light is trying so hard not to laugh ‘cause he thinks he’s won

[fruit-sauce]

MY BABY NOOOOO,,,

[endemise]

Just quickly looking at the a.w. morgan template one of the issues is with having the id="story" on the StoryInterface passage. I tried changing it to "story1" and that seemed ok. I then went through the stylesheet and changed every #story to #story1. This seems to fix most the issues with the base template. There is still a problem with the <liveblock> macro that I haven't checked yet

i did try something like that & it worked! i use a lot of custom macros though & that brought up more error messages along with weird ui shifting (though idk if that comes from the macros or renaming the story ID)

i also tried updating the macros for the new sugarcube version but there were still error messages (i can’t remember what exactly they said & can’t check for a few hours)

i think my only fix at the moment is to go back to the previous sugarcube version which i’m fine with :)

[deandacosta]

Liveblocks Comments https://t.co/y0AuwsbG8z

[quackitytheduck]

that’s the most genuine emotion i’ve ever seen out of him

[soummusic]

드디어 귀요미들 테스트 해보러 작업실 왔다! 요새 왜케 바쁜거야 ㅠㅠ 사용하기 어렵다는 말에 도전의식 뿜뿜 ㅋㅋ 나 도스 시절에 베이직으로 게임 만들어 놀던 녀자라고~ (이러다 못다루면 어쩌지 ㅋㅋ) #ROLI #blocks #seaboard #loopblock #liveblock #lightpadblock #사운드캣대표님감사합니다

[redflagsandbanners]

Oh look the thing to fully wake me up this morning was not the breakfast, not the coffee, not the far-too-early political talk with my dad, but the Black Sails intro.

[bucksboobs]

I'm starting Locke and Key but if Connor Jessups character is straight..... the lack of flavor that would entail......

[synthjam]

Roli Synthjam #synthjam #roli #synth #rise #blocks #loopblock #liveblock #rza #pack #jamuary #namm2017 #synthesizer #synthesiser #synths #namm #wnamm #wnamm17 #5d @we.are.roli

[uroboros-if]

Your story is so impressive! All aspects from the lore to the writing and the game display are so beautiful!!

I want to ask about the 'look' feature in your game. Like, how to make it? What is the difference in the coding to make it open a separate textbox vs appear new sentences in the current passage? And how to code it for the game to realize that the players have clicked on it and let them continue to the next passage/remember that the players have look at something?

Thank you in advance! And sorry for my bad English 😭

Aww, thank you so much!! ;; I appreciate your kind words!

EDIT: Under the read more shows you how to do it manually, but I have updated the macros so they are MUCH easier to install!!

I made some quick and dirty macros just now if you're interested, so you don't have to do the somewhat ugly way I do it! Here's the itch.io link. Instructs on how to implement are on the page! Password is "looking". You can demo it + download it to see how it works!

The macros I made will probably be more than adequate for most of your needs, though it is limited to having 10 of each of the three different ways you can look at something in one passage (opens a new window of text, reveals some lines of text, or reveals new lines of text with the include macro).

Underneath, I'll go over how I manually do it in Sugarcube—and it's going to be horrible to look at if you try to do it without syntax highlighting in your project. For the sake of this guide, I'll be highlighting it!

Separate textbox

I am going to show you two ways to do this—one, the way I typically do it; two, with Cycy's liveupdate macro (thanks to my friend, Gwen for teaching me this revolutionary way!!!). You'll need:

StoryFormat - SugarCube (need for both ways)

Chapel's Popover macro (need for both ways)

Cycy's liveupdate macro (if you're doing it With Cycy)

With Cycy - easier to understand, but the text replacement (when you click on the link and it gets replaced with new text to show you've already seen it) does not happen smoothly/with a transition.

Without Cycy - harder to understand, but can replace the link with a smooth transition so the text does not instantaneously and abruptly change.

Each guide is going to rehash pretty much the same information as the other way because I'll just assume you haven't read the other way.

With Cycy

Here is an example:

1. LIVEBLOCK. A custom macro from Cycy. Whatever is inside the ((liveblock)) will be updated when ((update)) is called inside of it. We need this because, once a passage is rendered, even if a variable is changed through ((click)) or ((link)), the text will not change to reflect these changes. What Cycy's liveblock macro offers is allowing you to live update the text! All the code we'll be writing will be contained inside liveblock.

2. VARIABLE. You'll need a variable to remember that you've looked at this specific place before, and you're going to have a make a variable everytime you have a looking place like this one. I'm guessing you can use temporary variables (which only apply to one passage) instead if you don't want to clutter your StoryInit with global variables (which apply to the entire IF).

The reason why I make my looking variables global variables is because I want to be able to remember that a player has looked at something to update the codex and/or remember that the player has looked at something, in case we want to check that they've done that in the future. It's also because, if a player goes and looks at their stat page, it may refresh the variable and let players look at the same thing again.

3. IF STATEMENT. Again, a simple if statement to test if a player has seen something won't work on its own, as the text does not update live to reflect the changes—even if you use ((link)) that has a ((set)). However, with Cycy's live update macro, this is actually very relevant. If the player hasn't seen the link, show the link; if the player has, show the text that will replace the link.

4. LOOK SPAN. I want the link for all my "looking" links to be distinct from actual choices, so I wrap (span id="look")...(/span) around the entire ((link)) that is in #5. This span is going to style the link to be a bold, gold color.

Here is how I style my links in my Story Stylesheet (here's a link to the Pastebin):

5. INSIDE THE LINK. Of course, make the ((link)) which the player will click on to look at something. Set the variable that tests if they've looked at it to true, and then call ((update)) to update ((liveblock))'s contents. Next, we will be using Chapel's Popover macro—what this does is "pop over" in a new dialog everything that is inside ((popover)...((/popover)). I specified "noclick" so the players click on an X instead of the screen to exit out. I use the ((include)) macro inside, which is especially useful if the text you're going to be "popping over" is quite long (which my character descriptions are).

Here, I put my closing ((/link)) and then also my closing (/span) for the look span.

6. ELSE — SPAN CLASS LOOKED. Just the same way where I use a (span) to style the link, I use a (span) to style the text that replaced the link. I classed the link with "looked" so that the text that replaced the link is gold, but not bold, and styles normal text instead of links.

Here's how I did it in the Story Stylesheet (also included in the Pastebin already):

Everything that is in ((else)) will be the text that replaces the link to show you've already looked at something. Sometimes I don't want the entire thing to be gold text, just an indicator of where it has changed; so I might only put the (span class="looked") around a part of the text and make the rest of the text normal.

7. ENDING. Close the if statement and close the liveblock.

Without Cycy

Here is an example, ripped straight out of the IF:

The reason I'm showing this way is because if you want to just reveal new lines of text instead of opening up a new window of text, the code for the way I teach you how to do that is basically the same, except you don't use ((popover)).

Also, the text replacement is smoother because the ((replace)) macro we'll be using has the option to use a transition/fade by simply adding "t8n". Cycy's liveupdate macro, when you call ((update)), instantaneously changes the text, which is abrupt.

1. THE IF STATEMENT AND VARIABLE. The if statement tests a variable. If it's true, it will show the link; if it's false, it does not.

This usually does not come into play. When a variable is changed with a link macro, the text does not live-update once the passage is fully rendered. Meaning, even if you click on the link changing $salvatore_looked[0] to true, it won't change the passage. What you'll want instead is the ((replace)) macro that is executed when you click on the link.

So why did I include an if statement anyway? If a player looks into their stat page, which counts as another passage, when they look back at what they were reading, they're able to look at the link again. If you don't care about this, you don't need the if statement—but I'll include it anyway.

2. THE LOOK1 SPAN. The look1 span contains the entire thing, because whatever is inside the span will be replaced when the replace macro is executed. You can call this span anything of course, just make sure the replace macro replaces the specified ID.

3. THE LOOK SPAN. This is actually entirely different from the previous span. The previous span is used by the replace macro to replace everything that it contains; this look span styles the link. If you want the link of your look interaction to look distinct from your other links, you'll want to include a span specifically for this.

Here's a link to the Pastebin of how I style my links in the Story Stylesheet:

4. INSIDE THE LINK, PART 1. Set the variable of the looking variable to true and use the popover macro from Chapel to popover the new screen. I use "noclick" because my popover dialog can be quite long, and I don't want them to accidentally click out of the popover while scrolling. Usually, you click anywhere on the screen to exit; with the "noclick", there is an X button instead.

The popover macro "pops over" in a new dialog everything that is inside it before its closing tag. I use the include macro to include a different passage (optional, but recommended if your popover is going to be long).

5. INSIDE THE LINK, PART 2. Now this is the replace macro. The replace macro I use here replaces everything inside the look1 span with whatever is inside the replace macro's contents. Meaning, what will your link look like after you click on it? The link said "Salvatore" previously, but after clicking on it, I made it so that it still only says "Salvatore" right after.

I used a span class called "looked" to style the text to show that you've clicked on the link before. I did this so that people know where the text has changed. Here's how I did it in the Story Stylesheet (also included in the Pastebin already):

Same color, no font weight, and styles normal text instead of links.

6. ELSE. Of course, if the player has already looked at the link before, you will want to do the same thing you did in Part 5, albeit without the replace. Again, this is only relevant when players can click on a different passage and return to that passage where it can be looked at (e.g. looking at a stat page and then returning).

7. CLOSING TAGS. Make sure to keep organized with your closing tags, there are many here. The looked span should end before the link ends; the look span ends after the link ends; the else statement comes next, with its own span that ends after the last if closing tag. This all sounds confusing on text, so go ahead and just look at the screenshot above.

New sentences in a passage

There is almost no difference if you don't use Cycy's way, except that I don't use the popover macro. You don't have to use the include macro here though, especially if the text that it reveals is minimal. In the case of revealing entire paragraphs or choices, though, I recommend using include.

If you do use with Cycy, I highly recommend looking at the guide "without Cycy". Again, the code is the same, except there is no ((popover))—just ((replace)) with ((include)) inside.

Closing Thoughts

I'm sorry if this guide or the demo on itch.io is a bit scuffed, it's late and I'm rushing to put it out, but I hope it helps! Please let me know if you have any more questions, and again, thank you so much for asking and being interested!! <3

[altblock-tm]

what the fuck is wrong with him does he even know how bananas work

[manonamora-if]

Heyyy! I have a twine sugarcube coding question and I have no eloquent way of asking it so here it is: I want the user to be able to click on a word and a description pops out from underneath and then I want them to be able to re-click that same word and the description is hidden again. sos pls do you know how :) is what im asking even a thing

Hey Veirse!

That's totes possible. And there different ways of going at it (depending on what you want to do with your page, and how far you want the description to appear).

As always, the code below can be found on my PasteBin account.

How To Toggle a Description!

Chapel's Message Macro

The MVP of SugarCube custom macros has something to help: the << message >> macro. It allows you to toggle a part of text by clicking on a link. Click once, it appears. Another time and it disappear. It's pretty much the << linkappend >> macro, but you can hide the text again.

You just need to add the Macro code to the JavaScript, and use the macro as such:

<<message "Clickable Text">> Description Text/Message to appear <</message>>

Note: by adding btn after the "Clickable Text", the links become a button instead.

This method is nice if you want the text to appear just below the link. If you want a working example, check the Drawers section in Scene 1 of CRWL.

CyCy's Liveupdate Fix

Technically, not specific to your case, but still works. I've used it for the toggable menu of Exquisite Cadaver (which uses the Simple Book Template). This method is similar to Chapel's macro, but the toggled text doesn't have to be just below the link.

You can find CyCy's Liveupdate Custom Macro here, just need to add that to your JavaScript. Then it is just a matter of creating a link and some conditions:

<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<else>> <<set $trigger to false>> <</if>> <<update>> <</link>> <<liveblock>> <<if $trigger>>Description Text/Hidden Message<</if>> <</liveblock>>

Note: if you have multiple << liveblock >> on the page, the << update >> macro will trigger them all.

Maliface's On/Trigger Macro

Works like Cycy's but you can target one block rather than all of them. You can find the JavaScript code here, and the manual there. And it goes something like this:

<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<else>> <<set $trigger to false>> <</if>> <<trigger 'blockname'>> <</link>> <<on 'blockname'>> <<if $trigger>> Description Text/Hidden Message<</if>> <</on>>

Note: Chapel's Event Macro uses the same macro name. These two macros cannot be used together, unless the name of one of them is modified in the JavaScritpt (Macroadd line)

Span, Link and Replace

And finally, if you want to go OG Sugarcube Code, here's the thing: using the << replace >> macro. It's essentially Maliface's On/Trigger Macro, but with the Base SugarCube Macros.

I have used this option in TTATEH (asking questions) and La Petite Mort (doing actions).

You will need: a span (div works too) with a defined ID/Class, a link, a conditional statement and the replace macro.

<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<replace "#target" t8n>>Description Text/Hidden Message<</replace>> <<else>> <<set $trigger to false>> <<replace "#target" t8n>><</replace>> <</if>> <</link>> <span id="target"></span>

Notes: the t8n adds a transition effect to make the new block appear. If you want to target a class instead of an idea, change the # into a . and the id into class.

Overall Notes: for all options, aside from Chapel's, you can use a temporary variable (_var) instead of a permanent one ($var).

[thegingerjedi]

wait wait

they just declared their love for each other

and now they’re breaking up?

in the same conversation....

that started, weirdly enough, with Sookie being reasonable and asking Bill not to kill anyone else for her... 

i don’t know what i was expecting.

[deandacosta]

Liveblocks Comments https://t.co/y0AuwsbG8z

http://dlvr.it/SyH1yk

[romeo-oh-nomeo]

Troy is about to lead a Macy's day parade of walkers back, aint he

[parkerlyn]

Please

How do you set pronouns in twine

HOW MY HEAD HURTS HOW DOES IT WORK

Aksksjdks believe me anon I am there with you 😩 (reminder this is all in Sugarcube but-) So I use the cycle function for the initial selection in game for both the player and the ROs (or else a listbox at the very beginning in the ROs case if people select that option. Documentation can be found in the standard Sugarcube docs!). And then to implement the option for changes going forward, I based mine off of @cerberus-writes 's excellent post here!

A caution, most of my notes below make better sense if you've read through that post. And honestly the tl;dr, I would probably recommend just using cer's post because it's an immense help and he explains it much better than I can ajsdkflaj.

Mine's a little different (read: worse), but I use the popover macro (basically dialog box), and then a combination of live update liveblocks and text boxes. I have the textboxes inside a liveblock, and then the live update comes into play mainly with the presets - those are the buttons that set all the player variables to the corresponding choice. The last thing the buttons do is use <<update>> to update how they're displayed in the textboxes above. But I still use cer's method with <<replace>> and the span id with the listboxes for "Plural?" and "Refer to as a..." as part of the preset buttons as well.

Otherwise the "Set Pronouns" button performs an <<update>>, and then closes the dialog box with Dialog.close(). (There should be a way to do this with the popover macro built-in functions, but for some reason just using <<script>>Dialog.close();<</script>> worked better for me)

Good luck and hope that helps!❤️