Transcript from the "Using Two-Dimensional Arrays" Lesson
>> Moving on from option two as our starting point, why are we still recomputing these indexes? We don't need to recompute the indexes, do we? Because we saved it with the title element. Let's get rid of these index UPS. Now, we don't need the board yell anymore. It's nice.
[00:00:39] Or do we need the road yield? I love it when I get to delete stuff, my favorite programming activity. Does anybody spot the problem with this code? What's gonna happen right here? Actually, I'll be even more specific about it. What's gonna happen right here?
>> Someone said strings.
>> Yep, we still have the same problem. These things are coming out as stings and we're trying to do numerical addition with them. And depending on which numerical mathematics we do with it, we might end up getting string concatenation instead of incrementation the way that we want. So quick little fix.
[00:01:21] If we can just, Force those to be numbers. Number is my favorite way to explicitly cast a string to a number. Other people like the plus operator in front of it. I think that's harder to understand. Next thing that we want to change, I know we're kind of going back and forth on a number of these things.
[00:02:28] It's the data structure that we probably should have done at the beginning, but we got away with just using the DOM as a data structure to start with. And now we want to create a real data structure that is a two dimensional array. Turns out it's not gonna be nearly as hard as you think it is.
[00:02:45] To do that, we're just gonna construct that two dimensional array, as we construct the doll. So I'll make tiles into an array. I will, For each row, construct a row array, we'll call it row tiles here. I will append into row tiles, a reference to the div that we just created.
[00:03:12] So rowTiles.push(tileEl) I think for good measure I'll put that at the end, just so, it's more obvious where that's happening. And then, after I've appended, I don't need to append anything, because rowTiles is, it needs to be pushed into tiles ahead of time. So, tiles.push rowTiles. Now I can get rid of this line.
[00:03:48] I love deleting things. There's where we got rid of that whole query selector all call. So now we're just pushing into this array, a set of row arrays and into those row arrays, respectively the tile element references. Can everybody see that the end result of the draw function is that we now have a DOM built up of a two dimensional matrix of DOM elements.
[00:04:30] So we've constructed ourselves a nice little fast index to get at the elements that we want. Unfortunately, it is gonna temporarily slightly complicate our loop here. So we're going to need to do a two-dimensional loop to be able to go through them now instead of a single-dimensional loop.
[00:04:59] So our clearing of the highlighted is now going to be row of tiles and tile, we'll just call it el of row. And we'll do the same thing down here with our FindTile, we need to adjust this. But here's a bit of a payoff. I'm more excited about this payoff than you are but I like it that this is just now that.
[00:06:18] And unfortunately I'm gonna have to change those parentheses to square brackets. I mean take out the parentheses I should have done let me back this up. I should have done tiles, And then I change these, To square brackets.And now we can just delete find tile entirely, which gives me even more joy.
[00:07:57] But I got to be honest with you, I'm getting a little bit tired of trying to polish what is basically just an ugly piece of junk. And at this moment, I as an algorithmist I'm asking myself, did some of those early decisions I make sort of paint me into a corner?
[00:08:20] Did they force me down on a road that I now wish I wasn't down. And I'm gonna do is, any good algorithmic should do at some point. You need to take a step back and potentially we think the whole problem. This code roughly l Minus a few potentially slightly different variable names, this is option three.
[00:08:46] So that's your new starting point for the final iteration that we're going to make on this code. But before we make that iteration on this code, we've got to go rewire our brains.