Pre-submission goals, update #3: So, what happens when I fly off the grid?

There is one significant issue I have found (via user testing) that occurs in my Flash version of this game that I do not recall ever occurring when I played this game on paper with my dad.  This would be the possibility of players going so fast that not only do they go out of the track boundaries, but they end up in the position in which all options for their next move are off the playing grid entirely.  I wonder if my discovery of this is a result of my throwing my friends into playing my game without their really having a clue what they had to do, and thus having pretty much no clue (initially) of how to strategize the management of velocity.  But either way, I thought that it would be fairly bad in terms of user experience to force everyone to restart the game if a player went off the grid, so I decided to handle that case.

I consulted with my dad, and he helped me come up with a reasonable solution.  I decided that if a player comes to their turn and all their options are off the grid, that move will be taken for the player as follows:

1. They will move to the "middle" option (i.e. the gridpoint that would maintain both their x- and y-velocities), wherever it may be, off the grid.
2. Then, they will "slide" back onto the edge of the grid.  In other words, if they are off past the top or bottom edge, their y-coordinate will be adjusted, and if they are off past the left or right edge, their x-coordinate will be adjusted.
3. As a "punishment" for going off the grid, their velocity will be reset to (0, 0).

Since the player has no control of this move that's bringing them back onto the grid, they are informed of it, like so:

And on your next turn, you start off at the edge with (0, 0) velocity:

Pre-submission goals: update #1

Things fixed or completed so far...

