Stand Alone Version

For a stand alone version of Connect!, I could have gone with a number of different solutions.

One, I could just distribute a zip file with the html and js files in it. This did not appeal to me, as it wasn’t really any better than just having it on the web.

Two, I could make an Adobe Air application. While I still may do this at some point, I don’t want to go through learning where all of the little tweaks have to be done to make it work. Also, I don’t want to force players to install Adobe Air.

Three, I could translate it into a Yahoo! Widget or other widget/gadget/doodad thingie. While I am likely to still make it a Yahoo! Widget, the same idea of requiring the user to have a particular install on their machine isn’t what I want.

Four, I could translate it into another language. I considered C#, ActionScript, and the ECMA-esque scripting language of Wintermute.

I actually decided on C# (realizing that I’m limiting the players to windows, but the Mac folks can wait for the Yahoo! Widget), but I also decided not to translate the game itself… I decided to simply use the WebBrowser control in .net to run my game inside of a very simple C# winforms application.

As it turns out, this is a pretty easy thing to set up. It’s pretty easy to link the C# application to the script running inside of the browser. The script can tell the application to resize, and the application can tell the script to start a new game, and that’s about as far as I’ve gotten, but the proof of concept is there, and I’ll be able to flesh out all of the functionality within a normal windows menu bar once I’ve got the game itself done.

Here’s what it looks like:

And here’s where you can download a RAR file with an installer. Keep in mind, not all of the functionality is in the stand-alone yet…. this is merely a concept demo.

http://www.playdeez.com/games/connect/1_0_0_0.rar

Revised Feature List

New Updated Version 

Implemented:
-Graphical themes.
Implemented But Needs Improvement:
-Declunkify the UI.
-Winner celebration (ditch Cheerleader)
-extra for “perfect” game
-Navigator (remove revert button, change confirm dialog, tooltips)
Still Not Implemented:
-Timed play, starting only after the first move is made.
-Move counter, counting total number of moves made
-The ability to choose a random seed/game number, so that the same board may be generated again.
-Improved graphics.
-Help file, including tips and tricks for solving a puzzle.
-Tutorial Options:
-Color code chains(y/n)
-Allow isolated chains to be created(y/n)
-Allow loopback chains to be created(y/n)
-Title Screen.
Cancelled:
-A “Give Up”/”Solve” button.
-The ability to “lock” connections that the player “knows” are correct.
-A tool that allows one chain of connected nodes to disconnect all nodes within it(Hammer Tool).

Problem Solved(ish)

The issue with the clever JavaScript code not working in IE has been solved, and an important lesson has been learned!

That lesson?

Don’t do:

eval(“function(){/*…*/}”);

And expect it to work in IE.

Fox likes it just fine.

And yes, I know clever use of eval is discouraged, but I needed it! No, really! I needed to encapsulate the event handling mechanism for a DOM object, shunting the event to a different controller object!  eval was the only way!

Fixing the problem for IE caused a different problem for IE. I was calling a different event handler from one of my event handlers, but in the IE version of the event handler window.event.type is used, which caused a stack overflow. So, I took out the call, replaced with equivalent code, and moved on.

It now works in both fox and IE, with the new navigator. I’ll upload it after I’ve gotten a few more kinks out.

I had my wife play the game with the new navigator, and the only part that she did not find intuitive was my “revert” button.  I had originally designed it so that if you were looking at a historical view of the game (by using the previous move or previous mark buttons), making new moves was not allowed (because it would mess up the rest of the history), so I made a “revert” button to restore the game to that point in the history.

Except that it turns out that the natural inclination of a player is to back up to the point they want, and then just start making moves.

I didn’t want to just make an auto-revert when making a move, because that might be a mistake on the part of the player. However, I it was clear that the revert button wasn’t the right solution, so I left the revert button in (although I’ll likely take it back out) and made a prompt if the player decides to make a move when looking at the history. This way, I prevent mistakes on the player’s part by being too hasty with a move while scanning the history, but I also don’t frustrate the player with unintuitive controls.

In the next few days, I should have it updated on the site, and I should have an updated feature list left to implement.  I’m feeling it start to take some of its final shape at last.

UI enhancements, and a new problem…

New screenshot:

Here you can see the new navigator controls on the bottom of the screen. I like the new scheme a lot better than the old one.

Unfortunately, in the creation of this navigator, I used some clever JavaScript that IE apparently does not like, so until I figure out what’ll make IE happy, no update on the site.

Refactor #2

Well, I added a lot of stuff, and Connect! got messy again.  Also, I think I’m evolving in the way I do my JSHTML projects, so my style is changing, which means I need to go through and make stuff consistent again.

I’ve pretty much touched every script file in the project making a handful of functions into an object instead.

One of the things  I really like aboutJavaScript is the easy way I can go from:

function  createThings(){/*…*/}

function showThings() {/*…*/}

function  hideThings(){/*…*/}

