Adding Application UI State

[00:00:00]
>> Now let's take that base SVG. And we're gonna add the base SVG to our app. So remember that base, SVG had everything that we needed in it to create that whole scene. So once I put that in there, and the thing that it doesn't have are all of those like character, faces and things like that.

[00:00:22]
But it had clip paths, which I'll close right now until we get to the later. It had the text which is the character name, it had a table which is just a path. It had this alien bubble and friend bubble and if we go back to our screen we can see this little scene, right?

[00:00:42]
We have no characters yet, but we have these bubbles and things. So now what we wanna do is we actually want to have the start of the game. In the start of the game, we don't see this SVG viewbox. We don't see this SVG, that is kinda put onto the page.

[00:01:03]
So what we see instead, is this modal that shows that initial game state and kind of tells you a little bit about the game. So what we wanna do is we wanna go back into our store, and we wanna give ourselves a UI state. And that UI state is going to be start.

[00:01:21]
The reason why I'm using a string instead of a boolean, because I could have also said started false or something like that. What I find is, applications as they grow, start to have many, many different points of state, right? You have to check if it started, if it's finished, if it's in the middle of a character play if it's doing this.

[00:01:42]
If you pass a string instead of that boolean, then you're not checking a whole bunch of different things, right? You're checking that one piece of game state. So at this juncture, we're at start and we know what exactly is gonna be loaded or not loaded based on that one string.

[00:02:00]
And we're able to kind of work with it in multiple ways. So it's a little bit less brittle than writing a lot of Booleans for that state. So we'll say the UI state is the start. The next thing we're gonna do is we're gonna actually go into this application into the app dot view.

[00:02:17]
And I'm going to gather that UI state from the store. So I'm gonna say the map state, because I'm gonna bring in a bunch of different state. And if you remember from the course before, we could say have a computed property that says. This stuff that has a computer property that's like UI state.

[00:02:37]
This return this.store.state.ui state. But instead I'm gonna bring do this kind of map state. Which allows me to bring in multiple things and plot them to their names. So I can say UI state. And then I could actually say questions and bring those in and have them available in that component.

[00:02:59]
So if we go back to our application, and I refresh again and I can look in view. Inside that view x store I now have the UI state of start. But if I go into my components, now I'm actually have that in the component. Remember how before it didn't the component didn't have anything in it yet.

[00:03:19]
Now it's bringing in those view x bindings of this UI, state of start, and all of those questions, awesome. So now what we wanna do is we wanna make sure that we're showing a modal based on if the UI state is start. If that's not the case, then we're not going to use this SVG.

[00:03:38]
So I'm gonna make a section that encases this SVG here. We'll put that there for now. And then I'm also going to make a new component that I'm gonna bring on to the page that has that text from before. So I create a new component and I can say games state start.

[00:04:06]
And we'll also have a game state finished or whatever at the end. So here we go with that and then we can say, all right. Here we want a class of modal. Cause I'm gonna reuse that class of modal for anytime I'm using a modal. And let's go back into our resources.

[00:04:25]
We have a bunch of intro text that I can bring in here. I can get rid of this div as it's superfluous. And I have all of this information here. Now just to get you used to that concept of props and slots, we're gonna use them in a couple of different ways today.

[00:04:44]
I'm gonna use a slot here just to get you in the kind of gear of using slots. So I'm gonna add a slot to this. Then I'm gonna go into the app dot view and I'm gonna load that component. So I'm gonna say the import export. And this is one of my snippets that makes it a little bit faster to write things.

[00:05:08]
So I can say, game state start, I think is what I called it. And then I'm going to make sure I have one export default. But you can see I could type both of them really quickly. Because of the snippets kind of assume that you want all of them to be named the same.

[00:05:25]
So now I can say up here gamestate start, and then we've got this, we can bring in this component. So let's go check out if we have this component. So right now we have the modal and all of the bubbles and things like that. We don't want all of them at once, right?

[00:05:50]
So what we wanna do is we wanna make sure that it's not showing that base SVG at this point. It's just showing that initial modal. So what I can say is the earth, UI state, equals. So here's where we get those ligatures 123, and you can see instead of writing three equals it's got three bars.

[00:06:16]
That's that font ligature setting that you can set in VS code. And then I'm gonna pass in a string that starts, so I'm gonna check against that. And for now, I'm gonna write VS. So if the UI state is start, it's gonna show this. Otherwise it's gonna show that.

[00:06:35]
So now we just have that modal set, right. So already we've got like a little bit of state going on where we're showing one thing over another. The next thing that we wanna do is we wanna check if our slot is working correctly, right? So maybe we wanna say like h2, hi there.

[00:06:54]
And we'll see if this gets passed into our component and it does. That's awesome. So what we want here is we wanna go back to this. And I'm gonna ask people, which human do you wanna be? Which human do you want to be? And we have a few choices.

[00:07:19]
We are able to pick an artist, a baker or mechanic. And because we might wanna use that piece of gamestate in other places in the application. I'm actually gonna put that into my store. So I'll say like character, choices is an array. And you can see in our questions we have the question and then we have answers from different people.

[00:07:41]
So we have a baker. We have a mechanic and we have an artist. We also probably want to make a character, that's their choice. Right, once we picked that character be able to choose that character here as well. So what I'm gonna do is go into the app.view and I'm gonna bring these into that component as well.

[00:08:12]
So we've got the character, helps if you remember how to spell character. How do you say character? Character choices and character. Cool. So now because we have that, what we can do is we can loop through all of those character choices. And show radio buttons for each one of them.

[00:08:40]
So I'm gonna use a p tag to loop. I'll say pv4 and I'm gonna say option in character choices, thank you VS code, and then I'll give it a key that has to be unique. In this case option will be unique. And then I'm going to go and add an input.

[00:09:02]
That's a type of radio, And it's going to have a unique ID. And in this case, what we can do is we can bind it. Remember this is V bind. So this is a little long hand of V bind. But this is the shorthand. So what it's gonna do is gonna say use JavaScript in here instead of the string.

[00:09:26]
So if I say option, it's gonna grab whichever option this is. It's not gonna just say option as a string, otherwise it would. I also have to bind the value which is also option. And I'm also going to say the model character input. I'm going to establish a relationship down below with this data and return character input.

[00:10:02]
Which is an empty string because I'm gonna hold that for just a second so that I can then give it to the store later. So I'm just gonna make sure that I'm holding it for the time being. I also wanna make sure that I have a label for each one of these.

[00:10:14]
Otherwise people will just see little radio things without actually knowing what it is. But also I wanna make sure that things are accessible, so I'll say label for and make sure that that is bound to option as well. And then these two will have a relationship and then it will be good for screen readers.

[00:10:38]
And then in here I'm gonna output option. Cool, and then that just one more thing I really need to make sure that I have some styling here. To make sure that they are outputting correctly. So I'm gonna add a class that I already added of character choices. I named it the same as the character choices so that it styles appropriately.

[00:11:09]
So if I go back to the browser, I forgot to put a comma. You need commas in between things. So here's the comma. Save that, go back to the browser, refresh the page. I did it two places. We'll go into the store and then make sure we have commas here.

[00:11:30]
Character choices, question, my state. That seems okay, maybe I forgot to save. Let's try it again. Okay, I forgot to save. So here we have, you're an alien zombie which human do you wanna be? And then we've got baker, our mechanic and artist. And if I wanted to use view to see if I could, if I'm grabbing things correctly.

[00:11:56]
I have that character input, and as I select mechanic, then I'm holding mechanic.