How to make Reversi Part 19 – Board – Play Token Part 1

How to make Reversi Part 19 – Board – Play Token Part 1


what we want to add to our board now is
the capacity to be able to play a token and playing a token is going to involve
adding functionality so that whenever we click on an eligible board square we’re
going to send a message to the server saying that we’ve played a token so
whenever we get an update from the server we’re going to attach a click
function to the right board we’ll probably add the hover effect at this
point as well okay so the first thing we need to do is edit our main.js file if I
look at my main J’s file we come here and we see that if a board space is
changed we’re doing all this stuff about updating the graphics but down here at
the end after this final else we’re going to add a little bit more
functionality when something has changed we are going to set up some
interactivity for our board as well so we know that at this point that we have
changed this row and column in our board so anything that was present before any
functionality that was present on this space we want to go ahead and delete so
we’re going to do that by adding a jQuery command where we select the hash
tag and we add the row and then underscore rent all buffeted by single
quotes and then sing and then the column column and that will be our selector so
the hashtag row underscore column and what we want to do is we want to remove
any functionality that was associated with clicking on that column and now
what we want to do is we want to check and we want to say if the new board
contents is empty then we want to make it clickable so we say if that’s equal
to an empty space which is our indication of it method is an empty
element then we’re going to take that selected a person again we’re going to
take that selector and to that selector we’re going to first of all add the
class hovered over and that means that that
cell is going to have a class called hovered over and what we’re going to do
is we will add that to our CSS file we’ll do that after we’re done adding
interactivity so the next thing that we’re going to do is we’re going to add
a closure to this element and we’ll take the same selector item and rather than
adding a class we’re going to add a click function and we’re going to pass
it we’re going to generate a function here this is a little tricky this is a
lambda expression we’re going to create a function that takes a row and a column
and we are going to return a function that doesn’t take anything and then we
are going to call that function at the end let’s say that’s the function and
then we’re going to call that function oops
call that function at the end with the current row and column that we are
working with okay make sure it’s got this right this is tricky because this
is a place where you have to get the exact right parenthesis in place all
right so we said dot click function parenthesis our coma C print the C curly
bracket return function open close paren curly bracket and close it with a curly
bracket in the semicolon and then what we’re going to do after that is we’re
going to have a curly bracket and we’re going to call this enough this long as
function with the row and column that creates a closure so that now we can do
the work what happens when someone clicks on this square well we’re going
to create a payload and we’re going to send a message to our server so payload
is going to be an object and we’ll say the payload the row that we want to put
put a token on is going to be equal to our and the column that we want to put a
token on is going to be equal to C and the color that we want to play is going
to be equal to my color but we haven’t actually specified that yet so
that’s something we have to set up a variable for as well we’ll go ahead and
set up a console message here and what will we say we’ll say console.log and
we’ll say one two three client log message escape a single quote play token
or just say just indicate that we’re sending it payload plus single quote yep
sorry single quote plus JSON string by string of five payload close parentheses
close parentheses right we’ll just send that message on the browser’s console so
we can see that hat something happened and then the last thing we’ll do is we
will emit a play token command back to the server and send it the payload and
so that will be how we play the token that’s going to be a function that’s
attached to the square now there are two things that we have to clean up one is
the hovered over class and the second thing we have to do is address the issue
of my color all right so my color is going to be something that we will keep
track of as we’re playing the game and we’ll come back up here and right after
we have my old board we’ll also have a variable called my color and as long as
we’re setting this up we’ll initialize it to be equal to space and when we
receive a game update one of the things that we’re going to get back in here is
we’re going to get back what our actual color is and we’re not going to be told
what our color is but we’re going to have to look at our game object to see
whether or not the game has our socket as the white player so we’ll do is we’ll
look at our socket ID and we’ll see if our socket ID equals the payload who the
payload says payload the game object of the payload look at the white player
white dot socket and if that’s equal then we’ll go ahead and set up our my
color to be equal to white and otherwise we will check if it’s
equal to the black socket in which case we will say my color is black and then
if there’s some other sort of problem something else has gone wrong we’ll go
ahead and put another case in here just so we can detecting something’s gone
wrong basically something weird is going on like three people playing at once and
so what we’re going to do in this case is we’re going to send the client back
to the lobby because basically we got a game update which referenced two clients
of which we’re not one of them so we’ll go ahead and do what we do and this
happens we’ll say window.location.href and we’ll send that equal to lobby dot
HTML : user name equals single quote plus username and this should be the
same thing as above when we had a problem earlier but I can see that I’ve
forgotten the HTML up here so I’m going to go up here and add the HTML correct
that error all right well as long as we’ve updated our color let’s go ahead
and change our document object model so in our plane board let’s go ahead and
update this spot that we left open for updating our color and say what we are
so we’ll use jQuery and we’ll look for the ID element that was my color and we
will set the HTML that’s present in there to an h3 tag and we have to again
give it the ID my color so that we can update it again if we need to and we’ll
say I am my color and then we’ll close the h3 tag all right so that addressed getting my
color and that dressed announcing it on the game board and then the next thing
that we have to do is we have to handle the hovered over situation so I’m going
to split my screen here and I am going to look at not main that yes but CSS
file let’s see where am I all right I’m looking at the game dot
CSS file and I’m going to add some styling so when we add the hovered over
Klaus what are we going to do well if it is the cell of our table and if it has
the class hovered over which is what I just added and you’re actually hovering
over it then what we’ll do is we will set the background of this square equal
to the image image that we’ve provided for hovering over and what we’ll do is
we’ll put a list of things here so that we can overlay images on top of each
other so the thing on top will be the hover gift and then we’ll have for me
I’m going to have a green color underneath it and so that will enable me
to have an empty square if necessary actually maybe I don’t even need an
empty square that might not be necessary because my background is already green
so instead just if I have some sort of problem I’ll just back it up with an
ugly green 0-255 comes here so by putting things in a list here you you’re
choosing multiple things to layer and then the last thing I’ll do is I’ll say
that I want the size of that eye that image to be 100 percent by 100 percent
and for some reason my color coding here doesn’t look right so let me see what
I’ve done wrong I forgot the quote there we go all right so now we’ve
explained what we want to have happen in the case when we’re hovering over that’s
good so I’ll close that up and we’ll come back here and I’ll look where we
update my color and it looks like I forgot a close curly bracket there so
we’ve got curly braket curly bracket else if curly braket curly bracket else
else great my color and then the last thing we’ll do is we’ll come down here
and we’ll finish up this work here so we said if board and row and column equals
a space then we’re going to add the class hovered over we’re going to remove
anything that change we’re going to remove any functionality if it’s a space
that we’re going to add the class hovered over so when we hover over it we
get the hover effect we’re also going to add the ability to click on it and play
a token for whatever color we currently are we added that now if for some reason
we did not just change to a space then we’re going to want to remove the class
hovered over so I’m going to come up here I’m going to grab that same code
and rather than adding the class we will remove class close it up with curly
bracket now our pattern is whenever we send a message to the server for example
when we said play token here the server is going to send back a play token
response so we’re going to want to also have a response let me just grab the
first bit of this game update we’ll get a play token response handler as well so
let’s say that the server doesn’t send this game update that the server sends
us a play token responds in response to us playing a token and in that case
we’ll log that we got a play token response and we’ll log the payload and that
should go out in the browser window and we’ll check for a good good play token
response and if it’s failed and it’s a problem until well log it and we will
just alert so I don’t know what that’s going to be like but we might have to in
the future what it’s going to be is that you’ve made an illegal play somehow but
let’s go ahead and pronounce a payload message and we’ll just return okay great
all right so that’s the work in which we send a play token message and we receive
a play token response and we set up my color now what we need to do is we need
to go on the server-side and handle that play token response as well so let me
switch to our server code all right now we’re in server dodge as in server dot
J’s I’m going to go to the game start command and I’m just going to grab the
first chunk of this because we’re going to have to do a bunch of when we do our
when we handle our play token message on the server side we’re going to have to
do mostly a bunch of testing just to make sure that everything went okay so
after we get that game start successful but before the end of all the handlers
we’re going to go ahead and put in our new command and our new command is going
to be the play token command and what’s going to happen when we get a payload is
instead of having a requested user we’re going to have the row and we will
have column and we will have the color and that’s it and the color is going to
either be white or black and that’s all I have there and the columns got to be
between 0 and 7 and that’s going to be the column to play the token on and
that’s going to be 0 through 7 the road to play the token on and that’s good
and if successful and successful a success
message will be followed by a game update message so the idea is that we’ll
send back our success message but then we’ll update the board in a separate
message so the play play token response is pretty straightforward it’s either
going to be success and nothing else or it’s going to be failure and a fail
massive message okay all right so now let’s go through all the different
things so now let’s go through all the different things that we’re going to
need to check when we get this play token command first of all let’s make
sure we’re actually getting the play token command so we’ll play token we
will acknowledge that we got the play token command with it with our payload
and then what we’re going to do is we’re going to make sure that we actually got
a decent payload and so we’ll say a payload is undefined or we didn’t get it
then play token had no payload and the command was aborted we’ll log that error
message and we will send back the appropriate response which is going to
be that the play token message failed and it played token response spelled
right there you go all right if the payload was okay then we want to check
to make sure that the player has been previously registered okay because we
don’t want people playing that haven’t then haven’t joined the room so check
that the player has previously registered and for that we’re going to
try and get the player and that will be coming from players socket ID so make
sure that that came through okay and rather than user name we will have
player and make sure that the player is nonzero and
then an error message would be something like the server doesn’t recognize
recognize you try going back one screen alright well log that error message and
then again this will be a play token response all right so the server has
joined properly and or the payload is there and we have a good player the next
thing that we need to check is we need to make sure that we’ve got a username
so should have kept that one because we’ve just had that so check the
username and make sure that the username is present and if the username is
present then we’ll say play token can’t identify who sent the message will log
that error message and we’ll send that as a response as a failure and then
we’ll return and then the next thing that we’ll do is we’ll check the game ID
grab that and we will get the game ID and we’ll get that from the player
socket ID and that’s the room that they’re currently in and if for some
reason the game ID is bad and we’ll say play token can’t find your game board okay well log that let’s play token
response and after the game ID then the next thing that we want to do is make
sure that we’ve got a row and a column correctly so we’ll grab that and we’ll
try and get the row from the payload and make sure that that was present and in
good shape play token didn’t well what happened play token didn’t specify
specify a valid row command aborted and we’ll log that and now I’ve got a row
and we want to do the same thing Oh actually though we don’t want it we
don’t want to check here for row not equal to 0 because row can be 0 so we
want it to be undefined or if Rho is less than 0 or if Rho is greater than 7
and those are problems to even if it’s a present so make sure we have double
vertical bar there all right now we need to do this exact same thing for the
column so we say the column is given equal to payload payload column check to
make sure it’s defined and it’s not out of bounds and if it is then respond with
a problem and then we want to do almost the same thing with color and let’s see or not color so we don’t
color to be equal to zero or no or if the parentheses color not equal to two
the string white and color it’s not equal to the string black then we also
have a problem in which case we want to say that play token didn’t specify a
valid color command afforded and respond back all right and now that we have all
the parameters that we need we’ll go ahead and get the game board get the
game state so we’ll say the game is going to equal two games a game ID we
already checked game ID and we’ll make sure that we got a decent game out of
that so make sure the game and game is not null and then if we if we did then
play token again couldn’t find your game board a different problem somewhere
error message sender spots back all right and now we have success and so we
can set up our success message by saying success data equals results success and close that out and then we will send the
message back to the socket this is the one that they’re handling and we will
say play token response make sure you spell it correctly with underscores and
say success data close it out all right that’s great
we’ve correctly gotten data and we’ve parsed it and we made sure all the
elements are there and we’ve responded back to the client that sent us the
message but we haven’t actually changed the game board so that’s what we want to
do now we want to actually execute the move so to do that we’re going to say if
the color equals white then we are going to say the game
bored sever Rho sub column is going to equal the character W and we’ll go ahead
and say the game who is turn it’s now equal to black although we’re not
enforcing that yet we will soon and copy that over and otherwise if the color is
black and we want to put a black token on the space and we want to change the
turn to white and if there’s something else and they just won’t do anything and
then we should also update the what time to last vote so with the code that we’ve
seen earlier we save our d equals in your date object capital D and we’ll say
game that last move time equals D that get capital T time and then we need to
actually send out that noose that your message so we will say send game update
message to the socket with the game ID we’re working with after changing the
board and we’ll say the message is play the token all right and that Handler we
can close out with the curly bracket and parenthesis and I’m just going to check
to make sure that match is okay and that matches okay alright and so that is the
ability within the client to play a token and the ability within the server
to hear that message check the parameters update the board and respond
back that everything went okay so I think at this point we should be able to
run our server and run our clients and we should see the game board get updated
so let’s let’s go ahead and give that a shot so I’m going to stop the server
that’s running right now and here over in my clients I’m going to go back one
so I’m waiting for the lobby to come up and I’m going to run my server locally
and see if I have any typos in my server J’s file looks like we don’t that’s
remarkable and now that it’s running if rain chrome Chrome should pick up in a
second and identify that the server is running and if not I was just reload
you okay and we
go ahead and engage game will shift over we’ll get the new board colors going
place up something happened bad let’s see what happened you know what we don’t
have the code yet to assign colors to individual people that’s a that’s a
thing that we hadn’t done yet okay so what we need to do then is we need to
add a little bit more code but I’m going to break this video for the time being
unfortunately I don’t like doing this I don’t like leaving the code and a half
way state the next chunk that we have to do is some pretty heavy coding so we’ll
go ahead and break it and pick up in a second you

Leave a Reply

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