[Solved] How to list all previous passages + current title with anchor link?

Question

Hi all,

Sugarcube 2 here. Can you kind point me on how to implement this further by adding also link to passages? Maybe a reference to the doc would be also great, as I couldn't find it. 

<<print "<ul><li><a href=\"urlHere\">" + State.passages.join("</a></li><li><a href=\"urlHere\">")+ "</a></li></ul>">>

 Much appreciated. Thanks

Answer 1

What are you attempting to accomplish with this?  If you're simply attempting to allow the player to revisit passages they've previously played, then something like what you're attempting will work.  If you're attempting to allow the player to navigate the actual moments they player, then that will not work at all.

Still, here's an example of what you asked for:

<<print '<ul>' + State.passages.map(function (name) {
	return '<li><a data-passage="' + name + '">' + name + '</a></li>';
}).join('') + '</ul>'>>

 

Comments

Thank you for your hint, that's working ok except the fact that they keep repeating the full list over and over again - if you click on those links generated by the above code. Instead, they should bring you to a previous passage in the list, and once there, show only the previous and the current passages related to the old passage clicked. Not showing all duplicated passages. 

Maybe we should integrate the following to your suggestion?

Engine.backward()

or/and

Engine.forward()

  

---

You didn't answer or even seem to consider the question I posed in my answer.

If you want to allow the player to navigate already played moments within the story history, which is definitely what it sounds like at this point, then what you're attempting is not going to work.

Allowing the player to arbitrarily jump around the history is possible, but is not as simple as what you were attempting and I want to make sure that's what you actually want before spending time writing up an example.

---

You are right, my attempt is to let the user navigate through his history, by serving him an unordered list of clickable previous + current passages.

Sorry for my bad explanation and many thanks for your support

---

I'll try to get an example/solution out for you sometime today.  Unfortunately, I have to leave for a clinic visit soon and I don't know how I'll be feeling afterwards, so getting back to this may slip into tomorrow.

---

The following example macro outputs an unordered list of links which will take the player to the associated moment within the history.

JavaScript: (goes in Story JavaScript)

Macro.add('historylist', {
	skipArgs : true,
	handler  : function () {
		if (State.length < 2) {
			return;
		}

		// Custom debug view setup.
		if (Config.debug) {
			this.debugView.modes({ block : true });
		}

		var moments = State.history.slice(0, State.activeIndex);
		var list    = document.createElement('ul');

		moments.forEach(function (m, i) {
			jQuery(document.createElement('li'))
				.append(
					jQuery(document.createElement('a'))
						.ariaClick({ one : true }, function () {
							Engine.goTo(i);
						})
						.text(m.title)
				)
				.appendTo(list);
		});

		this.output.appendChild(list);
	}
});

Usage:

<<historylist>>

 

---

Thank you for sharing this, seems working okpexceot for the names applied to links, as the name of link is not consistent with the name of passage. Am I see it correclty?

thanks

---

What do you mean not consistent?  The text for each link is the moment's associated passage's name/title.

EDIT: If you mean that the list seems off by one, that would be because moments only go into the history after they've been played (i.e. after the player has moved on to a new moment).

---

The latest link missing in the list is fine, as you said the script considers only history passages. Never mind, in my previous comment I mistook the missing latest passage link as whole inconsistency. My mistake. 

I think this script/macro could be also useful also for others Sucarcube users, so thank you very much. Here's a little customization of this macro, in order to add custom css classes to each list elements:

Macro.add('historylist', {
    skipArgs: true,
    handler: function() {
        if (State.length < 2) {
            return;
        } // Custom debug view setup. 
        if (Config.debug) {
            this.debugView.modes({
                block: true
            });
        }
        var moments = State.history.slice(0, State.activeIndex);
        var ul = document.createElement('ul');
        ul.className = 'css class for ul';
        moments.forEach(function(m, i) {
        	var li = document.createElement('li');
        	li.className = 'css class for li';
        	var a = document.createElement('a');
        	a.className = 'css class for anchor';
            jQuery(li).append(jQuery(a).ariaClick({
                one: true
            }, (function(idx) {
                return function() {
                    Engine.goTo(idx);
                };
            })(i)).text(m.title)).appendTo(ul);
        });
        this.output.appendChild(ul);
    }
});

 

Answer 2

You could add a "bookmark" tag to any passage that you want them to be able to jump back to.  That will add a "Jump To" button to the navigation bar so they can jump back to any bookmarked passage they've been to earlier.

Comments

Unfortunately this approach won't work because I am using a custom user interface, therefore I have to add manually all the functionality, and the "jump to" button will not appear automatically.

I am still in a trial 'n error with the code, I think the direction proposed by TheMadExile is very close to working