1
0
Fork 0

user instructions

This commit is contained in:
Alexander Yakovlev 2021-08-25 23:08:10 +07:00
parent 4867de7d55
commit 3d88651699
Signed by: oreolek
GPG key ID: 8D24103F5EE2A6C0
3 changed files with 48 additions and 4 deletions

View file

@ -14,3 +14,15 @@ To start working:
### Screenshot
![Screenshot](./screenshot.png)
### Features
* Autosaving (with a restart button)
* 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)
* Mobile-ready layout
* You don't need to install anything to edit this (you will need a web server or game hosting to view the edits though)
* Color scheme is editable and you don't need to know CSS
### Browser compatibility
Firefox 60+, Chrome 60+, Safari 12+, iOS 12+

View file

@ -1,5 +1,22 @@
/**
* Path to your game's compiled JSON.
* It is relative to index.html file.
*/
const entryPoint = 'game.ink.json';
/**
* 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.
*/
let continueToNextChoice, displayText, loadGame, saveChoice, s;
saveChoice = function(index) {
@ -21,8 +38,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) {
@ -54,8 +70,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);

View file

@ -1,17 +1,34 @@
:root {
/**
* These are your style variables. Change them however you like.
*/
/* Main document font */
--font-family: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif;
/* Headings font */
--headings-font-family: "PT Sans Caption",var(--font-family-sans-serif);
/* Document background color */
--body-bg: #E4CDD4;
/* Text block background color */
--content-bg: rgba(202,158,185, 0.4);
/* Text color */
--body-color: #3A2D42;
/* Choice link text color */
--link-color: #7D6393;
/* Choice link background color */
--link-button-background: rgb(202, 158, 185);
/* Choice link background color on hovering the mouse over the link */
--link-button-background-hover: var(--body-color);
/* Choice link text color */
--link-button-foreground: var(--body-color);
/* Choice link text color on hovering the mouse over the link */
--link-button-foreground-hover: var(--body-bg);
}
/**
* That's it for easy customizations.
* The rest will make sense only if you know CSS.
*/
body {
font-family: var(--font-family);
background-color: var(--body-bg);