›

Howdy, Stranger!

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

Sign In Register

Categories

How do I edit the Sidebar in Sugarcube?

Woodster1Woodster1
in Help! with 2.0
I'm making a sports game so I want the sidebar to display the roster

How do I edit the sidebar to display that?

Comments

  • GoblinSpaceWizardGoblinSpaceWizard
    Make a passage called StoryCaption. Anything you put in that passage will appear in the sidebar beneath the title and author.

    If you want to hide the normal sidebar elements and just show your roster, you can do so by putting this in the story CSS:
    #title, #menu, #ui-bar-tray {
	display: none;
}
  • Woodster1Woodster1
    Thanks for your help. What would the CSS for StoryCaption? I tried putting it in as #Storycaption, { but it wouldn't work
  • TheMadExileTheMadExile
    edited April 2017
    If you're asking where styles targeting the element go, into your project's Story Stylesheet, as with all of your styles.

    If you're asking how to target the element, it has the ID story-caption, so its selector is #story-caption. For example: 
    #story-caption {
	/* Style properties for the #story-caption element itself. */
}
#story-caption a {
	/* Style properties for <a> elements within the #story-caption element. */
}


    TIP: All DOM/CSS IDs and class names in SugarCube use kebab case with all lowercase letters.
  • Woodster1Woodster1
    Thank you. I'm a huge twine noob. If I am trying to say Position 1 - Player A would I type it out as

    #story-caption {
    /*Position 1 - Player A
    }

    or would it be something else?

    Also, I don't want the roster to be displayed on every screen and the roster will be constantly changing so I wouldn't want to enter it into the story stylesheet
  • greyelfgreyelf
    The StoryCaption special passage works similar to the other passages in your story except it's content is displayed in the left side-bar instead of the main passage area.

    eg. if you added the following text to the StoryCaption passage then it would appear in the side-bar: 
    Position 1 - Player A
Position 2 - Player B

    You can use CSS in the Story Stylesheet area to style how the contents of the StoryCaption passage look when displayed.

    Without knowing exactly how you are storing the information about the roster and how to know when to display it or not, it is difficult to give you a definite answer.

    eg. If you are using an Array like the following to store the roster: 
    <<set $roster to ["Player A", "Player B", "Player C"]>>
    ... then you could use code like the following in StoryCaption to display it. 
    <<for _i to 0, _len to $roster.length; _i lt _len; _i++>>
	<<print "Position " + (_i + 1) + " - " + $roster[_i]>>
<</for>>
  • Woodster1Woodster1
    How would I access the StoryCaption passage? I entered in the code you gave me for Array but it doesn't appear in the sidebar even when I enter the story-caption variable

    I was planning of manually entering the roster in each passage so I don't really have a plan for storage, I more just wanted to be able to have the names presented on the sidebar

    Thanks for your help also I really appreciate it
  • greyelfgreyelf
    Woodster1 wrote: »
    How would I access the StoryCaption passage?
    I linked to the section of the documentation related to special passages, you simply create a passage in your story with a name of StoryCaption and any content you place in this passage will appear in the side-bar.
  • Woodster1Woodster1
    Thanks I got it to work. I only have two more questions

    First, how would I let my roster not show on the sidebar despite using the StoryCaption passage. I tried using the CSS that was given above but that didn't work

    Second, since my roster will be constantly changing, what would I need to do to change the StoryCaption sidebar? For example, Player A gets traded for Player C how would I remove Player A with Player C but keep the rest of the roster intact?
  • greyelfgreyelf
    Woodster1 wrote: »
    ...how would I let my roster not show on the sidebar...
    The simplest method would be to wrap the code being used to display the roster in an <<if>> macro, what you use as the conditional_expression depends largely on how you are deciding when to show the roster or not.

    eg. you could be planning to use a $variable to control when it is displayed, or maybe you plan to use a passage tag to indicate which Passages have a roster.

    Without knowing details like this we can only give generic answers, but basically assuming you are using an Array to store the current roster then the contents of the StoryCaption passage could look something like: 
    <<if conditional_expression>>
<<for _i to 0, _len to $roster.length; _i lt _len; _i++>>
	<<print "Position " + (_i + 1) + " - " + $roster[_i]>>
<</for>>
<</if>>
    ... where conditional_expression is replaced with the actual conditional expression you are planing to use to determine when the roster should be displayed or not.

    Woodster1 wrote: »
    what would I need to do to change...
    If you decided to use an Array to store the current roster then you can use SugarCube's <Array>.delete() function to remove players from the array, and Javascript's push() method to add a player.

    eg. Assuming you have a $roster array variable, the following shows how to delete and add a player. 
    <<set $roster to ["Player A", "Player B", "Player C"]>>

current roster: <<print $roster>>

<<run $roster.delete("Player B")>>

roster after player deleted: <<print $roster>>

<<run $roster.push("Player D")>>

roster after player added: <<print $roster>>
  • Woodster1Woodster1
    Thanks for all your help. I'll give it a try
Sign In or Register to comment.