Phase 11: Comments

When a user achieves a high-score, other users may comment on the score.  First, the user clicks on a score in the high score list.

Figure - Scoreboard Screen With Player Choosing To View The Profile Of Another Player

This displays the user profile page.

Figure - Player Profile Logged Out

Note that the user cannot submit a comment at this point since they are not logged in. After login, this area is changed to a form.

Figure - Player Profile Logged In

A user will then submit their comment and this is displayed in the profile page instantly.

Figure - Player Profile With Comments

As can be seen, the comment is displayed along with the user profile picture, username and timestamp. Clicking on the username will in turn load that user's profile, and so on.

A Javascript function is used to display the user's comments, as shown.

function displayPlayerComments(commentRS) {

var comments = eval("(" + commentRS + ")");
var resultHTML = "";

for (var comment in comments) {
var dComment = comments[comment].gcomment;
var origUsername = comments[comment].user_from;
var dUsername = comments[comment].user_from.split("@")[0];
var dTime = comments[comment].comment_time;
var dImage = comments[comment].userimg;

if (dImage == null || dImage == "null" || dImage == "") {
dImage = "default_profilepic_2.png";
}

resultHTML += "<tr><td class=\"comments-profile-pic\" rowspan=\"2\" width=\"55px\"><img src=\"img/"+dImage+"\" alt=\"\" title=\"\" width=\"42px\" height=\"42px\"/></td><td class=\"comments-username\"><a onClick=\"loadProfile('" + origUsername + "')\">" + dUsername + "</a></td><td class=\"comments-date\" valign=\"middle\"> - " + dTime + "</td></tr><tr><td class=\"comment\" colspan=\"3\">" + dComment + "</td></tr>";
}
document.getElementById("comments-table").innerHTML = resultHTML;
}

As can be seen, the username and display picture are a link to the loadProfile() Javascript function which loads the profile of the user who has posted a comment.