Skip to content

Commit

Permalink
updated help and tools
Browse files Browse the repository at this point in the history
  • Loading branch information
@PlytonRexus
PlytonRexus committed Aug 9, 2020
1 parent 9157c8c commit f89de90
Show file tree
Hide file tree
Showing 10 changed files with 408 additions and 114 deletions.
20 changes: 18 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ Your name is ${name}.
```
Obviously, here, variable `name` was used to store the name of a character.
The variables can also be used in conditional logic to determine which [choices](#choice-syntax) and (in a future release) what paragraphs of a [section's](#section-syntax) text should be visible to the reader. You can find more about this under the [choices](#choice-syntax) heading.

You can assign variables beforehand inside story [settings](#settings-syntax).

```
${name='Felicity'}
```

*It is recommended (albeit not required) to keep the* `title`*variable set as the title of the story.*

### [Story Settings](#settings-syntax)
Expand Down Expand Up @@ -134,9 +141,18 @@ ch>
<ch
```
Choices can also do actions like addition (+), subtraction (-), multiplication (\*) and division (/) on variables.
- `${__var1 = var2}` Assignment
- `${__var1 + var2}` Addition
- `${__var1 - var2}` Subtraction
- `${__var1 * var2}` Multiplication
- `${__var1 / var2}` Division
In each of these, the first variable is assigned values that result from the operation.
```
ch>
The power of your name goes up and you health is multiplied
${__namePower + 10} ${__health * 3} [[5]]
The power of your name goes up 10 units and your health
is multiplied \${namePower} times.
${__namePower + 10} ${__health * namePower} [[5]]
<ch
```
35 changes: 20 additions & 15 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,21 +176,9 @@ body {
background: white;
}

/* button {
display: block;
width: 300px;
margin: 3px auto 0;
padding: 5px;
border: none;
border-radius: 6px;
color: #fff;
background-color: #74637f;
font: 18px 'Opens Sans', sans-serif;
letter-spacing: 1px;
appearance: none;
cursor: pointer;
margin-bottom: 15px;
} */
button {
outline: none;
}

