Okay, let's work on getting the progress bar animation to work on this main page. So if you remember, we're making use of Livewire components here. And because of the way we're using it, the DOM is loaded in a different way than a server rendered Laravel page, like in the last video. So our JavaScript is not rendering here. Let me just illustrate what I'm trying to say. If I go into my popular games view, and I am looping over each popular game. If I do this, so push, and push, and I push to the scripts, you would expect this to happen 12 times. So just console.log('hi').

12 times. So just console.log('hi'). Oops, that should be within the <script>. So <script>, you would expect this to actually work. But if I refresh the page, it doesn't render that JavaScript. So we have to do something different for our Livewire components. So let me just get rid of this. So what we can do is make use of Livewire events and listeners. That way, we can get the JavaScript to work correctly on this page, or on all of our Livewire components.

That way, we can get the JavaScript to work correctly on this page, or on all of our Livewire components. So there's two steps here, we have to fire an event, and we can fire it from the template component or from global JavaScript. And then we have to listen for the event. And we're gonna do that in JavaScript. So let's take a look at listening for the event first. And then we'll fire it off from the component. So here is the code for listening to events in JavaScript. So let's grab this.

Let's copy this. Okay. So now, when there is a PostAdded event fired, this JavaScript will run. And you can see you can pass through parameters as well. And we'll do that. So now let's fire off an event. And let's see if this listener gets triggered. So let's go back up. Let's go to firing from the Component. And all we have to do to fire an event is to use the emit method inside our Component.

Let's go to firing from the component. And all we have to do to fire an event is to use the emit method inside our component. So let's grab this. Let's go to our PopularGames class. Okay, and let's emit the event here. So let me change our listener. Let's make it a console.log instead. So it's not blocking. Okay. And we're listening to for a postAdded event.

Okay. And we're listening to for a postAdded event. So let's emit that here. So let me just emit that event here. Let's put it here. Okay. And you can pass in parameters here. So let's say I'm just going to pass in a number. And this will correspond to the postId here. So now if I did this correctly, it should listen and it should console.log.

And I guess I can put this underneath. Okay. And let's just collect this popular games. So after it's formatted and we only want the ones that are or that have a rating. So let's filter them down game. Okay. And we only want the ones that have a gameRating. Okay. And we want to foreach over those or each in this case and function game and we can emit the event in here.

And we want to for each over those or each in this case and function game and we can emit the event in here. So we'll leave it as this post added and then we'll change it in a second. Let's just see if this gets emitted in this case how many times one two three four times because there's four games with ratings. So let's see if this works. Let's save it. I did. And see if we get we have their return. And I have a typo here.

And see if we get we have their return. And I have a typo here. Sorry. Let's try this again. Okay. So you see it happened five times that I count wrong one two three four or five. Yeah. So that's right. And let's just refactor this. Let's change the name and say GameWithRating added and change what we're passing through.

And let's just refactor this. Let's change the name and say Game with rating added and change what we're passing through. So we need a slug in the gameSlug and we need a rating pass in the gameRating divide by 100. Okay. And now in our view we can say params here and we can say was it params slug. See if this works. So let's just see if the parameters are getting passed through. So we're getting this numeric value. So this might be in our format method here.

So we're getting this numeric value. So this might be in our format method here. Yeah. We don't need percent anymore. Okay. Let's try this again. And did I forget to change the name. Yes, I did. So game with rating added. Okay.

So there's two cases. There's the case when it's just a regular server rendered level page like we did in the last video. And there's a case where it's a Livewire component. So let's try to make this work for both cases. So let me just get rid of this or we can comment it out and then remove it when we have it working. And we want to include the rating partial. And I'm going to pass through the event. That's the only thing we're passing through, because we're getting the slug and the rating.

And I'm going to pass through the event. That's the only thing we're passing through, because we're getting the slug and the rating directly from the params variable. So event. And the event is called the gameWithRatingAdded. So now we just have to make this account for both cases. So it's a bit messy, but after my first pass, this is what I did to get it to work. So if it's a Livewire component, then it has an event and we want to pass in this listener. So we need to listen using the window.livewire. So let's just do a conditional here.

So we need to listen using the window.Livewire. So let's just do a conditional here. And we are within a Blade component, so we can do if. And the condition is if there's an event, so you just do it if there's an event. And I'm going to paste that in and I'll join the line here. And we also need to do one here. And the condition here is, again, if there's an event, and we just duplicate this. And if there's an event, then we're getting the slug from the params variable. So we can just do params.slug. And we can do the else case here.

So we can just do params.slug. And we can do the else case here. And we can just put this in there. Okay. And then this remains the same. And we should change the rating here. So same thing. If event. And we can just do, we just duplicate this, bring this up. And we can just get it from the params here.

And we can just do, we just duplicate this, bring this up. And we can just get it from the params here. So let's do params.rating. And believe we divided by 100 when we passed it in. Okay, rating. And the else case will be what we have here. Okay, let's see if I did everything right. And am I calling it right from here? Yeah, I am. So we're passing in an event here.

Yeah, I am. So we're passing in an event here. And let's see if this works. Unexpected end of input. Okay, I think I'm getting this error because I forgot to close one of the tags here. So back to our rating. Yeah, we have to close one more thing here. So we got check if event. Then we just got to close out this. So we just need this.

And everything looks okay. Let's check the single game page, see if it still works. And it does. Cool. See if this still works. Awesome. So we have to do the same thing for the recently reviewed because this has a rating as well. So let's do that. So let's go to recently reviewed. And let's first get rid of this percent.

So let's go to recently reviewed. And let's first get rid of this percent. Okay. And let's go to popularGames again and just grab that piece of code that emits the events. So this. Okay. And let's paste that in. And this will be recentlyReviewed. And let's just change the slug here because the ID slash slug already exists for the popularGames.

And let's just change the slug here because the ID slash slug already exists for the popular games. So there could be a case where there's two IDs with a game in here and a game in here. So let's just change the ID name for the reviews. So let's just prepend it with review_. Okay. Sorry. This is php. So it's a dot. Okay.

Let's go to recently reviewed. And let's paste that in the bottom. And let's give this an ID. So the ID will go on here, which is the rating. So ID equals, say, review_ and then the gameSlug. And hopefully I did everything correctly. And this should now work. Let's check. Okay.

Let's check. Okay. It looks like I forgot something. Oh, yeah. I think I'm listening for the wrong event. So back to recently reviewed down here. Yeah, it's a ReviewGame with Rating added. See if this works. Oh, yes. So if you go into our Rating here, you'll see that I hard coded the event name in here.

Just say text access here. I guess I don't even need this, do I? Okay, that's good. Awesome. So now we have our rating working for both the popular games with Livewire components. And you can see that here and here, and also in the games page here, along with similar games down here.