to:

var things=

{

“create”:function(){/*…*/},

“show”:function(){/*…*/},

“hide”:function(){/*…*/}

};

I’m starting to build up a pretty good library of objects that are reusable. For example, I have a htmlGenerator object that can make tags for me given the following:

htmlGenerator.createTag

(

{

“tag”:”img”,

“attributes”:

{

“id”:”theImage” ,

“src”:”images/theimage.png”
},

“styles”:

{

“position”:”absolute”,

“left”:”16px”,

“top”:”16px”

}
}

);

Which will spit a string that contains:

<img id=”theImage” src=”images/theimage.png” style=”position:absolute;left:16px;top:16px;”>

And this may lead you to question “What does this gain?”

Now I can manipulate tag descriptor objects (say in an array) and use the same descriptor object multiple times.

Anyway, I find this more useful than my old way of just writing the text out.

Stuff

 So, due to completely random circumstances, I found this:

http://chivalry.deirdrakiai.com/

Which means not only is there a new item on the blogroll, it also means I found this:

http://dead-code.org/home/

In my brief investigations, it is an engine that may suit my nefarious needs.  (Ok, my needs are hardly nefarious, but they are still needs).  The scripting language is suitably javascript-esque, the price is right (free), and the applications are stand alone.

Sure, the engine is designed for point-n-click adventures, but, like most things, it can be abused to make puzzle games or really anything else I feel like.  I’ll investigate it further before too long (JetLag, anyone?) and then I’ll have a new platform (like I needed more).

Anyway, enjoy killing the Queen, or whatever you have Phlegmwad do.

New Navigation Controls

After noticing that the side of the game is getting rather cluttered, I wanted to simplify it. The buttons that really are needed to play effectively are Undo Last, Save Current State, Restore Current State, and Reset.

This is what I have decided upon:

These buttons will go away, to be replaced with a navigator at the bottom of the play area.

The navigator will have a “Previous Mark”, “Previous Move”, “Next Move”, “Next Mark” buttons using the standard DVD style buttons “|<”, “<”, “>”, and “>|”.

There will be a flag image (functions like a checkbox) to mark the currently selected move. The initial state of the board and the last move made are always treated as though marked regarding the navigator.

There will also be a small piece of text indicating that the player is looking at “X of Y” move.

If looking at a historical move, the player will not be allowed to modify the board. I will need some sort of “revert to this state” button when looking at historical moves.

For themes and board size, I’m considering putting them on a “dialog” that you can get to by an “Options” button, and the “New Game” button will simply make a game the same size as the last one.

In this way, I should be able to get it all on the bottom of the screen and less obtrusive.

Now With Themey Goodness!

So, I took the suggestion of a comment writer, and Connect! now supports themes.

Of course, at this point the themes consist of the original color scheme, and now a new, totally pink and purple theme called “lovey-dovey”!

Yay! Lovey-Dovey!

Later I can always put in all sorts of other themes, now that the support is there.

As far as what sort of value this adds… it actually allows me to address the color-blind issue, by handling it with themes.

I’m also starting to notice the creeping complexity and size of the UI buttons on the side. When I first wrote the game, I wrote it with no buttons at all, and to start a new game, you actually had to refresh the page. It also had zeros in nodes with no connections. It also had all black nodes and connections.

Actually, blogging the development of this game has been pretty cool. Already I can look back (a whole week and a half) and see the various permutations it has gone through. It goes to show that even a game as simple as Connect! goes through a refining process.

And now that there are more than two colors on the board, it is really getting to be time to put in some instructions. I think I need to do that before anything else.

Unexpected Feature

My wife (the primary playtester for Connect!) had an idea last night: color code the chains depending on the number of total remaining connections for the chain.

And here it is:

The unlit dead ends are the usual unlit red color.

The unlit non-dead ends are yellow.

The lit dead ends are the usual lit green color.

The lit non-dead ends are colored cyan.

Which puts me into an accessibility danger zone even more than I already was.

What accessibility danger zone? Color blindness.  Right now, the game is harder for folks with red-green color blindness.

Board Sizes Other Than 8×8

Behold:

I finally got one of the big features left to implement done, namely the ability to have differently sized boards.

Revised TODO for Connect!

1. Timed play, starting only after the first move is made.
2. The ability to choose a random seed/game number, so that the same board may be generated again.
3. A “Give Up”/”Solve” button.
4. Improved graphics.
5. Help file, including tips and trick for solving a puzzle.
6. A tool that allows one chain of connected nodes to disconnect all nodes within it(Hammer Tool).
7. Three “Levels” of play, Beginner(will not allow nodes to create isolated pockets nor loops), Intermediate(will not allow nodes to create loops, but will allow isolated pockets), and Expert(go ahead and loop and isolate all you like).
8. The ability to “lock” connections that the player “knows” are correct.
9. Title Screen.
10. Declunkify the UI.
11. Graphical themes.