Most urgent skill-up report

application/Controller.php

@@ -8,6 +8,8 @@
     require_once($path["page"] . "Monsters_Page.php");
     require_once($path["page"] . "Monster_Page.php");
     require_once($path["page"] . "Catalog_Page.php");
+    require_once($path["page"] . "Report_Page.php");
+    require_once($path["page"] . "Report_Skillup_Page.php");
     /*foreach (glob($path["page"] . "*.php") as $pagename){
         require_once($pagename);
     }
@@ -72,6 +74,14 @@
                 elseif (strtoupper($pars[0]) == "RUNES"){
                     $page = new Runes_Page($db);
                 }
+                elseif (strtoupper($pars[0]) == "REPORT"){
+                    if (count($pars) == 1){
+                        $page = new Report_Page($db);
+                    }
+                    elseif (strtoupper($pars[1]) == "SKILLUP"){
+                        $page = new Report_Skillup_Page($db, $pars[1]);
+                    }
+                }
                 elseif (strtoupper($pars[0]) == "FRAME"){
                     if (strtoupper($pars[1]) == "PORTRAIT"){
                         $page = new Collection_Portrait_Frame($db, $_POST);

application/entity/K_Fusion.php

@@ -0,0 +1,74 @@
+<?php
+
+    require_once($path["entity"] . "Entity.php");
+    //require_once($path["entity"] . "Monster.php");
+
+
+    /**
+     * Monster.
+     *
+     * Represents an object from the table 'monster'.
+     */
+    class Fusion extends Entity{
+
+        /**
+         * {@see Monster} to fuse.
+         */
+        public $target;
+
+        /**
+         * {@see Monster} material.
+         */
+        public $source = [];
+
+        /**
+         * Stars of the monster to fuse.
+         */
+        public $target_stars;
+
+        /**
+         * Stars of the source monsters.
+         */
+        public $source_stars;
+
+        /**
+         * Monster materials level.
+         */
+        public $source_level;
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * project, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $id Target monster id.
+         */
+        public function __construct($db, $id){
+            global $path;
+            parent::__construct($db);
+            $s =
+              "SELECT " .
+              "  target, " .
+              "  target_stars, " .
+              "  source, " .
+              "  source_stars, " .
+              "  source_level " .
+              "FROM fusion " .
+              "WHERE target = $id; ";
+            $q = $this->db->query($s);
+            $set = false;
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                if ($set == false){
+                    $this->target_stars = $r["target_stars"];
+                    $this->source_stars = $r["source_stars"];
+                    $this->source_level = $r["source_level"];
+                    $this->target = new Monster($this->db, $r["target"]);
+                    $set = true;
+                }
+                array_push($this->source, new Monster($this->db, $r["source"]));
+            }
+        }
+    }
+?>

application/entity/Rune.php

@@ -205,7 +205,6 @@
               "  substat_4_craft " .
               "FROM rune " .
               "WHERE id = '$id'; ";
