govsgo
govsgo copied to clipboard
ryanb
Play Stone on iPhone
It's currently not possible to play a stone on the iPhone, this may be a bug with how JavaScript handles clicking in an area on the iPhone.
Also it would be nice if there was a "Confirm Stone" button on mobile devices, but that may need to go in a separate ticket.
In fact I would like to re-do the interface for mobile devices, and maybe even make an iPhone app, but that will take some time.
I have little coding experience, but would be willing to help with making the iPhone app. Boardz is currently the only decent p2p iPhone go app, and it could use some help...
Cool, I'll have to check out Boardz. There's also DGS and Tetsuki which are nice for playing online. And there's SmartGo for playing offline.
To make an iPhone app I would need to make an API for it to communicate with, but that shouldn't be too difficult.
Yeah, I tried both DGS and Tetsuki, but they have their own respective problems with turn-by-turn p2p play. Boardz has a little trouble with the scoring (marks some dead stones as live), but it's pretty decent. My username's kevincoleman on Boardz if you do end up checking it out.
Let me know if you develop an API for it. I love interface design, so maybe we could team up (though govsgo.com looks quite slick already).
Also, if you're interested in a method for making boards playable in touch web interfaces, I have something set up at http://colemantest.com/go/ that might interest you. It uses javascript to place the piece, but really it could interface however you want.
Cool, thanks for the link. It looks like you're using onclick which is basically what I'm doing but through jQuery's live("click", ..) function. Hmm, will have to do some more testing.
It turns out the live("click") function doesn't detect touch events, however the click() function does, so I was able to switch to that. I also noticed there are touchstart, touchmove, and touchend events so one can better handle events on the iPhone which would be awesome to do.
I'll leave this ticket open to discuss further improvements for the iPhone.
it won't work on govsgo.com until the contest is over since I can't update that code. If you download this source and run it locally it should work.
I've been thinking more about the behavior of the mobile version of the website. The site will primarily have the same content but it will be in a single column.
For example, the home page will have the intro at the top, "Play a Game" button, followed by the screencast then the "Watch a Game" section - all in a single column.
The game screen is key here. The Go board will take up most of the screen and there won't be the letters/numbers on the sides in order for it to fill the screen more. I find it fits nicely on an iPhone screen and the stones can be easily viewed even on a 19x19 board. If one is watching a game, the competing players names are shown below the board.
Placing a stone is the tricky part, the board is too small to reliably place a stone, however I think it will work if one taps the bowl on the lower left and drags a stone up to where they want it on the board. After this a "Submit" button will appear on the lower right to confirm the placement. This is similar to the Boardz app which you showed me.
The game screen can have a button bar at the bottom or two allowing someone to switch to different modes. There can be an "information" mode showing the details of the game (players, handicap, komi, etc.). A browse mode showing the navigation buttons and SGF download file. A mode to pass/resign the game. I think that's it.
Sounds like you've put quite a bit of thought into the mobile interface! I like what I hear, and could even design a mock-up or two...
A couple suggestions/things to keep in mind:
When designing for a mobile touch screen, functionality aside, layout can be tricky. It should be easily scalable as the pixel is your enemy in limited real-estate (fuzzy scaling/dithering). Effective CSS could be a great advantage here, especially at the advent CSS3, which allows much more control over formatting shapes/borders/colors. I believe most touch phones support most of CSS3's new properties—might be worth looking into.
One suggestion... while Boardz has found a decent solution with the drag-n-drop routine, the bowl is rather unnecessary. For a while I played Go on the iGo app, which handles it quite well. In iGo you can touch anywhere on the screen to "pick up" a piece, then your release places it. This does 2 things: simplifies the process of placing a piece, and saves the screen space that the bowl takes up (a circle like that really hogs space). iGo includes an option for a piece offset, so you can always see where the piece will be placed.
I do like the idea of the bar at the bottom. That is a nice slick & standard way to present menu-type information.
With the space gained from not having a bowl, you could include a position index that live-updates as the user drags the piece. This way you can still be conscious of where you're placing a piece (a7, c9, etc) without losing the screen space that a full index takes.
Also, you should consider making the site scalable for devices with different resolutions like the iPad (1024x768) and iPhone 4 (640x960) (not to mention the whole slew of other tablets, laptops, and phones). This can be done fairly effectively with CSS media queries.
I even have some slick little images I've put together (though the current interface looks quite nice), if you're interested in scaling.
Thanks for you thoughts! I'll have to take a look at the iGo's implementation. This is one area I think I'll need to experiment with different styles to find out what's best. It's not worth having the bowl there if that doesn't lead to the best experience.
I'm looking forward to working on this more but it'll have to wait until some of the more critical issues are addressed.
Unfortunately, iGo is no longer available in the App Store (i think it was rated rather lowly for not supporting multiplayer modes). Understandably, this wouldn't come for some time, but it's good to think about when making changes to the current version so as to be prepared.
With the bowl, I just found it to be a pain that you always have to start at the same point on the screen. Then if you accidentally misplace a piece you have to start over from the bowl. With a no-bowl environment (hehe), a misplaced finger need only be adjusted from the last point of reference, making it quicker and more convenient.