ivalentin
/
SWDB


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867
							<?php
/**
 * Runs view.
 *
 * Contains the view layout and ome code to present the data.
 *
 * @author Iñigo Valentin <i@inigovalentin.com>
 * @license https://www.gnu.org/licenses/gpl-3.0.en.html GNU General Public License V3
 * @package SWDB
 * @category View
 * @property Stats_Page $page The page model.
 * @var Stats_Page $page The page model.
 */
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <?=$page->generate_head()?>
        <script>

            function selectAreaType(){
                var areaType = document.getElementById('filter_area_type').options[document.getElementById('filter_area_type').selectedIndex].value;
                // Clear all selectors
                document.getElementById('filter_stage').style.display = 'none';
                document.getElementById('filter_difficulty').style.display = 'none';
                var areas = document.getElementsByClassName('filter_area');
                for (var i = 0; i < areas.length; i++) {
                    areas[i].style.display = 'none';
                    areas[i].removeAttribute('name');
                }

                // Show selected selector.
                switch (areaType){
                    case '<?=AREA_TYPE_ID::SCENARIO?>':
                        document.getElementById('filter_area_scenario').style.display = 'inline-block';
                        document.getElementById('filter_area_scenario').setAttribute('name', 'area');
                        populateStage(7);
                        document.getElementById('filter_stage').style.display = 'inline-block';
                        populateDifficulty();
                        document.getElementById('filter_difficulty').style.display = 'inline-block';
                        break;
                    case '<?=AREA_TYPE_ID::CAIROS_DUNGEON?>':
                        document.getElementById('filter_area_cairos').style.display = 'inline-block';
                        document.getElementById('filter_area_cairos').setAttribute('name', 'area');
                        populateStage(10);
                        document.getElementById('filter_stage').style.display = 'inline-block';
                        break;
                    case '<?=AREA_TYPE_ID::RIFT_DUNGEON?>':
                        document.getElementById('filter_area_rift_dungeon').style.display = 'inline-block';
                        document.getElementById('filter_area_rift_dungeon').setAttribute('name', 'area');
                        break;
                    // TODO: Other areas
                    // Rift Raid: Don't filter by area.
                    // Arena: Don't filter by area.
                    // Guild War: Don't filter by area.
                    // Guild Siege: Don't filter by area.
                    // Rift Raid: Don't filter by area.
                    // Tartarus: Don't filter by area.
                    // TOA: Don't filter by area.
                    // Rift Raid: Don't filter by area.
                    // WB: Don't filter by area.
                    // Dimensional Rift: Don't filter by area.
                    // TODO: Filter Dimensional Hole dungeon
                }
            }

            /**
             * Shows the stage selector in the filters.
             *
             * @param total The number of stages to show.
             */
            function populateStage(total){
                var sel = document.getElementById('filter_stage');
                while (sel.firstChild) {
                    sel.removeChild(sel.firstChild);
                }
                var opt;
                var att;
                // Empty
                opt = document.createElement('option');
                tex = document.createTextNode('');
                opt.appendChild(tex);
                sel.appendChild(opt);
                for (var i = 1; i <= total; i ++){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Stage ' + i);
                    att = document.createAttribute('value');
                    att.value = i;
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
            }

            /**
             * Shows the difficulty selector in the filter panel.
             *
             * @param labyrinth Indicates if the area type is the Tartarus
             *        labyrinth. If so, it includes 'Easy'.
             * @param toa Indicates if the area type is the Tower of
             *        Ascension. If so, it excludes 'Hell'.
             */
            function populateDifficulty(labyrinth = false, toa = false){
                var sel = document.getElementById('filter_difficulty');
                while (sel.firstChild) {
                    sel.removeChild(sel.firstChild);
                }
                var opt;
                var att;
                var tex;
                // Empty
                opt = document.createElement('option');
                tex = document.createTextNode('');
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Easy (Labyrinth only)
                if (labyrinth){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Easy difficulty');
                    att = document.createAttribute('value');
                    att.value = '<?=DIFFICULTY_ID::EASY?>';
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
                // Normal
                opt = document.createElement('option');
                tex = document.createTextNode('Normal difficulty');
                att = document.createAttribute('value');
                att.value = '<?=DIFFICULTY_ID::NORMAL?>';
                opt.setAttributeNode(att);
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Hard
                opt = document.createElement('option');
                tex = document.createTextNode('Hard difficulty');
                att = document.createAttribute('value');
                att.value = '<?=DIFFICULTY_ID::HARD?>';
                opt.setAttributeNode(att);
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Hell
                if (!toa){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Hell difficulty');
                    att = document.createAttribute('value');
                    att.value = '<?=DIFFICULTY_ID::HELL?>';
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
            }

            /**
             * Sets the values for the stage and difficulty at page load.
             */
            function initialValues(){
<?php
                if ($page->filters["STAGE"] != null && $page->filters["STAGE"] > 0){
?>
                    document.getElementById('filter_stage').selectedIndex = <?=$page->filters["STAGE"]?>;
<?php
                }
                if ($page->filters["DIFFICULTY"] != null && $page->filters["DIFFICULTY"] > 0){
?>
                    document.getElementById('filter_difficulty').selectedIndex = <?=$page->filters["DIFFICULTY"]?>;
<?php
                }
?>
            }

            /**
             * Calls all required functions to draw all diagrams.
             */
            function populateDiagrams(){
<?php
                if ($page->show_data){
?>
                    diagramWin();
                    diagramDropType();
                    diagramDropRuneSlot();
                    diagramDropRuneStars();
                    diagramDropRuneQuality();
<?php
                }
?>
            }

            /**
             * Generates the win rate diagram.
             */
            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 = [
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_1')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_2')).color
                ];

                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);
                }
            }

            /**
             * Generates the drop rate diagram.
             */
            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 = [
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_1')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_2')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_3')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_4')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_5')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_6')).color,
                ];
                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);
                }
            }

            /**
             * Generates the rune slot rate diagram.
             */
            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;
                ctx_base.font = '32px serif'
                ctx_base.textBaseline = 'middle'
                ctx_base.textAlign = 'middle'
                var lastend = Math.PI + Math.PI / total;
                var radius = Math.round((canvas.width / 2) * ((i + 1) / total));
                for (var i = 0; i < total; i++) {
                    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();
                // Numbers
                ctx_base.fillStyle = '#ffffff';
                lastend = Math.PI + Math.PI / total;
                for (var i = 0; i < total; i ++){
                    lastend += (Math.PI * 2 / total);
                    tx = canvas.width / 2 + canvas.width / 2.3 * Math.cos(lastend);
                    ty = canvas.width / 2 + canvas.width / 2.3 * Math.sin(lastend);
                    ctx_base.fillText(i + 1, tx - 8, ty);

                }

                // 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)
            }

            /**
             * Generates the rune star rate diagram.
             */
            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;
                ctx_base.font = '32px serif'
                ctx_base.textBaseline = 'middle'
                ctx_base.textAlign = 'middle'
                var lastend = Math.PI + 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();
                // Numbers
                ctx_base.fillStyle = '#ffffff';
                lastend = Math.PI + Math.PI / total;
                for (var i = 0; i < total; i ++){
                    lastend += (Math.PI * 2 / total);
                    tx = canvas.width / 2 + canvas.width / 2.3 * Math.cos(lastend);
                    ty = canvas.width / 2 + canvas.width / 2.3 * Math.sin(lastend);
                    ctx_base.fillText(6 - i, tx - 8, ty);

                }

                // 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)
            }

            /**
             * Generates the rune quality rate diagram.
             */
            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 - (180 / (total))) * Math.PI / 180);
                var color = [
                    '#f5790066', // LEGEND
                    '#ad7fa866', // HERO
                    '#15c6e166', // RARE
                    '#55ff5566', // MAGIC
                    '#cccccc66'  // NORMAL
                ];
                for (var i = 0; i < total; i++) {
                    ctx_base.beginPath();
                    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.fillStyle = color[i];
                    ctx_base.fill();
                    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();selectAreaType();initialValues();'>
<?php
        include __DIR__ . "/inc/header_app.php";
        include __DIR__ . "/inc/header_player.php";
?>
        <aside class='filters'>
            <h2>
                Statistics
            </h2>
            <form action='/<?=get_context()->get_player()-id?>/stats/' method='get' class='filter'>
                <table>
                    <tr>
                        <td class='filter'>
                            <span>Area:</span>
                        </td>
                    </tr>
                    <tr>
                        <td class='filter'>
<?php
                            $selected = array_fill(0, 12 + 1, "");
                            $selected[$page->filters["AREA_TYPE"]] = "selected";
?>
                            <select name='area_type' id='filter_area_type' onChange='selectAreaType();'>
                                <option value='0'></option>
                                <option value='<?=AREA_TYPE_ID::SCENARIO?>' <?=$selected[AREA_TYPE_ID::SCENARIO]?>>Scenario</option>
                                <option value='<?=AREA_TYPE_ID::CAIROS_DUNGEON?>' <?=$selected[AREA_TYPE_ID::CAIROS_DUNGEON]?>>Cairos Dungeon</option>
                                <option value='<?=AREA_TYPE_ID::RIFT_DUNGEON?>' <?=$selected[AREA_TYPE_ID::RIFT_DUNGEON]?>>Rift Beast</option>
                                <option value='<?=AREA_TYPE_ID::RIFT_RAID?>' <?=$selected[AREA_TYPE_ID::RIFT_RAID]?>>Rift Raid</option>
                                <option value='<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>' <?=$selected[AREA_TYPE_ID::DIMENSIONAL_HOLE]?>>Dimensional Hole</option>
                            </select>
<?php
                            $selected = array_fill(0, 9002, "");
                            $selected[$page->filters["AREA"]] = "selected";
?>
                            <select class='filter_area' id='filter_area_scenario'>
                                <option value='0'></option>
                                <option value='<?=AREA_TYPE_ID::SCENARIO?>' <?=$selected[AREA_TYPE_ID::SCENARIO]?>>Scenario</option>
                                <option value='<?=AREA_TYPE_ID::CAIROS_DUNGEON?>' <?=$selected[AREA_TYPE_ID::CAIROS_DUNGEON]?>>Cairos Dungeon</option>
                                <option value='<?=AREA_TYPE_ID::RIFT_DUNGEON?>' <?=$selected[AREA_TYPE_ID::RIFT_DUNGEON]?>>Rift Beast</option>
                                <option value='<?=AREA_TYPE_ID::RIFT_RAID?>' <?=$selected[AREA_TYPE_ID::RIFT_RAID]?>>Rift Raid</option>
                                <option value='<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>' <?=$selected[AREA_TYPE_ID::DIMENSIONAL_HOLE]?>>Dimensional Hole</option>
                                <option value='<?=AREA_TYPE_ID::ARENA?>' <?=$selected[AREA_TYPE_ID::ARENA]?>>Arena</option>
                                <option value='<?=AREA_TYPE_ID::GUILD_WAR?>' <?=$selected[AREA_TYPE_ID::GUILD_WAR]?>>Guild War</option>
                                <option value='<?=AREA_TYPE_ID::GUILD_SIEGE?>' <?=$selected[AREA_TYPE_ID::GUILD_SIEGE]?>>Guild Siege</option>
                                <option value='<?=AREA_TYPE_ID::TARTARUS_LABYRINTH?>' <?=$selected[AREA_TYPE_ID::TARTARUS_LABYRINTH]?>>Tartarus Labyrinth</option>
                                <option value='<?=AREA_TYPE_ID::TRIAL_OF_ASCENSION?>' <?=$selected[AREA_TYPE_ID::TRIAL_OF_ASCENSION]?>>Trial of Ascension</option>
                                <option value='<?=AREA_TYPE_ID::WORLD_BOSS?>' <?=$selected[AREA_TYPE_ID::WORLD_BOSS]?>>World Boss</option>
                                <option value='<?=AREA_TYPE_ID::DIMENSIONAL_RIFT?>' <?=$selected[AREA_TYPE_ID::DIMENSIONAL_RIFT]?>>Dimensional Rift</option>
                            </select>
                            <select class='filter_area' id='filter_area_cairos'>
                                <option value='0'></option>
                                <option value='<?=DUNGEON_ID::GIANTS_KEEP?>' <?=$selected[DUNGEON_ID::GIANTS_KEEP]?>>Giant&#39;s Keep</option>
                                <option value='<?=DUNGEON_ID::DRAGONS_LAIR?>' <?=$selected[DUNGEON_ID::DRAGONS_LAIR]?>>Dragon&#39;s Lair</option>
                                <option value='<?=DUNGEON_ID::NECROPOLIS?>' <?=$selected[DUNGEON_ID::NECROPOLIS]?>>Necropolis</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_MAGIC?>' <?=$selected[DUNGEON_ID::HALL_OF_MAGIC]?>>Hall of Magic</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_LIGHT?>' <?=$selected[DUNGEON_ID::HALL_OF_LIGHT]?>>Hall of Light</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_DARK?>' <?=$selected[DUNGEON_ID::HALL_OF_DARK]?>>Hall of Dark</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_FIRE?>' <?=$selected[DUNGEON_ID::HALL_OF_FIRE]?>>Hall of Fire</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_WATER?>' <?=$selected[DUNGEON_ID::HALL_OF_WATER]?>>Hall of Water</option>
                                <option value='<?=DUNGEON_ID::HALL_OF_WIND?>' <?=$selected[DUNGEON_ID::HALL_OF_WIND]?>>Hall of Wind</option>
                            </select>
                            <select id='filter_area_rift_dungeon' class='filter_area'>
                                <option value='0'></option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::LIGHT_BEAST?>' <?=$selected[ELEMENTAL_RIFT_DUNGEON_ID::LIGHT_BEAST]?>>Light Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::DARK_BEAST?>' <?=$selected[ELEMENTAL_RIFT_DUNGEON_ID::DARK_BEAST]?>>Dark Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::FIRE_BEAST?>' <?=$selected[ELEMENTAL_RIFT_DUNGEON_ID::FIRE_BEAST]?>>Fire Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::ICE_BEAST?>' <?=$selected[ELEMENTAL_RIFT_DUNGEON_ID::ICE_BEAST]?>>Ice Beast</option>
                                <option value='<?=ELEMENTAL_RIFT_DUNGEON_ID::WIND_BEAST?>' <?=$selected[ELEMENTAL_RIFT_DUNGEON_ID::WIND_BEAST]?>>Wind Beast</option>
                            </select>
                            <select id='filter_stage' name='stage'>
                            </select>
                            <select id='filter_difficulty' name='difficulty'>
                            </select>
                        </td>
                    </tr>
                </table>
                <input type='submit' value='Apply'/>
            </form>
        </aside> <!-- #filters -->
        <main>
<?php
            if ($page->show_data){
?>
                <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>
<?php
                            $total = $page->win_lose[0] + $page->win_lose[1];
                            // Fix divisions by 0 (dont use in total count):
                            if ($total == 0){
                                $total ++;
                            }
?>
                            <table class='legend'>
                                <tr class='color_1'>
                                    <td>
                                        Victories:
                                    </td>
                                    <td>
                                        <?=$page->win_lose[0]?>
                                    </td>
                                    <td>
                                        (<?=number_format(($page->win_lose[0] * 100) / $total, 2, ".", ",")?>%)
                                    </td>
                                </tr>
                                <tr class='color_2'>
                                    <td>
                                        Defeats:
                                    </td>
                                    <td>
                                        <?=$page->win_lose[1]?>
                                    </td>
                                    <td>
                                        (<?=number_format(($page->win_lose[1] * 100) / $total, 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;
                                // Fix divisions by 0:
                                if ($total == 0){
                                    $total ++;
                                }
?>
                                <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);
                                // Fix divisions by 0:
                                if ($total == 0){
                                    $total ++;
                                }
                                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);
                                // Fix divisions by 0:
                                if ($total == 0){
                                    $total ++;
                                }
                                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);
                                // Fix divisions by 0:
                                if ($total == 0){
                                    $total ++;
                                }
?>
                                <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
            }
?>
        </main>
<?php
        include __DIR__ . "/inc/footer.php";
?>
    </body>
</html>