-            error_log("RUNE: " . $s);
             $q = $this->db->query($s);
             $r = $q->fetchArray(SQLITE3_ASSOC);
             if ($r){
@@ -216,7 +215,7 @@
                 $this->slot = $r["slot"];
                 $this->stars = $r["stars"];
                 $this->level = $r["level"];
-                $this->runeset = $r["runeset"];
+                //$this->runeset = $r["runeset"];
                 $this->quality = $r["quality"];
                 $this->original_quality = $r["original_quality"];
                 $this->value = $r["value"];

application/page/Monsters_Page.php

@@ -60,10 +60,10 @@
             if (isset($_GET["max_stars"]) && intval($_GET["max_stars"]) > 0 && intval($_GET["max_stars"]) < 7){
                 $this->filters["max_stars"] = $_GET["max_stars"];
             }
-            if (isset($_GET["in_storage"]) && $_GET["in_storage"] != "on"){
+            if ($_GET["in_storage"] != "on"){
                 $this->filters["in_storage"] = false;
             }
-            if (isset($_GET["without_runes"]) && $_GET["without_runes"] != "on"){
+            if ($_GET["without_runes"] != "on"){
                 $this->filters["without_runes"] = false;
             }
             return;

application/page/Report_Page.php

@@ -0,0 +1,28 @@
+ <?php
+
+    require_once($path["page"] . "Page.php");
+
+
+    /**
+     * Main reports page.
+     */
+    class Report_Page extends Page{
+
+        /**
+         * Constructor.
+         *
+         * Retrieves the data and initializes the variables.
+         *
+         * @param SQLite3 $db Connection to the database.
+         */
+        public function __construct($db){
+            global $path;
+            global $root;
+            parent::__construct($db);
+            $this->view = $path["view"] . "report.php";
+            $this->title = "Reports - SWDB";
+            $this->description = "Usefull reports for summoners";
+            $this->canonical = $root . "report";
+        }
+    }
+?>

application/page/Report_Skillup_Page.php

@@ -0,0 +1,140 @@
+ <?php
+
+    require_once($path["page"] . "Page.php");
+    require_once($path["entity"] . "Monster.php");
+
+
+    /**
+     * Urgent Skillup report page.
+     */
+    class Report_Skillup_Page extends Page{
+
+        /**
+         * Array of @{see Monsters}s.
+         */
+        public $monsters = [];
+
+        public $filters = [
+            "min_stars" => 1,
+            "max_stars" => 6,
+            "min_natural_stars" => 1,
+            "max_natural_stars" => 5,
+            "in_storage" => true,
+            "without_runes" => true
+        ];
+
+        /**
+         * Constructor.
+         *
+         * Retrieves the data and initializes the variables.
+         *
+         * @param SQLite3 $db Connection to the database.
+         */
+        public function __construct($db){
+            global $path;
+            global $root;
+            parent::__construct($db);
+            $this->view = $path["view"] . "report_skillup.php";
+            $this->parse_filters();
+            $s_mon = $this->build_query();
+            error_log($s_mon);
+            $q_mon = $this->db->query($s_mon);
+            while ($r_mon = $q_mon->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->monsters, new Monster($db, $r_mon["id"]));
+            }
+            $this->title = "Urgent skill-ups - SWDB";
+            $this->description = "Monster in need os skilling up";
+            $this->canonical = $root . "report/skillups";
+        }
+
+        private function parse_filters(){
+            if (isset($_GET["min_stars"]) && intval($_GET["min_stars"]) > 0 && intval($_GET["min_stars"]) < 7){
+                $this->filters["min_stars"] = $_GET["min_stars"];
+            }
+            if (isset($_GET["max_stars"]) && intval($_GET["max_stars"]) > 0 && intval($_GET["max_stars"]) < 7){
+                $this->filters["max_stars"] = $_GET["max_stars"];
+            }
+            if (isset($_GET["min_natural_stars"]) && intval($_GET["min_natural_stars"]) > 0 && intval($_GET["min_natural_stars"]) < 6){
+                $this->filters["min_natural_stars"] = $_GET["min_natural_stars"];
+            }
+            if (isset($_GET["max_natural_stars"]) && intval($_GET["max_natural_stars"]) > 0 && intval($_GET["max_natural_stars"]) < 6){
+                $this->filters["max_natural_stars"] = $_GET["max_natural_stars"];
+            }
+            if ($_GET["in_storage"] != "on"){
+                $this->filters["in_storage"] = false;
+            }
+            if ($_GET["without_runes"] != "on"){
+                $this->filters["without_runes"] = false;
+            }
+            return;
+        }
+
+        private function build_query(){
+            $s =
+              "SELECT DISTINCT " .
+              "  monster.id AS id, " .
+              "  sum( " .
+              "    CASE k_skill.slot " .
+              "      WHEN 1 THEN (monster.skill_1_level - 1) * 1 " .
+              "      WHEN 2 THEN (monster.skill_2_level - 1) * 1.5 " .
+              "      WHEN 3 THEN (monster.skill_3_level - 1) * 2 " .
+              "      WHEN 4 THEN (monster.skill_4_level - 1) * 2.5 " .
+              "      END " .
+              "  ) AS ponderated_level, " .
+              "  sum( " .
+              "    CASE k_skill.slot " .
+              "      WHEN 1 THEN (monster.skill_1_level - 1) " .
+              "      WHEN 2 THEN (monster.skill_2_level - 1) " .
+              "      WHEN 3 THEN (monster.skill_3_level - 1) " .
+              "      WHEN 4 THEN (monster.skill_4_level - 1) " .
+              "      END " .
+              "    ) AS level, " .
+              "  sum( " .
+              "    CASE k_skill.slot " .
+              "      WHEN 1 THEN (k_skill.max_level - 1) * 1 " .
+              "      WHEN 2 THEN (k_skill.max_level - 1) * 1.5 " .
+              "      WHEN 3 THEN (k_skill.max_level - 1) * 2 " .
+              "      WHEN 4 THEN (k_skill.max_level - 1) * 2.5 " .
+              "      END " .
+              "  ) AS ponderated_max_level, " .
+              "  sum( " .
+              "    CASE k_skill.slot " .
+              "      WHEN 1 THEN (k_skill.max_level - 1) " .
+              "      WHEN 2 THEN (k_skill.max_level - 1) " .
+              "      WHEN 3 THEN (k_skill.max_level - 1) " .
+              "      WHEN 4 THEN (k_skill.max_level - 1) " .
+              "      END " .
+              "  ) AS max_level " .
+              "FROM " .
+              "  monster, " .
+              "  k_monster_skill, " .
+              "  k_skill, " .
+              "  k_monster " .
+              "WHERE " .
+              "  monster.monster = k_monster_skill.monster AND " .
+              "  k_skill.id = k_monster_skill.skill AND " .
+              "  k_monster.id = monster.monster AND " .
+              "  k_skill.max_level > 1 AND " .
+              "  monster.stars >= " . $this->filters["min_stars"] . " AND " .
+              "  monster.stars <= " . $this->filters["max_stars"] . " AND " .
+              "  k_monster.natural_stars >= " . $this->filters["min_natural_stars"] . " AND " .
+              "  k_monster.natural_stars <= " . $this->filters["max_natural_stars"] . " ";
+              
+            if (!$this->filters["in_storage"]){
+                $s = $s . " AND monster.in_storage = 0 ";
+            }
+            if (!$this->filters["without_runes"]){
+                $s = $s . " AND monster.id IN (SELECT DISTINCT monster FROM monster_rune) ";
+            }
+            $s = $s .
+              "GROUP BY monster.id " .
+              "ORDER BY " .
+              "  ponderated_level * 100 / ponderated_max_level, " .
+              "  monster.stars DESC, " .
+              "  monster.level DESC, " .
+              "  level * 100 / max_level, " .
+              "  max_level - level DESC; ";
+            return $s;
+        }
+    }
+?>

application/view/monster.php

@@ -402,28 +402,22 @@
 ?>
 						<tr>
 							<td class='icon'>
-								<img class='rune_base rune_base_<?=$rune->slot?>' src=<?=$path["img"]["layout"]?>rune/base.png/>
-								<img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rune->type?>.png'/>
-								<span class='stars'>
+								<div class='rune_panel rune_slot_<?=$rune->slot?> rune_level_<?=$rune->level?> rune_quality_<?=$rune->quality?> rune_original_quality_<?=$rune->original_quality?>'>
+									<img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
+									<img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rune->type?>.png'/>
+									<span class='rune_stars'>
 <?php
-                                    if ($rune->level == 15){
-                                        $level15 = "level_15";
-                                        $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                                    }
-                                    else{
-                                        $level15 = "";
-                                        $star_src = $path["img"]["layout"] . "icon/star_silver.png";
-                                    }
-                                    for ($i = 0; $i < $rune->stars; $i ++){
+										for ($i = 0; $i < $rune->stars; $i ++){
 ?>
-                        				<img class='star' src='<?=$star_src?>'/>
+                        					<img class='star' src='<?=$path["img"]["layout"] . "icon/star_silver.png"?>'/>
 <?php
-                                    }
+                                        }
 ?>
-                    			</span>
-                    			<span class='level <?=$level15?>'>
-                    				+<?=$rune->level?>
-                    			</span>
+									</span>
+									<span class='rune_level'>
+                    					<?=$rune->level?>
+                    				</span>
+								</div>
 							</td>
 							<td class='stats'>
 								<table>

application/view/report_skillup.php

@@ -0,0 +1,221 @@
+<!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='<?=$path["css"]?>ui.css'/>
+        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>report.css'/>
+        <!-- Script files -->
+        <script src="<?=$path["js"]?>ui.js"></script>
+        <!-- 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'/>
+    </head>
+    <body id='body_report_skillup'>
+<?php
+        include __DIR__ . "/inc/header.php";
+?>
+            <section id='filters'>
+                <form action='/report/skillup/' method='get'>
+                    <div class='filter' id='filter_stars'>
+                        <span>Min. stars:</span>
+                        <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$page->filters["min_stars"]?>'/>
+                        <br/>
+                        <span>Max. stars:</span>
+                        <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$page->filters["max_stars"]?>'/>
+                    </div>
+                    <div class='filter' id='filter_stars'>
+                        <span>Min. natural stars:</span>
+                        <input type='number' name='min_natural_stars' id='filter_stars_min' min='1' max='5' value='<?=$page->filters["min_natural_stars"]?>'/>
+                        <br/>
+                        <span>Max. natural stars:</span>
+                        <input type='number' name='max_natural_stars' id='filter_stars_max' min='1' max='5' value='<?=$page->filters["max_natural_stars"]?>'/>
+                    </div>
+                    <div class='filter'>
+<?php
+                        $checked = "";
+                        if ($page->filters["in_storage"]){
+                            $checked = "checked";
+                        }
+?>
+                        <input type='checkbox' name='in_storage' <?=$checked?>/>
+                        Show monsters in storage
+                        <br/>
+<?php
+                        $checked = "";
+                        if ($page->filters["without_runes"]){
+                            $checked = "checked";
+                        }
+?>
+                        <input type='checkbox' name='without_runes' <?=$checked?>/>
+                        Show monsters without runes
+                    </div>
+                    <div id='filter_apply'>
+                        <input type='submit' value='Apply'/>
+                    </div>
+                </form>
+            </section> <!-- #filters -->
+            <section id='list'>
+                <article>
+<?php
+                    foreach ($page->monsters as $mon){
+                        if ($mon->monster->awakens_from == "" && $mon->monster->awakens_to == ""){
+                            // No to, no from, silver monster.
+                            $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                            $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                        }
+                        elseif ($mon->monster->awakens_from =! "" && $mon->monster->awakens_to == ""){
+                            // Already awakened.
+                            $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                            $mon_title = $mon->monster->name;
+                        }
+                        elseif ($mon->monster->awakens_to =! ""){
+                            // Awakeable.
+                            $star_src = $path["img"]["layout"] . "icon/star.png";
+                            $mon_title = $mon->monster->element . " " . $mon->monster->name;
+                        }
+                        // TODO: Handle second awakenings
+?>
+                        <div class='monster'>
+                        	<div class='profile'>
+                                <img id='monster_image' title='<?=$mon_title?>' class='border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
+                            	<div id='details'>
+                            		<h1><?=$mon_title?></h1>
+                                	<span class='stars'>
+<?php
+                                        for ($i = 0; $i < $mon->stars; $i ++){
+?>
+                                        	<img class='star' src='<?=$star_src?>'/>
+<?php
+                                        }
+?>
+                                    </span>
+                                    <span class='level'>
+                                        Lv. <?=$mon->level?>
+                                    </span>
+                                </div> <!-- #details -->
+                            </div> <!-- .profile -->
+                            
+                            <div class='skills'>
+<?php
+                                    $skill_num = 1;
+                                    $absolute_level = 0;
+                                    $absolute_max_level = 0;
+                                    $ponderated_level = 0;
+                                    $ponderated_max_level = 0;
+                                    foreach ($mon->monster->skill as $skill){
+                                        if ($skill->max_level > 1){
+                                            $absolute_max_level += $skill->max_level - 1;
+                                        }
+                                        switch ($skill_num){
+                                            case 1:
+                                                $cur_lvl = $mon->skill_1_level;
+                                                if ($skill->max_level > 1){
+                                                    $absolute_level += $cur_lvl - 1;
+                                                    $ponderated_level += $cur_lvl - 1;
+                                                    $ponderated_max_level += $skill->max_level - 1;
+                                                }
+                                                break;
+                                            case 2:
+                                                $cur_lvl = $mon->skill_2_level;
+                                                if ($skill->max_level > 1){
+                                                    $absolute_level += $cur_lvl - 1;
+                                                    $ponderated_level += ($cur_lvl - 1) * 1.5;
+                                                    $ponderated_max_level += ($skill->max_level - 1) * 1.5;
+                                                }
+                                                break;
+                                            case 3:
+                                                $cur_lvl = $mon->skill_3_level;
+                                                if ($skill->max_level > 1){
+                                                    $absolute_level += $cur_lvl - 1;
+                                                    $ponderated_level += ($cur_lvl - 1) * 2.0;
+                                                    $ponderated_max_level += ($skill->max_level - 1) * 2.0;
+                                                }
+                                                break;
+                                            case 4:
+                                                $cur_lvl = $mon->skill_4_level;
+                                                if ($skill->max_level > 1){
+                                                    $absolute_level += $cur_lvl - 1;
+                                                    $ponderated_level += ($cur_lvl - 1) * 2.5;
+                                                    $ponderated_max_level += ($skill->max_level - 1) * 2.5;
+                                                }
+                                                break;
+                                        }
+                                        $max_lvl = $skill->max_level;
+                                        if ($max_lvl == $cur_lvl){
+                                            $maxed = "maxed";
+                                        }
+                                        else{
+                                            $maxed = "";
+                                        }
+?>
+                                    <div class='skill'>
+                                        <img src='<?=$skill->get_image()?>'/>
+                                        <span class='skill_level <?=$maxed?>'>
+                                        	<?=$cur_lvl?>/<?=$max_lvl?>
+                                        </span>
+                                        <span class='skill_name'>
+                                            <?=$skill->name?>
+                                        </span>
+                                    </div>
+<?php
+                                        $skill_num ++;
+                                    }
+?>
+                            </div> <!-- #skills -->
+                            <table id='skill_averages'>
+            					<tr>
+            						<td class='title'>
+            							Absolute skill-ups:
+            						</td>
+            						<td class='value'>
+            							<?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>%
+            						</td>
+            					</tr>
+            					<tr>
+            						<td class='title'>
+            							Ponderated skill-ups:
+            						</td>
+            						<td class='value'>
+            							<?=number_format($ponderated_level * 100 / $ponderated_max_level, 2)?>%
+            						</td>
+            					</tr>
+            					<tr>
+            						<td class='title'>
+            							Remaining skill-ups:
+            						</td>
+            						<td class='value'>
+            							<?=$absolute_max_level - $absolute_level?>
+            						</td>
+            					</tr>
+            				</table>
+                        </div>
+<?php
+                }
+?>
+                    </article>
+            </section> <!-- #catalog -->
+
+<?php
+        include __DIR__ . "/inc/footer.php";
+?>
+    </body>
+</html>

public/css/monster.css

@@ -77,13 +77,27 @@ section#monster article#profile h4{
 }
 
 section#monster article#profile table#stats{
-    font-size: 80%;
+    font-size: 100%;
     border: 0.1em solid black;
     color: #ffffff;
+    margin: 2em auto 2em auto;
+    border-collapse: collapse;
+    border-radius: 0.4em;
 }
 
 section#monster article#profile table#stats th{
     font-weight: bold;
