Jump to content
MakeWebGames

Stats area and Updates bar


HalpMe
 Share

Recommended Posts

Hi people,

I have a game and want to create a stats area and update bar like on http://www.eternalmafia.com, I can't figure out how to do it, especially with how the rank bar moves by itself when you rank. And also from reading the source I see they use XML to do it, how?

Thanks people. :)

EDIT: I'll put source code from eternal mafia here:

For stats area

 

<html>
<head>
<link rel="stylesheet" href="core/css/core.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="core/js/jclock.js"></script>
<style type="text/css">
html {
border-bottom: 1px solid #000000;
}
body {
margin: 0px;
background: #333333;
}
.banner {
padding-top: 30px;
padding-left: 10px;
}
.stats {
position: absolute;
right: 10px;
top: 0px;
background: #E8F1D4;
border: 1px solid #000000;
border-radius: 20px 20px 20px 20px;
font-size: 12px;
}
.line_l {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.line_r {
border-bottom: 1px solid #000000;
}
.line {
border-right: 1px solid #000000;
}
</style>
<script type="text/javascript">
function unFormat(money) {
return money.replace(/,/g, "").substr(1);
}
function updateMoney(newMoney) {
var newValue = unFormat(newMoney);
var oldValue = unFormat($('#money').html());
if (oldValue != newValue && oldValue != "") {
if (newValue > oldValue) {
$('#money').css("color", "#24D330");
}else if (newValue < oldValue) {
$('#money').css("color", "#EE0000");
}
$('#money').delay(2000).animate({
color: "black"
}, 1000);
}
$('#money').html(newMoney);
}
function getStats() {
   $.ajax({
       url: "header_xml.php",
       dataType: "xml",
       success: function (xml) {

           $('#ranknumber').html($(xml).find('ranknumber').text());
           $('#rank').html($(xml).find('rank').text());
           $('#rankpercent').html($(xml).find('rankpercent').text());
           $('#messages').html($(xml).find('messages').text());
           $('#family').html($(xml).find('family').text());
           $('#state').html($(xml).find('state').text());
           $('#health').html($(xml).find('health').text());
           $('#bank').html($(xml).find('bank').text());
           $('#bullets').html($(xml).find('bullets').text());
           $('#credits').html($(xml).find('credits').text());
           $('#support').html($(xml).find('support').text());
           updateMoney($(xml).find('money').text());

           var progress = new Number($(xml).find('rankpercent').text());

         if(progress > 3){
           $("#progress").animate({ width: progress + "%" }, 1000);
           }else{
           $("#progress").animate({ width: 3 + "%" }, 1000);
           }


            var newmess = $(xml).find('newmess').text();
            if(newmess > 0) {
            top.document.title='Eternal Mafia ('+ newmess +')';
            }else{
            top.document.title='Eternal Mafia';
            }

       }
  });
}
</script>
<script type="text/javascript">
$(document).ready(function(){
     var options = {
              format: '%l:%M:%S', 
       fontSize: '12px',
       foreground: '#000000',
   utc: true
     }
     $('.jclock').jclock(options);
});
</script>
</head>
<body onload="getStats();setInterval('getStats()', 3000);">
<div class="banner"><img src="/graphics/banner.png" border="0" alt="banner" /></div>
<div id="stats_table">
<table cellspacing="0" height="100%" align="center" class="stats">
<tbody>
<tr>
<td width="220" align="left" class="line_l">Username: </td>
<td width="220" align="left" class="line_l">Rank: #<span id="ranknumber"></span> <span id="rank"></span></td>
<td width="220" align="left" class="line_r">Family: <span id="family"></span></td>
</tr>
<tr>
<td colspan="3" style="border-bottom: 1px solid #000000;margin:0px;padding:0px;height: 17px;"><div id="progress" style="background:#0EBFE9;text-align: right;height: 100%;"><span id="rankpercent"></span>%</div></td>
</tr>
<tr>
<td width="220" align="left" class="line_l">State: <span id="state"></span></td>
<td width="220" align="left" class="line_l">Money: <span id="money"></span></td>
<td width="220" align="left" class="line_r">Bank: <span id="bank"></span></td>
</tr>
<tr>
<td width="220" align="left" class="line_l">Health: <span id="health"></span>%</td>
<td width="220" align="left" class="line_l">Bullets: <span id="bullets"></span></td>
<td width="220" align="left" class="line_r">Credits: <span id="credits"></span></td>
</tr>
<tr>
<td width="220" align="center" style="border-right: 1px solid #000000;"><a href="/messaging" target="content" id="messages"></a></td><td width="220" align="center" style="border-right: 1px solid #000000;"><a href="/logout/?server_side=1679091c5a880faf6fb5e6087eb1b2dc" title="Logout" class="logout" target="_top" onclick="javascript:return confirm('Are you sure you want to logout?')">Logout</a></td><td width="220" align="center"><span class="jclock"></span> PM</td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

 

For updates area

<html>
<head>
<link rel="stylesheet" href="core/css/core.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
html {
border-bottom: 1px solid #000000;
}
body {
margin: 0px;
background: -moz-linear-gradient(center top , #87CEFA, #33A1DE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#87CEFA), to(#33A1DE));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87CEFA',endColorstr='#33A1DE',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#87CEFA, endColorstr=#33A1DE)";
}
td {
padding-left: 5px;
padding-right: 1px;
}
</style>
<script type="text/javascript">
function getUpdates() {
   $.ajax({
       url: "updates_xml.php",
       dataType: "xml",
       success: function (xml) {
           $('#update1').html($(xml).find('update1').text());
           $('#time1').html($(xml).find('time1').text());
           $('#update2').html($(xml).find('update2').text());
           $('#time2').html($(xml).find('time2').text());
           $('#update3').html($(xml).find('update3').text());
           $('#time3').html($(xml).find('time3').text());




       }
  });
}
</script>
<base target="content" />
</head>

<body onload="getUpdates();setInterval('getUpdates()', 10000);">
<table width="100%" height="100%" cellspacing="0" style="font-size: 11px;">
<tbody>
<tr>
<td width="30%" style="border-right: 1px solid #000000;"><div style="position: relative;"><span id="update1"></span><div style="position: absolute;bottom: 0px; right:0px;"><span id="time1" style="font-size: 9px;color: #0D4F8B;"></span></div></div></td><td width="30%" style="border-right: 1px solid #000000;"><div style="position: relative;"><span id="update2"></span><div style="position: absolute;bottom: 0px; right:0px;"><span id="time2" style="font-size: 9px;color: #0D4F8B"></span></div></div></td><td width="30%" style="border-right: 1px solid #000000;"><div style="position: relative;"><span id="update3"></span><div style="position: absolute;bottom: 0px; right:0px;"><span id="time3" style="font-size: 9px;color: #0D4F8B"></span></div></div></td><td width="10%" align="center"><a href="/updates">More Updates...</a></td>
</tr>
</tbody>
</table>
</body>
</html>
Edited by HalpMe
Link to comment
Share on other sites

The xml file itself is just like any other other php script, you just output in the format as how that file is. Not a big xml fan myself, prefer json.

The values to use, either someone who uses mccodes will have to help you with that, or you have to calculate them yourself. Its just like any other page, except you do not have any header files content. Include the db and functions file. If those are included, most of the needed variables are ready. Look in your other pages to see what the variables look like. <rankpercent> might not be ready by default, but thats simple math. currentxp*100/xptonextlevel

I do not use mccodes, so I dont know the actual names of the variables.

I think the owner of the game is a member of this forum btw, maybe he will help you

Edit: http://makewebgames.io/member.php/69579-WindMill is the owner of that game

Edited by Someone
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...