تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Planning Final Cleanup0:00

At this point, you've been watching for around two hours, and our game is feature complete. We have tile highlighting, we have validation, we have keyboard highlighting. It all works. And I was always taught, do not outstay your welcome. So let's take a couple more episodes, clean up the code base, do our final sweep, and then we'll call it a day. All right, the first thing I want to do is visit my game. And at the moment, we are hard coding the word. But of course, that was only temporary. You remember, we do import from this words file. And this is a big array of all valid three-letter words. Now, one option, I don't want to do this, but one option would be to pick a random word from that array. So for example, I could say allWords. And if I want to choose a random item from an array, you can do something like Math.random().

Selecting Random Words0:41

to pick a random word from that array. So for example, I could say allWords. And if I want to choose a random item from an array, you can do something like Math.random() times the number of items in the array, so allWords.length, and then we need to make sure that we Math.floor() it. So bring it down to the closest number. And I think that should do it. Let's have a look. Let's go to a net, and I will alert this theWord. And if we give this a shot, every single time, H_Y_E, that's a valid word, I guess. One more time, R_I_D. But yeah, this is sort of what I mean. This is technically correct, but I would never want to give a kid some of these weird words that they would never know. So maybe we should draw a distinction between allWords and the actual words we would provide to a child. Okay, so with that in mind, let's return to our file here, and let's say export

Organizing Word Lists4:02

So in that case, you might have multiple files, we might have words.js, three-letter words.js, four-letter words.js, five-letter, you could go as high as you want to support, probably three to six-letter words. And then, based upon the length of the secret word, you would asynchronously or dynamically import that file. And that would be one way to do it. I think it's a little overkill for what we're building here as part of a screencast series. But yeah, I wanted to throw that out there. All right, next, let's do a refactor sweep through these files and finish up. Okay, I'm just going to scan it like we've done a couple times before. Remember, this is something you do over and over. You keep scanning these files in search of things that jump out at you. This all looks fine. fillTile, emptyTile, good. submitGuess. Yeah, this, I think, I could tweak. This might be a situation where if-else is actually more readable. Right now,

Refactor Sweep Pass6:32

if there are no remaining guesses, update the state, update the message. Otherwise, let's increment your current row, update the message, and continue on. I actually think this is better than what we had before. Okay, so one more time, let's do a little sweep here. We have our letter. The letters could actually move to a keyboard component. That would be one thing we could do here. If we wanted to extract a keyboard.js Alpine component, that would be an option. I'm not going to bother with it, but it's a refactor you could eventually do if you wanted. We have some getters, a net, a couple methods. This logic could be cached, but I'm not going to worry about it. This looks good. Feel good. Pretty good. submitGuess is a little bulky for my taste. But again, it's the workhorse here. And actually, while we're here, let's return early there. These are sort of like our guards for the method. Yeah. Okay,

Reworking Letter Matching10:39

and let's just set it to null. Because now, this should no longer be included in our search. Okay, so that will loop over the current row and update any correct letters. Okay, so that's our first loop of the current row. Now we're going to do it again, but this time check for present letters. So once again, for let tile of row, and I'm using the same logic we had before. So we could say something like if the word includes—remember, you can call includes on a string or an array, so that doesn't need to change at all. If the word includes the letter—so now we're saying if that letter, if the current tile is anywhere in this list, then it should be marked as present, right? So tile.status is now present, and then we need to, once again, remove it from the array. But we have to figure out where. We can't do what we had before. We have to figure out where it occurred. So I could say something like the word, and then let's say, give me the index of where

Refactoring PatternsRandom Item From Array

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