+    background-color: #00000066;
+}
+
+section#monster article#profile table#stats td{
+    font-weight: bold;
+    background-color: #ffffff33;
+}
+
+section#monster article#profile table#stats td, th{
+	padding: 0.2em;
+    border: 0.1em solid #000000;
 }
 
 section#monster article#profile table#stats td.extra{
@@ -211,85 +225,6 @@ section#monster article#runes table#table_runes{
 	border-collapse: collapse;
 }
 
-section#monster article#runes table#table_runes td.icon{
-	border-bottom: 0.1em solid #ffffff;
-	padding-left: 0.5em;
-}
-
-section#monster article#runes table#table_runes td.icon img.rune_base{
-	width: 8em;
-	height: 8em;
-	margin: -1em;
-	position: relative;
-	left: 0;
-	display: block;
-}
-section#monster article#runes table#table_runes td.icon img.rune_base.rune_base_1{
-    transform: rotate(0deg);
-    /*top: 29px;
-    left: 96px;*/
-}
-section#monster article#runes table#table_runes td.icon img.rune_base.rune_base_2{
-    transform: rotate(60deg);
-    /*top: 60px;
-    left: 157px;*/
-}
-section#monster article#runes table#table_runes td.icon img.rune_base.rune_base_3{
-    transform: rotate(120deg);
-    /*top: 130px;
-    left: 157px;*/
-}
-section#monster article#runes table#table_runes td.icon img.rune_base.rune_base_4{
-    transform: rotate(180deg);
-    /*top: 160px;
-    left: 96px;*/
-}
-section#monster article#runes table#table_runes td.icon img.rune_base.rune_base_5{
-    transform: rotate(240deg);
-    /*top: 130px;
-    left: 35px;*/
-}
-section#monster article#runes table#table_runes td.icon img.rune_base.rune_base_6{
-    transform: rotate(300deg);
-    /*top: 60px;
-    left: 36px;*/
-}
-
-section#monster article#runes table#table_runes td.icon img.rune_icon{
-	position: relative;
-	top: -4em;
-	left: -3.2em;
-	margin-right: -2em;
-}
-
-section#monster article#runes table#table_runes td.icon span.stars {
-	float: left;
-	position: relative;
-	top: -6em;
-	left: 0;
-	display: block;
-}
-
-section#monster article#runes table#table_runes td.icon span.stars img.star{
-	width: 1em;
-	height: 1em;
-	margin-right: -0.4em;
-}
-
-section#monster article#runes table#table_runes td.icon span.level {
-	font-size: 130%;
-	font-weight: bold;
-	color: #ffffff;
-	text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
-	position: relative;
-	top: -2em;
-	left: -3em;
-}
-
-section#monster article#runes table#table_runes td.icon span.level.level_15{
-	color: #ff006c;
-}
-
 section#monster article#runes table#table_runes td.stats{
 	color: #ffffff;
 	border-bottom: 0.1em solid #ffffff;
