notes and comments

This commit is contained in:
Alexander Yakovlev 2021-08-25 23:18:58 +07:00
parent 1f7a3da0d9
commit e587cd126c
Signed by: oreolek
GPG key ID: 8D24103F5EE2A6C0
2 changed files with 22 additions and 9 deletions

View file

@ -21,11 +21,9 @@ If you need a lighter template without any console commands: [inkjs-boilerplate.
* Keyboard support (press 1-9 to select 1th-9th choices, 0 to choose 10th)
* Great game performance (all JS is ~200Kb in size with Inkjs runtime)
* For authors: `npm watch` will auto-recompile the game on changes to JS or JSON
* Auto-recompiling from ink to JSON is not included, though
* Mobile-ready layout
* Editable color scheme
### Compatibility
Compatible browsers: Chrome >= 60, Firefox >= 60, iOS >= 12, Safari >= 12.
If you want to support older browsers (released before 2018),
you'll have to rewrite the CSS.
I use Bootstrap 5 because it's a good framework but it's also very modern.
Other than that, the code depends only on inkJS and jQuery so it should comfortably support IE9+

View file

@ -1,9 +1,26 @@
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/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) {
text = text.replace('<st>', '<span class="subtitle">');
text = text.replace('</st>', '</span>');
return text;
}
/**
* You don't need to change anything past this point.
*/
saveChoice = function(index) {
window.progress.push(index);
return localStorage.setItem("progress", JSON.stringify(window.progress));
@ -23,8 +40,7 @@ displayText = function(s, interactive = true) {
for (j = 0, len = paragraphs.length; j < len; j++) {
i = paragraphs[j];
if (i !== "") {
i = i.replace('<st>', '<span class="subtitle">');
i = i.replace('</st>', '</span>');
i = transform(i);
html = jQuery.parseHTML(i);
block = jQuery('<p>').html(html);
if (interactive) {
@ -56,8 +72,7 @@ continueToNextChoice = function(s) {
ref = s.currentChoices;
for (j = 0, len = ref.length; j < len; j++) {
choice = ref[j];
let text = choice.text.replace('<st>', '<span class="subtitle">');
text = text.replace('</st>', '</span>')
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);