Chess Application

[stanos]

Hello guys...i am writing a chess application using php mysql and javascript...my aim is to play chess through two different browsers under the same server though..for example when i make a move from chrome i want that move to be displayed in mozilla..how can i accomplish that?my first thought is using sessions that store the last move for each player...i have maid the whole interface and the database has two tables:'users' and 'games'...

 

users conclude these columns:user_id,user_name,first_name,last_name,email,password,registration_date,rating,status

games conclude these columns:game_id,date,user1_id,user2_id,user1_move,user2_move

 

please help!!

[HartleySan]

I'm not considering the actual chess logic right now, but you'll probably want a moves table, which would contain foreign keys for the users table and the games table. I'm not sure of the best way off the top of my head to keep track of the pieces that have been taken, etc. Maybe you'll need a separate pieces table too.

 

Anyway, you can use Ajax to query the database every so many seconds to automatically update the board.

 

Also, if you have some sort of user ID system, it shouldn't matter what browsers and where the two players are.

[stanos]

for example can i write the following function somewhere in my javascript file???

 

 

function update_table_with_the_lastmove(lastmove,game_id)

{

 

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","get_lastmove.php?q="+lastmove&q2=+game_id,true);

xmlhttp.send();

}

 

 

 

and the php file could be this:

 

 

<?php

$q=$_GET["q"];

$q2=$_GET["q2"];

 

$con = mysql_connect('localhost', 'peter', 'abc123');

if (!$con)

{

die('Could not connect: ' . mysql_error());

}

 

mysql_select_db("chessbase", $con);

 

$sql="UPDATE moves SET lastmove= '".$q."' WHERE game_id = '".$q."'";

$result = mysql_query($sql);

[HartleySan]

That's more or less the idea, yes. However, a couple of things:

 

1) I wouldn't put your Ajax-object-generating function within the last-move function. If you do that, you'll be recreating an Ajax object every time the last-move function is called. Instead, initialize an Ajax object when the page loads, and keep using the same Ajax object.

 

2) Your database structure needs some revising. I think you should design the database so that every move of every game is recorded. You could either create a new table every time a new game is started, and store all the moves for a particular game in its own table, or you can have one massive moves tables, which keeps track of every move in every game. I'm thinking the former would be better. Then, you only need go to the appropriate game table, and pull the move with the most current timestamp to get the last move.

 

3) Keep in mind that you need a way of restoring any game at any point in time. You can do this by creating your own notation that denotes where each piece is during every move, or you need a way of traversing the game table chronologically, in order to restore the game to a particular state. Again, I'm thinking the former would be better. For example, you need something like the following:

 

WK-A7,WQ-B4... (WK = white king, WQ = white queen, etc.)

 

I'm no expert on this, so I would do some research into how other chess programs do this. There is probably a common notation that would prove useful.

[Larry]

For what it's worth, and perhaps it's nothing, but in my opinion, PHP would not be a good choice for something like this. Whenever sites need real-time, dynamic interactions between two or more clients, a Java or Flash app is the common approach. It's certainly possible to do this using Ajax, but it's going to be clunky.

[HartleySan]

For the most part, I agree, but with HTML5 and JS, it might not be so bad. Perhaps updating the DB after a move is made so the user doesn't notice would work. 'Course, then you risk losing the data if the user quickly closes the page.

[Larry]

HTTP is a stateless technology and this is still true for HTML5. The problem isn't in updating the database, that's quite easy to do and can be done without the user being aware of it (i.e., Ajax). The problem is in updating what is shown in one browser after the other user makes a choice in their browser. There is no way to push content onto a client's HTML page like that. The only workaround is to use Ajax to constantly ask if there is new content available, which is terribly inefficient and the end result will be clunky. For example, in a chess game, early moves might only take 15 seconds, so perhaps running an Ajax request every 15 seconds makes sense. But if a move takes 5 seconds, then there's an unnecessary 10 seconds of wait time. More importantly, if someone goes to the bathroom and the next move ends up taking 5 minutes, there are 19 unnecessary Ajax requests being made (39, if both clients are making requests).

 

And what if you wanted to add live chatting, which would be a common feature on an online game? There's no way using HTML (with PHP as a backend), that you can do true live chatting.

 

If Stanos wants to do this because that's something Stanos wants to do, I understand, but in my opinion, PHP/HTML is not the right choice of technologies for this particular application.

[HartleySan]

Good points.

[HartleySan]

Just to add my two cents again, I was using a chess app a while back on my iPhone, and I liked the way they handled updating moves.

 

Basically, you had your list of game, and when you clicked on a game, it would check for updates. Also, there was a button on the screen with the chess board for manually searching for updates.

 

I thought it was more than sufficient, and it'll eliminate the problem Larry was talking about.

[stanos]

somewhere in my code i have this block:

 

 

 

request.onreadystatechange=function(){

if (request.readyState==4 && request.status==200){

document.getElementById("txtHint").innerHTML=request.responseText;

some_func();

}

}

 

i observed that the function 'some_func' was called continuously messing things up...

is there any way so that i can call the function 'some_func()' only once from that point?

[HartleySan]

A couple of small points:

 

For your code, you should add a semicolon to the end of your function expression. Also, it's best to put parentheses around each expression in an if statement, and for each expression, === is preferable over == ('cause it's more precise). Lastly, your DOM reference should probably be stored in a variable, so that you only have to perform it once, regardless of how many times you make an Ajax request. In other words:

 

var txtHint =  document.getElementById("txtHint");


request.onreadystatechange = function () {

 if ((request.readyState === 4) && (request.status === 200)) {

   txtHint.innerHTML = request.responseText;

   some_func();

 }

};

 

With all that said, when you say you want to execute some_func() one time, do you mean one time total, or one time per Ajax request? Because as it stands, you code will perform the latter, which seems fine. However, if you mean the former, then you can add an if statement like the following:

 

var txtHint =  document.getElementById("txtHint"),
 firstTime = true;


request.onreadystatechange = function () {

 if ((request.readyState === 4) && (request.status === 200)) {

   txtHint.innerHTML = request.responseText;

   if (firstTime) {

     firstTime = false;

     some_func();

   }

 }

};

[stanos]

Hello again...

 

things have gone well with my project till now..I made a function that calls the database every 10 seconds(using ajax) and if there is a move in the "moves" table in the database that move is displayed in the board,no matter on what browser we are...the thing is however,that if i make a move from chrome i want the next move to be done only from mozilla and particularly with the opposite colour..in other words i want somehow to eliminate the possibility of doing two sequential moves from the same browser...how can i achive this??

[HartleySan]

I'm not exactly sure what you mean, but I'm assuming that you don't want white to be able to move twice in a row, or vice versa, right?

 

I suppose the simple solution would be to lock the board for a player right after they make a move. In other words, as soon as they make a move and submit it, lock the board so that they cannot move any pieces, and then update the database with the move. If you do that each time, there shouldn't be any issues.

 

I'm not sure what you mean by one move on Chrome, and then another in Firefox, but in general, if you want to be browser-specific, then you'll need to do some browser sniffing using the navigator.userAgent property in JS. Although, I admittedly don't understand why you'd have to do that.