Thursday, December 27, 2007

Chat area

Thought I'd give a brief status update since I haven't had one of those in a while. I have just gotten the chat application up and running, at least on the status page. It's not perfect yet, since I've noticed that I'm dropping a few messages. They're getting into the database fine, but they're not getting displayed. I think it's just miscalculating which messages it needs to ask for.

Also, to conserve bandwidth, I'm only hitting the server every 2 seconds, so you're going to notice the delay between when you write a message and when it appears on the screen. In the future, I may have it post your messages immediately and just poll for everyone else's responses, but then I would run into messages being out of order. Unfortunately, this is a case where there's only so much I can do.

But this is a very good thing now, as this is how the final application is going to work! I also implemented playing a red card the other night, so I'm making progress on several fronts. It's coming together really well. Hopefully, that should do for an update for tonight.

Friday, December 21, 2007

Redesign

So I've done what could be considered a very bad thing, and redesigned A2A's game page entirely. Don't worry, it didn't come entirely out of thin air - I met with a friend of mine (thanks Jackie!) to discuss how it looked, and I felt that based on what she advised, I was better off doing something completely different. And you can see it here!

Here are some of the advantages I see of the new design:
  1. Much better use of browser space. One of the most important suggestions that my friend gave me was maximizing my use of screen area. There was quite a bit of wasted space in the old design, between fonts that were probably larger than necessary, design elements that could not be used to convey information, and a few things that weren't sized relative to how important they were - for instance, the chat window was ginormous, and the judge interface was tiny. The game will fit into a 1024x768 monitor, even when there are twelve players, and hence twelve cards being played at once. It should also be playable in 800x600 as well. The old design wasn't even close to fitting into 1024x768 - in fact, only the chat window fit on my screen.
  2. Less bandwidth. Given that there is going to be a LOT of AJAX-based communication going on, I need to conserve the amount of data I transfer as much as I can. And the primary way that I'm doing that is by removing most of the images from the design, since images are usually much bigger than text. The old design had a whole bunch of images, most notably the rounded corners and shiny buttons. Those are gone now, and the only images in the new design are the logo, the card background, the background image for the headers, and possibly whatever I do with the gavel icon.
  3. Better organization of information. As stated before, I've resized some of the parts of the page so that they better reflect their importance. The judge interface has been replaced by a table showing every card that's been played so far, and the chat area has been reduced in size. I also added a little box at the top of the screen to indicate whose turn it is and what everyone needs to do, which should be a great help. I didn't really have anything like that in the old design.
  4. Finally, it just looks better. It's kind of a relative and subjective measure, but I just like it better this way. The old version was just kind of pink and wimpy, but this is a little more dynamic.
