Phase 9: The Scoreboard

One of the key features of the game is the provision of a scoreboard which displays daily, weekly, monthly and all-time high scores.

When a player chooses to submit the game score the system checks whether the user already has a saved score. If this is the first score for the user, then it is automatically stored. If not, therefore the players already had a previous score saved, the new score is compared with the previous score and is only sent if the new score is higher. The old score is then deleted. The top score is displayed in the list of high scores if it is within the top sixteen (daily, monthly etc…). Otherwise, a list of high scores is displayed.

Figure - 'Daily' Top Scores

Figure - 'All' Top Scores

Clicking on a high score will display the profile of the scorer as shown in the figure below.

Figure - Top Scorer Profile

Eventually, the comments related to the score will also be displayed in this area. Clicking on the name of a commenter will bring up the profile of the commenter.

The scores are retrieved from the score engine, and then stored in a div tag using Javascript, via the code below.

function displayScores() {
var results = eval("(" + scores + ")");
var current = "";
var i=1;
for (var result in results) {
if (i%2==1) {
current+="<tr>";
}
var origUsername = results[result].username;
var username = results[result].username.split("@")[0];
var dImage = results[result].userImg;
if (dImage == null || dImage == "null" || dImage == "") {
dImage = "default_profilepic_2.png";
}
current = current + "<div class=\"rank_numbers\">";
current = current + "<td class=\"rank\">"+i+"</td>";
current = current + "<td class=\"profilepic\"><a onClick=\"loadProfile('"+ origUsername +"', "+i+");\"><img src=\"img/"+dImage+"\" border=\"0\" width=\"42\" height=\"42\"/></a></td>";
current = current + "<td class=\"player\">" + username + "<span class=\"player_details\">Score: " + results[result].thescore + "</span>" + "</td>";
current = current + "</div>";
if (i%2==0) {
current+="</tr>";
}
i++;
}
document.getElementById("scores").innerHTML = current;
}

Here, the scores are received as a JSON encoded PHP associative array. The array is evaluated (using the Javascript 'eval' function). Div tags are then generated in a loop and finally displayed on the page in a tabular format.

The scores retrieved are given a time parameter, such as "today" or "Monday this week" as shown in this (really cool) code below:

function getTop10() {
global $dbBallGame;
if ($_GET['dateRange'] == "today") {
$today = date("Y-m-d H:i:s", strtotime("today"));
$qry = "SELECT user.username, score.score as 'thescore', user.userimg as 'userimg' FROM score, user WHERE scoretime > '$today' AND user.id = score.user_id ORDER BY thescore DESC";
} else if ($_GET['dateRange'] == "week") {
$thisweek = date("Y-m-d H:i:s", strtotime("Monday this week"));
$qry = "SELECT user.username, score.score as 'thescore', user.userimg as 'userimg' FROM score, user WHERE scoretime > '$thisweek' AND user.id = score.user_id ORDER BY thescore DESC";
} else if ($_GET['dateRange'] == "month") {
$thismonth = date("Y-m-d H:i:s", strtotime("first day of this month midnight"));
$qry = "SELECT user.username, score.score as 'thescore', user.userimg as 'userimg' FROM score, user WHERE scoretime > '$thismonth' AND user.id = score.user_id ORDER BY thescore DESC";
} else if ($_GET['dateRange'] == "all") {
$qry = "SELECT user.username, score.score as 'thescore', user.userimg as 'userimg' FROM score, user WHERE user.id = score.user_id ORDER BY thescore DESC";
}
$result = mysql_query($qry, $dbBallGame) or die(mysql_error());
$resultArray = array();
while (($row = mysql_fetch_assoc($result)) != null) {
$resultArray[] = $row;
}
$encodedResult = json_encode($resultArray);
echo $encodedResult;
}

Note how the PHP 'strtotime' function is used to convert plain English sentences into specifications of time.