Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Harlowe: create rotating Click event? Also: page transition & font questions.

Hi guys, I'm a semi-veteran user of Twine 1.x, which I've used to pretty good effect for storyboard prototyping in the past.  I'm messing around a bit with the new web-based system and finding a lot to like, though some of it is somehow more confusing than the old, less natural-language markup code...

Anyway, I'm wondering if it's possible to create an on-click event that loops between two or more states.  I've managed to create a sort of hacky version that progresses through a couple of states, but then stops being clickable once all the events have been used.
::Testbox
The box is [closed.]<tag1| (click-replace: ?tag1)[closed.] (click-replace: ?tag1)[(set: $cookie += 1)open!

You find a cookie inside.]

You have $cookie desserts with you.

The box is (link: "closed.")[(set: $cookie += 1)(link: "open!

You find a cookie inside.")[(transition: "none")(goto: "testbox")]]
So with this model, I'm noticing that raw variable displays don't change on click events, though they are capable of setting variables.  I added the goto: to the link version to refresh the page and noted that the cookie counter works with that setup, so I'm inferring that the page has to be re-rendered to display any changes to variables.  If that is the case, how do you get a page transition without the usual fade-in, or indeed any transition at all if possible?  I've tried putting (transition: "none") in with the goto: link, but it doesn't seem to work there.  Ideally, I'd like the immediacy of the click version with endless, circular clickability, if that makes sense.

Also, how do you change the font size?  The default font rendering is nice and huge and friendly and so on, but it's just a little too big for my tastes.  There's no (font-size:) macro as far as I can find, and I can't seem to get CSS selectors with font-size properties to work either.  It's entirely possible I'm just doing it wrong, though; I'm not very good with CSS.

I have this class in my "Story Stylesheet":
pl {
color: purple;
}

80pct {
font-size: 80%;
}

.80pct {
font-size: 80%;
}

#80pct {
font-size: 80%;
}

12pt {
font-size: 12pt;
}

10pt {
font-size: 10pt;
}
And this in a passage:
<80pct>I don't the font size can be changed this way.</80pct>

<span class="80pct">This text should be slightly smaller.</span>
<div class="80pct">This text should also be slightly smaller.</div>
<class="80pct">It doesn't seem to work though.</class>

<span ID="80pct">This text should be slightly smaller.</span>
<div ID="80pct">This text should also be slightly smaller.</div>
<ID="80pct">It doesn't seem to work though.</ID>

<12pt>is this 12-pt font?</12pt>
<10pt>this should be 10pt</10pt>

<pl>colors work fine though</pl>

All of those are the same size, though the <pl> marked one is indeed purple.  Am I doing it wrong, or is this just somehow not supported?

Comments

  • For the second, since I have less to say on it: have you tried using 0.8em instead of 80%?

    So, for the first, to answer your direct question, you can use (transition: instant) to make things display instantly, but you can't override the built-in transition effect for passage loading.

    However, two things. One, you can do the following to make $cookie change on click:
    ::Testbox
    The box is [closed.]<tag1| (click: ?tag1)[{
    (set: $cookie += 1)
    (replace: ?tag2)[$cookie]
    }(replace: ?tag1)[open!

    You find a cookie inside.]

    You have [$cookie]<tag2| desserts with you.
    Two, having a link loop between two states is pretty much what I was doing here, so check that out for the method I got working.
  • @chintznibbles

    [quote]
    You have $cookie desserts with you.


    When the story format's javascript engine processes the current passage's content to generate the current page's HTML and it finds a variable like the one above what it does is replace the $cookie variable in the line with the variable's current value.

    This why when you updated the value of the $cookie variable within your (click:) macro the above line did not change.
  • Thanks for the replies! 

    I figured out the problem with the font size: apparently you can't use CSS selectors that start with numbers. <pct80> and <twelvept> work, but not <80pct> and <12pt>.  I'm not sure if I missed this in the documentation somewhere or it's an industry standard thing I just don't know due to my CSS-noob status, though number-starting selectors do seem to work on other web formats.

    @greyelf
    Thanks for confirming that, I had a feeling that was the case. 

    @InspectorCaracal
    Oh, that's interesting.  I hadn't really considered stacking tags like that.  The reusable hooks thing is also pretty intriguing.  I've used a lot of display macros in the old twine format to dynamically create pages, so I'll have to see if I can get something like that working in this version.
Sign In or Register to comment.