On the other hand, I feel that I am going to web design Hell for this. Yes, I used tables for the design instead of divs and CSS. I totally understand and agree with the notion that divs are much more readable, and easier to maintain and update (although I'm skeptical of just how much of a redesign you can do just by updating your CSS file). However, I think tables have an advantage in that they just seem to do what I expect, whereas divs tend not to. Maybe that's just a function of having learned to design with tables, but I just think divs have a ways to go in terms of usability. I also could not find a way to implement my initial concept (the interface resizes to take up your entire screen) just using divs, whereas this was possible with tables. I think it's more important to be able to do something in the first place than being able to update or maintain it. As things are now, I think I could still redo it in divs instead, but I think I'm going to have to take the laziness approach for now.

Regardless, I promise to stick with this design for the "final" product and not stick you guys with any other redesign changes, although I still need to redo the homepage in this format, and I am reserving the right to make minor changes here and there.

Saturday, December 15, 2007

Common Ground

This is kind of the follow up to my previous post, in which I promised to discuss common ground. So here goes. Basically, this relates to one of my grad school foundation courses from a few months ago, in which we discussed (among other things) what it means to truly communicate. It centers around the idea of establishing common ground, which we defined as basically a belief among all parties that everyone knows what everyone else is talking about. We also discussed the various media that people to use to communicate and the various advantages and disadvantages of each one; for instance, if you're speaking face-to-face with someone, you know your partner receives your messages immediately and you can reference things in the environment, but if you use email or IM instead, that offers you the opportunity to review your messages before you send them, and to review everything that has been said previously. Finally, we talked about some costs that each medium has, and how people adjust what they do to account for each cost; an example was that when typing a message over IM, in which it is relatively expensive to compose a message, people will tend to use fewer messages with more information in each one to minimize the total cost.

I don't want to sound too gushy here, but this discussion made me rethink some things about how I'm doing A2A. It's easy to say that Apples to Apples is entirely random and there's no strategy or no such thing as being good at it. But I realized that that's not true. (For one thing, I tend to demonstrate that there is such as thing as being bad at it.) There are a lot of random elements, like your hand, everyone else's hand, the green card, the judge, etc., but in order to succeed, you have to know how the judge thinks and what they're going to find amusing. So in other words, it's all about common ground. In order to figure out what the judge will like, you need them to start talking.

This is where the discussion about the costs of various media comes into play. I've figured that I can't really force people to talk, but if the interface isn't designed correctly, it will force people not to talk. It's especially true of spontaneous reactions, which I'd really like to capture. Granted, it's going to be expensive to type a message up regardless, but there was one thing I implemented. I have set up the game window so that its "focus" is permanently fixed on the chat message bar, meaning that no matter where you click in your browser, any random text you enter goes into the message bar, ready to be sent. It sounds like a small change, but I think it'll make a big difference. Imagine if you've just seen a hysterically funny red card, and your immediate reaction is to start typing about how much you like it. But after a few letters, you realize that nothing has been entered. You have to diagnose the problem, realize that you weren't focused on the message bar, move the mouse to the message bar and click on it, and then re-type and send your message. By the time you've done all that, the moment has passed and your reaction is different.

What I find interesting about this feature is that it's so minor, most people probably won't notice it. I'm expecting a lot of "wow-that's-so-cool" reactions from various parts of the interface, including the animation for playing a card, the chat application in general, and even the fact that people are actually playing A2A in their browser. But I'd be totally happy if no one ever notices this feature. In fact, I prefer it that way - if no one knows about it, that means it's working perfectly.

There are some other changes that I'd like to make based on this subject, though. In particular, I realize that the most important conversation to capture is when the judge is discussing their rationale for selecting the winning red card. I don't think the current interface really does a good job of promoting that kind of discussion, since the list of red cards to review is on the opposite end of the screen from the chat area. I am going to have to rethink where the list goes, especially since it also needs to fit all the red cards into one window without scrolling(any red card that the judge has to scroll to see is just not going to get picked). But that's a thought for another day.

Saturday, December 8, 2007

International Flavor

I just got back from playing a game of Apples to Apples (the real thing!), and what was interesting was that we had a few international students included, one from India and one from Germany. I think this was a very useful experience for me to have, given that a web-based version is necessarily going to be international. Apples to Apples is by its nature rooted in common ground (I'll get more into that later) and usually involves a good deal of shared cultural understanding, so it was interesting to see the reactions of people who have a different cultural background.

So my question is, how can I set things up to avoid excluding people on the basis of cultural background? I am planning to allow multiple decks in some future version, so I can provide a deck that's essentially the same as normal, but without most of the centrally American references (actors, politicians, etc.). But even still, people tend to be unfamiliar with at least some of the cards no matter what their background, especially if we wind up with ridiculously obscure decks, so I think we need a way to define any arbitrary card. And of course, what's the number one open resource for defining anything you could possibly think of? Wikipedia. So to sum up, I plan on automatically linking to Wikipedia entries for your red cards and green cards. This will also solve the legal issues of copying Apples to Apples' original definitions. since I won't have the original definitions anymore.

Wednesday, November 28, 2007

Minigame idea

I had an interesting idea for a minigame to include. Basically, it'd be like a solo version of Apples to Apples - you'd be dealt a random hand of red cards, and you'd pick the red card that went the best with a randomly selected green card. The judge would be taken entirely out of the game, so there wouldn't be any judging whether or not you picked the "right" one. It'd just be an opportunity to make funny connections without having to gather enough people together to play a real game.

Of course, there is a darker, more sinister purpose to the minigame behind its shiny exterior. When someone plays a round of the minigame, I record those results to fuel a useful service to the real game. Basically, it'd be popularity rankings on the red cards. So if you're playing a game and you're not sure which red card to play, you can ask the server which red cards are most popular based on the results of the minigame and the real game, both overall and in terms of the current green card. It's all about social computing and collective wisdom and Web 2.0 and other such things!

Any thoughts? Maybe this could be the basis of the Facebook app that someone keeps bugging me about (you know who you are :D).

Saturday, November 17, 2007

New Design

I've updated the blog's page design, as you can see. I was going to try making a design on my own, but I poked through Blogger's list of templates a little more closely and I found this design, which I really like. It's not exactly what I had in mind, but I think it's pretty snazzy looking. Besides which, in order to make my own design, I would've had to:
  1. Research other blogs and sites to help me refine my ideas
  2. Mock up the design as an image in The GIMP
  3. Extract all the graphics I'd need, and upload them somewhere
  4. Create an HTML mockup for the blog
  5. Import the HTML into Blogger's templates
That's easily at least a few days' work, especially once I have to start working it in around my other commitments. I'd say this design is certainly better than anything I could've come up with in a reasonable time frame. Sure saves me a lot of work.

Thursday, November 15, 2007

What's in a name?

I'm back! Sorry for the lack of recent updates, but real life intervenes. Anyway, this post is dedicated to what this project will actually be called. Right now, I'm using "Apples to AJAX" just about everywhere, but I have to say that I don't particularly like that name. For one thing, I think it's a little bit too close to the original "Apples to Apples", and I don't really feel like risking legal trouble. My understanding is that I'll be OK just as long as I don't use the exact name or a very obvious derivation thereof (definitely correct me if I'm mistaken on that), but I'd really like not to push it.

Additionally, I don't like the fact that it has "AJAX" in it. Granted, the game is going to feature AJAX very prominently, but I don't think it's important for my future visitors to know that. When you boil it down, "AJAX" is basically just a web development buzzword that doesn't have a whole lot of meaning to the end user. A lot of people don't know what it is, so I would have to answer "what the heck is AJAX?" from the majority of people who visit the site. I don't think I could even explain it succinctly to someone who doesn't know a lot about how the Internet works, which is likely to be most of my audience. And that's kind of the point - even if you don't have the slightest idea what AJAX is, you can still play the game perfectly fine. So basically, there's absolutely no reason for the word "AJAX" to appear in the name.

Just as an aside though, I do have to say that the shorthand of "a2a" is very convenient. Right now, the project is living in a folder called "a2a", and the CSS and JS files are prefixed with "a2a". Additionally, I think it's appropriate given my current location in Ann Arbor, commonly nicknamed A2 or AA. I definitely didn't know I was gonna wind up here when I started working on this project, but sometimes things just turn out the right way.

So what am I thinking instead of "Apples to AJAX"? I haven't completely decided, but I am personally leaning towards something like "Dangerous Apples". I like the fact that it has the adjective-noun format that you construct during the game, and also a certain non sequitur element to it. You can imagine playing "Apples" as a red card for the green card "Dangerous". That and I just like the rhythm - that whole dactyl-spondee sequence. Virgil was onto something for sure. I'm not sure if it's too crazy of a name though, and I wonder if I'd need to redo any of my artwork - the current apple logo doesn't look very dangerous for sure. (Maybe it's just a facade...)

