Structure the steps
This commit is contained in:
parent
99bd85c5f8
commit
9772305c5f
|
|
@ -24,44 +24,48 @@ VAR shooting = d2
|
|||
VAR writing_magic = d2
|
||||
VAR comic_magic = d2
|
||||
|
||||
-> go
|
||||
-> step1
|
||||
|
||||
=== step1
|
||||
|
||||
Step 1: main stats
|
||||
|
||||
The stats are dice rolls. You upgrade your dice rolls from d2 (a 1-2 coin toss) to d20 (1-20). Roll targets can range from easy (2) to almost impossible (19). You win rolls on a draw.
|
||||
|
||||
Strength: [-](./str_minus) {strength} [+](./str_plus)
|
||||
Strength: {link("-", "str_minus")} {strength} {link("+", "str_plus")}
|
||||
|
||||
Will: [-](./will_minus) {will} [+](./will_plus)
|
||||
Will: {link("-", "will_minus")} {will} {link("+", "will_plus")}
|
||||
|
||||
Humanity: [-](hum_minus) {humanity} [+](./hum_plus)
|
||||
Humanity: {link("-", "hum_minus")} {humanity} {link("+", "hum_plus")}
|
||||
|
||||
+ Next -> step2
|
||||
|
||||
=== step2
|
||||
|
||||
+ Back -> step1
|
||||
+ Finish -> finish
|
||||
|
||||
=== finish
|
||||
-> END
|
||||
|
||||
=== function link(text, target) ===
|
||||
~ return "<a class='inlinelink' href='\#' data-href='{target}'>{text}</a>"
|
||||
|
||||
=== function minus(attr)
|
||||
hi
|
||||
//if (attr > d2)
|
||||
//~ attr = list_pop(dice)
|
||||
|
||||
=== str_plus
|
||||
~ strength = d4
|
||||
-> step1
|
||||
|
||||
=== hum_minus
|
||||
~ minus(humanity)
|
||||
|
||||
Step 2: skills
|
||||
|
||||
== go
|
||||
Here's Box A: <-clicker("a", a, -> go)
|
||||
. And here's Box B: <-clicker("b", b, -> go)
|
||||
. You can change the contents of both below.
|
||||
+ Commentary?
|
||||
- The idea is that the [TEXT](ID) syntax will be used to define a hyperlink embedded in the text, that says "TEXT" and activates the choice tagged "\# id:ID" (which also shouldn't be displayed). So these clickers will display their current value, and you could click them to advance their state to the next state. The choice would take you to the same page as before, just with a new value in the clicker. That way you can click the link a few times to get the result you actually want.
|
||||
|
||||
It's inspired by the links in smwhr's Palazzo Heist game written in Porcelaine (Ink), and how they edit existing bodies of text. Also the Twine game Howling Dogs by Porpentine, which has links that contain adjectives, where clicking the link changes the adjective. It's also inspired by immediate-mode GUIs, specificially egui, which constantly recalculate what the UI should look like based on the current value of variables.
|
||||
|
||||
I'd love if A and B could be temp variables, but I get big stack problems if I try to stop them from being global variables. Well actually, you can make go take a and b as parameters (divert parameters aren't global) but then it's no longer as modular, because the screen displayed by \-> go can't change the number of clickers very easily without also changing how many values are passed to the \-> back() divert inside the clicker's code. So I think global variables are the least messy way to do this.
|
||||
|
||||
I'm thinking about turning the link processing into an engine for Ink — like Porcelaine. It's not that I don't like Porcelaine (which does most of this) but I'd like something that's more minimal, that doesn't create the extra buttons for options.
|
||||
|
||||
You could probably do a lot of interesting things with the \<- clicker_with_display_function() thread, like expandable menu spoilers. It's just like the normal clicker, but you also pass in a one-argument function that describes how to display each list value. You could have a LIST expanded_state = Open, Closed where the display function provides a long description if it's Open.
|
||||
-> go
|
||||
-> DONE
|
||||
|
||||
=== clicker(id, ref val, -> back)
|
||||
<> [{val}]({id}) <>
|
||||
|
|
|
|||
|
|
@ -21,15 +21,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" id="picture">
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<div id="content"></div>
|
||||
<ul id="verbs" class="col-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<ul id="verbs" class="col">
|
||||
</ul>
|
||||
<ul id="options" class="col-6">
|
||||
<ul id="options" class="col">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,8 +47,6 @@
|
|||
<p><button id="restart" type="button" class="btn btn-danger">Erase the save and restart the game</button></p>
|
||||
<p><button id="back" type="button" class="btn btn-primary">Save settings and return to the game</button></p>
|
||||
|
||||
<p>Image credit: Shurajo & AVALANCHE Game Studio (characters); CraftPix.net 2D Game Assets (background)</p>
|
||||
<p><a href="https://opengameart.org/content/boy">[1]</a>, <a href="https://opengameart.org/content/mermaid">[2]</a>, <a href="https://opengameart.org/content/pixel-ocean-and-sky-background">[3]</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
16
src/index.js
16
src/index.js
|
|
@ -1,7 +1,6 @@
|
|||
/* @flow */
|
||||
import * as jQuery from "jquery";
|
||||
const inkjs = require('inkjs').Story;
|
||||
import { SVG } from '@svgdotjs/svg.js'
|
||||
|
||||
/**
|
||||
* Path to your game's compiled JSON.
|
||||
|
|
@ -117,8 +116,13 @@ function continueToNextChoice (s: any) {
|
|||
}
|
||||
if (
|
||||
s.currentTags.includes('choices: parser')
|
||||
|| s.currentChoices[0].tags.includes('parser')
|
||||
|| s.currentChoices[0].text.match("Осмотреть себя")
|
||||
|| (
|
||||
s.currentChoices[0] !== undefined &&
|
||||
(
|
||||
s.currentChoices[0].tags.includes('parser')
|
||||
|| s.currentChoices[0].text.match("Осмотреть себя")
|
||||
)
|
||||
)
|
||||
) {
|
||||
mode = 'parser';
|
||||
}
|
||||
|
|
@ -195,8 +199,6 @@ if (progress != null) {
|
|||
window['progress_steps'] = 0;
|
||||
window['progress'] = [];
|
||||
}
|
||||
window["picture"] = SVG().addTo("#picture");
|
||||
window["picture"].image('./images/back.png').id("background").move(0,0).css("width", "100%").css("height", "100%");
|
||||
window['s'] = new inkjs(data)
|
||||
window['s'].onError = function(error){
|
||||
alert(error);
|
||||
|
|
@ -250,6 +252,10 @@ jQuery(document).on('click', "#options li a", function() {
|
|||
choose(jQuery(this).data("index"));
|
||||
return false;
|
||||
});
|
||||
jQuery(document).on('click', "a.inlinelink", function() {
|
||||
window['s'].ChoosePathString(jQuery(this).attr("data-href"));
|
||||
return true;
|
||||
});
|
||||
jQuery(document).on('click', "#options li", function() {
|
||||
choose(jQuery(this).find('a').data("index"));
|
||||
return false;
|
||||
|
|
|
|||
Loading…
Reference in a new issue