@@ -391,204 +326,3 @@ section#monster article#runes div#rune_averages table#table_averages td.value{
 	text-align: left;
 	padding-left: 1em;
 }
-
-
-
-
-
-
-
-
-
-div#viewer{
-    width: 60%;
-    height: 80%;
-    position: fixed;
-    left: 22%;
-    top: 10%;
-    z-index: 20;
-    display: none;
-    padding: 0;
-}
-@media screen and (max-width : 990px){
-    div#viewer{
-        width: 90%;
-        height: 90%;
-        left: 3%;
-        top: 5%;
-    }
-}
-
-div#viewer div#viewer_wait{
-    width: 100%;
-    margin: 4em 0 0 0;
-    text-align: center;
-}
-div#viewer div#viewer_info{
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    display: none;
-    text-align: center;
-}
-
-div#viewer div#viewer_info table#monster_header{
-    width: 90%;
-    margin: auto;
-    border-collapse: collapse;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header{
-        width: 100%;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header img.monster_img{
-    width: 6.5em;
-    height: 6.5em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    margin: 0.2em 0.8em;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header img.monster_img{
-        width: 5em;
-        height: 5em;
-        border-width: 0.2em;
-        border-radius: 10%;
-        margin: 0.1em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header div#monster_stars{
-    margin: 0.5em auto;
-    padding: 0.3em;
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header div#monster_stars{
-        margin: 0.3em auto;
-        padding: 0.1em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_header div#monster_stars img.monster_star{
-    width: 2em;
-    height: 2em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-@media screen and (max-width : 990px){
-    div#viewer div#viewer_info table#monster_header div#monster_stars img.monster_star{
-        width: 1.6em;
-        height: 1.6em;
-    }
-}
-
-div#viewer div#viewer_info table#monster_skills{
-    width: 90%;
-    margin: 2em auto 2em auto;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-
-div#viewer div#viewer_info table#monster_skills td{
-    vertical-align: top;
-    padding: 0.1em;
-    text-align: center;
-    width: 1%;
-}
-
-div#viewer a.control_close{
-    float: right;
-}
-
-div#viewer a.control_close img.skill_img{
-    width: 1.5em;
-    height: 1.5em;
-    margin: 0.5em;
-}
-
-div#viewer div#viewer_info table#monster_stats{
-    width: 90%;
-    margin: auto;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
-}
-
-div#viewer div#viewer_info table#monster_stats td.even0{
-    background-color: #ffffff;
-}
-div#viewer div#viewer_info table#monster_stats td.even1{
-    background-color: #dddddd;
-}
-
-div#viewer div#viewer_info table#monster_stats td, th{
-    text-align: center;
-    width: 1%;
-}
-
-div#viewer div#viewer_info table#monster_stats tr#stats_header_names th{
-    background-color: #aaaaaa;
-    font-size: 90%;
-}
-
-div#viewer div#viewer_info table#monster_stats tr#stats_header_ranges th{
-    background-color: #aaaaaa;
-    color: #333333;
-    font-size: 70%;
-}
-
-div#viewer div#viewer_info table#monster_stats td img.star{
-    width: 0.5em;
-    height: 0.5em;
-    margin: -0.2em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}
-
-div#viewer div#viewer_info table#monster_stats td span.stat{
-    display: block;
-    margin: 0;
-    text-align: center;
-    font-size: 80%;
-}
-
-div#viewer div#viewer_info table#monster_stats td span.stat.awake{
-    color: #aa00ff;
-    font-style: italic;
-}
-
-div#viewer div#viewer_info div#monster_location{
-    margin: 1em 20%;
-}
-
-div#viewer div#viewer_info div#monster_awake{
-    text-align: center;
-}
-div#viewer div#viewer_info div#monster_awake table{
-    margin: auto;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence{
-    text-align: center;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence img{
-    display: block;
-    border-width: 0.2em;
-    border-style: solid;
-    border-radius: 50%;
-    width: 2.5em;
-    height: 2.5em;
-}
-
-div#viewer div#viewer_info div#monster_awake td.essence span{
-    display: block;
-    text-align: right;
-    margin: -1em 0.2em 0 0;
-    color: #ffffff;
-    text-shadow: 0 0 0.2em #000000;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
-}

