174 lines
4.3 KiB
JavaScript
174 lines
4.3 KiB
JavaScript
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">⏸️ </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;
|
|
});
|