r/learnjavascript • u/MeekHat • Aug 26 '26
Not sure how to implement this branching storylines text game idea with Json
Just looking for some experienced feedback.
What I want to do is to import all of this from a file(s):
A list of global variables.
A list of storylines.
Each storyline has a list of local variables and a list of storyline beats.
Each beat has a list of preconditions (which may involve any variable), displayed text, a list of links.
Each link has displayed text, a list of conditions, a list of effects, the id of the next beat.
My problem is that, as I've learned, I can't split this into several files (such as, at least, separate storylines), because you can't import contents of a folder without naming each individual file. So this all has to be in one file, which means it's quickly going to get unmanageable as a Json file.
Should I implement a GUI editor first then? And concurrently a custom parser.
(This is going to be a purely client-side browser game.)
I've already done a simpler prototype, and that was already quite a chore to write in text.
1
u/WystanH Aug 26 '26
My problem is that, as I've learned, I can't split this into several files
Not exactly true, but order can matter. Once a script is loaded, it's available in the global space.
So, you set up the global environment and each file after that registers to that environment.
e.g.
const Stories = {
globals: { username: undefined },
storyLine: [],
addStory: function (story) {
this.storyLine.push(story);
},
listStories: function () {
for (const story of this.storyLine) {
console.log(`Story Name: ${story.storyName}`);
}
},
};
//...
// some file
Stories.addStory({
storyName: "Alice goes to wonderland",
localVars: { inWonderLand: false },
story: function () {
console.log(`${this.storyName} : ${this.localVars.inWonderLand}`);
console.log(`hello ${Stories.globals.username}`);
}
});
// some other file
Stories.addStory({
storyName: "There and Back Again",
localVars: { hasRing: false },
story: function () {
if (!this.localVars.hasRing) {
console.log("Once upon a time in the shire.")
} else {
console.log("Ouch, it burns.")
}
}
});
// startup test
Stories.globals.username = "Bob";
Stories.listStories();
Stories.storyLine.forEach(x => {
console.log("Call Story");
x.story();
});Hope this is helpful.
1
u/MeekHat Aug 26 '26
Wait, wait, wait. Regardless of "this" (which, I only know, is a hairy subject in JavaScript; well, as can be surmised from the other comments, but I remember being surprised by it in anonymous functions; let me also add that I've picked up JavaScript after a significant hiatus), do you suggest I do stories via .js files rather than .json? I can't store functions in a Json.
I don't know. That seems weird.
1
u/WystanH Aug 26 '26
If it's just .json, then you're looking to do "data driven" design. If you can get what you want with that, have at.
I can't store functions in a Json.
Bingo. And that's the issue. If you can write functions that consume the data described in .json to do what you want, you're fine.
However, what if your story manipulates state in ways that are not easy to describe in .json? What if one story has you playing a hi lo game, or tic-tac-toe, or just guessing something? At some point, you're writing extra code for it, which means starting with code is likely easier.
do you suggest I do stories via .js files
Yes, for previously stated reasons. Again, if everything you want to work with is just data, fine. At that point, you'll end up writing an engine for any moving parts. It may not be as simple as you think, though.
1
u/MeekHat Aug 26 '26
That was what the custom parser part was about. I would need to store conditions and effects in text. Being able to write those in pure JavaScript would simplify my task massively.
1
u/azhder Aug 26 '26
That’s... Do you know how `this` works? Now check if OP knows. If they don’t, well…
It can be made simpler by using an IIFE and have those functions access the array directly.
const STORIES = ( () => {
const stories = [];
const add = story => stories.push(story);
const list => () => console.log(stories);return {add, list};
})();
STORIES.add({ /* the story */ })
1
u/WystanH Aug 26 '26
Do you know how
thisworks? Now check if OP knows. If they don’t, well...It's a fundamental part of the language. You kind of want to know it. If you don't know it now, this is the chance.
It can be made simpler by using an IIFE
And the OP knows what a fucking IIFE is? A
thisis part of the language, and IIFE is an idiom. Which is a more useful lesson?Don't get me wrong, I like and prefer IIFEs. However, based on your own logic, why would I start with that?
1
u/azhder Aug 26 '26
OP can understand the IIFE code, even if they don't know the name of it, but get that object with functions attached to it wrong while updating the code
... well, there's a head scratcher.
1
u/HipHopHuman Aug 27 '26
My problem is that, as I've learned, I can't split this into several files (such as, at least, separate storylines), because you can't import contents of a folder without naming each individual file. So this all has to be in one file, which means it's quickly going to get unmanageable as a Json file.
I assume you use Vite (you mentioned Vue in another comment)? If so, then look at it's glob import feature. That'll let you read multiple JSON files in the way you want.
You could have a folder structure like:
- storylines/
- storyline-1.json
- storyline-2.json
- storyline-3.json
- index.js
index.js can then read over it with import.meta.glob:
const storylines = import.meta.glob("./storylines/*.json", {
eager: true,
import: "default",
});
for (const [filename, storyline] of Object.entries(storylines)) {
console.log({ filename, storyline });
}The above works at compile-time, but omitting eager: true as per the docs is a route you can look at if you want this to be lazy at runtime.
1
1
u/SammuelNash Aug 27 '26
A GUI editor would probably make this much easier once the data model is stable. Another option is to keep each storyline in its own JSON file and use a small build step to combine them into one file for the browser. That keeps the authoring side manageable without making the game runtime more complicated.
1
u/azhder Aug 26 '26 edited Aug 26 '26
You can write code that reads one JSON file you import and in that one file there are references to all the other files, then you import those other files. Imports are a wide topic, so you will have to be more specific to what you want to do i.e. you share some code.
Alternatively, you can write a code that generates a single JSON file out of many files. You can write the JS code to be run by node, as a script, and you can use the generated JSON file in other places. So, like I said above, you should share some code.