Alright, let's get back into it. So you'll see I've updated my route to point to a dedicated controller. Again, this is fairly temporary just for the lesson, but it gives us something to work with. So I'm referencing a generic PagesController, and then an action called achievements, which loads a view. Here is the view. And at the moment, we just have a basic heading, some tailwind classes, that's about it. So if I switch to Chrome, this is what we get. Here's our main area.

So if I switch to Chrome, this is what we get. Here's our main area. Okay, so the first step is I want to grab all achievements. We know we can do that with a basic Eloquent query. So we'll say here, achievements, let's grab that Eloquent model, import it, and then let's grab all of them. Next, if we go back to our view, here we could say foreach achievements as achievement, like so, I'm not even sure how we're going to present this yet, maybe each one will be placed, at least to start, within a div. And then we do need an image.

placed, at least to start, within a div. And then we do need an image. And you'll remember in the last episode, we placed them within the images/badges directory. And then we just need the achievement-icon, and you'll remember we have that stored in the database. That's just the name of the file. Finally, let's do alt text, that will be the achievement, what is it, name? Let's double check. Yeah, we have the name, and yeah, again, we have the icon there. Okay, so to start, yeah, let's just do that.

Yeah, we have the name, and yeah, again, we have the icon there. Okay, so to start, yeah, let's just do that. Let's see what we get on the page. Refresh, and we get two circle icons. But don't forget, those are the representatives for, you know, fancy, cool-looking icons that I've yet to have designed. At the very least, let's line them up properly. So maybe we'll have a wrapping div down here. And then we will use a class of flex to place them in line. And then I will justify the content to the center.

And then we will use a class of flex to place them in line. And then I will justify the content to the center. Okay. Finally, each of these should have a little padding maybe on the left and right. Good enough. Use your imagination. Next, why don't we place the achievement name below it? Maybe right here. And here again, we'll say font bold. And let's see what that looks like.

If you have earned one of these badges, we'll use the standard color. So with that in mind, let's switch back. And I do have an achievements.sass file we can work with. So right here, let's give this a name of achievement, and then we'll target it. So by default, we'll have a filter grayscale of 1. And whoops, that should be a class. All right, let's see that in the browser. Give it a refresh. And now all of our achievements have a grayscale. And again, if that was an icon, you could still see the icon.

And now all of our achievements have a gray scale. And again, if that was an icon, you could still see the icon. It would just all be in shades of gray. Now we're going to say, if I switch back, if the User has earned this achievement, well, maybe we should add an additional class. Something like, maybe, let's be direct. Something like hasBeenAwarded. An achievement that has been awarded should not have that gray scale. Okay, so how can we do this? Well, let's go back to our PagesController.

Okay, so how can we do this? Well, let's go back to our PagesController. At the moment, we just have a list of all achievements. Why don't we add another one? And you know what? Later, we could even make this a view component. At the moment, we're just trying to get something on the page. So let's say awarded achievements. And that would be auth user. And we should, of course, add the necessary middleware so that only the user can see their

And that would be auth user. And we should, of course, add the necessary middleware so that only the user can see their own achievements. And if you're not signed in, you can't see this page, stuff like that. Like so. Okay, so now we have two collections, one for all achievements and one for only the achievements that the user has acquired. Now you'll notice, if I go to a standard Collection class, there is a method called contains. This lets us know if the given item exists within the collection. Let's see if we can use that.

This lets us know if the given item exists within the collection. Let's see if we can use that. So maybe, I'll do it right here, if our collection of awardedAchievements contains the current achievement in the loop, then that means the User has earned it. So hasBeenAwarded. Otherwise, you know, if you want hasNotBeen, it just depends if you need to target that, if you want to make that explicit. Why don't we add it just for the video? Okay, so now I'm going to come back to our .sass file and we'll say, give me all achievements but not the one where there's also a class called hasBeenAwarded.

Okay. I will once again find myself. Here's our snippet from the last episode. Get my experience and award myself some huge number, like 20,000. And that should be enough to meet the Larikast Mastery badge requirement. Let's double check. I can't remember. Yeah, it's 10,000. Okay, so we'll give ourselves 20,000 here just to be safe. Run it.