All right, we're getting close. In this episode, let's see if we can get keyboard highlighting to work. So if I look for, how about, try? Yeah, at the moment, we have highlighting up here, but on the keyboard, nothing. All right, let's get going. I'll visit my welcome.blade.php template, and yeah, right down here where we render the keyboard. Now, you'll remember we have these classes for correct, present, and absent. So if I hardcode that and refresh, of course, every key is green. Or we could do present, and then they're yellow, and then finally absent to make them a dark gray. Okay, so now we just need to conditionally apply this class to a key if there is a matching tile for that key. Okay, so let's do something like this. We'll say matchingTile. I'm just going to be very verbose here, and then we can clean it up, or shorten it, or extract it. So matchingTile for key, and then I pass through the key itself. So if there is a

tile. I'm just going to be very verbose here, and then we can clean it up, or shorten it, or extract it. So matching tile for key, and then I pass through the key itself. So if there is a matching tile, that would then, of course, return a Tile object. Let's then grab the status of that matching tile, and that status will be one of our classes. All right, so matching tile for key, and then status. But yeah, what if there is no matching tile for this key? In that case, let's make this optional. So if this isn't null, then give us the matching status. And that way, we don't throw an error. Okay, let's see if we can get this to work. I'll throw it on game, and we'll do it maybe just right up here to start. All right, let's work this out. So again, if I look for try, I want to say, okay, when you render the key, I want you to first look into our board and let me know, is there a tile on the board that has

All right, let's work this out. So again, if I look for try, I want to say, okay, when you render the key, I want you to first look into our board and let me know, is there a tile on the board that has the same letter? And if there is, I want you to return to me that exact tile. Okay, so we would say something like this.board. But don't forget, board right now is an array of three items. So for example, if I just log this for now, we're going to get a bunch of logs here, but they're all the same thing. And yeah, notice it's an array of three items, where each item represents a single row, right? What if we flatten it, though, I can call flat. Now, that will break it down to an array of nine items, where each of those items is a tile and nine because three by three. Okay, so let's just work this out, flatten it down, and then try to find the first tile, where the tile’s letter equals the key that you passed in. And then I'll convert that to lowercase

of the array. That way, when we then loop over the array to find the first matching tile, well, the correct ones will always be at the top. Which means if there is a match, it will grab those first. And that's it. So yeah, in this case, it's going to return a boolean. But when we cast the boolean to a number, for example, cast true to a number, of course, that returns one. So if this second tile has a status of correct, we return one. And yeah, I think that would do it, honestly. So if we come and give this a refresh, try, notice T is yellow. Now let's put T in the correct spot, and it updates. And even if we do it in reverse, rat, and then do try, there is no change. And that's specifically because of the sorting. Cool. So let's do this. Let's go ahead and remove the braces. I don't think we need it. And this is basically what we get. Flatten the board down, filter them to only include the tiles that have received a letter, then sort them so