HalpMe Posted February 7, 2013 Share Posted February 7, 2013 (edited) 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 February 7, 2013 by HalpMe Quote Link to comment Share on other sites More sharing options...
Mr-Scripts Posted February 7, 2013 Share Posted February 7, 2013 you on about the banner part got any screenshots Quote Link to comment Share on other sites More sharing options...
HalpMe Posted February 7, 2013 Author Share Posted February 7, 2013 I've put the source code from it in the OP. :) Quote Link to comment Share on other sites More sharing options...
HalpMe Posted February 7, 2013 Author Share Posted February 7, 2013 Anyone? :) Quote Link to comment Share on other sites More sharing options...
HalpMe Posted February 8, 2013 Author Share Posted February 8, 2013 Anybody tell me about the XML and how to do it? :( Quote Link to comment Share on other sites More sharing options...
Someone Posted February 8, 2013 Share Posted February 8, 2013 How they do it is right in your post... http://www.eternalmafia.com/header_xml.php (you must be logged in) data is loaded into the html elements. Quote Link to comment Share on other sites More sharing options...
HalpMe Posted February 8, 2013 Author Share Posted February 8, 2013 How they do it is right in your post... http://www.eternalmafia.com/header_xml.php (you must be logged in) data is loaded into the html elements. Yes, but how do I do the XML file? And is it ok for me to use their javascript and html code? Quote Link to comment Share on other sites More sharing options...
Someone Posted February 8, 2013 Share Posted February 8, 2013 (edited) 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 February 8, 2013 by Someone Quote Link to comment Share on other sites More sharing options...
a_bertrand Posted February 8, 2013 Share Posted February 8, 2013 Normally just copy / pasting somebody else site is not really smart. Also you CANNOT grab the script which generates the XML, you could download the XML produced but not the code which produces it. So... start doing your home work and think about how things need to be done by yourself. Quote Link to comment Share on other sites More sharing options...
Someone Posted February 8, 2013 Share Posted February 8, 2013 ^ Thats also a valid point. The copy pasted code, is not that good either, so not a good place to learn from. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.