Text container box at the bottom for a dungeon crawler? (Sugarcube)

Question

I'm currently trying this method I found https://www.w3schools.com/css/css_boxmodel.asp But I get boxes everywhere. I'm inserting it like this in stylesheet:

div {
  background-color: lightgrey;
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

Answer 1

To add a new sidebar or the like (something that can be seen in every passage) you have to add it via your javascript section. First make sure to specify where on tje screen you want your new div to appear by specifying the gap to the left/right/top/bottom. For example:

#dialogue-bar {
	position: fixed;
	z-index: 50;
  	background-color: rgba(0, 0, 0, 0.5);
	border: #fff double 0.4em;
	height: 10em;
	right: 0.25em;
	left: 18em;
  	bottom: 0.25em;
	padding: 1em;
}

Add it to JavaScript like this:

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

To add content to the new element you can use <<replace>>. If I have a passage called "Dialogue" for example, I can put the entire passage into the new box like this:

<<replace "#dialogue-bar">><<display "Dialogue">><</replace>>

 

If you just want your div to appear in certain passages/places or appear multiple times in the same passage, you can instead create a class. In you CSS stylesheet you'd say something like:

.mydiv {
  background-color: lightgrey;
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

Then call it in your passage like this:

<div class="mydiv">This is the divs content</div>

 

Comments

@Sólomon

If you want the above new dialogue-bar area to be automatically updated each time the Reader transitions to a new passage then you can use the setPageElement() function combined with the :passagerender event to do this.

Add the following code to your project's Story Javascript area, ideally this code should be placed after the JavaScript supplied by @idling.

/* Automatically show the contents of the StoryTime passage in the time-ui-bar-body element. */
$(document).on(':passagerender', function (ev) {
	setPageElement('dialogue-bar', 'Dialogue');
});

Now you will only need to use @idling's <<replace>> macro example if you want to dynamically update the new dialogue-bar area from within the current passage.

eg. after the Reader selects a link that doesn't cause a Passage Transition but does change a value being shown in that area.

Answer 2

What's a Dungeon Crawler?

Comments

Wikipedia: Dungeon Crawl