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>
