All right, welcome back, everybody. So here's where we left off at the end of the last episode. All right, so here's what I'm thinking. We probably need some kind of legend, of course. So if I write, hello, world, well, yes, we see the code down here, but that's not very useful to the kids. They need some kind of lookup table, effectively, that tells them or informs them, hey, the star maps to the letter H, and this rocket ship maps to the letter E. All right, so we need a little table at the bottom of the screen. All right, let's get going.

All right, so we need a little table at the bottom of the screen. All right, let's get going. So here is our create Livewire component. Maybe what I'll do real quick is take this section right here, and first, let's figure out, well, what is this? This is the code itself. So maybe for now, why don't I extract this into its own component? And I can do this directly in PhpStorm. I'm going to call it, again, just code. We can refactor this in a little bit.

I'm going to call it, again, just code. We can refactor this in a little bit. Okay, so what that does is it basically automates the process of creating a new component in your components directory, and then it takes the HTML that you had selected and copies or moves it over. Okay, so now it looks like as props, it wants message and then the object instance. But I don't like that. Instead, it looks like the only time we use this, quote unquote, is to access the array of letters. So instead, why don't we just ask for the letters, and then I can reference it like

of letters. So instead, why don't we just ask for the letters, and then I can reference it like so. All right, cool. So let's go back to our Livewire component, and we're going to pass through the message as well as the letters, like this. Okay, let's see if we need to change anything. So I will come back to Firefox, give it a refresh. I type hello world again, and yeah, it looks like that just works out of the box. Okay, so a small bit of cleanup, but I think that makes a difference.

I type hello world again, and yeah, it looks like that just works out of the box. Okay, so a small bit of cleanup, but I think that makes a difference. Okay, so next, I said below it, we need a legend. So you know what? This time, why don't we just assume a Blade component, and I'll call it Legend, like this. All right, so I think in PhpStorm with the Laravel idea plugin, I can option click and create it automatically, like so, but otherwise, if you're working along, you're just manually creating a file within the components directory, and you can find it here. So all right, Legend goes here, and then again, within our create Code component, we are referencing it like so.

So all right, legend goes here, and then again, within our create component, we are referencing it like so. So now if I come back to Firefox and give it a refresh, there we go. This is what we want. All right, so let's think about it. I know that our legend will need, once again, access to all the letters of the alphabet, and it should probably loop over them, and for each one, it's going to display the letter as well as the corresponding symbol. So that might be letter A at the top, and then rocket ship below it, and then letter B, and then a leaf, and then letter C in the earth, and then et cetera, et cetera.

So that might be letter A at the top, and then rocket ship below it, and then letter B, and then a leaf, and then letter C in the earth, and then et cetera, et cetera. And don't forget that each time you refresh the page, that mapping will be unique, which again is what we want here. All right, so back to PhpStorm, but actually real quick, let's go into layout and set the default text color to white. There we go. That fixes that. Okay, anyways, into legends, to begin, I know I need a prop that includes all of the letters. So then we'd have something like this, where we'd say for each letters as letter and then

Okay, anyways, into legends, to begin, I know I need a prop that includes all of the letters. So then we'd have something like this, where we'd say for each letters as letter and then the corresponding symbol, then, I don't know, maybe each one should be wrapped within its own div, and then maybe we'd have two spans or something like that, where the one on top is the letter and the one below is the corresponding symbol. But now, don't forget, it's not enough to just say the text of the symbol. We need to include that special class. So we kind of want this. And actually, this is probably a good candidate for its own custom component, but I'm not going to do that just yet.

And actually, this is probably a good candidate for its own custom component, but I'm not going to do that just yet. So we'll paste that in. All right, let's see what we get. If I come back, of course, it's going to fail because we're assuming that we have access to this letters array, but we never pass that in when we reference the component. So that would be the next step. Let's go into the create component, and right here, I'm going to pass through the letters. All right.

letters. All right. All right, so back to Firefox. And let's see. Well, close, but no cigar. So we are displaying the letters, but for symbol, I must have not echoed that properly. Let's come back, and yes, of course, you saw this. We want the symbol. All right, come back, and there we go. All right, so A maps to Fountain or something like that, but if I refresh the page, the

