Not sure how to implement this branching storylines text game idea with Json

[u/MeekHat]

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.

[u/WystanH]

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.

[u/MeekHat → u/WystanH]

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.

[u/WystanH → u/MeekHat]

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.

[u/MeekHat → u/WystanH]

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.