Twinery sidebar stats

proof.txt

Simple sidebar


The beginning
=============

(set: $money to 500)

You came to the lake and have some money with you. Stamina is irrelevant right now.

Go out to the [[road]]


road
====

(set: $stamina to 100)
(set: $fear to 20)

Stamina and fear are set in this passage, but only stamina is displayed, per configuration.

[[Go to the woods]]


Go to the woods
===============

(set: $stamina to $stamina - 20)
(set: $fear to $fear + 20)

You went to the woods and lost some stamina. Your fear got up but it is still not displayed.

The end :D

twine.css

#sidebar {
  font-size: 14px;
  line-height: 1.5em;
}

.sidebar.label {
  text-align: left;
  float: left;
  width: 100%;
  text-transform: capitalize;
}

.sidebar.label:after {
  content: ": ";
}

.sidebar.value {
  font-weight: bold;
  text-align: right;
  float: right;
}

.sidebar.value.money:before {
  content: "$";
  font-weight: bold;
}

twine.js

/* Twine sidebar
 *
 * created by Avram, www.avramovic.info
 */

if (!window.harlowe){
	window.harlowe = {"State": State};
	window.harlowe.stats = {"money": 0, "stamina": false}; // <- this is all you need to change
	window.harlowe.oldValues = '';
}

window.setInterval(function() {
	if ($('#sidebar').length == 0) {
		$('tw-sidebar').append('<div id="sidebar"></div>');
	}
	
	var html = '';
	var newValues = '';
  
	for (var item in window.harlowe.stats) {
		var defaultValue = window.harlowe.stats[item];
		var hasItem = typeof window.harlowe.State.variables[item] !== "undefined";				
		if (hasItem || defaultValue !== false) {
			var value = hasItem ? window.harlowe.State.variables[item] : defaultValue;
			newValues += ""+value;
			html += '<div class="sidebar item '+item+'"><span class="sidebar label '+item+'">'+item+'</span><span class="sidebar value '+item+'">'+value+'</span>';	
		}		
	}
	
	if (window.harlowe.oldValues != newValues) {
		window.harlowe.oldValues = newValues;
		$('#sidebar').html(html);
	}
}, 500);