Okay, let's continue with our refactor and work on the single game page here. So let's go into our code, and this is the show method. And just to keep it consistent, I am going to follow what I did in the last video and just make a method here. But if you want, you can make use of this package or just extract to your own class. So this package will work because, if you remember, this is just normal Laravel without the Livewire component. So let's do the same thing here. We'll make a helper method that is responsible for formatting the game for the Vue. So let's say format

So let's do the same thing here. We'll make a helper method that is responsible for formatting the game for the Vue. So let's say formatGameForVue and it's passing the game. And let's put that method here. Let's make it private and say formatGameForVue. Okay, and it takes in a game. And let's make a temporary variable here so we can dump it, and then later on I'll just return it when I'm done. So we just want to collect the game fields and merge it.

later on I'll just return it when I'm done. So we just want to collect the game fields and merge it with the fields we want to format. And let's just say return temp here. Let's just say foobar to see if this works. Okay, and back to here. Sorry, this should be a $ sign. And this should still work. And if we need to dump it, we can just dump it like this, and that should show up here. Okay, cool. And let's start with

dump it like this, and that should show up here. Okay, cool. And let's start with the cover image. So if we go to our show.blade.php, we are doing this. So it's basically the same as what we did in the last video, so I'm just going to copy that. So where is it? Right here, coverImageUrl. And it is a large image, so coverBig. So that should be fine. Let's go here, back to our GamesController, and let's paste that in. And we can replace our Vue here. So let's just

let's paste that in. And we can replace our Vue here. So let's just do this. And let's say gameCoverImageUrl. And that should work the same way. And let's make sure to import string. And let's double check. Okay, cool. Next is the genres here. So if you remember, we just did a loop over them in here. And I am just

genres here. So if you remember, we just did a loop over them in here. And I am just going to do this within our format method. So let's just output this here. So gameGenres. And let's do the work in our GamesController. So this is similar to what we did for the systems in the other components. So we are going to select the gameGenres. And then we are going to pluck what we want. So in this case, it is just a name. And then we can use the implode method.

And then we are going to pluck what we want. So in this case, it is just a name. And then we can use the implode method to add commas. So we want to add a comma and a space between every item in the array. And that should still work. And now the trailing comma is gone, cool. Next is this companies, and I believe we just took the first one here. So we can move this to our controller. And let's just put game, let's name it involvedCompanies. And let's go back to our controller.

let's just put game, let's name it involvedCompanies. And let's go back to our controller and say involvedCompanies. And let's just paste that in. And what's next? Next is, let's just see if that works first. Okay, next is the systems. So same thing as this, but for the systems or platforms. So gamePlatforms, and we're plucking

next? Next is the member rating and the critic rating. So if you go into our show, we are doing some formatting there. So we can move all of this into our format method. So we can just output the game memberRating, and the same for the criticRating down here. And we'll do this check for the array_key_exists in our format method. I mean, this will be criticRating. CriticRating. Okay. And let's go back to our format method. And let's start with the memberRating. So we'll name it member

Critic rating. Okay. And let's go back to our format method. And let's start with the memberRating. So we'll name it memberRating. And we have to do the check. So array_key_exists(rating, $game). Make sure it exists. And we can do that logic. So just round the $gameRating and add a percent sign. And if it doesn't have one, we can just put 0% as a string. Let's do that.

Okay. See if this works. And it does. Cool. And we'll get to the social in a second. Let's move on to the trailer. So if you look at the show.blade.php, you'll see that we're doing some appending of a string for YouTube. Where is it? Right here. So we'll just do this in our format method. So let's just grab this. And then we'll call it trailer. So say gameTrailer. Okay. And in our format method, we can create

here. So what are we doing there? Screenshots. So we have a huge screenshot and a big screenshot. So what I want to do is just have a field here called screenshotHuge and screenshotBig. So like this. So we named the variable screenshot. So I want it to be like this screenshotHuge for this one and screenshotBig for the other one. So let's grab this. Okay. And let me replace this with screenshotBig.

So let's grab this. Okay. And let me replace this with screenshots. Okay. So let's make this work. So let me just move this up and say screenshots. And I'm going to collect the game screenshots. Okay. And I'm going to map over them. Say screenshot here. Sorry, this should be here. Okay. And open it up.

And here we can check it in the format method. So we just have to check if it exists here. And we can just say gameRating here instead of doing all this rounding stuff. We'll do that in the format method. And for the platforms, we can just output that. So gamePlatforms. Okay. So back to our controller and let's make this work. So we want similarGames. And we want to collect similarGames. So we can make use of collection methods. similarGames.

to collect similar games. So we can make use of collection methods. Similar games. And let's map over them. Let's say function game. And let's put a semicolon before we forget. And here we want to merge the fields. So collect game and then merge. And here is where we can do all that logic. So you've seen this several times already. So I'm just going to paste in the code here. Okay. So I pasted in the code and you can see that I'm checking if the cover exists.

in the code here. Okay. So I pasted in the code and you can see that I'm checking if the cover exists. And if it does, then just do what we've been doing. And if not, we'll put a placeholder image in there. And the rating and the platforms are the same as before. So let's see if this works. And we have an undefined index of cover image URL. Okay. So as you see, I named the key similar games without an underscore. And I believe I put the wrong one here. So let's change it. See if this works. And it does. Cool. And if you go down,

And this is going to be an array. And the first one will be the official website. And then we'll get it from the game websites. And like I said, I just want the first one. Let's do that. And for Facebook, say Facebook, we want to find the website. So we're going to use the filter method. Say function website. And let's just use the contains method on the String class. So

And let's just use the contains method on the String class. So return string contains. And the string we're searching in is the websiteURL. And we want to make sure it has Facebook for this case. And if it does, let's just grab the first one. And let's do the same for the other socials. So Twitter and Insta. Let's just change these. Twitter and this to Instagram.

key exists. So let's just return it here. And everything should work now. Awesome. So now our views are much cleaner, and all of the logic is being performed in a method.