(Sugarcube) Apply html code on every passage.

Comments

• yun

  March 2016

  In Sugarcane, StoryMenu does this. But not in Sugarcube, I'm afraid.
  You can do smth like this in prerender function:

  prerender['runBeforeTheNextPassage'] = function () {
  new Wikifier(document.createElement('div'), 'your html code here');
  };
  
• Rho

  March 2016 edited March 2016

  yun wrote: »

  In Sugarcane, StoryMenu does this. But not in Sugarcube, I'm afraid.
  You can do smth like this in prerender function:

  prerender['runBeforeTheNextPassage'] = function () {
  new Wikifier(document.createElement('div'), 'your html code here');
  };
  

  
  My Twine lets me choose between harlowe, snowman and sugarcube. Didn't know that there was something called sugarcane so thanks for telling; I will look up on that. And thanks for the code. Altough I didn't work at first I found, I googled sometime, and found an other piece of code that worked. It's is shorter and seems kinda less trustworthy because of that than your code. But I'm not an experienced programmer so I don't know if it'll give problems later on the line, but it works for now.
  

  $('body').prepend('htmlcode');
  

  
  Edit: Alright the code I found does not really work. The variables don't apply so maybe I should do some more googling.
• Rho

  March 2016

  Anyone know why I can't put a simple var x in the htmlcode of the $('body').prepend('htmlcode') ? I tried document.write and I tried <script>.
• JordanMagnuson

  March 2016

  Did you try putting that code in your StoryInit passage?
  
  I have the following in my StoryInit and it works just fine:
  

  $('body').prepend('<div id="mydiv"></div>');
  

  
  
  
• greyelf

  March 2016 edited March 2016

  note: Sugarcane is a Twine 1 story format, it does not exist in Twine 2
  
  SugarCube 1 supports a Special Passage named StoryCaption which can be used to display content within SugarCube's own side-bar. To use it simple name one of your story's passages StoryCaption and place your code inside it, that code will now appear on every page.
• Rho

  March 2016

  greyelf wrote: »

  note: Sugarcane is a Twine 1 story format, it does not exist in Twine 2
  
  SugarCube 1 supports a Special Passage named StoryCaption which can be used to display content within SugarCube's own side-bar. To use it simple name one of your story's passages StoryCaption and place your code inside it, that code will now appear on every page.

  
  Getting stuff into the pre programmed sidebar to the left wasn't a problem. (Altough I called it StoryMenu. ) Creating a new sidebar on the right however...
  
• greyelf

  March 2016

  By default SugarCube only automatically updates visible areas it controls (like .passage, #ui-bar, etc...) so if you add your own new visible area (side-bar) outside one of the controlled ones then you will need to manually keep it up to date yourself, how much effect that takes depends on how you implement that new area and what that new area does.
  
  The following is one method of adding a very simple visible area to a story, it will appear at the bottom of the screen but you could use CSS to reposition it to the right side of the screen instead.
  
  1. Add the new visible area to the story:
  Place the following within your Story Javascript area, it will create a new visible area with an ID of right-side-bar.

  $('<div id="right-side-bar"></div>').appendTo(document.body);
  

  2. [optional] Variable used to test the new visible area:
  Place the following within your story's StoryInit passage, it will initializes two variables which used to demonstrate that values shown in the new area can be changed.

  <<set $name to "ABCD">>
  <<set $health to 100>>
  

  3. Create a passage who's content will be displayed in the new area, I am naming it Right Sidebar and it will display the current values of the two variables defined in StoryInit

  <hr>
  The players name is $name
  Their health is $health
  

  4. Use a PassageDone special passage to display the above contents in the new visible area:

  <<replace "#right-side-bar">><<display "Right Sidebar">><</replace>>
  

  
  If you change the value of one of the variables within a passage then you should see the contents of the new area also change.

  <<set $health to 50>>
  
• Rho

  March 2016

  greyelf wrote: »

  By default SugarCube only automatically updates visible areas it controls (like .passage, #ui-bar, etc...) so if you add your own new visible area (side-bar) outside one of the controlled ones then you will need to manually keep it up to date yourself, how much effect that takes depends on how you implement that new area and what that new area does.
  
  The following is one method of adding a very simple visible area to a story, it will appear at the bottom of the screen but you could use CSS to reposition it to the right side of the screen instead.

  
  Greyelf, you are bloody awesome. Much thanks!