Side navigation
Ticket #6750: freq.js
File freq.js, 12.2 KB (added by thisislobo, July 02, 2010 02:36AM UTC)
This is the companion JS file necessary for the HTML file to work.
function getMedalText (metal){
var msg, metals;
metals = {"g":"Gold","s":"Silver","b":"Bronze"};
msg = 'Your score was so good you get a <span style="color:red;">'+metals[metal]+" Medal!</span><br><br>"+
'<button class="fb_button" onclick="nextGame();">Play Next Level</button> or '+
'<button class="fb_button" onclick="postOnWall(\''+metals[metal]+"',"+glevel+');nextGame();">Post on Wall and Play Next Level</button>';
return msg;
}
function tymer(){
var clock = $("div#clock");
var secs = Number(clock.html())-1;
clock.html(secs);
if(secs==0){
started = false;
showGameOver();
}
if(started)
setTimeout(tymer, 1000);
}
function isSolved(){
var i;
for(i=(gridSize*gridSize) - 2; i >=0; i--)
if(!gridStatus[i])
return false;
started = false;
return true;
}
function showGameOver(){
var pts,msg,medflag=true;
$("#playpen").hide();
pts = $("div#clock").text();
msg = 'You scored <span style="color:red;">'+pts+" points</span>";
if(pts=='0'){
msg = "Uh oh! "+ msg+" because you ran out of time.<br>Restarting level now...";
}
else{
msg = "Congratulations! <br>"+msg+".<br>";
if(timeallowed - pts < ggt){ //gold medal
msg += getMedalText('g');
}
else if(timeallowed - pts < gst){ //silver medal
msg += getMedalText('s');
}
else if(timeallowed - pts < gbt){ //bronze medal
msg += getMedalText('b');
}
else{
medflag = false;
msg += "Taking you up to the next level now.";
}
}
$("div#score").html(msg);
$("#gameoverdiv").show();
if(medflag==false){
timeoutvar = setTimeout(nextGame, 2500);
}
}
function finishGame(){
showGameOver();
if(glevel == playerlevel){
playerlevel++;
$.getJSON(baseurl + "ajax.php?f=up&u=" + playa);
}
}
function setUpGame(lvl){
$("#waitdiv").show();
$("#playpen").hide();
$("#friendrankingsdiv").hide();
var ajaxurl;
ajaxurl = baseurl+'ajax.php?f=gg&l='+lvl;
if(hasfriends == false)
ajaxurl += '&nofr=1';
//ajaxurl += '&jsoncallback=?';
//alert("Attempting to fetch "+ajaxurl);
//$.get('ajax.php',{ "f": "gg", "l": ""+lvl });
//return;
$.getJSON(ajaxurl,function(data){
var i,j,usefriends,tgt,cnv,indx,tmpimgsrc,iconset, frimagesoffset=0;
gridSize = data.gsize;
timeallowed = data.secs;
usefriends = data.fr;
ggt = data.gt;
gst = data.st;
gbt = data.bt;
if(usefriends == 0){ //using icons
iconset = data.icon;
}
else {
frimagesoffset = Math.floor(1 + Math.random()*(frimages.length - ((gridSize*gridSize) - 1))) - 1;//gets a random number between 0 and frimages.length - (gridSize^2 - 1). I think!
}
started = false;
tgt = data.tgt; //an array
cnv = data.cnv; //an array
$("#clock").html(timeallowed);
gridStatus = [];
for(i=(gridSize*gridSize)-1; i >= 0 ; i--)
gridStatus[i]=false;
//$(".caption:odd").css("margin-left",10*gridSize+"px");
//$(".caption:even").css("margin-left",15*gridSize+"px");
$("#target").empty();
$("#canvas").empty();
for(i=0;i<gridSize;i++){
$("#target").append('<tr id="row'+i+'"></tr>');
$("#canvas").append('<tr id="crow'+i+'"></tr>');
for(j=0;j<gridSize;j++){
//First, let's handle the target
if((gridSize-i)>1 || (gridSize-j)>1){
indx = tgt[(i*gridSize)+j];
if(usefriends==0) //using icons, not friends
tmpimgsrc = baseurl+'photos/icons/set'+iconset+'/'+indx+'.jpg';
else
tmpimgsrc = frimages[indx+frimagesoffset];
$("#row"+i).append('<td id="cell'+i+'_'+j+'" class="targetCell"><a target="_blank" href="'+frurls[indx+frimagesoffset]+
'"><img width="50" height="50" id="tgtimg_'+i+'_'+j+'" src="'+tmpimgsrc+'"></a></td>');
}
else //it is the last cell and should be empty
$("#row"+i).append('<td id="cell'+i+'_'+j+'" class="targetCell"></td>');
//Now, let's take care of the canvas
indx = cnv[j+(gridSize*i)];
if(indx!=1001){
if(usefriends==0)
tmpimgsrc = baseurl+'photos/icons/set'+iconset+'/'+indx+'.jpg';
else
tmpimgsrc = frimages[indx+frimagesoffset];
$("#crow"+i).append('<td id="c_cell'+i+'_'+j+'" class="canvasCell"><img width="50" height="50" src="'+tmpimgsrc+'"></td>');
}
else
$("#crow"+i).append('<td id="c_cell'+i+'_'+j+'" class="hole"> </td>');
}
}
$("#canvas td").click(function(){
if(started==false){
started=true;
tymer();
}
//First find the coordinates of this cell.
var coord = this.id.substr(6).split('_');
var xc = Number(coord[0]);
var yc = Number(coord[1]);
var holecoord = $("td.hole")[0].id.substr(6).split('_');
var holexc = Number(holecoord[0]);
var holeyc = Number(holecoord[1]);
var xdist = xc-holexc;
var ydist = yc-holeyc;
if(xdist==0 && ydist==0)
return;
if(xdist==0 || ydist==0){ //in the same row or column as the hole. Can be moved
var inc,ptr1,ptr2;
if(xdist==0){ //same row. So movement is going to be horizontal
if(ydist>0)
inc = 1;
else
inc = -1;
ptr1 = holeyc;
while(ptr1 != yc){
ptr2 = ptr1 + inc;
//var currCell = $("#c_cell"+xc+"_"+ptr1);
//currCell.html($("#c_cell"+xc+"_"+ptr2).html());
var currCell = document.getElementById("c_cell"+xc+"_"+ptr1);
currCell.innerHTML = document.getElementById("c_cell"+xc+"_"+ptr2).innerHTML;
if(ptr1 == holeyc)
currCell.className = 'canvasCell';//currCell.removeClass("hole").addClass("canvasCell");
if(xc < (gridSize - 1) || ptr1 < (gridSize - 1)){
//if($("#c_cell"+xc+"_"+ptr1+" img").attr('src') == $("#cell"+xc+"_"+ptr1+" img").attr('src'))
if($("#c_cell"+xc+"_"+ptr1+" img").attr('src') == document.getElementById("tgtimg_"+xc+"_"+ptr1).src)
gridStatus[ptr1 + (xc*gridSize)] = true;
else
gridStatus[ptr1 + (xc*gridSize)] = false;
}
ptr1 += inc;
}
}
else { //ydist = 0. So movement is going to be vertical
if(xdist>0)
inc = 1;
else
inc = -1;
ptr1 = holexc;
while(ptr1 != xc){
ptr2 = ptr1 + inc;
//var currCell = $("#c_cell"+ptr1+"_"+yc);
//currCell.html($("#c_cell"+ptr2+"_"+yc).html());
var currCell = document.getElementById("c_cell"+ptr1+"_"+yc);
currCell.innerHTML = document.getElementById("c_cell"+ptr2+"_"+yc).innerHTML;
if(ptr1 == holexc)
currCell.className = 'canvasCell';//currCell.removeClass("hole").addClass("canvasCell");
if(ptr1 < (gridSize -1) || yc < (gridSize -1)){
//if($("#c_cell"+ptr1+"_"+yc+" img").attr('src') == $("#cell"+ptr1+"_"+yc+" img").attr('src'))
if($("#c_cell"+ptr1+"_"+yc+" img").attr('src') == document.getElementById("tgtimg_"+ptr1+"_"+yc).src)
gridStatus[yc + (ptr1*gridSize)] = true;
else
gridStatus[yc + (ptr1*gridSize)] = false;
}
ptr1 += inc;
}
}
//$(this).html(" ").removeClass("canvasCell").addClass("hole");
this.innerHTML = " ";
this.className = "hole";
if(isSolved()){
finishGame();
//$("#waitdiv").show();
//setTimeout(setUpGame, 2500, glevel);
}
}
}); //end of click event for canvas td
$("#waitdiv").hide();
$("#playpen").show();
$("#gameoverdiv").hide();
if(glevel==1)
$("#prevgame").removeClass("fb_button").addClass("fb_button_selected");
else
$("#prevgame").removeClass("fb_button_selected").addClass("fb_button");
if(playerlevel>glevel)
$("#nextgame").removeClass("fb_button_selected").addClass("fb_button");
else
$("#nextgame").removeClass("fb_button").addClass("fb_button_selected");
$("#whichlevel").text("Level "+glevel);
}); //end of getJSON function
}; //end of setUpGame()
function tabClick (){
//obj is the object that is clicked.
$("a.fbtab_selected").removeClass("fbtab_selected").addClass("fbtab").click(tabClick);
$(this).removeClass("fbtab").addClass("fbtab_selected");
$("#gameoverdiv").hide();
$("#playpen").show();
setUpGame(Number(this.id.substr(0,1)));
}
function prevGame() {
clearTimeout(timeoutvar);
if(glevel > 1){
glevel--;
setUpGame(glevel);
}
}
function nextGame() {
clearTimeout(timeoutvar);
if(glevel < playerlevel){
glevel++;
setUpGame(glevel);
}
}
function postOnWall(metal, level){
var msg = "Sweet! I got a "+metal+" medal at Level "+level+" in Frequence.";
msg = encodeURIComponent(msg) ;
$.getJSON(baseurl+'ajax.php?f=pow&msg='+msg+'&u='+playa, function(){
});
}
function showFriendRankings(){
var selfrank;
$("#waitdiv").show();
$.getJSON(baseurl+'ajax.php?f=gfr&u='+playa,function(data){
var cnt,str=[];
for(cnt=0; cnt < data.length; cnt++){
if(data[cnt].uid == playa)
selfrank = " selfrank";
else
selfrank = "";
if(data[cnt].level < 4)
peckingorder = 'Rookie';
else if(data[cnt].level < 10)
peckingorder = 'Amateur';
else if(data[cnt].level < 20)
peckingorder = 'Professional';
else if(data[cnt].level < 30)
peckingorder = 'Champion';
else if(data[cnt].level < 45)
peckingorder = 'Hall of Famer';
else if(data[cnt].level < 65)
peckingorder = 'FreGod';
str.push('<div class="rank'+selfrank+'"><img src="'+data[cnt].upic+'"><br>'+
'<div class="naam">'+data[cnt].uname+'</div><br>'+
'<table>'+
'<tr><td class="laybl">Level<td>'+
'<td class="valoo">'+data[cnt].level+'<br>('+peckingorder+')</td></tr>'+
'<tr><td class="laybl">Gold Medals<td>'+
'<td class="valoo">'+data[cnt].golds+'</td></tr>'+
'<tr><td class="laybl">Silver Medals<td>'+
'<td class="valoo">'+data[cnt].silvers+'</td></tr>'+
'<tr><td class="laybl">Bronze Medals<td>'+
'<td class="valoo">'+data[cnt].bronzes+'</td></tr>'+
'<tr><td class="laybl">Games Played<td>'+
'<td class="valoo">'+data[cnt].numplays+'</td></tr>'+
'</table>'+
'</div>');
}
$("#waitdiv").hide();
$("#friendrankingsdiv").html(str.join(' ')).show();
$("#playpen").hide();
});
}
$(document).ready(function(){
setUpGame(playerlevel);
$("a.fbtab").click(tabClick);
});
Download in other formats:
Original Format
File freq.js, 12.2 KB (added by thisislobo, July 02, 2010 02:36AM UTC)
This is the companion JS file necessary for the HTML file to work.
function getMedalText (metal){
var msg, metals;
metals = {"g":"Gold","s":"Silver","b":"Bronze"};
msg = 'Your score was so good you get a <span style="color:red;">'+metals[metal]+" Medal!</span><br><br>"+
'<button class="fb_button" onclick="nextGame();">Play Next Level</button> or '+
'<button class="fb_button" onclick="postOnWall(\''+metals[metal]+"',"+glevel+');nextGame();">Post on Wall and Play Next Level</button>';
return msg;
}
function tymer(){
var clock = $("div#clock");
var secs = Number(clock.html())-1;
clock.html(secs);
if(secs==0){
started = false;
showGameOver();
}
if(started)
setTimeout(tymer, 1000);
}
function isSolved(){
var i;
for(i=(gridSize*gridSize) - 2; i >=0; i--)
if(!gridStatus[i])
return false;
started = false;
return true;
}
function showGameOver(){
var pts,msg,medflag=true;
$("#playpen").hide();
pts = $("div#clock").text();
msg = 'You scored <span style="color:red;">'+pts+" points</span>";
if(pts=='0'){
msg = "Uh oh! "+ msg+" because you ran out of time.<br>Restarting level now...";
}
else{
msg = "Congratulations! <br>"+msg+".<br>";
if(timeallowed - pts < ggt){ //gold medal
msg += getMedalText('g');
}
else if(timeallowed - pts < gst){ //silver medal
msg += getMedalText('s');
}
else if(timeallowed - pts < gbt){ //bronze medal
msg += getMedalText('b');
}
else{
medflag = false;
msg += "Taking you up to the next level now.";
}
}
$("div#score").html(msg);
$("#gameoverdiv").show();
if(medflag==false){
timeoutvar = setTimeout(nextGame, 2500);
}
}
function finishGame(){
showGameOver();
if(glevel == playerlevel){
playerlevel++;
$.getJSON(baseurl + "ajax.php?f=up&u=" + playa);
}
}
function setUpGame(lvl){
$("#waitdiv").show();
$("#playpen").hide();
$("#friendrankingsdiv").hide();
var ajaxurl;
ajaxurl = baseurl+'ajax.php?f=gg&l='+lvl;
if(hasfriends == false)
ajaxurl += '&nofr=1';
//ajaxurl += '&jsoncallback=?';
//alert("Attempting to fetch "+ajaxurl);
//$.get('ajax.php',{ "f": "gg", "l": ""+lvl });
//return;
$.getJSON(ajaxurl,function(data){
var i,j,usefriends,tgt,cnv,indx,tmpimgsrc,iconset, frimagesoffset=0;
gridSize = data.gsize;
timeallowed = data.secs;
usefriends = data.fr;
ggt = data.gt;
gst = data.st;
gbt = data.bt;
if(usefriends == 0){ //using icons
iconset = data.icon;
}
else {
frimagesoffset = Math.floor(1 + Math.random()*(frimages.length - ((gridSize*gridSize) - 1))) - 1;//gets a random number between 0 and frimages.length - (gridSize^2 - 1). I think!
}
started = false;
tgt = data.tgt; //an array
cnv = data.cnv; //an array
$("#clock").html(timeallowed);
gridStatus = [];
for(i=(gridSize*gridSize)-1; i >= 0 ; i--)
gridStatus[i]=false;
//$(".caption:odd").css("margin-left",10*gridSize+"px");
//$(".caption:even").css("margin-left",15*gridSize+"px");
$("#target").empty();
$("#canvas").empty();
for(i=0;i<gridSize;i++){
$("#target").append('<tr id="row'+i+'"></tr>');
$("#canvas").append('<tr id="crow'+i+'"></tr>');
for(j=0;j<gridSize;j++){
//First, let's handle the target
if((gridSize-i)>1 || (gridSize-j)>1){
indx = tgt[(i*gridSize)+j];
if(usefriends==0) //using icons, not friends
tmpimgsrc = baseurl+'photos/icons/set'+iconset+'/'+indx+'.jpg';
else
tmpimgsrc = frimages[indx+frimagesoffset];
$("#row"+i).append('<td id="cell'+i+'_'+j+'" class="targetCell"><a target="_blank" href="'+frurls[indx+frimagesoffset]+
'"><img width="50" height="50" id="tgtimg_'+i+'_'+j+'" src="'+tmpimgsrc+'"></a></td>');
}
else //it is the last cell and should be empty
$("#row"+i).append('<td id="cell'+i+'_'+j+'" class="targetCell"></td>');
//Now, let's take care of the canvas
indx = cnv[j+(gridSize*i)];
if(indx!=1001){
if(usefriends==0)
tmpimgsrc = baseurl+'photos/icons/set'+iconset+'/'+indx+'.jpg';
else
tmpimgsrc = frimages[indx+frimagesoffset];
$("#crow"+i).append('<td id="c_cell'+i+'_'+j+'" class="canvasCell"><img width="50" height="50" src="'+tmpimgsrc+'"></td>');
}
else
$("#crow"+i).append('<td id="c_cell'+i+'_'+j+'" class="hole"> </td>');
}
}
$("#canvas td").click(function(){
if(started==false){
started=true;
tymer();
}
//First find the coordinates of this cell.
var coord = this.id.substr(6).split('_');
var xc = Number(coord[0]);
var yc = Number(coord[1]);
var holecoord = $("td.hole")[0].id.substr(6).split('_');
var holexc = Number(holecoord[0]);
var holeyc = Number(holecoord[1]);
var xdist = xc-holexc;
var ydist = yc-holeyc;
if(xdist==0 && ydist==0)
return;
if(xdist==0 || ydist==0){ //in the same row or column as the hole. Can be moved
var inc,ptr1,ptr2;
if(xdist==0){ //same row. So movement is going to be horizontal
if(ydist>0)
inc = 1;
else
inc = -1;
ptr1 = holeyc;
while(ptr1 != yc){
ptr2 = ptr1 + inc;
//var currCell = $("#c_cell"+xc+"_"+ptr1);
//currCell.html($("#c_cell"+xc+"_"+ptr2).html());
var currCell = document.getElementById("c_cell"+xc+"_"+ptr1);
currCell.innerHTML = document.getElementById("c_cell"+xc+"_"+ptr2).innerHTML;
if(ptr1 == holeyc)
currCell.className = 'canvasCell';//currCell.removeClass("hole").addClass("canvasCell");
if(xc < (gridSize - 1) || ptr1 < (gridSize - 1)){
//if($("#c_cell"+xc+"_"+ptr1+" img").attr('src') == $("#cell"+xc+"_"+ptr1+" img").attr('src'))
if($("#c_cell"+xc+"_"+ptr1+" img").attr('src') == document.getElementById("tgtimg_"+xc+"_"+ptr1).src)
gridStatus[ptr1 + (xc*gridSize)] = true;
else
gridStatus[ptr1 + (xc*gridSize)] = false;
}
ptr1 += inc;
}
}
else { //ydist = 0. So movement is going to be vertical
if(xdist>0)
inc = 1;
else
inc = -1;
ptr1 = holexc;
while(ptr1 != xc){
ptr2 = ptr1 + inc;
//var currCell = $("#c_cell"+ptr1+"_"+yc);
//currCell.html($("#c_cell"+ptr2+"_"+yc).html());
var currCell = document.getElementById("c_cell"+ptr1+"_"+yc);
currCell.innerHTML = document.getElementById("c_cell"+ptr2+"_"+yc).innerHTML;
if(ptr1 == holexc)
currCell.className = 'canvasCell';//currCell.removeClass("hole").addClass("canvasCell");
if(ptr1 < (gridSize -1) || yc < (gridSize -1)){
//if($("#c_cell"+ptr1+"_"+yc+" img").attr('src') == $("#cell"+ptr1+"_"+yc+" img").attr('src'))
if($("#c_cell"+ptr1+"_"+yc+" img").attr('src') == document.getElementById("tgtimg_"+ptr1+"_"+yc).src)
gridStatus[yc + (ptr1*gridSize)] = true;
else
gridStatus[yc + (ptr1*gridSize)] = false;
}
ptr1 += inc;
}
}
//$(this).html(" ").removeClass("canvasCell").addClass("hole");
this.innerHTML = " ";
this.className = "hole";
if(isSolved()){
finishGame();
//$("#waitdiv").show();
//setTimeout(setUpGame, 2500, glevel);
}
}
}); //end of click event for canvas td
$("#waitdiv").hide();
$("#playpen").show();
$("#gameoverdiv").hide();
if(glevel==1)
$("#prevgame").removeClass("fb_button").addClass("fb_button_selected");
else
$("#prevgame").removeClass("fb_button_selected").addClass("fb_button");
if(playerlevel>glevel)
$("#nextgame").removeClass("fb_button_selected").addClass("fb_button");
else
$("#nextgame").removeClass("fb_button").addClass("fb_button_selected");
$("#whichlevel").text("Level "+glevel);
}); //end of getJSON function
}; //end of setUpGame()
function tabClick (){
//obj is the object that is clicked.
$("a.fbtab_selected").removeClass("fbtab_selected").addClass("fbtab").click(tabClick);
$(this).removeClass("fbtab").addClass("fbtab_selected");
$("#gameoverdiv").hide();
$("#playpen").show();
setUpGame(Number(this.id.substr(0,1)));
}
function prevGame() {
clearTimeout(timeoutvar);
if(glevel > 1){
glevel--;
setUpGame(glevel);
}
}
function nextGame() {
clearTimeout(timeoutvar);
if(glevel < playerlevel){
glevel++;
setUpGame(glevel);
}
}
function postOnWall(metal, level){
var msg = "Sweet! I got a "+metal+" medal at Level "+level+" in Frequence.";
msg = encodeURIComponent(msg) ;
$.getJSON(baseurl+'ajax.php?f=pow&msg='+msg+'&u='+playa, function(){
});
}
function showFriendRankings(){
var selfrank;
$("#waitdiv").show();
$.getJSON(baseurl+'ajax.php?f=gfr&u='+playa,function(data){
var cnt,str=[];
for(cnt=0; cnt < data.length; cnt++){
if(data[cnt].uid == playa)
selfrank = " selfrank";
else
selfrank = "";
if(data[cnt].level < 4)
peckingorder = 'Rookie';
else if(data[cnt].level < 10)
peckingorder = 'Amateur';
else if(data[cnt].level < 20)
peckingorder = 'Professional';
else if(data[cnt].level < 30)
peckingorder = 'Champion';
else if(data[cnt].level < 45)
peckingorder = 'Hall of Famer';
else if(data[cnt].level < 65)
peckingorder = 'FreGod';
str.push('<div class="rank'+selfrank+'"><img src="'+data[cnt].upic+'"><br>'+
'<div class="naam">'+data[cnt].uname+'</div><br>'+
'<table>'+
'<tr><td class="laybl">Level<td>'+
'<td class="valoo">'+data[cnt].level+'<br>('+peckingorder+')</td></tr>'+
'<tr><td class="laybl">Gold Medals<td>'+
'<td class="valoo">'+data[cnt].golds+'</td></tr>'+
'<tr><td class="laybl">Silver Medals<td>'+
'<td class="valoo">'+data[cnt].silvers+'</td></tr>'+
'<tr><td class="laybl">Bronze Medals<td>'+
'<td class="valoo">'+data[cnt].bronzes+'</td></tr>'+
'<tr><td class="laybl">Games Played<td>'+
'<td class="valoo">'+data[cnt].numplays+'</td></tr>'+
'</table>'+
'</div>');
}
$("#waitdiv").hide();
$("#friendrankingsdiv").html(str.join(' ')).show();
$("#playpen").hide();
});
}
$(document).ready(function(){
setUpGame(playerlevel);
$("a.fbtab").click(tabClick);
});