Creating user turn based game in Javascript

Question

I've created a whiteboard web app where a multitude of registered users, login and start drawing on the html5 canvas. I devised the 'multiplayer' aspect of the game through python websockets and the login is made with php, currently the canvas page has a 'session_start();' so I can be able to add a feature to see who's currently using the application and I feel it may come in hand for the 'turn based' aspect as well.

Now I'm trying to prevent users from being able to draw on the canvas at the same time, if possible i'd like every user to have a fair turn at drawing on the canvas. I'm not sure how I'd accomplish this but I feel that Javascript will most definitely be the logic behind this.

Any advise or suggestions as to how I'd go about achieving this feature?

EDIT Ok since nobody has any answers or suggestion I'll try and provide to you what I've attempted so far, I think it may be on the right direction even though it doesn't work:

var player = document.getElementById("inputnameid").value;
var currentPlayer =  player; // player class

//array of player objs.
var array1 = [player]; // list that OnCurrentPlayerEndTurn cycles through to choose user

// call this at the start of the app
function OnStartTurn()
{
   currentPlayer.OnBeginTurn(); 

   var inputs=document.getElementById('inputty'); 
for(i=0;i<inputs.length;i++){
    inputs[i].disabled=false;
}  
                             //This function will activate the GUI so the user can now act
}

// call this function when setTimeout is 10 seconds
function OnCurrentPlayerEndTurn()
{
    setTimeout('OnCurrentPlayerEndTurn();', 10*1000); 
   change currentPlayer variable to the next player in line
   OnStartTurn(); // will cause the next player to begin his turn
}

Answer 1

Your question seems to be focused on the front-end code, which, while important, is not the critical part of this problem. As you've noted, the core of a turn-based game is the round-robin passing of active players. You probably want this to be done server-side: it's much easier to coordinate the various players from there.

You'll maintain a list of the players in a given game on the server. Before the game starts each client will register with the server and an identifying user id is stored there. Then in each round, the server allows each player a turn. The turn order is of course up to the specifics of the game, but the general idea is the same whether turn order is fixed or fluid.

As each player's turn comes around, the server sends a ticket to that player's client. This is essentially a one-time pad (OTP) concept: generate a random token that is hard to guess (so don't use just an increasing integer, but instead some cheap hash function or the like). The client then sends this ticket along with the request for the move they would like to make, and the server validates that the ticket corresponds to the currently active player before taking any action.

Depending on the rules and requirements of the game, the server can then immediately invalidate the ticket (e.g., chess), can wait until an 'end of turn' move, or can invalidate the ticket after some amount of time. The server then generates a new ticket for the next player to go.

The client-side code follows naturally from this architecture. All inputs can be disabled by default, and only enabled when the client holds a valid ticket. If the ticket is designed to time out, you probably want a method of querying the server to determine if it is still valid. If the user is always responsible for ending their own turn (explicitly or implicitly) you can get away without that.