All right, come back, and there we go. All right, so A maps to Fountain or something like that, but if I refresh the page, the next time, A will map to Earth, which is what we want. All right, so the next step is to take the wrapper itself and display it left to right. So I can use a display: flex for that. And then what I'm thinking is we'll have the A on top and then the symbol below. So to handle that, hmm, what should we do here? How about we once again set a display: flex, but this time, we'll set the flex-direction to column so that it's top and bottom. Yeah, there we go.

to column so that it's top and bottom. Yeah, there we go. It's a little closer to what we want. Next, we can style the individual wrappers. So for example, if I set a background color of red, this is what we're working on here. So yeah, one thing we could do is set alignItems to center, and that will, well, align them to the center. And remember, because we have a flexDirection of column, alignItems would apply to the horizontal alignment rather than typically vertical alignment. Okay, next, maybe we could have like a border all around it, something like this, one pixel.

horizontal alignment rather than typically vertical alignment. Okay, next, maybe we could have like a border all around it, something like this, 1px solid black or something like that. Yeah, something like that, maybe a little bit of padding. Let's see what we come up with. So right here, why don't we set a border, border, I don't know, black, 50%, I don't know, something like that. Yeah, maybe, actually, let's change it. Let's do border white, but then lower the opacity. So I can set maybe 10% opacity, and that way, we let some of the background color shine.

Let's do border white, but then lower the opacity. So I can set maybe 10% opacity, and that way, we let some of the background color shine through that border. Okay, next, like I said, we're going to do item-center, and then I'm going to set the I'm going to do item-center, and then I'm going to do a little bit of padding all around, maybe padding-2. Yeah, you can start to see what we're dealing with here. Next, at least temporarily, I'm going to set some margin-bottom just to push it away from the lower edge. Yeah, that's kind of what we want.

the lower edge. Yeah, that's kind of what we want. So now think about it, if we have our secret code, we still need to make the spacing a little bit nicer. This code should be larger. Maybe the legend should be a bit smaller, but you get the general idea. As programmers, we know that this is effectively a lookup table, but for the kids, it's just a legend. It's a way to translate each letter to the corresponding symbol. All right, cool.

It's a way to translate each letter to the corresponding symbol. All right, cool. Let's keep working on this. What if I lower or decrease the width of the window? Well, notice right now, this isn't really what we want. So let's come back and set flex, and then flex-wrap. We want it to wrap to the next line, as you see right here, and that's what we want. Yeah. So now we're just adding a bit more responsiveness to our layout, which is good. Okay, next, I think maybe right here, perhaps I should set a little margin-bottom to push

So now we're just adding a bit more responsiveness to our layout, which is good. Okay, next, I think maybe right here, perhaps I should set a little margin-bottom to push the symbol down. Yeah, maybe something like that. It's not too bad. Next, maybe the letter should be bold, boldish. And then I also think it should be uppercase. So why don't we use our handy dandy ucwords PHP function to capitalize it. And yeah, you get the general idea. I think this is looking fairly good.

And yeah, you get the general idea. I think this is looking fairly good. So the cow jumped over the moon. We have our symbol. We need a little spacing between these, and then we have our lookup table. Okay. So let's do this now. We have our legend. We have our main component, where we have the text area at the top, we have the code, and then the legend.

We have our main component, where we have the text area at the top, we have the code, and then the legend. Hmm, maybe we should set a gap between each of the items, like this. So now notice we have some spacing in between each of them. And then what I can do is go up to code, get rid of the margin top there, because now we're achieving the margin top through a gap, and then I can do the exact same thing for the legend itself. Yeah. Decal. Yeah.

Decal. Yeah. This is what we want. Okay. Next, if I go into, hmm, let's go into create code. I'm sorry, create code. Should I have marginY of 8? All right. Back to Firefox. Now we have some margin on the top as well as the bottom.

Back to Firefox. Now we have some margin on the top as well as the bottom. Okay. So here is my secret code. And yeah, we're getting there. So in the next episode, I want to take a second pass where we clean things up a little bit, make the design just a little bit more pretty. And then after that, we need to focus on print-specific styling. Remember, this isn't a typical web app.

And then after that, we need to focus on print-specific styling. Remember, this isn't a typical web app where the kid will be on their iPad or something like that as they solve the challenge. The entire purpose of this is to print it on a sheet of paper so that, you know, for example, they can work on it while you're making dinner or something like that. So yeah, we'll work on some print-specific CSS. We will add a print button,

So yeah, we'll work on some print-specific CSS. We will add a print button, and then I think we will be ready to deploy this to production using Laravel Forge. So I'll see you, as always, in the next episode.