Lesson 80, Mobile Display, Unbind

We are finishing our game today. There are still more things we could add. One thing you could continue to work on is mobile design. To do a little work on mobile, I added a whole second set of directions. I had originally created my directions to sit between the cards. In mobile, the directions didn’t fit between the cards. They spread the cards out too much. I wanted them above the cards. That’s where I put the new set of directions. I gave them the class of mobile. They are set to display none. The media query in CSS will determine if the screen is small enough to show them and hide the normal directions.

This is a whole second set of directions. I needed them in a different place for mobile. They just remain hidden until we need them.

<div class=”mobile”>
<p class=”faceCards hidden”>Jack=11 Queen=12 King=13</p>
<p class=”compareDirections hidden”>Click on the card that shows a greater amount.</p>
<p class=”addDirections hidden”>Add the card amounts together.</p>
<p class=”multiplyDirections hidden”>Multiply the card amounts together.</p>
<p class=”subtractDirections hidden”>Player’s card minus Computer’s card
<p class=”integerDirections hidden”>Black is positive. Red is negative.</p>

When I duplicated the directions, I had to rename all the direction IDs as classes because IDs can only be used one. Classes are to be used multiple times. The adding directions, for instance, existed in both the mobile and desktop modes, so I gave them the class of addDirections. When we need them, we display them in both places, but one whole set of directions is hidden, so it only shows up in one place.

I also had some testers play my game. I changed how it showed the winner and added directions based on one’s confusion while playing. It’s helpful to see your code through someone else’s eyes. You want them to understand what to do without you telling them! If they can’t, change something.

When I was testing it out, I realized that you could choose a winner even when you weren’t using the math compare mode. I needed to take away the ability to click the answer if the computer was just choosing the winner. I used something called unbind. $player.unbind(“click”) This detaches the click from the player’s card. It takes off the on “click” event we had made. In the end to solve this issue, I just moved the click events under the compare choice, so they didn’t turn on until the player clicked on compare as their choice. That way I didn’t have to worry about it being on or off at other times.

When you are satisfied with your projects, “push” it to GitHub. In Git, use change directory to navigate to your directory. Use git add . to prepare everything new for sending to github. This is called staging. You can use git status to see what files were changed. You must then use git commit -m “To add a note about what changes were made.” Then, finally, git push origin master, sends it on its way.

Remember that under settings you can find the link to your game. If you don’t see it, make sure your github pages source is set to master branch.

You can also search warGame and hebrews110 to find my version. You can click on Fork and it will show up in your github repository. It can be helpful to go through your code, or mine, and comment on each line or before each section and tell what it’s doing so that you can go back and find helpful code for the future.

You can watch the lesson.