public/css/report.css

@@ -0,0 +1,157 @@
+body#body_report_skillup section#filters{
+    width: 80%;
+    text-align:center;
+    margin: 1em auto 2em auto;
+    border: 0.1em solid #000000;
+    border-radius: 0.5em;
+    background-color: #aa8866;
+}
+body#body_report_skillup section#filters div.filter{
+    vertical-align: top;
+    margin: 0.7em;
+    display: inline-block;
+    text-align: center;
+}
+body#body_report_skillup section#filters div.filter span{
+    color: #ffffff;
+}
+body#body_report_skillup section#filters div.filter input{
+    margin-top: 0.5em;
+}
+body#body_report_skillup section#filters div#filter_stars input{
+    width: 3em;
+}
+body#body_report_skillup section#filters div#filter_apply{
+    text-align: center;
+    margin: 2em auto 1em auto;
+}
+
+body#body_report_skillup section#list{
+    display: block;
+    width: 80%;
+    margin: auto;
+    text-align: center;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list{
+        width: 100%;
+    }
+}
+
+body#body_report_skillup section#list div.monster{
+    display: block;
+    margin: 0.5em;
+    position: relative;
+    border-radius: 15%;
+    background: #351e0b;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0.5em;
+    text-align: left;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster{
+        height: 6em;
+        width: 6em;
+        border: 0.1em solid #000000;
+        margin: 0.2em;
+        border-radius: 10%;
+    }
+}
+
+body#body_report_skillup section#list div.monster div.profile{
+	width: 35%;
+	display: inline-block;
+	vertical-align: top;
+}
+
+body#body_report_skillup section#list div.monster div.profile img#monster_image{
+    max-width: 12em;
+    max-height: 12em;
+    border-style: solid;
+    border-width: 0.3em;
+    border-radius: 15%;
+    display: inline-block;
+	vertical-align: top;
+	margin: 0 1.5em 1.5em 1.5em;
+}
+body#body_report_skillup section#list div.monster div.profile div#details{
+	display: inline-block;
+	vertical-align: top;
+	text-align: center;
+}
+body#body_report_skillup section#list div.monster div.profile div#details h1{
+	color: #ffffff;
+	text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
+	font-size: 190%;
+	margin: 0.2em;
+}
+body#body_report_skillup section#list div.monster div.profile div#details span.stars{
+    display: block;
+}
+body#body_report_skillup section#list div.monster div.profile div#details span.stars img.star{
+    width: 1.5em;
+    height: 1.5em;
+    filter: drop-shadow(0 0 0.05em #ffffff);
+    margin: -0.1em;
+}
+body#body_report_skillup section#list div.monster div.profile div#details span.level{
+    color: #ffffff;
+    display: block;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
+}
+
+
+body#body_report_skillup section#list div.monster div.skills{
+	text-align: center;
+	display: inline-block;
+	width: 30%;
+}
+
+body#body_report_skillup section#list div.monster div.skills div.skill{
+	display: inline-block;
+	vertical-align: top;
+	max-width: 22%;
+	margin: 0.5em;
+	color: #ffffff;
+	text-align: center;
+}
+
+body#body_report_skillup section#list div.monster div.skills div.skill img{
+	width: 3em;
+	height: 3em;
+	border: 0.1em solid #f2c920;
+    border-radius: 0.5em;
+}
+body#body_report_skillup section#list div.monster div.skills div.skill span.skill_level{
+	font-size: 110%;
+	position: relative;
+	top: -2em;
+	right: -0.5em;
+	text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.6em #000000, 0 0 0.6em #000000, 0 0 0.8em #000000, 0 0 0.8em #000000;
+}
+
+body#body_report_skillup section#list div.monster div.skills div.skill span.skill_level.maxed{
+	color: #f2c920;
+}
+
+body#body_report_skillup section#list div.monster div.skills div.skill span.skill_name{
+	text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
+	margin-top: -2.2em;
+}
+
+body#body_report_skillup section#list div.monster table#skill_averages{
+	margin-left: 2em;
+	color: #ffffff;
+	display: inline-block;
+	vertical-align: top;
+	max-width: 30%;
+}
+
+body#body_report_skillup section#list div.monster table#skill_averages td.title{
+	text-align: right;
+}
+body#body_report_skillup section#list div.monstertable#skill_averages td.value{
+	text-align: left;
+	padding-left: 1em;
+}