• The current velocity for each player is now displayed next to the thumbnail of their Facebook picture and is updated after each turn.
• Players now cannot occupy the same gridpoint at the same time.  To do this, I simply don't display the little circle that indicates that you can move to a point if another player's piece is currently located on that point.  (I had one hitch initially -- I forgot that if your current velocity allows, you sometimes can stay on the same exact point you're already on, so I didn't want to hide the circle if it's on top of your own piece.)
• I believe I have now fixed the bug of move-option circles not appearing when they should have, during the case of both (out of 2) players being out of bounds at the same time.  Luckily, it was a simple matter of updating a boolean that pertained to the other player; as in, I'd forgotten to update that bit of game state across all player instances (not just the instance of the player whose turn it had been).
• (??) As John is graciously allowing me to test via his Facebook login, I was able to play a couple of full games (by logging in as myself in Firefox and as John in Safari) on my own screen, and the winner notification worked in all cases.  So maybe this is not a bug after all?

A thought I just had: I should really test this on more than just two players.  I don't think I ever really have.

p.s. Screenshot of preventing players from occupying the same point, without removing the option circle that coincides with your own current position:

Goals prior to final submission

So after my first full night ever in the SIG lab, I managed to pull off my presentation pretty well, I think.  I even ran a live demo, playing against John, and nothing broke. (!!)

Post-presentation, I've still got about a week to wrap this project up.  Here's what I'm hoping to get done in that time:

• (bug) Fix/rework the way user logout is recorded in the database... right now I keep finding that users are still marked logged-in when I don't think they are.  (At least login is working right, I think!)
• (bug) Make sure the "player __ won!" popup works for all players.  I seem to remember a couple of test runs in which only one out of two players saw it when someone had won.
• (feature) Show each player's current x- and y-velocity somewhere next to their picture.  This should be really easy to do and would be helpful to see.
• ("feature") Write the About and Help pages (including gameplay instructions)
• (enhancement) Spruce up the (logged-out) intro page and the main page with a short intro to the gameplay.
• (enhancement) I kind of forgot to implement preventing players from occupying the same grid point at the same time.  This also should be extremely easy to implement.
• (bug?) I just today played the game against a friend and we ran into the case in which both of us were out of bounds at the same time.  I think there might have briefly been a mix-up regarding displaying the move options for one of us.  (Gameplay still proceeded properly though, I think.)  So I should test this again and fix if needed.
• (bug) I nearly forgot this one... but I really should do something about the case of players running off the edge of the entire grid.  Apparently this happens more easily in my online version than on grid paper with a pencil, haha.  (See previous blog post.)
• (enhancement) Show more clearly when another player takes their move.  I'm thinking I should highlight the position circle they've chosen for about a second prior to turning off those circles and showing their piece in the new position.
• ("enhancement") Write some back-logged blog posts.

I don't think any of these changes are too major, and none of them significantly change the gameplay, which was certainly functional by presentation time.

Will update this list if I think of anything else.

Considerations extracted from first (real-..)game chat

...with additional thoughts spurred from which...

Interface

• show players (names, pics, association to colored piece)
• display whose turn it is (and note "your turn" or "waiting for player __")
• display your current speed (and others' speeds?)
• and re: current speed - show a little compass of -x/+x and -y/+y directions

Instructions

How to interact with the interface:

• click on circle to select move
• gameplay is turn-based so you must wait for other players' moves
• other players' circles are NOT clickable to you when it's not your turn

Gameplay:

• goal is to be first around the track
• how your speed is allowed to change for each turn, and that the game calculates this for you and shows you your available moves
• when you go out of bounds, you lose every other turn for the duration of turns you are out of bounds
• boundaries of track (both inner and outer) are considered in-bounds
• cannot occupy same gridpoint as another player at the same time, but can occupy another player's previous gridpoint

Implementation stuff

• handle out-of-bounds (lose every other turn)
• handle off-the-grid
• detect when a player crosses the start line again (i.e. the winner!)
• don't let players be on the same point at the same time
• display something differently about the optpos when it's out of bounds

First game played against another real person!!

My wonderful friend volunteered to test-play my game!  I happily report that everything worked as it should, and we were able to play the game as fully as possible given the state of the code.  (Some things are missing, including: losing a turn when you're out of bounds, detection of a player winning the game, detection of a player going off the edge of the grid entirely -- this last issue did not come up in our game, but it's rather important to make sure I can handle that somehow.)

First I'll post a screenshot of our finished game.  I'm the blue player and my friend is the red.

Following the screenshot, I'm including a transcript of our chat conversation during the game (with my friend's permission, and mildly edited for relevance).  It's very helpful to know his thoughts during gameplay, particularly in the areas of: the rules of play, interaction with the interface, and information to be displayed during gameplay.

Our game:

Chat transcript:

me: alright let me instruct you what to do
friend: ok
me: you're still on the page?
friend: absolutely
me: ok refresh it
me: and you should see "game #20" on available games to start
friend: yeah click it?
me: i mean to join
me: yes
me: ok i can see tha tyou joined lol
friend: i'm in baby
me: now does the track show up?
friend: yes
me: alright it's my turn lol
me: i'm blue and your'e red
friend: how do i move it?
me: you have to wait for me to go first
me: i'm player 0
friend: ok
me: you're player 1
me: cuz i started this particular game
friend: ok
me: do you see my move?
friend: you moved up one space
friend: yeah
me: yes
me: now you can click any of the red circles to move there
me: we're trying to go around the track. lol
friend: i gotcha
me: so that's all... lol
friend: can we occupy the same space?
me: not at the same time
friend: ooh
friend: intersting
me: but you can only select from the circles to move to
friend: can i go right on top of the inner black line?
me: they show you where you can move based on the rules
me: yeah that should work
friend: ok
friend: your move
me: yes i know
me: i'm trying to explain lol
friend: hehe
me: cu zi realized you don't know the rules
me: but yeah it's pretty simple
friend: i gotcha
friend: oh now we can move two spaces up
me: the rule is
me: on each turn, you can change your x speed by -1, 0, or 1
me: and same for y speed
me: make sense?
me: so try not to go out of bounds
friend: so how do i change the speed?
me: you are changing it by selecting one of the option circles
friend: ahhh i see
me: middle circle = no change
friend: i getcha
friend: like a turn-based game
me: all the others are a change of some kind, in one or both directions
me: it is turn based yes lol
friend: i dont see why it's letting you take the inside route
friend: and why the spaces closest to the edge wasnt available to me
me: you always have an x/y speed.
me: like i said
me: in each turn you can change one or both of those by: -1, 0, 2 for each
me: but the game is doing the work of tracking your speed and available changes by showing you the options for your move
me: that's all haha
friend: ok fine
me: do you understand it?
friend: for now
me: you manage your acceleration
me: so you should start slowing down in the x-direction
friend: so what's the advantage of a slowing down
me: lol....
me: if you keep going so fast in x-direction
me: you won't be able to stay inside
friend: i getcha
me: b/c you can only slow down by 1 each turn
friend: ahhh ook ok
friend: play on
me: oh shit
me: lol i'm out of bounds hahha
me: right now i don't actually have any implementation for handling that case.
friend: so what does that mean, game over for you/i win?
me: no
me: i haven't coded this part yet
friend: oh ok
friend: so it's stuck
me: but when yor'e out of bounds you lose every other turn
me: so you get slowed down a lot in comparison to the other players
me: no it's not stuck i can just move normally haha
me: see the upper right, the game knows i'm out of bounds
friend: oh ok
me: but it's not going to do anything about it
me: sorry haha i'm technically cheating right now
friend: ahh i see
friend: ok i'm trying to go more down and less righgt
me: mhm
friend: so was that the right move to make
me: yeah that's the right strategy for the moment
me: but don't go flying downwards too fast
me: cuz you will have to slow down again
friend: cause i gotta make the turn
me: it's acutally harder than it looks lol
friend: i go tit,
me: yay
friend: lets see if i can do it
friend: haha
me: dude, you have no idea, i'm so excited right now
friend: ok so one thing
friend: i gotta start goign left
friend: how do i tell it to do that
me: you can't "tell" it to do anything
friend: right
me: you can just choose from the options
me: you'll see
friend: well how do i change my velocity
friend: to go -x
me: it'll just do it for you
friend: based on what
me: as long as you are selecting one of the left-hand-column circles to move to, you're changing your horizontal speed by -1 each time
friend: ah haa
me: just keep clicking lol
friend: ok
me: now your'e out
me: of bounds
me: but you can keep playing like i did lol
friend: yeah
friend: didnt have much of an option
me: see you are going -x now
friend: yeah i see
me: but now watch the inside bound
friend: it's just
friend: reactive
me: haha
me: it's like driving
friend: how do i know what my current "x" is
me: right now you have to count it, sorry
me: i'll make a display for that
friend: haha ok
friend: that's the only thing
friend: keeping track
me: yeahh sorry!
friend: shoulda slowed my Y a bit sooner
me: lol, yeah
me: oh and please try not to go off the board
me: i don't have anything to deal with that right now in the code lol
friend: i'm working on it
friend: but i kidna dont remember how much -Y i put in
me: you can count from your previous dot to your X now
friend: oh forget that
me: okay...
me: crap i might go out
friend: hee
me: i didn't slow x early enough
friend: you nooob
me: right sure.
me: yeah shit
me: haha i'm flyyying off the track there.
friend: hahah
me: you should aslo slow x now
me: by the way it's not goign to detect the winner..
friend: yeah i finally see the x slowing
me: ok i'm gonna stop there ok?
friend: ok so you won then
me: well i was out of bounds so
me: who knows haha
me: hey
me: can i ask you a huge favor
friend:
so it's supposed to skip yoru turn
friend: but it seem like it didnt
me: i know, i told you i didn't code the turn-losing yet
friend: oh ok
me: yeah..
friend: sorry osrry
me: lol it's ok
friend: just trying to get it striaght
friend: ok huge favor
friend: go ahead
me: yeah def.
me: so would you mind if i posted (most of) this conversation with you on my project blog?
friend: sure
me: this is the first time i've played wiht someone else on another computer.
me: i won't put your name
friend: just, know that i'm not educated
friend: haha
me: lol,
me: i like our conversation b/c you pointed out stuff that would be confusing to someone who's never played before
me: which are things i should consider when i write the instructions, etc
friend: ah i see

me: thank you soo much!

Resizable iframe

As I mentioned in my post about setting up the Facebook app, I selected the option to allow the iframe (which holds all of my content -- it pulls my app pages from toryg.net) to be resizable.  I didn't really know what that meant when I was setting it up, but now I've realized: if my content is longer vertically on the page than what's seen in the browser window, the content just gets cut off.  (Thanks to Firebug, I found the css command that was setting the iframe to have overflow: scroll; -- so when I was testing two instances of the swf on one page, I would simply go into Firebug and cancel that line so I was able to scroll the iframe and see everything.)

Today I decided to figure out how to actually fix this.  Thanks to the resizable iframe page (on the Developers' Wiki), I found out I had to set up two things first:

• allow for cross-domain JavaScript communication (between my server and Facebook's server)
• load in the JavaScript client library, which is simply a call to pull a script stored on Facebook's servers

Then in JavaScript I had merely to call up the CanvasUtil features, set the location of the xd_receiver.htm file, and call a library function (startTimerToSizeToContent()) which watches changes in the canvas content and automatically resizes the iframe appropriately.  (In other words, I copied the several lines of code from the resizable iframe page.)

The only hitch I had was that at first I was placing those few lines of Javascript up in the head of the page, and then that hidden div in the body hadn't been created yet when the script was trying to initialize.  Thus, unfortunately, I have to stick the script in the body, right after that div.  But it works now, so that no matter how vertically-long my content is, the iframe changes to accommodate it and I can scroll freely and see everything.