button:hover {
color: #74637f;
Expand Down Expand Up @@ -333,6 +321,23 @@ button:hover {
font-family: sans-serif;
}

/* Tools */

.tool-btn {
display: block;
width: 80%;
margin: 3px auto;
padding: 10px;
border: none;
color: black;
background-color: white;
font: 18px 'Opens Sans', sans-serif;
letter-spacing: 1px;
appearance: none;
cursor: pointer;
margin-bottom: 15px;
}

@media (max-width: 850px) {
#root {
flex-wrap: wrap;
Expand Down
119 changes: 93 additions & 26 deletions downloadable/if_r-terp.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
IF.DEBUG = false;

IF.dom = {
target_id: "#if_r-output-area",
alert_area_id: "#if_r-alerts-area",
Expand Down Expand Up @@ -56,8 +58,6 @@ IF.methods = {
parasText = IF.methods.replaceVars(parasText, paraVars);
parasText = IF.methods.formatText(parasText);

console.log(parasText);

wrapper += `<div class="if_r-section" id="section-${serial}">`;

wrapper += `<h3 class="if_r-section-title">${titleText}</h3>`;
Expand Down Expand Up @@ -93,7 +93,7 @@ IF.methods = {
wrapper += `<li class="if_r-section-choice-li">
<a class="if_r-section-choice" data-if_r-target="${target}"
data-if_r-owner="${owner}" id="if_r-${serial}-choice-${i}"
data-if_r-mode="${mode}" data-if_r-i="${i}"
data-if_r-mode="${mode}" data-if_r-i="${i}" href="#"
data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
</li>`;
}
Expand Down Expand Up @@ -164,13 +164,16 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
if (vars) {
vars.forEach(val => {
let varName = val.replace(/\$\{/, "").replace(/\}/, "").trim();
if (IF.story.variables[varName]) {
if (IF.story.variables[varName] || IF.story.variables[varName] === 0) {
if(IF.DEBUG) console.log("Replacing:", varName, " with", IF.story.variables[varName]);
text =
text.replace(
new RegExp("\\$\\{\\s*" + varName + "\\s*\\}"),
IF.story.variables[varName]
);
} else {
if(IF.DEBUG)
console.log("Rejecting:", varName, ", because the value is =", IF.story.variables[varName]);
text =
text.replace(
new RegExp("\\$\\{\\s*" + varName + "\\s*\\}"),
Expand Down Expand Up @@ -247,25 +250,32 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>

setState: function (opts) {
Object.keys(opts).forEach(opt => {
if (opt !== "section")
if (opt !== "section") {
IF.state[opt] = opts[opt];
else
IF.state['section'] = IF.story.findSection(opts['section']);
// if (opt === "turn")
// IF.methods.changeTurn(null, opts[opt]);
}
else if (opt === "section") {
// if (IF.DEBUG) console.log(IF.story.findSection(opts['section']));
IF.state.section = IF.story.findSection(opts.section);
}
});
},

changeTurn: function (change) {
changeTurn: function (change, abs) {
IF.methods.setState({
turn: change ? (IF.state.turn + change) : IF.state.turn + 1
turn: abs || (change ? (IF.state.turn + change) : IF.state.turn + 1)
});

IF.story.variables.turn = abs || (change ? (IF.state.turn + change) : IF.state.turn + 1);
},

showStats: function () {
let stats = Object.keys(IF.story.variables);
let statsHTML = `<pre> <b>Turn:</b> ${IF.state.turn} `;

stats.forEach(stat => {
statsHTML += `<b>${stat}:</b> ${IF.story.variables[stat]} `;
if (stat !== "turn")statsHTML += `<b>${stat}:</b> ${IF.story.variables[stat]} `;
});

statsHTML += `</pre>`;
Expand All @@ -282,9 +292,11 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
},

changeVariables: function (vars, to) {
/* Precautionary saving of old values of variables. */
IF.methods.recordOldValues(vars);

vars.forEach(variable => {
IF.story.variables[variable] = parseInt(to) ?? to;
IF.story.variables[variable] = parseInt(to) ? parseInt(to) : to;
});
},

Expand Down Expand Up @@ -328,6 +340,10 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
}
},

executeJs: function(text) {
return eval(text);
},

setTimer: function (timer, target) {
return setTimeout(() => {
IF.methods.switchSection(target);
Expand Down Expand Up @@ -361,31 +377,43 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
document.querySelectorAll(".if_r-section-choice").forEach(choice => {
choice.onclick = (e) => {
e.preventDefault();
let mode = choice.getAttribute("data-if_r-mode");
let vars = choice.getAttribute("data-if_r-variables") ? choice.getAttribute("data-if_r-variables").split(", ") : [];
let choiceI = choice.getAttribute("data-if_r-i");
let actions = IF.state.section.findChoice(choiceI).actions;
let { actions, targetType, owner, mode, variables:vars, target:tar } = IF.state.section.findChoice(choiceI);

// if (IF.DEBUG) console.log("owner:", owner);

if (targetType === 'scene') {
let scene = IF.story.findScene(tar);
if (IF.DEBUG===true) console.log("Going to scene " + tar);
tar = scene.first;
if (IF.DEBUG===true) console.log("Starting section " + tar);
IF.methods.doSceneActions(scene);
}

if (mode === 'input') {
let inputValue = document.querySelector(`#if_r-choice-input-${choiceI}`).value;
if (inputValue === "") {
IF.methods.showAlert("Empty input not allowed!");
// if (IF.DEBUG === true) IF.methods.showAlert("Empty input not allowed!");
} else {
choice.onclick = "";
IF.methods.changeVariables(vars, inputValue);
if (actions) IF.methods.doActions(actions);
IF.methods.switchSection(e.target.getAttribute("data-if_r-target"));
IF.methods.switchSection(tar);
}
} else {
choice.onclick = "";
IF.methods.changeVariables(vars, choice.innerHTML);
if (actions) IF.methods.doActions(actions);
IF.methods.switchSection(e.target.getAttribute("data-if_r-target"));
IF.methods.switchSection(tar);
}
};
});
},

doSceneActions: function(scene) {
console.log("Doing relevant scene actions...");
},

resetStory: function () {
if (confirm("Restart the story? IF.methods is a beta feature.")) {
IF.methods.loadStory(IF.story);
Expand Down Expand Up @@ -444,8 +472,8 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
<div id="${IF.methods.replaceHash(IF.dom.stats_div_id)}" class="${IF.methods.replaceDot(IF.dom.stats_div_class)}">
<a href="javascript:void(0)" class="closebtn">&times;</a>
<a href="#" id="${IF.methods.replaceHash(IF.dom.reset_button_id)}">Restart</a>
<a href="#" id="${IF.methods.replaceHash(IF.dom.undo_button_id)}">Undo</a>
${`<a href="#" id="">Stats</a>` /* does nothing */}
<a href="#" id="${IF.methods.replaceHash(IF.dom.undo_button_id)}">Undo</a>
${`<a href="#" id="">Stats</a>` /* does nothing */}
</div>
<div id="if_r-status-bar">
<div id="${IF.methods.replaceHash(IF.dom.alert_area_id)}">
Expand All @@ -467,30 +495,37 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
console.info("Display loaded.");
},

resetVariables: function() {
IF.story.variables = {};
Object.keys(IF.story.persistent)
.forEach(key => IF.story.variables[key] = IF.story.persistent[key]);
},

addMethods: function () {
IF.story.findSection = function (serial) {
let index = this.sections.findIndex(section => {
let index = IF.story.sections.findIndex(section => {
// if (IF.DEBUG) console.log(section);
return section.serial === serial ? true : false;
});

if (index == -1) {
console.warn("No section " + serial + " found. Reverting to default section serial 1.");
if (IF.DEBUG) console.warn("No section " + serial + " found. Reverting to default section serial 1.");
index = 0;
}
return this.sections[index];
return IF.story.sections[index];
}

IF.story.findPassage = function (serial) {
let index = this.passages.findIndex(passage => {
let index = IF.story.passages.findIndex(passage => {
return passage.serial === serial ? true : false;
});

if (index === -1) {
console.warn("No passage " + serial + " found. Reverting to default passage serial 1.");
if (IF.DEBUG) console.warn("No passage " + serial + " found. Reverting to default passage serial 1.");
index = 0;
}

return this.passages[index];
return IF.story.passages[index];
}

IF.story.sections = IF.story.sections.map(section => {
Expand All @@ -508,6 +543,19 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>

return section;
});

IF.story.findScene = function(serial, name) {
let index = IF.story.scenes.findIndex(scene => {
return scene.serial === serial ? true : false;
});

if (index === -1) {
if (IF.DEBUG) console.warn("No scene " + serial + " found. Reverting to default scene 1.");
index = 0;
}

return IF.story.scenes[index];
}
},

loadStory: function (story) {
Expand All @@ -517,20 +565,39 @@ data-if_r-variables="${variables.join(", ")}">${choiceText}</a>
IF.methods.addMethods();

IF.story = story;

/* Bring variables to original values. */
IF.methods.resetVariables();

/* Set timer, if any. */
let {
timer,
target
} = IF.story.settings.fullTimer;
if (timer !== 0) IF.methods.setTimer(timer, target);

/* Set initial state and initial variables */
IF.methods.setState({
section: IF.story.settings.startAt,
turn: 0
});
IF.story.variables.turn = 0;

/* Load the section into the viewport */
IF.methods.loadSection(null, IF.story.settings.startAt);

/* Start the stats bar */
IF.methods.showStats();

/* Hide the undo button because the story's just
* started and no turns have been played.
*/
document.querySelector(IF.dom.undo_button_id).style.display = "none";
console.clear();

/* Clear the console to make things clearer */
if(!IF.DEBUG) console.clear();

/* Good luck! */
console.info("Load finished. Happy playing!");
}
}
7 changes: 7 additions & 0 deletions downloadable/if_r.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,13 @@
margin-left: 50px;
}

.if_r-choice-input {
margin: 2px;
outline: none;
border: 0 0 0 0;

}

/* Sidebar stats end */

@media (max-width: 800px) {
Expand Down
6 changes: 6 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@
</head>

<body class="parallax">
<noscript>
<em class="plain-text" style="margin: auto;">
Looks like you have JavaScript disabled or unavailable in this browser.
You should enable it to run this app.
</em>
</noscript>
<div id="root"></div>

<script src="js/globals.js"></script>
Expand Down
Loading

0 comments on commit f89de90

Please sign in to comment.