ivalentin
/
SWDB


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261
							<?php
    /**
     * Monster view.
     *
     * Contains the view layout and some code to present the data.
     *
     * @category View
     * @property_read Monster_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?>optimizer.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>
        
            /**
             * Unit current stats.
             */
            var current_stats = {
                "attack": <?=$page->unit->total_attack?>,
                "defense": <?=$page->unit->total_defense?>,
                "hp": <?=$page->unit->total_hp?>,
                "speed": <?=$page->unit->total_speed?>,
                "crit_rate": <?=$page->unit->total_crit_rate?>,
                "crit_damage": <?=$page->unit->total_crit_damage?>,
                "accuracy": <?=$page->unit->total_accuracy?>,
                "resistance": <?=$page->unit->total_resistance?>,
                "ehp": <?=$page->unit->effective_hp?>,
                "dmg": <?=$page->unit->effective_dmg?>
            }
            
<?php
            // Get current rune sets
            $sets = [];
            foreach ($page->unit->rune as $rune){
                if (!in_array($rune->type->id, $sets)){
                    array_push($sets, $rune->type->id);
                }
            }
            for ($i = sizeof($sets); $i < 3; $i ++){
                array_push($sets, 0);
            }
?>
            var current_sets = [<?=$sets[0]?>, <?=$sets[1]?>, <?=$sets[2]?>];
            
            // Get current main stats in even slots
<?php
            $mains = [0, 0, 0];
            foreach ($page->unit->rune as $rune){
                if ($rune->slot % 2 == 0){
                    $mains[($rune->slot / 2) - 1] = $rune->main_stat;
                }
            }
