Progress!

I haven’t been as active here as I want, but I am still moving forward. The holidays are a great excuse for not getting things done, right? I’ll be brief, because we all have New Year’s parties to attend, I’m sure!Progress1

I updated the look of the checkers a little, using nothing more than a border-radius in the css. I also implemented a way to stack the checkers, or rather, to indicate that they are stacked, again, in the css. For now a green ring around the checker means there are two stacked and a red ring means three are stacked. There are two green ringed tokens in the image to the right.

I changed the move count to two, allowing each side to move twice before the turn changes. In the future I will check for doubles and make that fprogress2our moves, as well as adding a way to end the turn if there are no more valid moves available. I’m still taking player input via the text box, but pretty soon I think I will get away from that in favor of mouse/touch interaction.

For the curious, here is my modified findLowest function. This is what allows the checkers to stack. I feel like it has gotten a little unwieldy, but for now I am weighting my desire to finish the game over my desire for clean code.

progress3

Happy New Year everyone!

Advertisements

Paralysis

Sometimes I look at my code and think about the tasks I have left to accomplish and I freeze up. They are too big, too new and complex to hold in my head all at once. Too intimidating. I can’t even imagine what it is like in real projects. Having to deal with code other people have written. Having to stay focused. It really reminds me that I am nowhere near as comfortable with the concepts as I want to be.

There have been plenty of times where I let that paralysis take over. I walk away from the computer or shut down the IDE and watch youtube videos or something. I am learning ways to cope with it though. The most effective has been to just tell myself I need to write a few lines of code. Something small. It doesn’t even have to do anything, yet. The other day that was flipping my findLowest function into a findHighest.

The findLowest function allows me to determine which cell to drop the checker into. The findHighest serves a twofold function. First, it searches the originating column and finds the topmost checker. What that allows me to do is dispense with a two part (column, row) input. Now all I need is the column. The game will do the rest. It feels simpler, and I like simple!

Another example was a tweak I made to findLowest. In an actual game of backgammon, one can have more than 5 checkers in a column. They just start stacking up on each other. I haven’t gotten that far yet, and if you tried to add a sixth checker, the function didn’t know what to do, there is no 6th cell! In order to get around that, for now, if the 5th cell is full, it just “eats” the checker. It’s a stopgap. I need to nest the findlowest in a way that it will start stacking checkers and it will check for stacked checkers first. One step at a time.

The important thing is to keep moving forward. To find a way to work through the overwhelming amount of learning I still have ahead of me.Breaking things down into discrete steps that I can wrap my head around keeps me from locking up as much. I also keep coming back to the idea of testing and TDD and I really need to stop talking about it and start doing it.

Merry Christmas!

The Holidays have been fairly busy, and so I don’t have a lot of progress to report. I cleaned up the presentation some. Made a few strides with the mechanics of moving checkers. I have a little to do list that includes things like validating the input and adding mouse event handlers. I have some larger goals like incorporating unit testing and overhauling the “website” wrapper for my projects. But mostly I wanted to show you this:

xmasBackgammon

Merry Christmas everyone!

It’s the little things.

One of the things I had been hung up on was how to move the checker into the lowest available spot in a column. I’d taken a shot at writing a function to do it. I would pass it the column to search and then loop through the values, using getElementById to look for an empty cell. It didn’t work. I’m not sure why it didn’t work. I tweaked it and rewrote it and tweaked it some more. I could hardcode values in and it would do what I wanted it to. Great.

Eventually I enlisted the help of one of my mentors, Chris Gomez. We used Cloud9’s collaboration tools to dig around in my code and run little tests. Finally, I found myself in the in the dev console of firefox, setting breakpoints and watching expressions. Without those tools, I don’t know how much longer it would have taken for me to find the problem. I was doing too much work. I had one too many steps. Luckily I could see that one of the expressions was evaluating to ’empty’. That was exactly what I was looking for. I think took that expression and tried to do more work on it, which ended up giving me a null and killing the loop.

I had what I needed. I cleaned up the function. Manually tested it a half a dozen times, and gave a spirited “Hell yes!” to my empty room. Made my day.

findLowest

Finally, code samples!

I guess I have put it off long enough. At some point I knew I would have to show other pfilledBoardeople my code, as embarrassingly naive and novice as it is. So let’s get it out of the way in one fell swoop. Here is everything I have done. It is sloppy, messy, not well commented, hacked together and sometimes difficult for no reason. And I’m okay with that.

My earliest work is in the index.html and the top of the css file. It is basically me working through the battleship game in the Head First book, with some added flourishes. The meat of my own work is in the two backgammon files. That is where, so far, I have made my most creative mistakes.

