I looked around but I couldn't see a way of going back to a previous section so I implemented something myself that adds a Go Back link to every page (except the first). This is more of an issue for people who want each page to be separate (using @clear) instead of scrolling.
All feedback is welcome, especially if someone knows an easier way to do the same thing.
@title New Game
Here is the beginning.
[[page1]]
[[]]:
@clear
//some useful code we put in functions
//so we can reuse it when we need it
//return the history list from storage
function getHistory(){
//load history list from storage
var history = squiffy.get('history');
if (!history) {
//if there isn't one already, create it
history = [];
//save history to storage
squiffy.set('history', history);
}
return history;
}
//go to the previous place in our history list
function goBack() {
//get history
var history = getHistory();
//remove the current section from history
history.pop();
//remove the previous section from history
//and put it in a variable
var sectionid = history.pop();
//save history to storage
squiffy.set('history', history);
//go to previous section
squiffy.story.go(sectionid)
}
//make this function visible to "onlick" links
window.goBack = goBack;
// get history list from storage
var history = getHistory();
if (history.length > 0) {
//if the history list is longer than one section
//then show the "go back" link
squiffy.ui.write(
'<a href="#" onclick="window.goBack()">Go back</a>');
}
//add the current section in the history list
history.push(get('_section'));
//save the history list in storage
squiffy.set('history', history);
This is section {_section}
[[inventory]]
[[page1]]:
Go to [[page2]]
[[page2]]:
Go to [[page3]]
[[page3]]:
Go to [[page4]]
[[page4]]:
[[inventory]]:
Inventory
Thanks. Hopefully it's useful just to show working code for those that want to do more JavaScript.
The documentation is very, uh, brief.
Here's a slightly different approach. In this case you don't want to have a goBack available on every page. Only those that need it. But say you had an inventory page that you wanted to be able to access from anywhere. Furthermore that inventory links to a map section that you can also read. In that case it would be useful to be able to return from the map back to the inventory and from the inventory back to the page you were originally on.
@title New Game
Here is the beginning.
[[page1]]
[[]]:
@clear
//some useful code we put in functions
//so we can reuse it when we need it
//return the history list from storage
function getHistory(){
//load history list from storage
var history = squiffy.get('history');
if (!history) {
//if there isn't one already, create it
history = [];
//save history to storage
squiffy.set('history', history);
}
return history;
}
//go to the previous place in our history list
function goBack() {
var history = getHistory();
//remove the current section from history
history.pop();
//remove the previous section from history
//and put it in a variable
var sectionid = history.pop();
//save history to storage
squiffy.set('history', history);
//go to previous section
squiffy.story.go(sectionid)
}
function sectionLink(sectionid, linkname) {
var history = getHistory();
//look in history list for sectionid
//if not found, indeOf function returns -1
if (history.indexOf(sectionid) == -1) {
//sectionid not in history
squiffy.ui.write(
'<a href="#" onclick="squiffy.story.go(\'' +
sectionid +
'\')">' +
linkname +
'</a>'
);
}
}
//make squiffy visible to onclick links
window.squiffy = squiffy;
//make this function visible to "onlick" links
window.goBack = goBack;
// get history list from storage
var history = getHistory();
var section = get('_section');
//add the current section in the history list
history.push(section);
//save the history list in storage
squiffy.set('history', history);
sectionLink('inventory', 'Inventory');
[[page1]]:
Go to [[page2]]
[[page2]]:
Go to [[page3]]
[[page3]]:
Go to [[page4]]
[[page4]]:
[[inventory]]:
Inventory
[[map]]
Sunglasses<br>{if seen ch1.detectivefiles1: [[Case file: Simon Bresic]](ch1.readFile)}
<br><br>
<a href="#" onclick="window.goBack()">Go back!</a><br>
[[map]]:
Reading the map
<br><br>
<a href="#" onclick="window.goBack()">Go back!</a><br>