scratchy/js/script.js

import jQuery from 'jquery'
const inkjs = require('inkjs').Story;
/**
 * Path to your game's compiled JSON.
 * It is relative to index.html file.
 */
const entryPoint = 'game/game.ink.json';

/**
 * You can change this function.
 * It's an easy way to define your own tags and text transformations.
 */
function transform (text) {
  text = text.replace('<st>', '<span class="subtitle">');
  text = text.replace('</st>', '</span>');
  text = text.replace('<ell>', '<span class="ellipsis">⏸️&nbsp;</span>');
  return text;
}

/**
 * You don't need to change anything past this point.
 */
function saveChoice(index) {
  window.progress.push(index);
  return localStorage.setItem("progress", JSON.stringify(window.progress));
};

function displayText(interactive = true) {
  let block, delay, html, i, paragraphs, results;
  results = [];
  while (window.s.canContinue) {
    paragraphs = window.s.Continue().split("\n");
    if (interactive) {
      delay = 1000;
    }
    results.push((function() {
      let j, len, results1;
      results1 = [];
      for (j = 0, len = paragraphs.length; j < len; j++) {
        i = paragraphs[j];
        if (i !== "") {
          i = transform(i);
          html = jQuery.parseHTML(i);
          block = jQuery('<p>').html(html);
          if (interactive) {
            block.hide();
          }
          jQuery("#content").append(block);
          if (interactive) {
            block.fadeIn(delay);
            results1.push(delay += 500);
          } else {
            results1.push(void 0);
          }
        } else {
          results1.push(void 0);
        }
      }
      return results1;
    })());
  }
  return results;
};

function continueToNextChoice () {
  let choice, j, len, ref, scrollTo;
  displayText(true);
  scrollTo = jQuery('#options').offset().top;
  if (s.currentChoices.length > 0) {
    jQuery("#options").html("").hide();
    ref = window.s.currentChoices;
    for (j = 0, len = ref.length; j < len; j++) {
      choice = ref[j];
      let text = transform(choice.text)
      jQuery("#options").append(`<li><a href='#' id='choice-${choice.index}' data-index=${choice.index}>${text}</a></li>`);
    }
    jQuery("#options").fadeIn(500);
  } else {
    jQuery("#content").append("<p>THE END</p>");
    jQuery("#options").html("");
  }
  if (window.progress.length > 0) {
    return jQuery('html, body').animate({
      scrollTop: scrollTo
    }, 800);
  }
};

function loadGame () {
  let index, j, len, ref, results;
  document.getElementById("content").innerHTML = ""
  document.getElementById("options").innerHTML = ""
  ref = window.progress;
  results = [];
  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;
};

jQuery.ajax({
  url: entryPoint,
  dataType: 'text',
  success: function(data) {
    let progress;
    progress = localStorage.getItem("progress");
    if (progress != null) {
      window.progress = JSON.parse(progress);
    } else {
      window.progress = [];
    }
    window.s = new inkjs(data)
    if (window.progress !== []) {
      loadGame(window.s);
    }
    return continueToNextChoice(window.s);
  }
});

jQuery(document).on('click', "#restart", function() {
  localStorage.setItem("progress", '[]');
  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) {
  window.s.ChooseChoiceIndex(index);
  jQuery("#undo").show()
  saveChoice(index);
  continueToNextChoice(s);
}

jQuery(document).on('click', "#options li a", function() {
  choose(jQuery(this).data("index"));
  return false;
});
jQuery(document).on('click', "#options li", function() {
  choose(jQuery(this).find('a').data("index"));
  return false;
});

jQuery(document).on('keydown', function(key) {
  key = key.key
  switch (key) {
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9':
      jQuery(`#options li:nth-child(${key})`).first().trigger("click")
      break;
    case '0':
      jQuery(`#options li:nth-child(10)`).first().trigger("click")
      break;
  }
  return false;
});