Here is my board with some, uh…, test features turned on. The board itself is an image and the playing field is composed of several tables that I have aligned to the board. Then each celcellCSSl of the table has one of three css classes applied to it. .fillWhite uses an image, confusingly enough, an orange checker. .fillBlack, even more confusingly, makes the entire cell white (note to self, change that to a black fill… done). Finally there is .empty that, for testing purposes makes the cell grey.

movedBoard

After moving some of the checkers a few times.

Aside from setting up the board, the user can also move checkers using an input box. This is another stepping stone/test function while I work out the real input scheme. I just recently got the move function to turn the origin cell to empty instead of just “adding” a new checker to the board in the destination position. I also have the moves hardcoded to 2 spots and flipping between the players every move. It’s confusing, but it works for now.

There are a lot of things to talk about with even just this early stage and simplistic implementation. Design and decision choices. A couple questions I can answer easily together. Why am I using a table for the board? Why am I using an input box to move the checkers? Because I ripped those ideas right from the battleship game. I, essentially, don’t know of another way to do it. In fact, this is a good time to talk about my overarching design philosophy for this particular project. I aim to get it done and make it work however I can. I can always rewrite, but for now I just want to see this through.

I do try to keep my functions small and simple whenever I have the brainpower to do so. One place that shows well is in the functions to fill and empty cells. I pass in the minimum amount of information the need and update the view. Here they are:

fillEmpty

That’s it. I have run into some issues. To clear the entire board with the emptyCell function, I need to feed it the id of every cell. That means either storing all of the cell values in an array or building a function to create those values and feed them to emptyCell. Also, who knows how many other creative solutions I haven’t thought of. What I have decided to do instead is utilize jQuery, with mixed success. I’ll figure it out. At least half of the “fun” of coding for me has been troubleshooting. I see a lot of troubleshooting in my future!

Danger Zone

Idangerzonet’s been x days since I last wrote code. The easy lessons have been learned. The excitement is wearing off. Adding code sometimes has interesting results. Life is catching up to me.

Today may have been a wash, but I will get up tomorrow and do something. Maybe I’ll finally work on a dice roller. Or create some images for the checkers in my backgammon game. Or figure out why my clearBoard function is only mostly working. Hopefully I’ll do all that and more.

(I think it has actually been 3 days since I did more than add some comments to my code…)

An introspective interlude

Getting a late start tonight. In the future I intend to utilize my downtime a little better and take advantage of the ability to load some articles up for publishing in the future! In a minute I will talk a little about the details of writing my backgammon game, but something happened to me today that made me take stock of some of my programming behaviors.

For a very brief time, and through no fault of their own, Cloud9’s workspaces were unavailable. It was somewhere around 30 minutes and I was hardly even inconvenienced. I was wondering why a certain piece of my code worked while another piece I was hoping to use as a more elegant solution to the same problem didn’t. Not pressing, but a bit of a shock.

“But you use source control, why not just pull down the code and look at it somewhere else?” an astute reader might ask. I do, and I could have… except I hadn’t pushed my code in a day or so. There are certainly a couple of lessons to be learned here, for me. In a wider sense, I need to have a backup plan. What that means specifically, is first, to keep my repository (more) up to date. With my code available, I would have been able to pop open another IDE and keep coding. To that end, I will be investigating the other cloud IDEs as backups. On the PC I will probably just rely on Visual Studio.

(I want to say, “lesson learned,” but at the time of this writing, I still haven’t pushed my changes up.)

On to code. A bit of (hopefully brief) background first. The exercises in the Head First JavaScript book have certain quirks for ease of publishing. They throw the JavaScript inside a script
wrapper in the HTML (and use inline CSS). I figured it wouldn’t be much more difficult to separate the css and JS into their own files and link them in the HTML. It generally wasn’t any more difficult. The other thing I wanted to do was set up a simple “webpage” that would hold the exercises and any of my projects. This actually did cause a little more cognitive overhead.

At first I was keeping it all on one page and all the JavaScript on one .js file. There came a point where I felt that was too cluttered and so I pulled my backgammon stuff onto its own page and the JavaScript into its own file. Not a completely clean break, all of my CSS is in one place. It works. That’s probably the best thing I can say about it at this point.

I am aware that most of what I am doing at these stages is “ugly” code. There are probably better, cleaner and more efficient ways to do nearly everything I am attempting to do. I don’t know those things yet, so I work with what I have. I am under no illusions that I am writing masterpiece software. I even had the idea that I would do this first with vanilla JavaScript and then dive into things like Bootstrap and jQuery for a total rewrite. I have already trashed that plan and started to incorporate jQuery. I am just not sure I see the value in making things harder for me than they need to be.

Next time, I’ll show you some of my code and talk about the reasons I made the decisions I made.