public/css/ui.css

@@ -625,6 +625,141 @@ div.rune_circle span.rune_stars img.rune_stars_star{
     margin-left: -5px;
 }
 
+
+div.rune_panel{
+	width: 8em;
+	height: 8em;
+	border: 0.2em solid #000000;
+	border-radius: 1em;
+	position: relative;
+}
+div.rune_panel.rune_quality_0{ /* Normal */
+	background-image: repeating-radial-gradient(#ffffff, #cccccc 30%, #ffffff 60%);
+}
+div.rune_panel.rune_quality_1{ /* Magic */
+	background-image: repeating-radial-gradient(#aaffaa, #88cc88 30%, #aaffaa 60%);
+}
+div.rune_panel.rune_quality_2{ /* Rare */
+	background-image: repeating-radial-gradient(#aaaaff, #8888cc 30%, #aaaaff 60%);
+}
+div.rune_panel.rune_quality_3{ /* Hero */
+	background-image: repeating-radial-gradient(#ffaacc, #cc88aa 30%, #ffaacc 60%);
+}
+div.rune_panel.rune_quality_4{ /* Legend */
+	background-image: repeating-radial-gradient(#f48200, #b76201 30%, #f48200 60%);
+}
+div.rune_panel img.rune_base{
+    position: absolute;
+    width: 9em;
+    height: 9em;
+    margin: -0.5em;
+/*     z-index: 1; */
+    top: 0;
+    left: 0;
+}
+div.rune_panel.rune_slot_1 img.rune_base{
+    transform: rotate(0deg);
+}
+div.rune_panel.rune_slot_2 img.rune_base{
+    transform: rotate(57deg);
+}
+div.rune_panel.rune_slot_3 img.rune_base{
+    transform: rotate(123deg);
+}
+div.rune_panel.rune_slot_4 img.rune_base{
+    transform: rotate(180deg);
+}
+div.rune_panel.rune_slot_5 img.rune_base{
+    transform: rotate(237deg);
+}
+div.rune_panel.rune_slot_6 img.rune_base{
+    transform: rotate(303deg);
+}
+div.rune_panel img.rune_icon{
+    position: absolute;
+    height: 3em;
+/*     z-index: 2; */
+    /*top: 3.8em;
+    left: 3.5em;*/
+}
+div.rune_panel.rune_slot_1 img.rune_icon{
+	top: 3.4em;
+	left: 3.1em;
+}
+div.rune_panel.rune_slot_2 img.rune_icon{
+	top: 2.9em;
+	left: 2.5em;
+}
+div.rune_panel.rune_slot_3 img.rune_icon{
+	top: 2.2em;
+	left: 2.5em;
+}
+div.rune_panel.rune_slot_4 img.rune_icon{
+	top: 2em;
+	left: 3.1em;
+}
+div.rune_panel.rune_slot_5 img.rune_icon{
+	top: 2.2em;
+	left: 3.5em;
+}
+div.rune_panel.rune_slot_6 img.rune_icon{
+	top: 2.9em;
+	left: 3.5em;
+}
+div.rune_panel.rune_original_quality_0 img.rune_icon{
+	filter: sepia(100%) saturate(500%) grayscale(100%);
+}
+div.rune_panel.rune_original_quality_1 img.rune_icon{
+	filter: sepia(100%) saturate(500%) hue-rotate(60deg);
+}
+div.rune_panel.rune_original_quality_2 img.rune_icon{
+	filter: sepia(100%) saturate(500%) hue-rotate(120deg);
+}
+div.rune_panel.rune_original_quality_3 img.rune_icon{
+	filter: sepia(100%) saturate(500%) hue-rotate(230deg);
+}
+div.rune_panel.rune_original_quality_4 img.rune_icon{
+	filter: sepia(100%) saturate(500%) hue-rotate(330deg);
+}
+div.rune_panel span.rune_stars{
+	position: absolute;
+	width: 9em;
+	left: 0.9em;
+	top: 0.2em;
+	text-align: left;
+}
+div.rune_panel span.rune_stars img.star{
+/* 	z-index: 4; */
+	width: 1.2em;
+	height: 1.2em;
+	margin-left: -0.4em;
+    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}
+div.rune_panel.rune_level_15 span.rune_stars img.star{
+	filter: sepia(100%) saturate(300%) hue-rotate(320deg) saturate(400%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}
+div.rune_panel span.rune_level{
+	font-size: 130%;
+	font-weight: bold;
+	color: #ffffff;
+	text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
+	position: relative;
+	top: 4.7em;
+	left: 1.5em;
+}
+div.rune_panel span.rune_level::before {
+  content: "+";
+}
+div.rune_panel.rune_level_15 span.rune_level{
+	color: #ff6f2d;
+}
+
+
+
+
+
+
+
 div.rune_box{
 	width: 10em;
 	height: 10em;