SignalR

SignalR

Okay, so I skipped ahead.  I looked at SignalR.  I felt compelled to do a search on Pluralsight for courses on SignalR and picked this one to watch:  Building a Game of Memory with SignalR.  But on the bright side, the project required the use of a singleton which is one of the design patterns that I need to know.  How's that for rationalization?

Overall, it was enjoyable.  I did my best to follow along with the code.  I've got a lower subscription, so no source code for me, but that's okay.  It's good to type it out and work out the missing parts on my own.  The instructor was creating an MVC 4 website.  I tried that at first, but I couldn't get SignalR to install.  NuGet needed to uninstall a JSON module, but the Web API depended on it.

I didn't want to get bogged down with troubleshooting the environment.  I started up a new project using .NET Framework 4.5.1.  I got SignalR 2.2 installed with no problems.  Once I started using it, there were issues.  This article helped me correct the differences between the older and newer versions of SignalR:  Upgrading SignalR 1.x Projects to version 2.

The Memory game matches people up to play a simple memory match game against each other using a Hub to communicate with one another.  When a player joins, they have to wait until another player joins, then a game can begin.  SignalR handles the communication between the client and the server.  It's pretty thrilling to see a card flip simultaneously on different browsers (I used Chrome and IE to test).

I'm not going to post large sections of the code here, but I will talk about some of the gotchas that I had to deal with.  In my opinion, the code belongs to the course, and subscribers have permission to re-type the code and learn how to use it.  Of course, higher subscriptions give access to the full source code which is useful.  The source code should have all the bugs worked out.  If you're not good at debugging, then you may want to pay for that higher subscription...

Upgrading to SignalR 2.2
This did cause a minor issue that was relatively easy to correct.  The correction was to use OWIN.  This is another thing to go on my learning list.  See the link above about upgrading SignalR.

Make Your Own Cards
I needed to make my own cards.  No big deal.  I whipped up some cards quickly in PhotoShop and added them to the project.

Handlebars
This issue was partly my fault, and partly an error in the code shown in the video.  I started a new page to do the final code.  The template failed.  I debugged it in Visual Studio, and it did seem to be giving me the information that I needed.  I switched to the client, and started outputting data to the console.  My game board was undefined!  What?  After a little bit of work, I found the issue.

Original call:
     $("#board").html(template(game));

This seemed correct, until I started looking at the model.  The template was expecting an array containing the cards.  The Game model did not contain a list of cards.  It did contain a property for the game board, Board.  Ah, we're closer.  The Board model is the one with the list of pieces.

Corrected call:
    $("#board").html(template(game.Board.Pieces));

Now, I was getting the correct data out to the console, however, the template was still not working.  This was probably due to not having a dependency added, or having something else out of order.  Again, I didn't want to spend time debugging this part, since I wanted to understand the whole point of the instruction which was SignalR.  This was easy enough to solve.  The template was small, and it was easy to write a simple function in JavaScript to do the exact same work that the handlebars templating engine was doing.  I'll go back later, and set things straight with handlesbars.  It will be good to know what I did wrong, but not right now.

Game Play
Okay, everything seemed to be working.  Only one player goes at a time, and... the player just keeps turning over cards.  Methods to handle the turns and matches don't seem to be firing.  Crikey.  Back to debugging.  A method on the back end was missing a bit of logic.  I kept the code intact, but added another "return true" where I thought appropriate.  Looking at the code, it had some redundancy.  Once I am certain that I understand the code, I intend to go back and clean it up.

It Works!

Huzzah!  It works during my simple testing using two different browsers on my desktop PC.  I still have a few issues to work out concerning the CSS, but it's doing what it needs to do.  I've got two different instances of the webpage in sync.  It's exciting.

Where to Next?
I'll break down the code, and seek to understand it.  I believe that I do, but I'll really know when I go to create a different web application using SignalR.  It'd be fun to make a version of Silent Death to play with a friend.  Silent Death is a turn-based strategy game using miniatures.  If it turned out well, I'd be more than happy to see if the game company that owns the game might be willing to let me release it to the public.  Based on the free time I have right now, all my time should be used on improving my programming skills first.