ivalentin
/
SWDB


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593
							<?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>