All right, let's get back to work. So, check this out. If we visit fonts.google.com, it looks like they have a dedicated icon section, material symbols. Yeah, you can see they have an endless array of fonts, and I'm sure we can find some of these that we could use in place of each letter. For example, the letter T maybe maps to this rocket here. All right, so let's see how we can use it. It looks like it can be referenced as a variable font or a static icon font. Variable icon fonts are a little bit newer, but most browsers support them. They allow for a bit more flexibility,

Variable icon fonts are a little bit newer, but most browsers support them. They allow for a bit more flexibility, so you can adjust the weight or the width of each of the icons. It'll probably generate a smaller file size, whereas a static icon set is probably what you're used to. So, at least for now, we might change this, but for now, while we're kind of playing around, I'm going to stick with the static icon font. So, it looks like I can copy it here, and then I can insert the font in this way. So, it looks like we have some kind of wrapper, we give it a class, and then we use this unique keyword here.

in this way. So, it looks like we have some kind of wrapper, we give it a class, and then we use this unique keyword here. Okay, let's give it a shot. So, I'm going to go into my layout, and right up here, I will paste in that font link. Okay, next, now let's just grab this, and we'll go to the welcome page, and let's just spit it out right here, and let's do this. And we'll see if it works. Alright, back to Firefox, and yeah, we can see our little rocket icon there. Alright, cool. So, maybe we'll have some kind of section here.

and yeah, we can see our little rocket icon there. Alright, cool. So, maybe we'll have some kind of section here. I will set the text to white, and yeah. So, now let's imagine some other icons we could use, like the earth. So, yeah, I'm trying to figure out what is the mapping here. So, we always give it the same class name, but then each icon maps to some text. So, if I had, for example, this leaf here, we'd call it eco. If it's two words, like water_drop, it looks like we use underscores to separate them. Okay, so let's try this one, waving_hand.

If it's two words, like water drop, it looks like we use underscores to separate them. Okay, so let's try this one, waving hand. So, I would do something like this, waving hand. Another one that is eco. And let's see how that looks. Come back. Yeah, there we go. This is exactly what we want. Okay, so now, think about it. We need a way to map each letter in the alphabet to one of these symbols. And again, like I noted in the last episode, it can't be a one-to-one mapping. So, we do need to shuffle, so that sometimes this eco leaf maps to the letter A, but other times it maps to the letter Z.

So, we do need to shuffle, so that sometimes this eco leaf maps to the letter A, but other times it maps to the letter Z. Okay, so let's give this a shot. Why don't we go back to our create code component. We're tracking the message, but maybe we also need to track the letters. So, should this be a Livewire computed property? Let's give it a shot. If I create a method called letters, you may know that in php, I can create an array of every letter in the alphabet by using range

method called letters, you may know that in php, I can create an array of every letter in the alphabet by using range A through Z. So, this will give me all of our letters. But yeah, like I said, I need some way to map A to one of those symbols, and B to another symbol. So, maybe, why don't we create a protected property here that will be called symbols. And yeah, we're just going to grab random symbols from that icon font. So, one of them was eco, one of them was, I think, rocket launch. Let's come back.

random symbols from that icon font. So, one of them was eco, one of them was, I think, rocket launch. Let's come back. I'm not going to make you watch all of this. Another one, should we do vaccines? That would be kind of weird. Should we do a broken heart, something like that? Yeah, it doesn't matter. You can pick any that you want. Is it heart to broken? Things like this. Okay, so now, behind the scenes, I'm going to grab exactly the number of symbols as there are letters in the alphabet. I'll see you in a minute. Okay, and through the magic of screencasting, I now have a long list

are letters in the alphabet. I'll see you in a minute. Okay, and through the magic of screencasting, I now have a long list of symbols. And yeah, I just went back and forth looking for kid-friendly icons that we can reference. Okay, so now, I want to dynamically build up an array where each key in the array is the letter of the alphabet, and the corresponding value is one of these symbols. So, that way, we can shuffle it and then say, for example, A maps to quietTime, B maps to skillet, C maps to skull. You get the idea. All right, so check this out. So, I could say collect or gather all of these letters into

skull. You get the idea. All right, so check this out. So, I could say collect or gather all of these letters into an Illuminate\Support\Collection class, and then I'm going to call the combine method. This is pretty cool. You may not know this one. It will create a collection by using the collection for keys, and then another one for its values, and that's exactly what we want in this case. So, I could say combine with the symbols, and then we could return an array. Okay, so let's just see what we have in the browser. So, I'm going to come back to our components, and let's see.

Okay, so let's just see what we have in the browser. So, I'm going to come back to our components, and let's see. We can put it right down here at the bottom. We'll call the letters method. All right, let's have a look in the browser, and yeah, there we go. So, notice A maps to enable, Z maps to air freshener. It seems to work. The only problem is, if I come back and refresh, every future visit to this website, A will always map to this symbol, and B will always map to that symbol. So, before, let's come back, before we return this array, why don't we shuffle the symbols,

