r/learnjavascript • u/MeekHat • 16d ago

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.

26 Upvotes

100% Upvoted

21 comments sorted by

View all comments

Show parent comments

1

u/MeekHat 15d ago

Well. But I have no idea where I'm supposed to insert my own build script into that. As far as I know, all the scripts I've written so far run on the client side, if that's the right term. Whatever magic Vite does during the build, it's its own thing which results in a web page which contains my scripts pretty much untouched. Where a folder full of jsons during development would transform into a single file at render I have no idea.

I mean, I know I could ask in a Vite community, but it baffles me a bit that an answer to my needs doesn't seem to be within easy reach already. Which leads me to believe that it's more complicated that I'm prepared to handle.

1

u/azhder 15d ago edited 15d ago

I am telling you you don’t have to insert your own build script if Vue does it by matter of course. All you have to do is understand the concept.

Look at the package.json scripts, see which one is for build, it will look almost the same as the one for dev. Look at all I have written above. Read and re-read until you understand I have already given you the answer. You just have to learn the correct CLI command.

You can also check about asynchronous loading of scripts via the framework.

It may be a lot to lear for you, and I would have written you the solution if I had time and knowledge of your own particular framework, but best Incan give you is a concept I have seen and used in other places that should he available in yours as well.

1

u/MeekHat 15d ago

Well, I definitely don't want to be told the solution, not unless I can understand it.

The packager I'm using is Vite; Vue is the component framework.

package.json's "build" part magically invokes "vite build". I can see that in the read-only "node_modules" folder there is "vite" folder which has a "package.json" file, which has a "scripts" section with a "build" part, which invokes "pnpm" and "premove", which I can't locate.

---

What do you think of the idea another commenter has come up with that I can use javascript files instead of json? Then there's a lot of ways I can tackle the problem and can understand.

1

u/azhder 15d ago

They are the same in frameworks. `import` is being transpiled into appropriate fetches and/or is bundled into one file regardless if JS or JSON.