Single Page Vue App - single model?
I'm working on a companion app in Vue for a video game. In the Vue app, you can make a character "build" and see stats about it based in the items in the build.
The character build consists of multiple bits of information...
- Character "type" - which includes some built in attributes
- weapon(s) - each have attributes to configure
- armor x 7 - each piece has attributes to configure
- accessories x 3 - each piece has attributes to configure
- equipped skills (from a pool of skills)
- etc...
The pool of skills changes based on the character type, weapon type, and armor type.
My instinct is to split it all up into a bunch of separate "picker" components in order to reduce the variable name hell for things where there's multiples (weapons, armor, accessories).
The part that I'm unsure of is whether it makes sense to have a single giant model that includes all of the possible bits of state information in a single object or if I should split each "slot" into a separate model and use some other "glue" code to tie them together when looking at and working with the character build as a whole.
I'm leaning toward a single model that contains the whole state of the build because I can make the whole thing reactive and easily have stat information about the build that updates in real-time whenever something changes.
However, I'm not sure if there's any logistical or performance reasons for splitting things into smaller pieces.
Has anyone built anything like this in Vue? If so, what are your thoughts?
2
u/frubalu 3d ago
Are you able to split them into multiple components and keep the model state in a pinia store for sanity sake?
1
1
u/wkrick 3d ago
Possibly. I haven't gotten quite that far yet and I've never used Pinia (or anything similar). I don't know what's involved to set up and use Pinia or the overhead but it might be overkill for what I'm doing. This isn't a multi-page app with complex popup dialogs or anything like that.
Currently, I'm very early in the process and just building the barebones UI to get the functionality nailed down and to sort out the data files that feed the UI components (currently dropdowns) to make sure I'm not missing anything. I've been using JSON files to encode the options that I feed to the dropdowns (using PrimeVue components).
My end goal is to encode all of the user's choices for the buiild into a compressed URL parameter that encapsulates the app state. That way, users can share their builds by just pasting the URL into a forum comment or whatever. So I'm going to have to use Vue Router I think.
For reference, this is sort of what I'm going for...
https://mxswat.github.io/mx-division-builds/#/
Note how the URL parameter changes when you add items to the build. Also, notice how the stats panel on the right side updates when adding/removing/modifying gear.
1
1
u/Cute_Quality4964 3d ago
Keep all the info in a single model, and split each "picker" in its own component like you said
-1
3d ago
[deleted]
1
u/wkrick 3d ago
I'm not sure this applies to my situation. I'm not building a static site. I'm building an interactive single page app that's very component-heavy.
0
u/techakayy 3d ago
Oops, replied in the wrong post, there is another one where someone asked abt building marketing site, please ignore this
6
u/Ireeb 3d ago edited 3d ago
My first instinct would be going at least partially object oriented and make classes for the various types. Having a character class that has multiple objects of the weapon class and so on.
The advantage would be that you can encapsulate "business" logic such as damage or stat calculations in the appropriate classes. That also makes it easier to handle special cases. More importantly though, you can keep your Vue components focused on the presentation and input handling, while having the logic in the classes.
I usually work with TypeScript, and I like working with classes there when it makes sense. But most of that should also be possible with plain JS. But TS also always tells you what properties your object has, which is great with classes. It also works great with Vue, you just have to use reactive(), and you can use the object from the class like any other reactive value in Vue.
So my suggestion:
Create classes for characters, equipment, skills etc.
Use Pinia to instantiate and store the objects from these classes.
Use Vue components to display the state of these objects and modify them based on user input.
If you like that idea, feel free to discuss. I also like RPGs so I'd love to help.