So, before, let's come back, before we return this array, why don't we shuffle the symbols, and that way we always get something different. Okay, come back, refresh, and now notice every time I refresh the page, we're getting an entirely unique mapping, which is what I want in this case. Cool. So, that seems like it's working. Now, I will clean this up. I don't see any reason to create the temporary variable, so I will inline letters, and we shuffle it, we collect some letters, we combine the symbols, and we return an array, and I think that should do the trick.

and we shuffle it, we collect some letters, we combine the symbols, and we return an array, and I think that should do the trick. Now, if we want, we could maybe make this a computed property. I wonder if we need to do that. Hmm, let's try something out real quick. Let's go into the component here, and instead of doing dd right down here, let's just replace this with a dump command. Okay, so here's what I want to see. As we type into it, do we, oh yes, we do. Okay, so this is what I was thinking. Notice as I type into it,

As we type into it, do we, oh yes, we do. Okay, so this is what I was thinking. Notice as I type into it, we are reshuffling that array, which we don't exactly want. We want it to remain cached even as we update the template. So, we can get around to this by, well, caching the value here, and here's how we do it in Livewire. We use this attribute here called computed, and notice at the very top to make this work, I need to import the computed class here. Alright, so now, right down here,

work, I need to import the computed class here. Alright, so now, right down here, we're going to add an argument that we want this computed property to persist even when we perform requests to update the template. Okay, so I think that should do it. The only change is, because it's now a computed property, we will have to tweak this. Now, we reference it, just like if you're familiar with Vue, we reference it like a property. Okay, so hopefully that should fix it. I give it a refresh, and now notice as I type into it, we are not re-evaluating, or we're not

that should fix it. I give it a refresh, and now notice as I type into it, we are not re-evaluating, or we're not calling that letters method all over again and reshuffling the symbols. It remains, or it persists, for the entire lifecycle, which is what we want in this case. Alright, very cool. So, now I can get rid of that entirely, and I think we're in pretty good shape here. Okay, so now I want to finish up this episode by just getting a proof of concept. When I start typing here, I want to evaluate those letters and display the corresponding symbol for each one of them. Okay, so here's what we might

evaluate those letters and display the corresponding symbol for each one of them. Okay, so here's what we might do. First, I'm going to get rid of flex and justify-center temporarily, and then down here at the bottom, yeah, let's think about this. We have the messages string, so I can grab that, but it sounds like I need to explode that into each of the individual characters, right? So I want an array of every character in your message, and then I'm going to loop through each of those items in the array, and rather than display that letter, I'm going to display

message, and then I'm going to loop through each of those items in the array, and rather than display that letter, I'm going to display the symbol that corresponds to that letter within our letters computed property. Okay, sounds fancy. It's not fancy at all. This should make perfect sense. So let's get started. To begin, for each, and why don't we begin with string_split. Grab the message, convert that into an array of letters, and for each one, at least initially, why don't we wrap the letter within a span tag, and let's see if that works. All right, so I type hello,

why don't we wrap the letter within a span tag, and let's see if that works. All right, so I type hello, and yeah, right down here, we can see hello split into individual characters, where each one is wrapped within a span tag. Okay, so now you can see where we're going. I can add that class that the icon font told us to add. What was it? Material, is it this? Material symbol outlines, and then instead of the letter, we want the symbol as the value. So we could look in the letters computed property and find the symbol for the corresponding array, right? So if letter is B,

So we could look in the letters computed property and find the symbol for the corresponding array, right? So if letter is B, we are looking in that array and grabbing the symbol that matches B. All right, let's see if that works. I hope it does. Hello, and oh, yes, we have to be aware of this. So notice, if I do all lowercase, I'm not seeing the symbol yet, but it does look like we're grabbing the corresponding symbol. But yeah, we have to be careful because that message array could have a mix of characters, and it could even have symbols that are not represented by a letter.

because that message array could have a mix of characters, and it could even have symbols that are not represented by a letter. So if I start with capital A, we're going to get an error. If I use a period, once again, or if we delete that and then do a period, we're going to get the same thing because there is no key that matches a period or a capital letter. So let's begin by first doing stringToLower. That would fix it. That would fix the capital letter issue. A, B, C, yep, and now notice again, we're getting there.

fix the capital letter issue. A, B, C, yep, and now notice again, we're getting there. However, what about exclamation points or question marks? We're still going to have that issue. So maybe we could say, well, if we don't have a matching symbol, then just default to whatever the character is or maybe I shouldn't call this letter because it could be something else. So why don't we rename it and call it character instead? Okay. So now if I type capital H, capital E, lowercase l, o,

