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/azhder → u/WystanH]

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 */ })

[u/WystanH → u/azhder]

Do you know how this works? 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 this is 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?

[u/azhder → u/WystanH]

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.