?>
            /**
             * Updates the value next to the sliders when they change.
             *
             * @param stat Name of the stat to set.
             * @param value Value of the slider.
             */
            function updateMinValue(stat, element){
                var value = Number(element.value);
                var max = Number(element.max);
                var min = Number(element.min);
                if (value < min){
                    value = min;
                    console.log("Correcting for min: " + value + "/" + min);
                }
                if (value > max){
                    console.log("Correcting for max: " + value + "/" + max);
                    value = max;
                }
                document.getElementById('lbl_min_' + stat).value = value;
                document.getElementById('min_' + stat).value = value;
            }

            /**
             * Starts the optimization.
             *
             * Checks for error in the combination of the parameters, and
             * shows an error window if there is an invalid conbination. If
             * not, builds the url to calculate the new rune combinations,
             * and presents th received response.
             *
             * @return false on error, true on success.
             */
            function apply(){
                // TODO: Check for valid set combinations

                var params = '';
                var x;

                // Player id - mandatory
                params = 'uid=<?=$UID?>';

                // Unit id - mandatory
                params += '&unit=<?=$page->unit->id?>';

                // Rune set 1 - mandatory
                params += '&set[]=' + document.getElementById('set_1').options[document.getElementById('set_1').selectedIndex].value;

                // Rune set 2 - mandatory
                params += '&set[]=' + document.getElementById('set_2').options[document.getElementById('set_2').selectedIndex].value;

                // Rune set 3 - optional
                x = document.getElementById('set_3').options[document.getElementById('set_3').selectedIndex].value;
                if (x != ''){
                    params += '&set[]=' + x;
                }

                // Slot 2 - mandatory
                params += '&stat[]=' + document.getElementById('slot_2').options[document.getElementById('slot_2').selectedIndex].value;

                // Slot 4 - mandatory
                params += '&stat[]=' + document.getElementById('slot_4').options[document.getElementById('slot_4').selectedIndex].value;

                // Slot 5 - mandatory
                params += '&stat[]=' + document.getElementById('slot_6').options[document.getElementById('slot_6').selectedIndex].value;

                // Rune source - mandatory
                params += '&source=' + document.getElementById('rune_source').options[document.getElementById('rune_source').selectedIndex].value;

                // Optimizer tuning - mandatory
                params += '&tuning=' + document.getElementById('tuning').options[document.getElementById('tuning').selectedIndex].value;

                // Limit combinations - mandatory
                params += '&limit=' + document.getElementById('limit').value;

                // Min HP - Optional
                if (Number(document.getElementById('min_hp').value) > Number(document.getElementById('min_hp').min)){
                    params += '&min_hp=' + document.getElementById('min_hp').value;
                }

                // Min ATK - Optional
                if (Number(document.getElementById('min_attack').value) > Number(document.getElementById('min_attack').min)){
                    params += '&min_attack=' + document.getElementById('min_attack').value;
                }

                // Min DEF - Optional
                if (Number(document.getElementById('min_defense').value) > Number(document.getElementById('min_defense').min)){
                    params += '&min_defense=' + document.getElementById('min_defense').value;
                }

                // Min SPD - Optional
                if (Number(document.getElementById('min_speed').value) > Number(document.getElementById('min_speed').min)){
                    params += '&min_speed=' + document.getElementById('min_speed').value;
                }

                // Min CRR - Optional
                if (Number(document.getElementById('min_crit_rate').value) > Number(document.getElementById('min_crit_rate').min)){
                    params += '&min_crit_rate=' + document.getElementById('min_crit_rate').value;
                }

                // Min CRD - Optional
                if (Number(document.getElementById('min_crit_damage').value) > Number(document.getElementById('min_crit_damage').min)){
                    params += '&min_crit_damage=' + document.getElementById('min_crit_damage').value;
                }

                // Min ACC - Optional
                if (Number(document.getElementById('min_accuracy').value) > Number(document.getElementById('min_accuracy').min)){
                    params += '&min_accuracy=' + document.getElementById('min_accuracy').value;
                }

                // Min RES - Optional
                if (Number(document.getElementById('min_resistance').value) > Number(document.getElementById('min_resistance').min)){
                    params += '&min_resistance=' + document.getElementById('min_resistance').value;
                }

                // Min EHP - Optional
                if (Number(document.getElementById('min_ehp').value) > 0){
                    params += '&min_ehp=' + document.getElementById('min_ehp').value;
                }

                // Min DMG - Optional
                if (Number(document.getElementById('min_dmg').value) > 0){
                    params += '&min_dmg=' + document.getElementById('min_dmg').value;
                }

                // Send th request
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4){
                        document.getElementById('apply').removeAttribute('disabled');
                        document.getElementById('wait').style.display = 'none';
                        console.log("STATUS: " + this.status);
                        if (this.status == 200) {
                            showOptimizations(this.response);
                        }
                        else if (this.status == 413) { // Payload too large
                            showMessage('Error', 'Too many combination found. Plesase narow your criteria and retry.');
                        }
                        else if (this.status == 500) { // Server error
                            showMessage('Error', 'Too many rune combination found. Plesase narow your criteria and retry.');
                        }
                    }
                };
                
                // TODO DEBUG
                //params = 'uid=8114048&unit=6441802832&limit=6&set[]=2&set[]=4&set[]=4&stat[]=4&stat[]=4&stat[]=4&source=0&tuning=2&min_defense=800';
                
                
                // Clear result table, disable button and show spinner
                var container = document.getElementById('optimizations');
                while (container.firstChild) {
                    container.removeChild(container.firstChild);
                }
                document.getElementById('apply').setAttribute('disabled', 'disabled');
                document.getElementById('wait').style.display = 'block';
                document.getElementById('results').style.display = 'none';
                
                // Make the request
                xhttp.open('POST', '/action/optimize/', true);
                xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhttp.send(params);
            }

            /**
             * Parses the received content and creates the HTML with the new
             * rune options.
             *
             * @param content JSON received from server.
             */
            function showOptimizations(content){
                var container = document.getElementById('optimizations');
                var data = JSON.parse(content);
                if (Number(data.total) == 0){
                    showMessage('No results', 'No suitable combination found. Plesase relax your criteria and retry.');
                    return;
                }
                var option;
                var tr;
                var td;
                var stat_table;
                var stat_tr;
                var stat_td;
                var span;
                var text;
                for (i = 0; i < data.options.length; i++){
                    option = data.options[i];
                    tr = document.createElement('tr');
                    td = document.createElement('td');
                    td.setAttribute('class', 'stats');
                    stat_table = document.createElement('table');
                    stat_table.setAttribute('class', 'stat_table');

                    // attack
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('ATK');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.attack + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.attack) > Number(current_stats["attack"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.attack - current_stats["attack"]);
                        
                    }
                    else if (Number(option.stats.attack) < Number(current_stats["attack"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["attack"] - option.stats.attack);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);
                    
                    // defense
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('DEF');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.defense + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.defense) > Number(current_stats["defense"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.defense - current_stats["defense"]);
                        
                    }
                    else if (Number(option.stats.defense) < Number(current_stats["defense"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["defense"] - option.stats.defense);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // hp
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('HP ');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.hp + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.hp) > Number(current_stats["hp"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.hp - current_stats["hp"]);
                        
                    }
                    else if (Number(option.stats.hp) < Number(current_stats["hp"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["hp"] - option.stats.hp);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // speed
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('SPD');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.speed + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.speed) > Number(current_stats["speed"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.speed - current_stats["speed"]);
                        
                    }
                    else if (Number(option.stats.speed) < Number(current_stats["speed"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["speed"] - option.stats.speed);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // crit_rate
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('CRR');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.crit_rate + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.crit_rate) > Number(current_stats["crit_rate"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.crit_rate - current_stats["crit_rate"]);
                        
                    }
                    else if (Number(option.stats.crit_rate) < Number(current_stats["crit_rate"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["crit_rate"] - option.stats.crit_rate);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // crit_damage
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('CRD');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.crit_damage + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.crit_damage) > Number(current_stats["crit_damage"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.crit_damage - current_stats["crit_damage"]);
                        
                    }
                    else if (Number(option.stats.crit_damage) < Number(current_stats["crit_damage"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["crit_damage"] - option.stats.crit_damage);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // accuracy
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('ACC');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.accuracy + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.accuracy) > Number(current_stats["accuracy"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.accuracy - current_stats["accuracy"]);
                        
                    }
                    else if (Number(option.stats.accuracy) < Number(current_stats["accuracy"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["accuracy"] - option.stats.accuracy);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // resistance
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('RES');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.resistance + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.resistance) > Number(current_stats["resistance"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.resistance - current_stats["resistance"]);
                        
                    }
                    else if (Number(option.stats.resistance) < Number(current_stats["resistance"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["resistance"] - option.stats.resistance);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // ehp
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('EHP');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.ehp + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.ehp) > Number(current_stats["ehp"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.ehp - current_stats["ehp"]);
                        
                    }
                    else if (Number(option.stats.ehp) < Number(current_stats["ehp"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["ehp"] - option.stats.ehp);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);
                    
                    // dmg
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('DMG');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.dmg + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.dmg) > Number(current_stats["dmg"])){
                        
                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.dmg - current_stats["dmg"]);
                        
                    }
                    else if (Number(option.stats.dmg) < Number(current_stats["dmg"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["dmg"] - option.stats.dmg);
                        
                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // Add to the main table
                    td.appendChild(stat_table);
                    tr.appendChild(td);
                    
                    // Runes td
                    td = document.createElement('td');
                    td.setAttribute('class', 'runes');
                    td.innerHTML += option.runes[6 - 1].html;
                    td.innerHTML += option.runes[1 - 1].html;
                    td.innerHTML += option.runes[2 - 1].html;
                    td.innerHTML += "<br/>";
                    td.innerHTML += option.runes[5 - 1].html;
                    td.innerHTML += option.runes[4 - 1].html;
                    td.innerHTML += option.runes[3 - 1].html;

                    // Add the table
                    tr.appendChild(td);
                    container.appendChild(tr);

                    // Make the section visible
                    document.getElementById('results').style.display = 'block';

                }
            }
            
            /**
             * Displays a pop-up message.
             *
             * @param title Message title.
             * @param text Message content.
             */
            function showMessage(title, text){
                document.getElementById('message_title').innerHTML = title;
                document.getElementById('message_text').innerHTML = text;
                document.getElementById('message_container').style.display = 'block';
            }

            /**
             * Closes the message pop-up.
             */
            function closeMessage(){
                document.getElementById('message_container').style.display = 'none';
            }
        </script>
    </head>
    <body>
<?php
        include __DIR__ . "/inc/header.php";
?>
        <section id='monster' class='content'>
            <h2>
                Optimize <?=$page->unit->title?>
            </h2>
            <article id='profile'>
                <div id='monster_info'>
                    <div class='monster_panel'>
                        <?=HTML::unit_panel($page->unit)?>
                    </div>
<?php
                    if ($page->unit->experience_level != 0){
                        $exp_pct = ceil($page->unit->exp_gained * 100 / $page->unit->experience_level);
                        $exp_txt = $page->unit->exp_gained . " / " . $page->unit->experience_level;
                    }
                    else{
                        $exp_pct = 100;
                        $exp_txt = "MAX";
                    }
                    $now = time();
                    //$datediff = $now - $page->unit->create_time->getTimestamp();
                    $datediff = $now - strtotime($page->unit->create_time->format('Y-m-d H:i:s'));
                    $datediff = floor($datediff / (60 * 60 * 24));
?>
                    <div id='monster_details'>
<?php
                        if (sizeof($page->unit->teams) > 0){
?>
                            <div id='teams'>
                                <h4>
                                    Teams:
                                </h4>
                                <ul>
<?php
                                    foreach($page->unit->teams as $team){
?>
                                        <li>
                                            <a target='blank' href='/<?=$UID?>/teams/<?=$team->id?>'>
                                                <?=$team->name?>
                                            </a>
                                        </li>
<?php
                                    }
?>
                                </ul>
                            </div>
<?php
                        }
?>
                    </div>
                </div>
                <table id='stats'>
                    <tr>
                        <th>
                            Stats
                        </th>
                        <th>
                            Base
                        </th>
                        <th>
                            Runes
                        </th>
                        <th>
                            Artifacts
                        </th>
                        <th>
                            Buildings
                        </th>
                        <th>
                            Total
                        </th>
                    </tr>
                    <tr>
                        <th>
                            ATK
                        </th>
                        <td class='base'>
                            <?=$page->unit->attack?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_attack?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_attack?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_attack?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_attack?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            DEF
                        </th>
                        <td class='base'>
                            <?=$page->unit->defense?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_defense?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_defense?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_defense?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_defense?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            HP
                        </th>
                        <td class='base'>
                            <?=$page->unit->hp?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_hp?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_hp?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_hp?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_hp?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            SPD
                        </th>
                        <td class='base'>
                            <?=$page->unit->speed?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_speed?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_speed?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_speed?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_speed?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            CRR
                        </th>
                        <td class='base'>
                            <?=$page->unit->crit_rate?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_crit_rate?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_crit_rate?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_crit_rate?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_crit_rate?>
                            <span class='percent'>%</span>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            CRD
                        </th>
                        <td class='base'>
                            <?=$page->unit->crit_damage?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_crit_damage?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_crit_damage?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_crit_damage?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_crit_damage?>
                            <span class='percent'>%</span>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            ACC
                        </th>
                        <td class='base'>
                            <?=$page->unit->accuracy?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_accuracy?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_accuracy?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_accuracy?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_accuracy?>
                            <span class='percent'>%</span>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            RES
                        </th>
                        <td class='base'>
                            <?=$page->unit->resistance?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->rune_resistance?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->artifact_resistance?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='extra'>
                            +<?=$page->unit->building_resistance?>
                            <span class='percent'>%</span>
                        </td>
                        <td class='total'>
                            <?=$page->unit->total_resistance?>
                            <span class='percent'>%</span>
                        </td>
                    </tr>
                    <tr>
                        <th colspan='5'>
                            Effective HP
                        </th>
                        <td class='total'>
                            <?=$page->unit->effective_hp?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <th colspan='5'>
                            Effective DMG
                        </th>
                        <td class='total'>
                            <?=$page->unit->effective_dmg?>
                            <span class='percent'>&nbsp;</span>
                        </td>
                    </tr>
                </table>
                <div id='artifacts'>
                    <?=HTML::artifact_table($page->unit->artifact_type)?>
                    <?=HTML::artifact_table($page->unit->artifact_element)?>
                </div>
            </article> <!-- #profile -->
            <article id='current_runes'>
<?php
                $show_list = [6, 1, 2, 5, 4, 3];
                //foreach ($page->unit->rune as $rune){
                foreach ($show_list as $i){
                    $rune = $page->unit->rune[$i - 1];
                    $total_runes ++;
?>
                    <?=HTML::rune_table($rune)?>
<?php
                    if ($i == 2){
?>
                        <br/>
<?php
                    }
                }
?>
            </article>
        </section> <!-- runes -->
        <section id='parameters' class='content'>
            <h2>
                Optimization parameters
            </h2>
            <article>
                <table>
                    <tr>
                        <td class='name'>
                            Rune sets
                        </td>
                        <td class='value'>
<?php
                            $reflect = new ReflectionClass("RUNE_SET_ID");
?>
                            <select id='set_1'>
<?php
                            foreach($reflect->getConstants() as $name => $id){
                                $selected = "";
                                if ($id == $sets[0]){
                                    $selected = "selected='selected'";
                                }
?>
                                <option value='<?=$id?>' <?=$selected?>><?=substr($name, 0, 7)?></option>
<?php
                            }
?>
                            </select>
                            <select id='set_2'>
<?php
                            foreach($reflect->getConstants() as $name => $id){
                                $selected = "";
                                if ($id == $sets[1]){
                                    $selected = "selected='selected'";
                                }
?>
                                <option value='<?=$id?>' <?=$selected?>><?=substr($name, 0, 7)?></option>
<?php
                            }
?>
                            </select>
                            <select id='set_3'>
                                <option value='' <?=$selected?>></option>
<?php
                            foreach($reflect->getConstants() as $name => $id){
                                $selected = "";
                                if ($id == $sets[2]){
                                    $selected = "selected='selected'";
                                }
?>
                                <option value='<?=$id?>' <?=$selected?>><?=substr($name, 0, 7)?></option>
<?php
                            }
?>
                            </select>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min HP
                        </td>
                        <td class='value'>
                            <input id='min_hp' type='range' value='<?=$page->unit->total_hp?>' min='<?=$page->unit->hp?>' max='50000' oninput='updateMinValue("hp", this);'>
                            <input type='number' id='lbl_min_hp' value='<?=$page->unit->total_hp?>' min='<?=$page->unit->hp?>' max='50000' onChange='updateMinValue("hp", this);'></input>
                        </td>
                    </tr>
                    <tr>
                        <td class='name'>
                            Even slots
                        </td>
                        <td class='value'>
                            <select id='slot_2'>
                                <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[0] == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
                                <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[0] == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
                                <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[0] == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
                                <option value='<?=RUNE_STAT_ID::SPD?>' <?=($mains[0] == RUNE_STAT_ID::SPD) ? ("selected='selected'") : ("");?>>SPD</option>
                            </select>
                            <select id='slot_4'>
                                <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[1] == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
                                <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[1] == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
                                <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[1] == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
                                <option value='<?=RUNE_STAT_ID::CRR?>' <?=($mains[1] == RUNE_STAT_ID::CRR) ? ("selected='selected'") : ("");?>>CRR</option>
                                <option value='<?=RUNE_STAT_ID::CRR?>' <?=($mains[1] == RUNE_STAT_ID::CRD) ? ("selected='selected'") : ("");?>>CRD</option>
                            </select>
                            <select id='slot_6'>
                                <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[2] == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
                                <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[2] == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
                                <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[2] == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
                                <option value='<?=RUNE_STAT_ID::ACC?>' <?=($mains[2] == RUNE_STAT_ID::ACC) ? ("selected='selected'") : ("");?>>ACC</option>
                                <option value='<?=RUNE_STAT_ID::RES?>' <?=($mains[2] == RUNE_STAT_ID::RES) ? ("selected='selected'") : ("");?>>RES</option>
                            </select>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min ATK
                        </td>
                        <td class='value'>
                            <input id='min_attack' type='range' value='<?=$page->unit->total_attack?>' min='<?=$page->unit->attack?>' max='4000' oninput='updateMinValue("attack", this);'>
                            <input type='number' id='lbl_min_attack' value='<?=$page->unit->total_attack?>' min='<?=$page->unit->attack?>' max='4000' onChange='updateMinValue("attack", this);'></input>
                        </td>
                    </tr>
                    <tr>
                        <td class='name'>
                            Use runes from
                        </td>
                        <td class='value'>
                            <select id='rune_source'>
                                <option value='0'>Storage only</option>
                                <option value='1'>Units in no teams</option>
                                <option value='2'>Units in teams with 0 score</option>
                                <option value='3'>Units with lower overall score</option>
                                <option value='4'>All runes</option>
                            </select>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min DEF
                        </td>
                        <td class='value'>
                            <input id='min_defense' type='range' value='<?=$page->unit->total_defense?>' min='<?=$page->unit->defense?>' max='4000' oninput='updateMinValue("defense", this);'>
                            <input type='number' id='lbl_min_defense' value='<?=$page->unit->total_defense?>' min='<?=$page->unit->defense?>' max='4000' onChange='updateMinValue("defense", this);'></input>
                        </td>
                    </tr>
                    <tr>
                        <td class='name'>
                            Tune optimizer for
                        </td>
                        <td class='value'>
                            <select id='tuning'>
                                <option value='0'>Rune current levels</option>
                                <option value='1'>+12</option>
                                <option value='2'>2/4/6 +15, 1/3/5 + 12</option>
                                <option value='3'>+15</option>
                            </select>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min SPD
                        </td>
                        <td class='value'>
                            <input id='min_speed' type='range' value='<?=$page->unit->total_speed?>' min='<?=$page->unit->speed?>' max='400' oninput='updateMinValue("speed", this);'>
                            <input type='number' id='lbl_min_speed' value='<?=$page->unit->total_speed?>' min='<?=$page->unit->speed?>' max='400' onChange='updateMinValue("speed", this);'></input>
                        </td>
                    </tr>
                    <tr>
                        <td class='empty'>
                            Max. combinations
                        </td>
                        <td class='empty'>
                            <input id='limit' type='number' value='10' max='100' min='1'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min CRR
                        </td>
                        <td class='value'>
                            <input id='min_crit_rate' type='range' value='<?=$page->unit->total_crit_rate?>' min='<?=$page->unit->crit_rate?>' max='100' oninput='updateMinValue("crit_rate", this);'>
                            <input type='number' id='lbl_min_crit_rate' value='<?=$page->unit->total_crit_rate?>' min='<?=$page->unit->crit_rate?>' max='100' onChange='updateMinValue("crit_rate", this);'></input>%
                        </td>
                    </tr>
                    <tr>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min CRD
                        </td>
                        <td class='value'>
                            <input id='min_crit_damage' type='range' value='<?=$page->unit->total_crit_damage?>' min='<?=$page->unit->crit_damage?>' max='400' oninput='updateMinValue("crit_damage", this);'>
                            <input type='number' id='lbl_min_crit_damage' value='<?=$page->unit->total_crit_damage?>' min='<?=$page->unit->crit_damage?>' max='400' onChange='updateMinValue("crit_damage", this);'></input>%
                        </td>
                    </tr>
                    <tr>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min ACC
                        </td>
                        <td class='value'>
                            <input id='min_accuracy' type='range' value='<?=$page->unit->total_accuracy?>' min='<?=$page->unit->accuracy?>' max='85' oninput='updateMinValue("accuracy", this);'>
                            <input type='number' id='lbl_min_accuracy' value='<?=$page->unit->total_accuracy?>' min='<?=$page->unit->accuracy?>' max='85' onChange='updateMinValue("accuracy", this);'></input>%
                        </td>
                    </tr>
                    <tr>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min RES
                        </td>
                        <td class='value'>
                            <input id='min_resistance' type='range' value='<?=$page->unit->total_resistance?>' min='<?=$page->unit->resistance?>' max='85' oninput='updateMinValue("resistance", this);'>
                            <input type='number' id='lbl_min_resistance' value='<?=$page->unit->total_resistance?>' min='<?=$page->unit->resistance?>' max='85' onChange='updateMinValue("resistance", this);'></input>%
                        </td>
                    </tr>
                    <tr>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min EHP
                        </td>
                        <td class='value'>
                            <input id='min_ehp' type='range' value='<?=$page->unit->effective_hp?>' min='0' max='200000' oninput='updateMinValue("ehp", this);'>
                            <input type='number' id='lbl_min_ehp' value='<?=$page->unit->effective_hp?>' min='0' max='200000' onChange='updateMinValue("ehp", this);'></input>
                        </td>
                    </tr>
                    <tr>
                        <td class='action'>
                            <input id='apply' type='button' value='Apply' onClick='apply();'/>
                        </td>
                        <td class='empty'>
                            <img id='wait' src='<?=URL::IMG["ICON"] . "wait.gif";?>'>
                        </td>
                        <td class='empty'>
                        </td>
                        <td class='name'>
                            Min DMG
                        </td>
                        <td class='value'>
                            <input id='min_dmg' type='range' value='<?=$page->unit->effective_dmg?>' min='0' max='7000' oninput='updateMinValue("dmg", this);'>
                            <input type='number' id='lbl_min_dmg' value='<?=$page->unit->effective_dmg?>' min='0' max='7000' onChange='updateMinValue("dmg", this);'></input>
                        </td>
                    </tr>
                    
                    
                    
                    
                </table>
            </article>
        </section>
        <section id='results' class='content'>
            <h2>
                Optimization results
            </h2>
            <article>
                <table>
                    <tbody id='optimizations'>
                    </tbody>
                </table>
            </article>
        </section>
        <div id='message_container'>
            <section class='content'>
                <h2 id='message_title'>
                    Message
                </h2>
                <article>
                    <p id='message_text'>
                        Message Text
                    </p>
                </article>
                <input type='button' value='OK' id='message_button' onclick='closeMessage();'/>
            </section>
        </div>

<?php
        include __DIR__ . "/inc/footer.php";
?>
    </body>
</html>