Any other thoughts?

Thursday, November 8, 2007

Status update

So before I get too far into my insights on this, I thought I'd drop a quick status note on what I've accomplished with the game so far. I've had the overall design doc finished for quite a while, and I created the overall HTML templates a few months ago. So that just leaves the functionality pretty much. I was working on the Javascript and AJAX for the pages, but I realized that in order to work on that, I needed some kind of back-end, so I've been working on that recently. Here's the list of things you can do right now:

* Create a game room - it will add you to the player list and shuffle the cards automatically
* Play a card (partially) - the display logic is in place, but it does not record which card you actually played anywhere.
* Set "away" status (partially) - again, the display logic is there, but no one's listening on the backend.

Since I'm running all this off my laptop for the time being, I don't have a heck of a lot to show you, but in case you haven't seen them previously, you can look at my original image-based renderings of the game screens here and here. They're still largely accurate for what I've done already!

So what does this mean for the inevitable question of "when it's done"? Well, I've always been hesitant to make a definitive statement of where I am, how much is left, and when you might be able to get your hands on it. In this business, your position can really change at a moment's notice based on something you hadn't considered; and this is even before you get into user tests and debugging, when anything goes!

I'm (sadly) reminded of my time in the online gaming community, and development teams' general dislike of progress meters indicating that the project is, say, 65% done. I remember one project had a progress meter that would simply display a random number every time the page was loaded, and I myself made an image of a progress meter divided into categories (graphics, maps, AI, etc.), in which each category's percentage was listed as "When It's Done". Needless to day, I used this image at every conceivable opportunity. So unfortunately, I am going to have to stick you with "When It's Done" for the time being, but I hope to use status updates like this one to give you at least some verification that I actually am working on it here.

Wednesday, November 7, 2007

Welcome!

Hi all!

This is my obligatory introduction post. This blog is focused on a current personal project of mine, namely a web-based version of the party game Apples to Apples. I'm going to detail my progress, and share my insights on designing and creating the game. So please drop by and feel free to comment!

-Mark