Okay. So now if I type capital H, capital E, lowercase l, o, exclamation point, yeah, notice in the case that we don't have a matching symbol, it just uses the original character. Okay, but I feel like we should be seeing the symbol and we're not. So my guess is I'm using the wrong class name. Let's have a look. Okay, so I brought back the icon font tab and let's see, one more time, we imported it and then we used material symbols. I bet it has to be plural. Come back, yeah. Okay, hopefully this will do the trick.

symbols. I bet it has to be plural. Come back, yeah. Okay, hopefully this will do the trick. Hello? Aha, it works. It's all black, but it works. Okay, so now let's give this a class of text-white, maybe center it, maybe add a little margin above the text area, and let's see how we're doing. H, E, double hockey sticks, O. It works. Very, very cool. So notice in this case we have some skulls and the earth, but if I refresh the page and try it, every single time we create a new

skulls and the earth, but if I refresh the page and try it, every single time we create a new code that the child has to break, there are going to be different symbols that match to those corresponding letters, and that's what we want in this case. So the cow jumped over the moon, but now we have another issue. Notice that we're not accounting for spaces at all. Okay, so let's see what's going on here. I'm going to copy this sentence and I will bring up the terminal. So let's do php artisan tinker and then run string_split on that sentence we just wrote. Yeah, so

So let's do php artisan tinker and then run string_split on that sentence we just wrote. Yeah, so notice how the spaces between each word are represented as their own items within the array, which means when we render this, we probably have some empty span tags. Let's give it a shot. I'll paste that in, and yeah, right down here, let's go through it. Alright, so the first word is the, so we have T, H, E, space, and yeah, notice we just have an empty span tag. So maybe what we could do is target span tags that are empty and then make them look like a space,

So maybe what we could do is target span tags that are empty and then make them look like a space, like we set the width to 50 pixels or something like that, but I don't know. I don't know if I want to do that. Maybe instead I should split the sentence into its own array of words, and then I loop over the words, and for each word, I loop over the letters and display them. That might give me a little more flexibility for how I render each word within the sentence. Alright, so let's see. It sounds like we need to tweak this a little bit. I first would need to do

Alright, so let's see. It sounds like we need to tweak this a little bit. I first would need to do let's do this as vanilla php, and then later we'll decide should this go in the component? We're just sort of spiking it out right now. I could say explode the message into words, so we're just going to find every space and then use that as our scissors to create a new item. So that would create our words, and then we could loop over the words. So then I could say

words, and then we could loop over the words. So then I could say forEach words as word, that can then be wrapped within its own div or span or something like that. I'll give it a class of word just in case we need to target it, and then within there, I could loop over each of the characters within the word. Okay, so let's see how that looks. The cow jumped. Yeah, so now notice it's displaying a little different because we have divs here. So we have one div for the, another div for

Yeah, so now notice it's displaying a little different because we have divs here. So we have one div for the, another div for cow, and another div for jumped. Yeah, so we're adding a little bit more markup, but again, it just might be a little more flexible in situations where maybe we want to highlight certain words. If we want to offer clues in certain cases, it just gives us more to target. So actually, on that note, we might even want to add a class of character so that we could target individual characters with CSS if and when we need to. Next, of course, there's no reason to create a temporary variable there.

with CSS if and when we need to. Next, of course, there's no reason to create a temporary variable there. So I'm going to inline that, and I can get rid of the PHP tags. And this is what we end up with. Maybe like that. Good? Cool. Okay, so now check this out. If I paste in our message again, now I could target the wrapper of all of the words. It looks like it's this one here. I could then say display a flex, and then I could use a gap in between each of the words, like a gap of 10 pixels, more, more, 35, maybe something like that.

each of the words, like a gap of 10 pixels, more, more, 35, maybe something like that. And now it's crystal clear where our spaces are. And yeah, once again, in situations where we need to wrap the words in some way or style them so that they have a consistent background color, now we can do it because each of the characters is wrapped within its own corresponding div that represents the word. So maybe right up here, we'll say flex and gap, and I don't know what the right number is. Would gap 6 be okay? Paste it in.

what the right number is. Would gap 6 be okay? Paste it in. Maybe 7. Yeah, that looks good to me. But yeah, already it's starting to work. So we still have more to do. We want to optimize it, clean up the code a little bit. We want to set some print styling. But at least for now, to finish up this video, why don't we fix the alignment and then call it a day? So I'm going to bring up the inspector here. And let's see, we have a form. All of this is wrapped within a div. So once again, we could set display: flex, justify-content: center.

All of this is wrapped within a div. So once again, we could set display a flex, justify content to the center. Why don't we set the flex-direction to column? But in that case, it reverses things. So I would want to do align-items to the center. And let's see. Yeah, that's basically what we want, at least for our rough draft. So we can do it up here. flex, flex-direction column, items center. All right, come back. That seems to have fixed it. The cow jumped over the taco. What?

All right, come back. That seems to have fixed it. The cow jumped over the taco. What? I'll see you in the next episode.