The undo button

README.md

@@ -24,6 +24,7 @@ If you need a lighter template without any console commands: [inkjs-boilerplate.
   * Auto-recompiling from ink to JSON is not included, though
 * Mobile-ready layout
 * Editable color scheme
+* Undo button (just delete it from HTML code if you don't want it)
 
 ### Compatibility
 Compatible browsers: Chrome >= 60, Firefox >= 60, iOS >= 12, Safari >= 12.

html/index.html

@@ -10,11 +10,14 @@
     <div id="page" class="container">
       <div class="row">
         <div class="col control">
+          <button id="undo" type="button" style="display: none" class="btn btn-secondary">Undo</button>
           <button id="restart" type="button" class="btn btn-warning">Restart</button>
         </div>
       </div>
       <div class="row">
         <div id="content" class="col"></div>
+      </div>
+      <div class="row">
         <div class="col col-md-10 offset-md-1">
           <ul id="options">
           </ul>

js/script.js

@@ -6,13 +6,11 @@ const inkjs = require('inkjs').Story;
  */
 const entryPoint = 'game/fogg.ink.json';
 
-let continueToNextChoice, displayText, loadGame, saveChoice, s;
-
 /**
  * You can change this function.
  * It's an easy way to define your own tags and text transformations.
  */
-transform = function(text) {
+function transform (text) {
   text = text.replace('<st>', '<span class="subtitle">');
   text = text.replace('</st>', '</span>');
   return text;
@@ -21,16 +19,16 @@ transform = function(text) {
 /**
  * You don't need to change anything past this point.
  */
-saveChoice = function(index) {
+function saveChoice(index) {
   window.progress.push(index);
   return localStorage.setItem("progress", JSON.stringify(window.progress));
 };
 
-displayText = function(s, interactive = true) {
+function displayText(interactive = true) {
   let block, delay, html, i, paragraphs, results;
   results = [];
-  while (s.canContinue) {
-    paragraphs = s.Continue().split("\n");
+  while (window.s.canContinue) {
+    paragraphs = window.s.Continue().split("\n");
     if (interactive) {
       delay = 1000;
     }
@@ -63,13 +61,13 @@ displayText = function(s, interactive = true) {
   return results;
 };
 
-continueToNextChoice = function(s) {
+function continueToNextChoice () {
   let choice, j, len, ref, scrollTo;
-  displayText(s, true);
+  displayText(true);
   scrollTo = jQuery('#options').offset().top;
   if (s.currentChoices.length > 0) {
     jQuery("#options").html("").hide();
-    ref = s.currentChoices;
+    ref = window.s.currentChoices;
     for (j = 0, len = ref.length; j < len; j++) {
       choice = ref[j];
       let text = transform(choice.text)
@@ -87,14 +85,20 @@ continueToNextChoice = function(s) {
   }
 };
 
-loadGame = function(s) {
+function loadGame () {
   let index, j, len, ref, results;
+  document.getElementById("content").innerHTML = ""
+  document.getElementById("options").innerHTML = ""
   ref = window.progress;
   results = [];
-  for (j = 0, len = ref.length; j < len; j++) {
-    index = ref[j];
-    displayText(s, false);
-    results.push(s.ChooseChoiceIndex(index));
+  if (ref.length > 0) {
+    for (j = 0, len = ref.length; j < len; j++) {
+      index = ref[j];
+      displayText(false);
+      results.push(window.s.ChooseChoiceIndex(index));
+    }
+  } else {
+    continueToNextChoice(window.s);
   }
   return results;
 };
@@ -110,11 +114,11 @@ jQuery.ajax({
     } else {
       window.progress = [];
     }
-    s = new inkjs(data);
+    window.s = new inkjs(data)
     if (window.progress !== []) {
-      loadGame(s);
+      loadGame(window.s);
     }
-    return continueToNextChoice(s);
+    return continueToNextChoice(window.s);
   }
 });
 
@@ -123,8 +127,16 @@ jQuery(document).on('click', "#restart", function() {
   window.location.reload();
 });
 
+jQuery(document).on('click', "#undo", function() {
+  jQuery("#undo").hide();
+  window.progress.pop()
+  localStorage.setItem("progress", JSON.stringify(window.progress));
+  window.location.reload();
+});
+
 function choose(index) {
-  s.ChooseChoiceIndex(index);
+  window.s.ChooseChoiceIndex(index);
+  jQuery("#undo").show()
   saveChoice(index);
   continueToNextChoice(s);
 }