can make it work in our application. So let's go to the docs. And let's install it using NPM. Okay, and let's go ahead and install it. Okay. And let's see how we can use it. We can just require it in. So let's do that. So let's go to our bootstrap.js right here. And let's put it right here. So we can do window.progressBar = require('progress-bar'); Okay. And it's run npm run dev. Okay, and let's go to our app.blade.php. And let's make sure to include our app.js put after our scripts. So <script src="js/app.js">. And it's also make a stack for scripts. So we can add on any scripts in our other pages. Say @stack. Okay. And let's just see if this works in our app. So I'm gonna start with the game page because there's a bit of extra work we have to do for the live components because of the way the DOM is loaded. So let's start with a single game page. And let me just see if progressBar is a valid object. So let me just go into console, progressBar,

components because of the way the DOM is loaded. So let's start with a single game page. And let me just see if progressBar is a valid object. So let me just go into console, progressBar, and it is cool. So for this page, we need to add a rating on these two and also on all the similar games that have a rating. So if you look at the example here, we have to pass in a DOM element. So let's go ahead and give our app at least these two an ID and then we'll work on a similar games after. So back to our code, let's go to show.blade.php. And let's give these names. So let's name this memberRating and criticRating. So that goes in here. And this is a circle. So let's give this a actually start with this one. Let's give this an ID of memberRating. Okay. And let me just comment this out for now because this was just here so we can render the rating. But now the library is going to do that work. So let's see if the circle is still there. And it is cool. So now

comment this out for now because this was just here so we can render the rating. But now the library is going to do that work. So let's see if the circle is still there. And it is cool. So now we can just take the example code, sort of base it on this. So let me grab this back to our code. And let's see if we can just dump it in a script here and see if this works. So let's do that. And for the container, we just have to grab this DOM element. So let me just grab that. So say const progressBarContainer equals document.getElementById('memberRating'); And we can just put that here. So progressBarContainer. Okay, let's see if this works. And progressBar is not defined. That's because we have to push it on to our scripts stack. So we have to wrap this script in a push, and we want to push it to the scripts. And it's and the push down here. And push. And we'll clean

And let me change the trailColor. So that's another setting called trailColor. So let's just add that. And this should look good. Now let's also add the percent sign. So I'm gonna say, if there is no value, put 0, 0 percent. And if there is one, then we can append the percent here. Sorry, not dot, I am in JavaScript. So plus. Okay, that looks good to me. And let me just fix this trailColor. I think I had a double hash there. Okay, so that looks good. Cool. Okay, let's clean up our code a bit, because we're gonna reuse this. So I'm gonna make use of Blade partials here, just so we can reuse our code. So let me show you what I mean. Let's grab this. So the whole script, actually, make sure we grab the whole script. Okay, I'm gonna cut that. And like I said, I'm gonna use Blade partials here to clean up our possible duplicate code. So include. And I'm gonna name

make sure we grab the whole script. Okay, I'm gonna cut that. And like I said, I'm gonna use Blade partials here to clean up our possible duplicate code. So include. And I'm gonna name it _rating. And I'm going to define some variables here. We need the slug. Say memberRating. We need the rating. And that is this gameRating. So gameMemberRating, which is coming from the loop. Okay. And we need one more, which I'll make use of later. And you'll see what this is later. So event is null. Okay. And let's go ahead and make this Blade partial. So let's go into views. You can put in the folder if you want. I'm just gonna put it in the root. Say _rating.blade.php. And let's paste that code in that we copied. And it's reinvent this. Okay, so now we're passing in some variables. So the slug is one of them. So we can replace this with the slug. Say slug. Okay. And down here,

that we copied. And it's reinvent this. Okay, so now we're passing in some variables. So the slug is one of them. So we can replace this with the slug. Say slug. Okay. And down here, we want to pass in the rating. So let's say rating. And we have to divide it by 100. And let's get rid of this comment here. Okay. And doesn't seem to like that. Not sure why. See if this works, or still works. And we have an error. Okay, so this is an error, because we're passing in 90%. And we only want 90. So I believe that's in my GamesController. So let's see what we're doing here. So yeah, we no longer need the percent here. So let's say just that. And the same for criticRating here. Okay. And we might not even need this. So let's take that out. And see if this works. Okay, so it does. So now we can do the same for a critic

just that. And the same for criticRating here. Okay. And we might not even need this. So let's take that out. And see if this works. Okay, so it does. So now we can do the same for criticScore. Now that we have a partial. So let's go back to our show. And we just have to do this, but pass in the criticRating. So right here, what I do again, so I gave this an ID, say criticRating. And I don't need this. Paste that in. And this is criticRating. Okay. And this is criticRating. Okay, see if this works. And we don't need this anymore. See if it works for criticScore. And it does not. And says progressBarContainer has already been declared. Okay, so I just changed it to var. And that seemed to have fixed it. So I'll just stick to var. This is not rendering correctly. So let's put that or put a relative on it. So let's put relative on here. And text-sm if that renders in the correct space. And it does cool. And for the similar games,

correctly. So let's put that or put a relative on it. So let's put relative on here. And text-sm if that renders in the correct space. And it does cool. And for the similar games, we can do something similar and just push the scripts for each of those games. Let me grab this. And I think the similar games are down here. So we have to go into our GameCard component, so GameCard. And in here, let's say after the div, we can paste that in. And it's reindent. And the slug is going to be gameSlug. And this is going to be gameRating. And the event can still be null. Okay. So let's see if it works for similar games as well. And again, this error, it's because we have to change our GamesController again and remove the percent sign. So go back to our GamesController. And for similar games for a rating here, you don't need this percent. Okay, try again.

sign. So go back to our GamesController. And for similar games for a rating here, you don't need this percent. Okay, try again. And we have to give it an ID. So let's do that. So the idea I gave it was just the slug. So the idea I gave it was just the slug. So let's put an ID on this right here. ID equals game->slug. Oops, we need curlies for that. And let's see if this works. And we just have a CSS error. And I don't think we need this anymore. And there we go. You can see the ratings animate for each of our similar games and also for this.