Tic Tac Toe Demo

[00:00:00]
>> Earlier we were looking at this little tic-tac-toe page, this little tic-tac-toe game. Yeah, what we're gonna do is just quickly walk through and play tic-tac-toe by using our newfound object and array skills to manipulate the built in object document and all of its many different properties that we now know what we're dealing with here.

[00:00:25]
So what we've got here is a page that displays information about the players. Right now, earlier we had been working through, just working with the strings themselves that are in these little divs and spans and things like that. But right now I'm going to start thinking in more javascripting terms.

[00:00:44]
So I'm going to start representing the data that we need in order to do stuff on our page with objects. So let's create an object. In this case, I would suggest we use an array to represent the two different players that we have in this game. So in this case, our game, we're only gonna play one time and our players are not gonna change.

[00:01:12]
So how should I declare a new array called players that I don't think is ever gonna need to change? How would I create a new variable that points to players? That's not gonna change?
>> Const.
>> Const, beautiful. Okay, so const players is gonna be an array. And within this array, I want two objects.

[00:01:37]
I want each object to represent one of the players. I'm gonna be the first player, so I'm going to say that this object is going to have a name, property Anjana, if I can spell my own name right. Then I'm gonna use a comma to create a new property of my symbol.

[00:01:53]
And I'm gonna claim the x symbol here. Now, I'm gonna play against all of the rest of you. So let's create another object. So right now, players has one thing in it. Name Anjana symbol x. Now I want to add another thing to my player's array. How do I do that?

[00:02:22]
I wanna add a second thing to my player's array at the end. What's the method that we use to add stuff to an array?
>> Push.
>> Push, great. Okay, so players push. I'm gonna push on a new object that represents the other player and that's gonna be all of you.

[00:02:41]
Everyone else is your name. [LAUGH] And I'm gonna add another property to represent your symbol. So what do I type to represent that everyone else is gonna be playing with the O?
>> Symbol.
>> Symbol. And then I wanna put a value on it so I need a colon, and then the symbol itself which will be the string 0, great.

[00:03:06]
Okay, so now players.length should be 2. And if I want to get, let's say, okay, we had, what was it? Document.getElementById, I think it was called p1-name. TextContent, right now it's Anjana. Okay, so that one is fine, that one didn't change. If I want to update the textContent of the other player, in this case, I think it was called p2-name.

[00:03:37]
So this is review from yesterday. Right now it says it's Mack, but it's not, it should be all of you. So how do I use my players object to set the textContent of this element to the second player's name? Let's walk through it together. So I want to assign, I want to change the textContent here, right?

[00:03:58]
So I'm going to getElementById p2-name textContent. And then if I wanna change the value of this, I can type in equals exactly. Now, I want the value of this to be everyone else, how do I get that?
>> Players.
>> Players. So we had in our players, I mean, so our player's array has two things in it.

[00:04:29]
The first one is an object with name Anjana. And the second one is an object with name of everyone else. So it's that second one that I want. So players index 1 with the square brackets dot name. And if we've done this right, then the page updated. So now y'all are everyone else.

[00:04:49]
Okay, so now let us actually play some tic-tac-toe, haha. So how can we get access to the different squares in our board so that we can actually play some symbols in there and play our game of tic-tac-toe. So let's take a look at our HTML. We have this div with ID board, which represent the whole board here and all of its squares.

[00:05:18]
And within that div, we have a bunch of these other divs, which have class equals square. So there's nine of them cuz we have 9 squares on a tic-tac-toe board. So how can we get access to all of those squares so that then I can manipulate them. So as usual there's a couple of different ways that we can do this.

[00:05:42]
So one thing we can take advantage of is the fact that, these square divs have this class square applied to them, and nothing else in our document has that class applied to it. So one thing we could do is we could use the class of these elements to pick them out of the DOM.

[00:05:59]
And there's a couple of ways that we can do that. So we could use our document spell, getElementsByClassName and pass in the name of the class we care about. That gives us this collection of HTML elements, so nine of them that are all these divs square. Or we could use a different way of picking out elements by their class name which is using our CSS selectors.

[00:06:31]
So we could do document querySelector, and in this case we want querySelectorAll because we want multiple things, we want all of the elements matching class square and then we have to pass in the CSS dial selector for an element with a certain class which is gonna be .square, period square.

[00:06:52]
So that's gonna give us, it's a slightly different type of collection but it's still giving us this collection of these nine squares. So either of those will work. Or if we didn't have like class names to go off of, we could also use the fact that all of these divs these square divs are contained within my div that has ID board.

[00:07:14]
And so we already have access to our board ID in our board variable. And we have a property built into elements with children that is .children, so that's another thing we could do. Both would be valid here. Okay, so now I want to play in the center square.

[00:07:36]
I like to start there usually when I play tic-tac-toe. So I'm going to try to pick out from the squares array, the div that is so these divs go they go left to right top to bottom, so 1, 2, 3, 4, the fifth square in our collection of nine squares.

[00:07:55]
So that's gonna be squares, 4. And what I'm going to do is put some textContent in here of my symbol. Okay, now it's your turn. Which square would you like to play in? Top left, bottom right.
>> 0.
>> Left middle.
>> Square 0.
>> Top left.
>> Yes.

[00:08:18]
>> Okay, so how do you do that? OJ, walk me through.
>> Square 0.textContent = 0.
>> Okay, well I'm not gonna let you get off that easy. I don't want you to just type in the letter the lazy way like I did. I want you to pull it out of our players object which has the symbol that each player is gonna play.

[00:08:43]
So for example the object with name everyone else has symbol 0. So how could we do it that way?
>> Players1.symbol.
>> Beautiful. Okay, so we get the idea, we don't have to actually finish this game cuz honestly every tic-tac-toe game ends in a tie anyway, right? Like, is it just me, but you get the idea and if you'd like to play with yourself or show maybe a friend at home, how to do this and play with them.

[00:09:10]
This is just to show that we can interact with the document, using our array and object superpowers that we now have to manipulate things even within collections, which for example, when we looked at these squares, it's not exactly an array. It's something called a node list, which is kind of a built in representation that JavaScript has of nodes are kind of elements in that DOM tree.

[00:09:41]
But it operates similarly to an array, meaning it has these indices so we can work with it just like an array. So this is all suffice it to say that we can use our newfound powers to do all kinds of cool stuff to our websites to make them do whatever we want because this whole game is about telling computers to do what we want.

[00:10:02]
So now we have some extra tools in our tool belt to do that. Awesome Possum. Great work. Does anyone have questions so far? Who would win in a tic-tac-toe game between me and the rest of everyone else? Hmm, probably all. [LAUGH]