How to make Reversi Part 25 – Rules – Only Valid Moves

How to make Reversi Part 25 – Rules – Only Valid Moves


– Now that we have our server that calculate
in our valid moves, what we wanna do now is we wanna have our client side enforce those
valid moves. So we’re gonna make sure that when we get
information about the legal moves that the client only allows the players to play in
those places. So we’re gonna do that in main.js. That’s the interactivity for the client side. If we go there, the place at which we wanna
restrict the squares on the board at which the player can play is when we receive a message
back with the game state from the server. If we go to the game_update signal, let’s
say when we receive the message from the server on the client, under game_update, we’ll come
down here and currently what we did is we would change up the banner so that it says
your current color and whose turn it is. And then we’d animate the changes to the board,
so we’d say, “If a board space had changed,” then we would alter the colors as appropriately. And then if a board space had changed, previously,
we had set up interactivity at that point. Well, because now we have a set of valid places
that we can play, we’re gonna change that. We are going to just end the calculation of
the new tokens by putting a curly bracket in there. And instead, we’re not going to make a condition
based on whether a board space has changed, we’re still here going through each of the
rows and columns, but rather than indicating whether a particular board space has changed
or not, we’re just gonna do it on every single board space. What we’re gonna do is we’re gonna set up
our interactivity in a slightly different way. So let’s get rid of, take these two lines,
and move them up here, and slide them back because we’re not doing them within the change. We do want to take off any interactivity as
we go through and we update our board. We wanna first remove interactivity from every
square on our board, so that’s the first thing that we’re gonna do. The second thing that we’re gonna do is we’re
going to remove the hover class from each one of our positions on the board as well
because we’re about to draw them in the places where we want them. And we’re gonna need some new checks, and
our new checks are gonna be for legal moves, and we’re gonna say, if the payload.game.whose_turn
equals my color. So if it’s not my color whose turn to play,
then nothing should be allowed to play. So we’re gonna first check to make sure it’s
my color. And then if it’s my color, what we’ll do is
we’ll check to see whether or not the legal moves for the particular position we’re looking
at in this iteration of the loop, is a legal move. So we’ll say, if payload.game.legal_moves
for row and column, that’s our loop variables, if that equals, now that’s just a single letter,
so we’re gonna look to see if it equals the first letter of my_color because my_color
is the full word, so you substring, and we’ll say, starting at zero, we’ll go length of
one. And if those two things are equal, so if it’s
my turn and this is a valid position to play, then I am going to add, I’m gonna get these
two lines, add function, let’s say, actually, just delete all that. If that’s true, this is a place where I can
play and it’s my color, then I wanna add the hovered_over class to it to indicate that
I can play. And all these actually should be the same
color. This is a closure that says that I’m gonna
allow a player to send a play_token message on that location. If it’s not a legal move, then, let’s see. If it’s not our legal move, then we just won’t
do anything, so we can just get rid of that line in fact. We can just completely get rid of the else. And I think that’s it on the main side, so
all we did is we just changed which positions were legal based on the information that we
were getting back from our server. On our server side, we need to make one change
to our Check line match code and that’s to accommodate a bug, and the bug is, as we’re
walking down the line, to see if we’re allowed to flip. If we encounter a position that is the same
color as we are, meaning we are ending the capture, then we’ll return true. But if we happened to end, find a space, then
we wanna return false. So if we get to the end of a line with tokens,
then we want to return false. Okay, then I think that’s it for this round
and what we wanna see now is in as we test it, we wanna make sure that the places where
we’re allowed to move have been restricted based on the color and the valid move locations. So let’s come on over to our test area and
we’ll do node server.js, and once we get our server up and running, we’ll get a client
going. And we will, oops, and we will start a game. All right, so this player is black and it’s
black’s turn and as we hover around here, we should see that we can only play, there
we go, we can only play in the locations where it’s valid for black to play. All other places don’t get a hover event. Likewise, on the white’s turn, because it’s
black’s turn, nothing should be let up. That looks like it’s working well. So we go back to black side and we play on
the black. Then we go to white side, and now, white should
be hovering, the hover should work anywhere where a white player can play. Great. Let’s just play a couple of these to make
sure we don’t have any errors anywhere. Good, we don’t have any flipping going on
and that will be our next thing. So that’s good for this chunk. Next, we’ll tackle flipping tokens. Thanks for your attention.

Leave a Reply

Your email address will not be published. Required fields are marked *