|
|
@@ -0,0 +1,593 @@
|
|
|
+<?php
|
|
|
+ /**
|
|
|
+ * Runs view.
|
|
|
+ *
|
|
|
+ * Contains the view layout and ome code to present the data.
|
|
|
+ *
|
|
|
+ * @category View
|
|
|
+ * @property_read Stats_Page $page The page model.
|
|
|
+ * @property_read int $UID Player ID.
|
|
|
+ */
|
|
|
+?>
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang='en'>
|
|
|
+ <head>
|
|
|
+ <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
|
|
|
+ <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
|
|
|
+ <title><?=$page->title?></title>
|
|
|
+ <link rel='shortcut icon' href='<?=$page->favicon?>'/>
|
|
|
+ <!-- CSS files -->
|
|
|
+ <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>ui.css'/>
|
|
|
+ <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>stats.css'/>
|
|
|
+ <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>filters.css'/>
|
|
|
+ <!-- Meta tags -->
|
|
|
+ <link rel='canonical' href='<?=$page->canonical?>'/>
|
|
|
+ <link rel='author' href='<?=$page->author?>'/>
|
|
|
+ <link rel='publisher' href='<?=$page->author?>'/>
|
|
|
+ <meta name='description' content='<?=$page->description?>'/>
|
|
|
+ <meta property='og:title' content='<?=$page->title?>'/>
|
|
|
+ <meta property='og:url' content='<?=$page->canonical?>'/>
|
|
|
+ <meta property='og:description' content='<?=$page->description?>'/>
|
|
|
+ <meta property='og:image' content='<?=$page->icon?>'/>
|
|
|
+ <meta property='og:site_name' content='<?=$page->name?>'/>
|
|
|
+ <meta property='og:type' content='website'/>
|
|
|
+ <meta property='og:locale' content='en'/>
|
|
|
+ <meta name='twitter:card' content='summary'/>
|
|
|
+ <meta name='twitter:title' content='<?=$page->title?>'/>
|
|
|
+ <meta name='twitter:description' content='<?=$page->description?>'/>
|
|
|
+ <meta name='twitter:image' content='<?=$page->icon?>'/>
|
|
|
+ <meta name='twitter:url' content='<?=$page->canonical?>'/>
|
|
|
+ <meta name='robots' content='index follow'/>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Shows or hiddes the filters panel.
|
|
|
+ */
|
|
|
+ function toggleFilters(){
|
|
|
+ var content = document.getElementById('filters_content');
|
|
|
+ var slid = document.getElementById('filters_slid');
|
|
|
+ if (content.style.maxHeight != '30em'){
|
|
|
+ content.style.maxHeight = '30em';
|
|
|
+ slid.style.transform = 'rotate(90deg)';
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ content.style.maxHeight = '0px';
|
|
|
+ slid.style.transform = 'rotate(0deg)';
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ function populateDiagrams(){
|
|
|
+ diagramWin();
|
|
|
+ diagramDropType();
|
|
|
+ diagramDropRuneSlot();
|
|
|
+ diagramDropRuneStars();
|
|
|
+ diagramDropRuneQuality();
|
|
|
+ }
|
|
|
+
|
|
|
+ function diagramWin(){
|
|
|
+ var canvas = document.getElementById("diagram_win");
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ ctx.lineWidth = 2;
|
|
|
+ var lastend = 0;
|
|
|
+ var data = [<?=$page->win_lose[0]?>, <?=$page->win_lose[1]?>];
|
|
|
+ var total = 0;
|
|
|
+ var color = ['#00ff00','#ff0000'];
|
|
|
+
|
|
|
+ for(var e = 0; e < data.length; e++){
|
|
|
+ total += data[e];
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / total)), false);
|
|
|
+ ctx.lineTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx.fillStyle = '#000000';
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.fillStyle = color[i];
|
|
|
+ ctx.fill();
|
|
|
+ lastend += Math.PI * 2 * (data[i] / total);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function diagramDropType(){
|
|
|
+ // TODO: Diferenciate scenario, dungeon and hall.
|
|
|
+ var canvas = document.getElementById("diagram_drop_type");
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ ctx.lineWidth = 2;
|
|
|
+ var lastend = 0;
|
|
|
+ var data = [
|
|
|
+ <?=$page->drop_type["rune"]?>,
|
|
|
+ <?=$page->drop_type["rune_craft"]?>,
|
|
|
+ <?=$page->drop_type["item"]?>,
|
|
|
+ <?=$page->drop_type["sd"]?>,
|
|
|
+ <?=$page->drop_type["shapeshifting"]?>,
|
|
|
+ <?=$page->drop_type["unit"]?>,
|
|
|
+ ];
|
|
|
+ var total = 0;
|
|
|
+ var color = ['#00ff00', '#ff0000', '#0000ff' , '#ffff00', '#ff00ff', '#00ffff'];
|
|
|
+
|
|
|
+ for(var e = 0; e < data.length; e++){
|
|
|
+ total += data[e];
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(canvas.width/2, canvas.height/2);
|
|
|
+ ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, lastend, lastend + (Math.PI * 2 * (data[i] / total)), false);
|
|
|
+ ctx.lineTo(canvas.width/2, canvas.height/2);
|
|
|
+ ctx.fillStyle = '#000000';
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.fillStyle = color[i];
|
|
|
+ ctx.fill();
|
|
|
+ lastend += Math.PI * 2 * (data[i] / total);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function diagramDropRuneSlot(){
|
|
|
+ var canvas = document.getElementById("diagram_rune_slot");
|
|
|
+ var data = [
|
|
|
+ <?=$page->drop_rune_slot["1"]?>,
|
|
|
+ <?=$page->drop_rune_slot["2"]?>,
|
|
|
+ <?=$page->drop_rune_slot["3"]?>,
|
|
|
+ <?=$page->drop_rune_slot["4"]?>,
|
|
|
+ <?=$page->drop_rune_slot["5"]?>,
|
|
|
+ <?=$page->drop_rune_slot["6"]?>
|
|
|
+ ];
|
|
|
+ var total = 6;
|
|
|
+
|
|
|
+ // Polarchart base
|
|
|
+ var ctx_base = canvas.getContext("2d");
|
|
|
+ ctx_base.lineWidth = 1;
|
|
|
+ var lastend = Math.PI / total;
|
|
|
+ for (var i = 0; i < total; i++) {
|
|
|
+ radius = Math.round((canvas.width / 2) * ((i + 1) / total));
|
|
|
+ ctx_base.moveTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx_base.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 / total), false);
|
|
|
+ ctx_base.lineTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx_base.strokeStyle = '#333333';
|
|
|
+ ctx_base.stroke();
|
|
|
+ lastend += (Math.PI * 2 / total);
|
|
|
+ }
|
|
|
+ ctx_base.fillStyle = '#33333366';
|
|
|
+ ctx_base.fill()
|
|
|
+
|
|
|
+ // Polarchart content
|
|
|
+ var ctx_data = canvas.getContext("2d");
|
|
|
+ max = Math.max.apply(null, data) * 1.1;
|
|
|
+ var initX = 0;
|
|
|
+ var initY = 0;
|
|
|
+ let region = new Path2D();
|
|
|
+ for (var i = 0; i < total; i++) {
|
|
|
+ var r = Math.round((canvas.width / 2) * data[i] / max);
|
|
|
+ var x = Math.round(r * Math.sin(Math.PI * 2 / total));
|
|
|
+ var y = Math.round(r * Math.cos(Math.PI * 2 / total));
|
|
|
+
|
|
|
+ // Rotate the point
|
|
|
+ angle = (i + 4) * Math.PI * 2 / total;
|
|
|
+ rx = x * Math.cos(angle) - y * Math.sin(angle)
|
|
|
+ ry = y * Math.cos(angle) + x * Math.sin(angle)
|
|
|
+ rx += canvas.width / 2;
|
|
|
+ ry += canvas.width / 2;
|
|
|
+ if (i == 0){
|
|
|
+ region.moveTo(rx, ry);
|
|
|
+ initX = rx;
|
|
|
+ initY = ry;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ region.lineTo(rx, ry);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ region.lineTo(initX, initY);
|
|
|
+ ctx_data.lineWidth = 2;
|
|
|
+ ctx_data.strokeStyle = '#ff0000';
|
|
|
+ ctx_data.stroke(region)
|
|
|
+ ctx_data.fillStyle = '#ff000055';
|
|
|
+ ctx_data.fill(region)
|
|
|
+ }
|
|
|
+
|
|
|
+ function diagramDropRuneStars(){
|
|
|
+ var canvas = document.getElementById("diagram_rune_stars");
|
|
|
+ var data = [
|
|
|
+ <?=$page->drop_rune_stars["6"]?>,
|
|
|
+ <?=$page->drop_rune_stars["5"]?>,
|
|
|
+ <?=$page->drop_rune_stars["4"]?>,
|
|
|
+ <?=$page->drop_rune_stars["3"]?>,
|
|
|
+ <?=$page->drop_rune_stars["2"]?>,
|
|
|
+ <?=$page->drop_rune_stars["1"]?>
|
|
|
+ ];
|
|
|
+ var total = 6;
|
|
|
+
|
|
|
+ // Polarchart base
|
|
|
+ var ctx_base = canvas.getContext("2d");
|
|
|
+ ctx_base.lineWidth = 1;
|
|
|
+ var lastend = Math.PI / total;
|
|
|
+ for (var i = 0; i < total; i++) {
|
|
|
+ radius = Math.round((canvas.width / 2) * ((i + 1) / total));
|
|
|
+ ctx_base.moveTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx_base.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 / total), false);
|
|
|
+ ctx_base.lineTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx_base.strokeStyle = '#333333';
|
|
|
+ ctx_base.stroke();
|
|
|
+ lastend += (Math.PI * 2 / total);
|
|
|
+ }
|
|
|
+ ctx_base.fillStyle = '#33333366';
|
|
|
+ ctx_base.fill()
|
|
|
+
|
|
|
+ // Polarchart content
|
|
|
+ var ctx_data = canvas.getContext("2d");
|
|
|
+ max = Math.max.apply(null, data) * 1.1;
|
|
|
+ var initX = 0;
|
|
|
+ var initY = 0;
|
|
|
+ let region = new Path2D();
|
|
|
+ for (var i = 0; i < total; i++) {
|
|
|
+ var r = Math.round((canvas.width / 2) * data[i] / max);
|
|
|
+ var x = Math.round(r * Math.sin(Math.PI * 2 / total));
|
|
|
+ var y = Math.round(r * Math.cos(Math.PI * 2 / total));
|
|
|
+
|
|
|
+ // Rotate the point
|
|
|
+ angle = (i + 4) * Math.PI * 2 / total;
|
|
|
+ rx = x * Math.cos(angle) - y * Math.sin(angle)
|
|
|
+ ry = y * Math.cos(angle) + x * Math.sin(angle)
|
|
|
+ rx += canvas.width / 2;
|
|
|
+ ry += canvas.width / 2;
|
|
|
+ if (i == 0){
|
|
|
+ region.moveTo(rx, ry);
|
|
|
+ initX = rx;
|
|
|
+ initY = ry;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ region.lineTo(rx, ry);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ region.lineTo(initX, initY);
|
|
|
+ ctx_data.lineWidth = 2;
|
|
|
+ ctx_data.strokeStyle = '#ff0000';
|
|
|
+ ctx_data.stroke(region)
|
|
|
+ ctx_data.fillStyle = '#ff000055';
|
|
|
+ ctx_data.fill(region)
|
|
|
+ }
|
|
|
+
|
|
|
+ function diagramDropRuneQuality(){
|
|
|
+ var canvas = document.getElementById("diagram_rune_quality");
|
|
|
+ var data = [
|
|
|
+ <?=$page->drop_rune_quality[strval(QUALITY_ID::LEGEND)]?>,
|
|
|
+ <?=$page->drop_rune_quality[strval(QUALITY_ID::HERO)]?>,
|
|
|
+ <?=$page->drop_rune_quality[strval(QUALITY_ID::RARE)]?>,
|
|
|
+ <?=$page->drop_rune_quality[strval(QUALITY_ID::MAGIC)]?>,
|
|
|
+ <?=$page->drop_rune_quality[strval(QUALITY_ID::NORMAL)]?>
|
|
|
+ ];
|
|
|
+ var total = 5;
|
|
|
+
|
|
|
+ // Polarchart base
|
|
|
+ var ctx_base = canvas.getContext("2d");
|
|
|
+ ctx_base.lineWidth = 1;
|
|
|
+ //var lastend = Math.PI * 2 / (0.5 * total / Math.PI);
|
|
|
+ var lastend = 270 * Math.PI / 180;
|
|
|
+ for (var i = 0; i < total; i++) {
|
|
|
+ radius = Math.round((canvas.width / 2) * ((i + 1) / total));
|
|
|
+ ctx_base.moveTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx_base.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 / total), false);
|
|
|
+ ctx_base.lineTo(canvas.width / 2, canvas.height / 2);
|
|
|
+ ctx_base.strokeStyle = '#333333';
|
|
|
+ ctx_base.stroke();
|
|
|
+ lastend += (Math.PI * 2 / total);
|
|
|
+ }
|
|
|
+ ctx_base.fillStyle = '#33333366';
|
|
|
+ ctx_base.fill()
|
|
|
+
|
|
|
+ // Polarchart content
|
|
|
+ var ctx_data = canvas.getContext("2d");
|
|
|
+ max = Math.max.apply(null, data) * 1.1;
|
|
|
+ var initX = 0;
|
|
|
+ var initY = 0;
|
|
|
+ let region = new Path2D();
|
|
|
+ for (var i = 0; i < total; i++) {
|
|
|
+ var r = Math.round((canvas.width / 2) * data[i] / max);
|
|
|
+ var x = Math.round(r * Math.sin(Math.PI * 2 / total));
|
|
|
+ var y = Math.round(r * Math.cos(Math.PI * 2 / total));
|
|
|
+
|
|
|
+ // Rotate the point
|
|
|
+ // TOTALLY experimental, not reliable for a different number of sectors.
|
|
|
+ angle = (i * Math.PI * 2 / total) + 2 * Math.PI / (2 * (total - 1)) + 270 * (4.6/6) * Math.PI / 180;
|
|
|
+ rx = x * Math.cos(angle) - y * Math.sin(angle)
|
|
|
+ ry = y * Math.cos(angle) + x * Math.sin(angle)
|
|
|
+ rx += canvas.width / 2;
|
|
|
+ ry += canvas.width / 2;
|
|
|
+ if (i == 0){
|
|
|
+ region.moveTo(rx, ry);
|
|
|
+ initX = rx;
|
|
|
+ initY = ry;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ region.lineTo(rx, ry);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ region.lineTo(initX, initY);
|
|
|
+ ctx_data.lineWidth = 2;
|
|
|
+ ctx_data.strokeStyle = '#ff0000';
|
|
|
+ ctx_data.stroke(region)
|
|
|
+ ctx_data.fillStyle = '#ff000055';
|
|
|
+ ctx_data.fill(region)
|
|
|
+ }
|
|
|
+
|
|
|
+ // TODO: Script to show/hide area selector
|
|
|
+ </script>
|
|
|
+ </head>
|
|
|
+ <body onload='populateDiagrams();'>
|
|
|
+<?php
|
|
|
+ include __DIR__ . "/inc/header.php";
|
|
|
+?>
|
|
|
+ <section class='filters'>
|
|
|
+ <h2 id='filters_title' onClick='toggleFilters();'>
|
|
|
+ <img id='filters_slid' id='filters_slid' alt=' ' src='<?=URL::IMG["ICON"]?>slid.png'/>
|
|
|
+ Stat filters
|
|
|
+ </h2>
|
|
|
+ <article id='filters_content'>
|
|
|
+<?php
|
|
|
+ $filters = $page->filters;
|
|
|
+ include __DIR__ . "/inc/filter_stats.php";
|
|
|
+?>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ </section> <!-- #filters -->
|
|
|
+ <section class='content'>
|
|
|
+ <h2>
|
|
|
+ Stats
|
|
|
+ </h2>
|
|
|
+ <article>
|
|
|
+ <div id='win' class='diagram'>
|
|
|
+ <h3>
|
|
|
+ Victory rate
|
|
|
+ </h3>
|
|
|
+ <canvas id='diagram_win' width='200' height='200'></canvas>
|
|
|
+ <table class='legend'>
|
|
|
+ <tr class='color_1'>
|
|
|
+ <td>
|
|
|
+ Victories:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$page->win_lose[0]?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($page->win_lose[0] * 100) / ($page->win_lose[0] + $page->win_lose[1]), 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_2'>
|
|
|
+ <td>
|
|
|
+ Defeats:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$page->win_lose[1]?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($page->win_lose[1] * 100) / ($page->win_lose[0] + $page->win_lose[1]), 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_0'>
|
|
|
+ <td>
|
|
|
+ Total:
|
|
|
+ </td>
|
|
|
+ <td colspan='2'>
|
|
|
+ <?=($page->win_lose[0] + $page->win_lose[1])?>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div id='drop_type' class='diagram'>
|
|
|
+ <h3>
|
|
|
+ Drop rate
|
|
|
+ </h3>
|
|
|
+ <canvas id='diagram_drop_type' width='200' height='200'></canvas>
|
|
|
+ <table class='legend'>
|
|
|
+<?php
|
|
|
+ // Do some calculations
|
|
|
+ $rune = $page->drop_type["rune"];
|
|
|
+ $rucr = $page->drop_type["rune_craft"];
|
|
|
+ $item = $page->drop_type["item"];
|
|
|
+ $sedu = $page->drop_type["sd"];
|
|
|
+ $shap = $page->drop_type["shapeshifting"];
|
|
|
+ $unit = $page->drop_type["unit"];
|
|
|
+ $total = $rune + $rucr + $item + $sedu + $shap + $unit;
|
|
|
+?>
|
|
|
+ <tr class='color_1'>
|
|
|
+ <td>
|
|
|
+ Rune:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$rune?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($rune * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_2'>
|
|
|
+ <td>
|
|
|
+ Rune craft item:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$rucr?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($rucr * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_3'>
|
|
|
+ <td>
|
|
|
+ Item:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$item?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($item * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_4'>
|
|
|
+ <td>
|
|
|
+ Secret Dungeon:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$sedu?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($sedu * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_5'>
|
|
|
+ <td>
|
|
|
+ Transmog Stone:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$shap?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($shap * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_6'>
|
|
|
+ <td>
|
|
|
+ Unit:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$unit?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($unit * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div id='drop_rune_slot' class='diagram'>
|
|
|
+ <h3>
|
|
|
+ Rune drops by slot
|
|
|
+ </h3>
|
|
|
+ <canvas id='diagram_rune_slot' width='200' height='200'></canvas>
|
|
|
+ <table class='legend'>
|
|
|
+<?php
|
|
|
+ $total = array_sum($page->drop_rune_slot);
|
|
|
+ for ($i = 1; $i <= 6; $i ++){
|
|
|
+ $val = $page->drop_rune_slot[strval($i)]
|
|
|
+?>
|
|
|
+ <tr class='color_0'>
|
|
|
+ <td>
|
|
|
+ Slot <?=$i?>:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$val?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($val * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+<?php
|
|
|
+ }
|
|
|
+?>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div id='drop_rune_stars' class='diagram'>
|
|
|
+ <h3>
|
|
|
+ Rune drops by stars
|
|
|
+ </h3>
|
|
|
+ <canvas id='diagram_rune_stars' width='200' height='200'></canvas>
|
|
|
+ <table class='legend'>
|
|
|
+<?php
|
|
|
+ $total = array_sum($page->drop_rune_stars);
|
|
|
+ for ($i = 6; $i >= 1; $i --){
|
|
|
+ $val = $page->drop_rune_stars[strval($i)]
|
|
|
+?>
|
|
|
+ <tr class='color_0'>
|
|
|
+ <td>
|
|
|
+<?php
|
|
|
+ for ($j = 1; $j <= $i; $j ++){
|
|
|
+?>
|
|
|
+ <img class='star star_gold' src='<?=URL::IMG["ICON"]?>star.png'/>
|
|
|
+<?php
|
|
|
+ }
|
|
|
+?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$val?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($val * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+<?php
|
|
|
+ }
|
|
|
+?>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div id='drop_rune_quality' class='diagram'>
|
|
|
+ <h3>
|
|
|
+ Rune drops by quality
|
|
|
+ </h3>
|
|
|
+ <canvas id='diagram_rune_quality' width='200' height='200'></canvas>
|
|
|
+ <table class='legend'>
|
|
|
+<?php
|
|
|
+ $total = array_sum($page->drop_rune_quality);
|
|
|
+?>
|
|
|
+ <tr class='color_legend'>
|
|
|
+ <td>
|
|
|
+ Legend:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$page->drop_rune_quality[QUALITY_ID::LEGEND]?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($page->drop_rune_quality[QUALITY_ID::LEGEND] * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_hero'>
|
|
|
+ <td>
|
|
|
+ Hero:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$page->drop_rune_quality[QUALITY_ID::HERO]?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($page->drop_rune_quality[QUALITY_ID::HERO] * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_rare'>
|
|
|
+ <td>
|
|
|
+ Rare:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$page->drop_rune_quality[QUALITY_ID::RARE]?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($page->drop_rune_quality[QUALITY_ID::RARE] * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_magic'>
|
|
|
+ <td>
|
|
|
+ Magic:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$page->drop_rune_quality[QUALITY_ID::MAGIC]?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($page->drop_rune_quality[QUALITY_ID::MAGIC] * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class='color_normal'>
|
|
|
+ <td>
|
|
|
+ Normal:
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <?=$page->drop_rune_quality[QUALITY_ID::NORMAL]?>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ (<?=number_format(($page->drop_rune_quality[QUALITY_ID::NORMAL] * 100) / $total, 2, ".", ",")?>%)
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </section>
|
|
|
+<?php
|
|
|
+ include __DIR__ . "/inc/footer.php";
|
|
|
+?>
|
|
|
+ </body>
|
|
|
+</html>
|
