Make it look good on iPad

[mdellanoce]

We want to make the demo using the iPad emulator. So go through this article and try to make it look like a native app:

http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Maybe also try to get the whole board visible by default somehow

[mdellanoce]

Might help: http://developer.apple.com/library/ios/#documentation/Xcode/Conceptual/ios_development_workflow/25-Using_iOS_Simulator/ios_simulator_application.html#//apple_ref/doc/uid/TP40007959-CH9-SW1

[mdellanoce]

This was actually easier than I expected. The iOS simulator was in:

Macintosh HD > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications > iOS Simulator

After opening it, I just pinned it to the dock so I can access it again later quickly. See the link in the previous comment for how to manipulate the simulator (e.g. rotate, drag). I recommend setting rotate right to begin with.

To load the game, open safari, and in the address bar, type:

file://localhost/Users/{YOUR USERNAME}/{PATH TO STONE AGE}/index.html

Once opened, you can see the game actually works and looks pretty much as expected. The only minor problem I see at this point is a little more padding than I expected on the top of the board. Note that if you load the page in vertical orientation, then rotate to horizontal, the scale is a little stranger... but still not bad.

[mdellanoce]

Follow instructions above to open the game in a browser, hit the little button to the right of the bookmarks button and select "Add To Home Screen", type "Stone Age" and click "Add". Now you have a ghetto looking icon on your home screen. Click it to launch stone age w/o the browser elements. I can't get the status bar to go away, but if you keep it black, it is barely noticeable (i.e. probably good enough for a video)

[mdellanoce]

added tap events to all the views, only the workspaces have preventDefault in the tap handler at the moment. easy enough to add to the rest if we need it (might be able to use underscore's wrap function to do it in one place)

[mdellanoce]

The iPad's screen resolution is 1024x768. This is actually fantastic news. The "board" we are using now is 1023x665. Each "player board" is 274x102. So we should be able to squeeze into the available space pretty easily if we can trim a little width from each player board (we need to reclaim 72 pixels from the horizontal). This won't leave much wooden table background, unless we scale the board down a little bit (you'll only see it between the board and the inactive player boards).

[mdellanoce]

I think if we just stick the board up in the top left of the screen (which would only involve removing styles for centering the board), this will automatically look perfect on ipad in horizontal orientation (unless we have 4 players, in which case there will be some overflow on the right).

I wonder if there's a way to tell ipad we only want this site in horizontal orientation?

[mdellanoce]

Based on some really quick research, it looks like phonegap will let us fix the orientation to horizontal (if we need to), but we can't do it in mobile safari.

For now, we can just record the demo in landscape orientation, and deal with this issue later.

[mdellanoce]

I tweaked the styles on the board and the body to make this work better on ipad... this means it doesn't look as good in a browser anymore, but I guess we don't care much.

[mdellanoce]

I also added a really dumb home screen icon

[mdellanoce]

I'm closing this... it has some issues on iPad over the internet (downloading images when a card becomes visible is super slow, for example). It works great on the emulator over the filesystem though, so when we put this on a device we'll be good. If there are remaining issues, we can handle them separately.

(and the issue with the player board width is still being tracked separately)