Howdy, Stranger!

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

Help with some noob stuff

So I have a few questions that I need help with.
I'm using sugarcube 2.18 and I want to add a box to the sidebar (like the default save and restart) with all the possible endings, and you'll be able to see it when you unlock it. So is there a way to add boxes on the sidebar and make the last passage show up in the sidebar like "Ending 1" and with a desiption of it.

I also want to show a picture when you hover over text but I can only find the reverse, I know it's possible because I've seen it but not sure how to do it.

I also want to have the money you have show up in the sidebar but not sure on the best way to go about it, now I'm putting <<set $money = 100>> on the storycaption and <<print $money>> to show it and <<set $money = $money+20>> or whatever but it just shows the number. If I make it text like <<set $money = "100$">> it doesn't add or subtract when I want it to.

I'd really appriciate it if someone could answer.

Comments

  • You can add links to the StoryMenu special passage and use <<if>> macros to conditionally show them:
    ::StoryMenu
    <<if visited('ending1')>>
      [[See ending 1.|ending1]]
    <</if>>
    

    I can't tell if that's exactly what you mean, though.

    For the StoryCaption question, try something like:
    <<print 'Money: $' + $money>>
    

    That should work. I can't test it right now.

  • qwasil wrote: »
    So is there a way to add boxes on the sidebar and make the last passage show up in the sidebar like "Ending 1" and with a desiption of it.
    If you want a link to the ending passage, then as suggested by Chapel, you could place links to the within the StoryMenu special passage—though that will only get you a link.

    If having a description of each ending is also important, then you're probably better off making an "endings" passage, which will show all of the unlocked endings, and merely placing a link to that in StoryMenu.

    For example, in StoryMenu:
    [[Endings]]
    

    And in the Endings passage:
    <<if hasVisited("ending1passage")>>
    !![[Ending 1: Another hole in the wall|ending1passage]]
    Ending 1 description.
    <</if>>
    <<if hasVisited("ending2passage")>>
    !![[Ending 2: Heir to the throne… of glass|ending2passage]]
    Ending 2 description.
    <</if>>
    
    Etc.
    
    <<return>>
    

    Either way, I'd suggest using the hasVisited() function in this case, rather than visited()—suggested by Chapel—as it's more efficient for what you're using it for.

    qwasil wrote: »
    I also want to show a picture when you hover over text but I can only find the reverse, I know it's possible because I've seen it but not sure how to do it.
    Unless the images you have in mind are fairly small, that's likely not going to work out very well. Can you provide more details about what exactly you're looking to do?

    qwasil wrote: »
    I also want to have the money you have show up in the sidebar but not sure on the best way to go about it, now I'm putting <<set $money = 100>> on the storycaption and <<print $money>> to show it and <<set $money = $money+20>> or whatever but it just shows the number. If I make it text like <<set $money = "100$">> it doesn't add or subtract when I want it to.
    You almost never want to put initializations in StoryCaption, since it's refreshed every turn. You should do variable initialization in the StoryInit special passage.

    In StoryInit:
    <<set $money = 100>>
    

    In StoryCaption—any of the following will work, pick one:
    $$$money
    $<<= $money>>
    <<= '$'>>$money
    <<= '$' + $money>>
    
    The first works by using the double dollar-sign markup ($$), which produces a literal dollar-sign in the output, immediately followed by the story variable $money, which via the naked variable markup prints its value. The latter three all make use of the <<print>> macro—specifically, the <<=>> alias—to render the literal dollar-sign you want separately from the value of $money.

    As noted, all four will do what you want, simply pick one. I'd recommend the first.
  • Thanks for the answer, it really helped :)

    Unless the images you have in mind are fairly small, that's likely not going to work out very well. Can you provide more details about what exactly you're looking to do?

    Well I want to as an example have the word "tree" in the text and if you hover over it with the mouse it shows a picture of a tree, the size isn't that big so that shouldn't be a problem, if it doesn't work I could just put a picture below the text or make a link i guess, thanks again for your help.
  • Sorry. Got wrapped up elsewhere and kind of forgot about this.

    Since the forums are supposed to be closing soon—tomorrow (July 15)—you may want to shift the image flyout question to the Q&A section of this website.
  • You may end up wanting/needing to use a JavaScript based solution if you really want to do this, or simply do something else as you've already mentioned.

    That said, you could try this CSS based method.

    Styles (Twine 2: goes in Story Stylesheet; Twine 1: goes in stylesheet-tagged passage)
    /*
    	Image popout general setup.
    */
    .imgpop {
    	position: relative;
    }
    .imgpop:hover::after {
    	position: absolute;
    	left: 0;
    	top: 1.25em;
    	z-index: 100;
    }
    /*
    	Image popout image setup.
    */
    .cloud.imgpop:hover::after {
    	content: url('images/cloud.jpg');
    }
    .dog.imgpop:hover::after {
    	content: url('images/dog.jpg');
    }
    .tree.imgpop:hover::after {
    	content: url('images/tree.jpg');
    }
    

    Usage
    Using HTML markup:
    Here I sit, underneath the <span class="imgpop tree">old oak tree</span> with my <span class="imgpop dog">dog</span>, watching <span class="imgpop cloud">clouds</span> on the horizon.
    
    Using the custom styles markup:
    @.imgpop.tree;old oak tree@@.imgpop.dog;dog@@.imgpop.cloud;clouds@@ on the horizon.
    
Sign In or Register to comment.