Application rewrite in progress. Now it uses swarfarm.com data.

.gitignore

@@ -4,7 +4,7 @@ public/img/content/
 application/config/auth.php_*
 application/*.sqlite
 install-*
-install_*
+#install_*
 private.sql
 
 # Autogenerated files

application/Controller.php

@@ -4,7 +4,11 @@
     require_once($path["helper"] . "db.php");
     require_once($path["helper"] . "text.php");
     require_once($path["helper"] . "net.php");
-    foreach (glob($path["page"] . "*.php") as $pagename){
+    require_once($path["page"] . "Home_Page.php");
+    require_once($path["page"] . "Monsters_Page.php");
+    require_once($path["page"] . "Monster_Page.php");
+    require_once($path["page"] . "Catalog_Page.php");
+    /*foreach (glob($path["page"] . "*.php") as $pagename){
         require_once($pagename);
     }
     foreach (glob($path["frame"] . "*.php") as $framename){
@@ -12,7 +16,7 @@
     }
     foreach (glob($path["handler"] . "*.php") as $pagename){
         require_once($pagename);
-    }
+    }*/
 
 
     /**
@@ -56,12 +60,18 @@
                 if (strtoupper($pars[0]) == "FUSION"){
                     $page = new Fusion_Page($db);
                 }
-                elseif (strtoupper($pars[0]) == "COLLECTION"){
-                    $page = new Collection_Page($db);
+                elseif (strtoupper($pars[0]) == "MONSTERS"){
+                    $page = new Monsters_Page($db);
+                }
+                elseif (strtoupper($pars[0]) == "MONSTER"){
+                    $page = new Monster_Page($db, $pars[1]);
                 }
                 elseif (strtoupper($pars[0]) == "CATALOG"){
                     $page = new Catalog_Page($db);
                 }
+                elseif (strtoupper($pars[0]) == "RUNES"){
+                    $page = new Runes_Page($db);
+                }
                 elseif (strtoupper($pars[0]) == "FRAME"){
                     if (strtoupper($pars[1]) == "PORTRAIT"){
                         $page = new Collection_Portrait_Frame($db, $_POST);
@@ -72,16 +82,22 @@
                     elseif (strtoupper($pars[1]) == "COLLECTION"){
                         $page = new Collection_Collection_Frame($db, $_POST);
                     }
+                    elseif (strtoupper($pars[1]) == "COLLECTION_RUNE"){
+                        $page = new Collection_Rune_Frame($db, $_POST);
+                    }
                     elseif (strtoupper($pars[1]) == "CATALOG"){
                         $page = new Catalog_Catalog_Frame($db, $_POST);
                     }
                     elseif (strtoupper($pars[1]) == "CATALOG_LIST"){
                         $page = new Catalog_List_Frame($db, $_POST);
                     }
+                    elseif (strtoupper($pars[1]) == "RUNE_LIST"){
+                        $page = new Rune_List_Frame($db, $_POST);
+                    }
                 }
                 elseif (strtoupper($pars[0]) == "HANDLER"){
-                    if (strtoupper($pars[1]) == "MONSTER_COLLECTION"){
-                        $handler = new Monster_Collection_Handler($db, $_POST["id"], $_POST["mode"], $_POST);
+                    if (strtoupper($pars[1]) == "COLLECTION"){
+                        $handler = new Collection_Handler($db, $_POST["id"], $_POST["mode"], $_POST);
                     }
                 }
             }

application/config.php

@@ -12,6 +12,8 @@
             "layout" => $root . "img/layout/",
             "monster" => $root . "img/content/monster/",
             "skill" => $root . "img/content/skill/",
+            "essence" => $root . "img/layout/essence/",
+            "rune" => $root . "img/layout/rune/",
         ],
         "fonts" => $root . "fonts/",
         "css" => $root . "css/",

application/entity/Fusion.php

@@ -1,74 +0,0 @@
-<?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/K_Effect.php

@@ -0,0 +1,73 @@
+<?php
+
+    require_once($path["entity"] . "Entity.php");
+
+    /**
+     * Skill effect.
+     *
+     * Represents an object from the table 'k_effect'.
+     */
+    class K_Effect extends Entity{
+
+        /**
+         * Effect identifier.
+         */
+        public $id;
+
+        /**
+         * Effect name.
+         */
+        public $name;
+
+        /**
+         * Indicates if the effect is a buff.
+         */
+        public $is_buff;
+
+        /**
+         * Effect description.
+         */
+        public $description;
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * skill level, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $skill Effect identifier.
+         */
+        public function __construct($db, $id){
+            global $path;
+            parent::__construct($db);
+            $s =
+              "SELECT " .
+              "  id, " .
+              "  name, " .
+              "  is_buff, " .
+              "  description " .
+              "FROM k_effect " .
+              "WHERE id = $id;";
+            $q = $this->db->query($s);
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            if ($r){
+                $this->id = $r["id"];
+                $this->name = $r["name"];
+                $this->is_buff = $r["is_buff"];
+                $this->description = $r["description"];
+            }
+        }
+
+        public function get_image(){
+            global $base_dir;
+            global $path;
+            if (file_exists($base_dir . "img/content/effect/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["content"] . "effect/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            }
+            else{
+                return $path["img"]["layout"] . "unknown.png";
+            }
+        }
+    }
+?>

application/entity/K_Leader_Skill.php

@@ -0,0 +1,99 @@
+<?php
+
+    require_once($path["entity"] . "Entity.php");
+
+    /**
+     * Monster skill.
+     *
+     * Represents an object from the table 'k_skill'.
+     */
+    class K_Leader_Skill extends Entity{
+
+        /**
+         * Skill identifier.
+         */
+        public $id;
+
+        /**
+         * Skill attribute.
+         */
+        public $attribute;
+
+        /**
+         * Attribute incrrease amount.
+         */
+        public $amount;
+
+        /**
+         * Effect area.
+         */
+        public $area;
+
+        /**
+         * Affected elements.
+         */
+        public $element;
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * skill, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $id Skill identifier.
+         */
+        public function __construct($db, $id){
+            global $path;
+            parent::__construct($db);
+            $s =
+              "SELECT " .
+              "  id, " .
+              "  attribute, " .
+              "  amount, " .
+              "  area, " .
+              "  element " .
+              "FROM k_leader_skill " .
+              "WHERE id = $id; ";
+            $q = $this->db->query($s);
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            $this->id = $r["id"];
+            $this->attribute = $r["attribute"];
+            $this->amount = $r["amount"];
+            $this->area = $r["area"];
+            $this->element = $r["element"]; 
+        }
+        
+        public function get_image(){
+            global $base_dir;
+            global $path;
+            if (file_exists($base_dir . "img/content/skill_leader/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["content"] . "skill_leader/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            }
+            else{
+                return $path["img"]["layout"] . "unknown.png";
+            }
+        }
+        
+        public function create_description(){
+            $s = "Increases the " . $this->attribute . " of ally monsters ";
+            if (strlen($this->element) > 0){
+                $s = $s . " with " . $this->element . " attribute ";
+            }
+            $s = $s . " by " . $this->amount . "%";
+            switch ($this->area){
+                case "Dungeon":
+                    $s = $s . " in the Dungeons";
+                    break;
+                case "Arena":
+                    $s = $s . " in the Arena";
+                    break;
+                case "Guild":
+                    $s = $s . " in Guild content";
+                    break;
+            }
+            $s = $s . ".";
+            return $s;
+        }
+    }
+?>

application/entity/K_Monster.php

@@ -0,0 +1,358 @@
+<?php
+
+    require_once($path["entity"] . "Entity.php");
+    require_once($path["entity"] . "K_Skill.php");
+    require_once($path["entity"] . "K_Leader_Skill.php");
+
+
+    /**
+     * Monster.
+     *
+     * Represents an object from the table 'monster'.
+     */
+    class K_Monster extends Entity{
+
+        /**
+         * Monster identifier.
+         */
+        public $id;
+
+        /**
+         * Monster official identifier.
+         */
+        public $com2us_id;
+
+        /**
+         * Monster family id.
+         */
+        public $family_id;
+
+        /**
+         * Monster name.
+         */
+        public $name;
+
+        /**
+         * Monster element.
+         */
+        public $element;
+
+        /**
+         * Monster archetype.
+         */
+        public $archetype;
+
+        /**
+         * Default star level.
+         */
+        public $base_stars;
+
+        /**
+         * Default star level.
+         */
+        public $natural_stars;
+        
+        /**
+         * Indicates if the monster is obtainable.
+         */
+        public $obtainable;
+
+        /**
+         * Indicates if the monster can be awakened.
+         */
+        public $can_awaken;
+
+        /**
+         * Bonus when awakening.
+         */
+        public $awaken_bonus;
+
+        /**
+         * Required skill-ups.
+         */
+        public $skill_ups_to_max;
+
+        /**
+         * @{see K_Leader_Skill} of the monster.
+         */
+        public $leader_skill;
+
+        /**
+         * Base HP.
+         */
+        public $base_hp;
+
+        /**
+         * Base ATK.
+         */
+        public $base_atk;
+
+        /**
+         * Base DEF.
+         */
+        public $base_defense;
+
+        /**
+         * SPD.
+         */
+        public $speed;
+
+        /**
+         * CRR.
+         */
+        public $crit_rate;
+
+        /**
+         * CRD.
+         */
+        public $crit_damage;
+
+        /**
+         * RES
+         */
+        public $resistance;
+
+        /**
+         * ACC.
+         */
+        public $accuracy;
+
+        /**
+         * Raw HP.
+         */
+        public $raw_hp;
+
+        /**
+         * Raw ATK.
+         */
+        public $raw_atk;
+
+        /**
+         * Raw DEF.
+         */
+        public $raw_defense;
+
+        /**
+         * HP at max_level.
+         */
+        public $max_lvl_hp;
+
+        /**
+         * ATK at max_level.
+         */
+        public $max_lvl_atk;
+
+        /**
+         * DEF at max_level.
+         */
+        public $max_lvl_defense;
+
+        /**
+         * @{see Monster} it awakens from.
+         */
+        public $awakens_from;
+
+        /**
+         * @{see Monster} it awakens to.
+         */
+        public $awakens_to;
+
+        /**
+         * Indicates if the monster is a fusion ingredient.
+         */
+        public $fusion_food;
+
+        /**
+         * Indicates if the monster is homunculus.
+         */
+        public $homunculus;
+
+        /**
+         * The crafting cost (homunculus only).
+         */
+        public $craft_cost;
+
+        /**
+         * All {@see K_Monster_Skill}s.
+         */
+        public $skill = [];
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * monster, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $id Monster identifier.
+         */
+        public function __construct($db, $id){
+            global $path;
+            parent::__construct($db);
+            $s =
+              "SELECT " .
+              "  id, " .
+              "  com2us_id, " .
+              "  family_id, " .
+              "  name, " .
+              "  element, " .
+              "  archetype, " .
+              "  base_stars, " .
+              "  natural_stars, " .
+              "  obtainable, " .
+              "  can_awaken, " .
+              "  awaken_bonus, " .
+              "  skill_ups_to_max, " .
+              "  leader_skill, " .
+              "  base_hp, " .
+              "  base_attack, " .
+              "  base_defense, " .
+              "  speed, " .
+              "  crit_rate, " .
+              "  crit_damage, " .
+              "  resistance, " .
+              "  accuracy, " .
+              "  raw_hp, " .
+              "  raw_attack, " .
+              "  raw_defense, " .
+              "  max_lvl_hp, " .
+              "  max_lvl_attack, " .
+              "  max_lvl_defense, " .
+              "  awakens_from, " .
+              "  awakens_to, " .
+              "  fusion_food, " .
+              "  homunculus, " .
+              "  craft_cost " .
+              "FROM k_monster " .
+              "WHERE id = $id; ";
+            $q = $this->db->query($s);
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            if ($r){
+                $this->id = $r["id"];
+                $this->com2us_id = $r["com2us_id"];
+                $this->family_id = $r["family_id"];
+                $this->name = $r["name"];
+                $this->element = $r["element"];
+                $this->archetype = $r["archetype"];
+                $this->base_stars = $r["base_stars"];
+                $this->natural_stars = $r["natural_stars"];
+                $this->obtainable = $r["obtainable"];
+                $this->can_awaken = $r["can_awaken"];
+                $this->awaken_bonus = $r["awaken_bonus"];
+                $this->skill_ups_to_max = $r["skill_ups_to_max"];
+                if ($r["leader_skill"]){
+                    $this->leader_skill = new K_Leader_Skill($this->db, $r["leader_skill"]);
+                }
+                $this->base_hp = $r["base_hp"];
+                $this->base_attack = $r["base_attack"];
+                $this->base_defense = $r["base_defense"];
+                $this->speed = $r["speed"];
+                $this->crit_rate = $r["crit_rate"];
+                $this->crit_damage = $r["crit_damage"];
+                $this->resistance = $r["resistance"];
+                $this->accuracy = $r["accuracy"];
+                $this->raw_hp = $r["raw_hp"];
+                $this->raw_attack = $r["raw_attack"];
+                $this->raw_defense = $r["raw_defense"];
+                $this->max_lvl_hp = $r["max_lvl_hp"];
+                $this->max_lvl_attack = $r["max_lvl_attack"];
+                $this->max_lvl_defense = $r["max_lvl_defense"];
+                /*if ($r["awakens_from"]){
+                    $this->awakens_from = new K_Monster($this->db, $r["awakens_from"]);
+                }
+                if ($r["awakens_to"]){
+                    $this->awakens_to = new K_Monster($this->db, $r["awakens_to"]);
+                }*/
+                $this->awakens_from = $r["awakens_from"];
+                $this->awakens_to = $r["awakens_to"];
+                $this->fusion_food = $r["fusion_food"];
+                $this->homunculus = $r["homunculus"];
+                $this->craft_cost = $r["craft_cost"];
+            }
+            $s =
+              "SELECT " .
+              "  skill " .
+              "FROM " .
+              "  k_skill, " .
+              "  k_monster_skill " .
+              "WHERE " .
+              "  id = skill AND " .
+              "  monster = $id " .
+              "ORDER BY slot; ";
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->skill, new K_Skill($this->db, $r["skill"]));
+            }
+        }
+        
+        public function get_image(){
+            global $base_dir;
+            global $path;
+            if (file_exists($base_dir . "img/content/monster/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["content"] . "monster/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            }
+            else{
+                return $path["img"]["layout"] . "unknown.png";
+            }
+        }
+
+        /**
+         * TODO: UNUSED
+         * 
+         * @param $stat Stat name ("ATK", "DEF", "HP", "SPD", "CRR", "CRD", "RES", "ACC").
+         * @return Value of the base stat (floored integer), -1 if wrong stat.
+         */
+        public function get_base_stat($stat){
+            if ($stat == "ATK" || $stat == "DEF" || $stat == "HP" || $stat == "SPD" || $stat == "CRR" || $stat == "CRD" || $stat == "RES" || $stat == "ACC"){
+                $s = 
+                  "SELECT " .
+                  "  min, " .
+                  "  max " .
+                  "FROM k_monster_stat " .
+                  "WHERE " .
+                  "  monster = " . $this->k_monster->id . " AND " .
+                  "  stat = '" . $stat . "' AND " .
+                  "  stars = " . $this->stars . " AND " .
+                  "  awake = " . $this->awakened . ";";
+                $q = $this->db->query($s);
+                if ($q){
+                    $r = $q->fetchArray(SQLITE3_ASSOC);
+                    if ($r){
+                        $min = $r["min"];
+                        $max = $r["max"];
+                        $min_level = 1;
+                        $max_level = 40;
+                        switch ($this->stars){
+                            case 1:
+                                $max_level = 15;
+                                break;
+                            case 2:
+                                $max_level = 20;
+                                break;
+                            case 3:
+                                $max_level = 25;
+                                break;
+                            case 4:
+                                $max_level = 30;
+                                break;
+                            case 5:
+                                $max_level = 35;
+                                break;
+                        }
+                        $base = $min + (($max - $min) * $this->level / $max_level);
+                        return floor($base);
+                    }
+                    else{
+                        return -1;
+                    }
+                }
+                else{
+                    return -1;
+                }
+            }
+            else{
+                return -1;
+            }
+        }
+    }
+?>

application/entity/K_Skill.php

@@ -0,0 +1,157 @@
+<?php
+
+    require_once($path["entity"] . "Entity.php");
+    require_once($path["entity"] . "K_Skill_Level.php");
+    require_once($path["entity"] . "K_Effect.php");
+
+
+    /**
+     * Monster skill.
+     *
+     * Represents an object from the table 'k_skill'.
+     */
+    class K_Skill extends Entity{
+
+        /**
+         * Skill identifier.
+         */
+        public $id;
+
+        /**
+         * Skill official identifier.
+         */
+        public $com2us_id;
+
+        /**
+         * Skill name.
+         */
+        public $name;
+
+        /**
+         * Skill description.
+         */
+        public $description;
+
+        /**
+         * Skill order.
+         */
+        public $slot;
+
+        /**
+         * Skill cooldown turns.
+         */
+        public $cooltime;
+
+        /**
+         * Number of hits.
+         */
+        public $hits;
+
+        /**
+         * Wether the skill is passive or not.
+         */
+        public $passive;
+
+        /**
+         * Wether the skill is AOE.
+         */
+        public $aoe;
+
+        /**
+         * Skill max level.
+         */
+        public $max_level;
+
+        /**
+         * Skill formula.
+         */
+        public $multiplier_formula;
+
+        /**
+         * The {@see Monster_Skill} upgrading this one.
+         */
+        public $upgrade;
+
+        /**
+         * Available {@see K_Skill_Level}
+         */
+        public $level = [];
+
+        /**
+         * Skill {@see K_Effect}s
+         */
+        public $effect = [];
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * skill, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $id Skill identifier.
+         */
+        public function __construct($db, $id){
+            global $path;
+            parent::__construct($db);
+            $s =
+              "SELECT " .
+              "  id, " .
+              "  com2us_id, " .
+              "  name, " .
+              "  description, " .
+              "  slot, " .
+              "  cooltime, " .
+              "  hits, " .
+              "  passive, " .
+              "  aoe, " .
+              "  max_level, " .
+              "  multiplier_formula " .
+              "FROM k_skill " .
+              "WHERE id = $id; ";
+            $q = $this->db->query($s);
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            $this->id = $r["id"];
+            $this->com2us_id = $r["com2us_id"];
+            $this->name = $r["name"];
+            $this->description = $r["description"];
+            $this->slot = $r["slot"];
+            $this->cooltime = $r["cooltime"];
+            $this->hits = $r["hits"];
+            $this->passive = $r["passive"];
+            $this->aoe = $r["aoe"];
+            $this->max_level = $r["max_level"];
+            $this->multiplier_formula = $r["multiplier_formula"];
+            $s =
+              "SELECT " .
+              "  skill, " .
+              "  level " .
+              "FROM k_skill_level " .
+              "WHERE skill = " . $this->id . " " .
+              "ORDER BY level; ";
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->level, new K_Skill_Level($this->db, $r["skill"], $r["level"]));
+            }
+            $s =
+              "SELECT effect " .
+              "FROM k_skill_effect " .
+              "WHERE skill = " . $this->id . "; ";
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->effect, new K_Effect($this->db, $r["effect"]));
+            }
+        }
+        
+        public function get_image(){
+            global $base_dir;
+            global $path;
+            if (file_exists($base_dir . "img/content/skill/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["content"] . "skill/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            }
+            else{
+                return $path["img"]["layout"] . "unknown.png";
+            }
+        }
+    }
+?>

application/entity/K_Skill_Level.php

@@ -0,0 +1,58 @@
+<?php
+
+    require_once($path["entity"] . "Entity.php");
+
+    /**
+     * Monster skill level.
+     *
+     * Represents an object from the table 'k_monster_skill_upgrade'.
+     */
+    class K_Skill_Level extends Entity{
+
+        /**
+         * Skill identifier.
+         */
+        public $skill;
+
+        /**
+         * Skill level.
+         */
+        public $level;
+
+        /**
+         * Upgrade description.
+         */
+        public $description;
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * skill level, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $skill Skill identifier.
+         * @param int $level Skill level.
+         */
+        public function __construct($db, $skill, $level){
+            global $path;
+            parent::__construct($db);
+            $s =
+              "SELECT " .
+              "  skill, " .
+              "  level, " .
+              "  description " .
+              "FROM k_skill_level " .
+              "WHERE " .
+              "  skill = $skill AND " .
+              "  level = $level;";
+            $q = $this->db->query($s);
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            if ($r){
+                $this->skill = $r["skill"];
+                $this->level = $r["level"];
+                $this->description = $r["description"];
+            }
+        }
+    }
+?>

application/entity/Monster.php

@@ -1,8 +1,8 @@
 <?php
 
     require_once($path["entity"] . "Entity.php");
-    require_once($path["entity"] . "Monster_Base.php");
-    require_once($path["entity"] . "Monster_Skill.php");
+    require_once($path["entity"] . "K_Monster.php");
+    require_once($path["entity"] . "Rune.php");
 
 
     /**
@@ -13,54 +13,165 @@
     class Monster extends Entity{
 
         /**
-         * Skill identifier.
+         * Monster identifier.
          */
         public $id;
 
         /**
-         * Monster name.
+         * Monster official identifier.
          */
-        public $name;
+        public $com2us_id;
 
         /**
-         * Monster name (awakened).
+         * {@see K_Monster}.
          */
-        public $name_aw;
+        public $monster;
 
         /**
-         * Monster element.
+         * Monster stars.
          */
-        public $element;
+        public $stars;
 
         /**
-         * Default star level.
+         * Monster level.
          */
-        public $stars;
+        public $level;
+
+        /**
+         * Level of skill 1
+         */
+        public $skill_1_level;
+
+        /**
+         * Level of skill 2
+         */
+        public $skill_2_level;
+
+        /**
+         * Level of skill 3
+         */
+        public $skill_3_level;
+
+        /**
+         * Level of skill 4
+         */
+        public $skill_4_level;
+
+        /**
+         * Monster base HP stat.
+         */
+        public $base_hp;
+
+        /**
+         * Monster base ATK stat.
+         */
+        public $base_attack;
 
         /**
-         * Base monster. {@see Monster_Base}
+         * Monster base DEF stat.
          */
-        public $base;
+        public $base_defense;
 
         /**
-         * Monster image.
+         * Monster base SPD stat.
          */
-        public $image;
+        public $base_speed;
 
         /**
-         * Monster image (awakened).
+         * Monster base CRR stat.
          */
-        public $image_aw;
+        public $base_crit_rate;
 
         /**
-         * All {@see Monster_Skill}
+         * Monster base CRD stat.
          */
-        public $skill = [];
+        public $base_crit_damage;
 
-        /*
-         * Indicates if the monster can be awakened.
+        /**
+         * Monster base RES stat.
+         */
+        public $base_resistance;
+
+        /**
+         * Monster base ACC stat.
+         */
+        public $base_accuracy;
+
+        /**
+         * Monster rune HP stat.
+         */
+        public $rune_hp;
+
+        /**
+         * Monster rune ATK stat.
          */
-        public $awakeable;
+        public $rune_attack;
+
+        /**
+         * Monster rune DEF stat.
+         */
+        public $rune_defense;
+
+        /**
+         * Monster rune SPD stat.
+         */
+        public $rune_speed;
+
+        /**
+         * Monster rune CRR stat.
+         */
+        public $rune_crit_rate;
+
+        /**
+         * Monster rune CRD stat.
+         */
+        public $rune_crit_damage;
+
+        /**
+         * Monster rune RES stat.
+         */
+        public $rune_resistance;
+
+        /**
+         * Monster rune ACC stat.
+         */
+        public $rune_accuracy;
+
+        /**
+         * Average rune efficiency.
+         */
+        public $avg_rune_efficiency;
+
+        /**
+         * Indicates if the monster is fodder.
+         */
+        public $fodder;
+
+        /**
+         * Indicates if the monster is in storage.
+         */
+        public $in_storage;
+
+        /**
+         * Indicates if the monster is ignored in fusion calc.
+         */
+        public $ignore_for_fusion;
+
+        /**
+         * Monster priority.
+         */
+        public $priority;
+
+        /**
+         * Notes on the monster.
+         */
+        public $notes;
+
+        /**
+         * Equiped {@see Rune}s
+         */
+        public $rune = [];
+
 
         /**
          * Constructor.
@@ -77,40 +188,164 @@
             $s =
               "SELECT " .
               "  id, " .
-              "  name, " .
-              "  name_aw, " .
-              "  element, " .
+              "  com2us_id, " .
+              "  monster, " .
               "  stars, " .
-              "  base, " .
-              "  img, " .
-              "  img_aw, " .
-              "  awakeable " .
+              "  level, " .
+              "  skill_1_level, " .
+              "  skill_2_level, " .
+              "  skill_3_level, " .
+              "  skill_4_level, " .
+              "  base_hp, " .
+              "  base_attack, " .
+              "  base_defense, " .
+              "  base_speed, " .
+              "  base_crit_rate, " .
+              "  base_crit_damage, " .
+              "  base_resistance, " .
+              "  base_accuracy, " .
+              "  rune_hp, " .
+              "  rune_attack, " .
+              "  rune_defense, " .
+              "  rune_speed, " .
+              "  rune_crit_rate, " .
+              "  rune_crit_damage, " .
+              "  rune_resistance, " .
+              "  rune_accuracy, " .
+              "  avg_rune_efficiency, " .
+              "  fodder, " .
+              "  in_storage, " .
+              "  ignore_for_fusion, " .
+              "  priority, " .
+              "  notes " .
               "FROM monster " .
-              "WHERE id = $id; ";
+              "WHERE id = '$id'; ";
             $q = $this->db->query($s);
             $r = $q->fetchArray(SQLITE3_ASSOC);
-            if ($r){
-                $this->id = $r["id"];
-                $this->name = $r["name"];
-                $this->name_aw = $r["name_aw"];
-                $this->element = $r["element"];
-                $this->stars = $r["stars"];
-                $this->awakeable = $r["awakeable"];
-                $this->base = new Monster_Base($this->db, $r["base"]);
-                $this->image = $path["img"]["monster"] . $r["img"];
-                $this->image_aw = $path["img"]["monster"] . $r["img_aw"];
+            $this->id = $r["id"];
+            $this->com2us_id = $r["com2us_id"];
+            if (strlen($r["monster"]) > 0){
+                $this->monster = new K_Monster($this->db, $r["monster"]);
             }
+            $this->stars = $r["stars"];
+            $this->level = $r["level"];
+            $this->skill_1_level = $r["skill_1_level"];
+            $this->skill_2_level = $r["skill_2_level"];
+            $this->skill_3_level = $r["skill_3_level"];
+            $this->skill_4_level = $r["skill_4_level"];
+            $this->base_hp = $r["base_hp"];
+            $this->base_attack = $r["base_attack"];
+            $this->base_defense = $r["base_defense"];
+            $this->base_speed = $r["base_speed"];
+            $this->base_crit_rate = $r["base_crit_rate"];
+            $this->base_crit_damage = $r["base_crit_damage"];
+            $this->base_resistance = $r["base_resistance"];
+            $this->base_accuracy = $r["base_accuracy"];
+            $this->rune_hp = $r["rune_hp"];
+            $this->rune_attack = $r["rune_attack"];
+            $this->rune_defense = $r["rune_defense"];
+            $this->rune_speed = $r["rune_speed"];
+            $this->rune_crit_rate = $r["rune_crit_rate"];
+            $this->rune_crit_damage = $r["rune_crit_damage"];
+            $this->rune_resistance = $r["rune_resistance"];
+            $this->rune_accuracy = $r["rune_accuracy"];
+            $this->avg_rune_efficiency = $r["avg_rune_efficiency"];
+            $this->fodder = $r["fodder"];
+            $this->in_storage = $r["in_storage"];
+            $this->ignore_for_fusion = $r["ignore_for_fusion"];
+            $this->priority = $r["priority"];
+            $this->notes = $r["notes"];
             $s =
-              "SELECT " .
-              "  id " .
-              "FROM monster_skill " .
-              "WHERE monster = $id " .
-              "ORDER BY idx; ";
-            error_log($s);
+              "SELECT rune " .
+              "FROM monster_rune " .
+              "WHERE monster = '$this->id'; ";
             $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->skill, new Monster_Skill($this->db, $r["id"]));
+                array_push($this->rune, new Rune($this->db, $r["rune"]));
             }
         }
+
+        /**
+         * TODO: UNUSED
+         * Gets a stat increase from rune monsters.
+         * 
+         * @param $stat Stat name ("ATK", "DEF", "HP", "SPD", "CRR", "CRD", "RES", "ACC").
+         * @return Value of the base stat (floored integer), -1 if wrong stat.
+         */
+        public function get_rune_stat($stat){
+            switch ($stat){
+                case "ATK":
+                    $base = $this->atk;
+                    $name_flat = 'ATK flat';
+                    $name_perc = 'ATK%';
+                    break;
+                case "DEF":
+                    $base = $this->def;
+                    $name_flat = 'DEF flat';
+                    $name_perc = 'DEF%';
+                    break;
+                case "HP":
+                    $base = $this->hp;
+                    $name_flat = 'HP flat';
+                    $name_perc = 'HP%';
+                    break;
+                case "SPD":
+                    $base = $this->hp;
+                    $name_flat = 'SPD';
+                    $name_perc = '-';
+                    break;
+                case "CRR":
+                    $base = $this->crr;
+                    $name_flat = 'CRate';
+                    $name_perc = '-';
+                    break;
+                case "CRD":
+                    $base = $this->crd;
+                    $name_flat = 'CDmg';
+                    $name_perc = '-';
+                    break;
+                case "RES":
+                    $base = $this->res;
+                    $name_flat = 'RES';
+                    $name_perc = '-';
+                    break;
+                case "ACC":
+                    $base = $this->acc;
+                    $name_flat = 'ACC';
+                    $name_perc = '-';
+                    break;
+                default:
+                    return -1;
+            }
+            $s =
+              "SELECT sum(value) AS v FROM ( " .
+              "  SELECT m_v AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND m_t = '" . $name_flat . "' " .
+              "  UNION " .
+              "  SELECT cast(m_v * " . $base . " / 100 AS int) AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND m_t = '" . $name_perc . "' " .
+              "  UNION " .
+              "  SELECT i_v AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND i_t = '" . $name_flat . "' " .
+              "  UNION " .
+              "  SELECT cast(i_v * " . $base . " / 100 AS int) AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND i_t = '" . $name_perc . "' " .
+              "  UNION " .
+              "  SELECT s1_v AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s1_t = '" . $name_flat . "' " .
+              "  UNION " .
+              "  SELECT cast(s1_v * " . $base . " / 100 AS int) AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s1_t = '" . $name_perc . "' " .
+              "  UNION " .
+              "  SELECT s2_v AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s2_t = '" . $name_flat . "' " .
+              "  UNION " .
+              "  SELECT cast(s2_v * " . $base . " / 100 AS int) AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s2_t = '" . $name_perc . "' " .
+              "  UNION " .
+              "  SELECT s3_v AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s3_t = '" . $name_flat . "' " .
+              "  UNION " .
+              "  SELECT cast(s3_v * " . $base . " / 100 AS int) AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s3_t = '" . $name_perc . "' " .
+              "  UNION " .
+              "  SELECT s4_v AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s4_t = '" . $name_flat . "' " .
+              "  UNION " .
+              "  SELECT cast(s4_v * " . $base . " / 100 AS int) AS value FROM rune, monster_rune WHERE rune = id AND monster = " . $this->id . " AND s4_t = '" . $name_perc . "' " .
+              ");";
+            $q = $this->db->query($s);
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            return $r["v"];
+        }
     }
 ?>

application/entity/Monster_Base.php

@@ -1,48 +0,0 @@
-<?php
-
-    require_once($path["entity"] . "Entity.php");
-    
-
-    /**
-     * Monster.
-     *
-     * Represents an object from the table 'monster_base'.
-     */
-    class Monster_Base extends Entity{
-
-        /**
-         * Project identifier.
-         */
-        public $id;
-
-        /**
-         * Monster name.
-         */
-        public $name;
-
-        /**
-         * Constructor.
-         *
-         * Searches the database and retrieves the information about the
-         * base monster, populating it and it's items.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param int $id Base monster identifier.
-         */
-        public function __construct($db, $id){
-            parent::__construct($db);
-            $s =
-              "SELECT " .
-              "  id, " .
-              "  name " .
-              "FROM monster_base " .
-              "WHERE id = $id; ";
-            $q = $this->db->query($s);
-            $r = $q->fetchArray(SQLITE3_ASSOC);
-            if ($r){
-                $this->id = $r["id"];
-                $this->name = $r["name"];
-            }
-        }
-    }
-?>

application/entity/Monster_Collection.php

@@ -1,73 +0,0 @@
-<?php
-
-    require_once($path["entity"] . "Entity.php");
-    require_once($path["entity"] . "Monster.php");
-
-
-    /**
-     * Owned monster.
-     *
-     * Represents an object from the table 'collection'.
-     */
-    class Monster_Collection extends Entity{
-
-        /**
-         * Collection item identifier.
-         */
-        public $id;
-
-        /**
-         * {@see Monster}.
-         */
-        public $monster;
-
-        /**
-         * Stars of the monster.
-         */
-        public $stars;
-
-        /**
-         * Monster level.
-         */
-        public $_level;
-
-        /**
-         * Monster awakened.
-         */
-        public $awaken;
-
-        /**
-         * Constructor.
-         *
-         * Searches the database and retrieves the information about the
-         * owned monster, populating it and it's items.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param int $id Monster id in the collection.
-         */
-        public function __construct($db, $id){
-            global $path;
-            parent::__construct($db);
-            $s =
-              "SELECT " .
-              "  id, " .
-              "  monster, " .
-              "  stars, " .
-              "  level, " .
-              "  awaken " .
-              "FROM monster_collection " .
-              "WHERE id = $id; ";
-            $q = $this->db->query($s);
-            $set = false;
-            $r = $q->fetchArray(SQLITE3_ASSOC);
-            if ($r){
-                $this->id = $r["id"];
-                $this->stars = $r["stars"];
-                $this->level = $r["level"];
-                $this->awaken = $r["awaken"];
-                $this->monster = new Monster($this->db, $r["monster"]);
-            }
-        }
-
-    }
-?>

application/entity/Monster_Skill.php

@@ -1,103 +0,0 @@
-<?php
-
-    require_once($path["entity"] . "Entity.php");
-
-
-    /**
-     * Monster.
-     *
-     * Represents an object from the table 'monster'.
-     */
-    class Monster_Skill extends Entity{
-
-        /**
-         * Skill identifier.
-         */
-        public $id;
-
-        /**
-         * Skill order.
-         */
-        public $idx;
-
-        /**
-         * Skill name.
-         */
-        public $name;
-
-        /**
-         * Skill description.
-         */
-        public $desc;
-
-        /**
-         * Wether the skill is passive or not.
-         */
-        public $pasive;
-
-        /**
-         * Base monster. {@see Monster_Base}
-         */
-        public $awaken;
-
-        /**
-         * Wether the skill is a leader one.
-         */
-        public $leader;
-
-        /**
-         * Skill image.
-         */
-        public $img;
-
-        /**
-         * The {@see Monster_Skill} upgrading this one.
-         */
-        public $upgrade;
-
-        /**
-         * Constructor.
-         *
-         * Searches the database and retrieves the information about the
-         * skill, populating it and it's items.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param int $id Monster identifier.
-         */
-        public function __construct($db, $id){
-            global $path;
-            parent::__construct($db);
-            $s =
-              "SELECT " .
-              "  id, " .
-              "  idx, " .
-              "  name, " .
-              "  desc, " .
-              "  passive, " .
-              "  upgrade, " .
-              "  awaken, " .
-              "  leader, " .
-              "  img, " .
-              "  cooldown " .
-              "FROM monster_skill " .
-              "WHERE id = $id; ";
-            $q = $this->db->query($s);
-            $r = $q->fetchArray(SQLITE3_ASSOC);
-            if ($r){
-                $this->id = $r["id"];
-                $this->idx = $r["idx"];
-                $this->name = $r["name"];
-                $this->desc = $r["desc"];
-                $this->passive = $r["passive"];
-                $this->awaken = $r["awaken"];
-                $this->leader = $r["leader"];
-                $this->img = $path["img"]["skill"] . $r["img"];
-                $this->cooldown = $r["cooldown"];
-                if ($r["upgrade"] != 0){
-                    error_log("UPGRADE: " . $this->id . " -> " . $r["upgrade"]);
-                    $this->upgrade = new Monster_Skill($this->db, $r["upgrade"]);
-                }
-            }
-        }
-    }
-?>

application/entity/Rune.php

@@ -0,0 +1,246 @@
+<?php
+
+    require_once($path["entity"] . "Entity.php");
+
+
+    /**
+     * Owned rune.
+     *
+     * Represents an object from the table 'rune'.
+     */
+    class Rune extends Entity{
+
+        /**
+         * Rune identifier.
+         */
+        public $id;
+
+        /**
+         * Rune official identifier.
+         */
+        public $com2us_id;
+
+        /**
+         * ID of the monster the rune is assigned to.
+         */
+        public $assigned_to;
+
+        /**
+         * Name of the set.
+         */
+        public $type;
+
+        /**
+         * Position of the rune type (1-6).
+         */
+        public $slot;
+
+        /**
+         * Rune stars.
+         */
+        public $stars;
+
+        /**
+         * Level of the rune.
+         */
+        public $level;
+
+        /**
+         * Rune quality.
+         */
+        public $quality;
+
+        /**
+         * Rune original quality.
+         */
+        public $original_quality;
+
+        /**
+         * Price of the rune.
+         */
+        public $value;
+
+        /**
+         * Remaining substats to gain.
+         */
+        public $substat_upgrades_remaining;
+
+        /**
+         * Current efficiency of the rune.
+         */
+        public $efficiency;
+
+        /**
+         * Maximum potential efficiency of the rune.
+         */
+        public $max_efficiency;
+
+        /**
+         * Main stat of the rune.
+         */
+        public $main_stat;
+
+        /**
+         * Main stat value of the rune.
+         */
+        public $main_stat_value;
+
+        /**
+         * Extra stat of the rune.
+         */
+        public $innate_stat;
+
+        /**
+         * Extra stat value of the rune.
+         */
+        public $innate_stat_value;
+
+        /**
+         * Number of substats.
+         */
+        public $substats;
+
+        /**
+         * Substat 1 of the rune.
+         */
+        public $substat_1;
+
+        /**
+         * Substat 1 value of the rune.
+         */
+        public $substat_1_value;
+
+        /**
+         * Ammount gained by the substat 1 enchant.
+         */
+        public $substat_1_craft;
+
+        /**
+         * Substat 2 of the rune.
+         */
+        public $substat_2;
+
+        /**
+         * Substat 2 value of the rune.
+         */
+        public $substat_2_value;
+
+        /**
+         * Ammount gained by the substat 2 enchant.
+         */
+        public $substat_2_craft;
+
+        /**
+         * Substat 3 of the rune.
+         */
+        public $substat_3;
+
+        /**
+         * Substat 3 value of the rune.
+         */
+        public $substat_3_value;
+
+        /**
+         * Ammount gained by the substat 3 enchant.
+         */
+        public $substat_3_craft;
+
+        /**
+         * Substat 4 of the rune.
+         */
+        public $substat_4;
+
+        /**
+         * Substat 4 value of the rune.
+         */
+        public $substat_4_value;
+
+        /**
+         * Ammount gained by the substat 4 enchant.
+         */
+        public $substat_4_craft;
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * rune, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $id Rune id.
+         */
+        public function __construct($db, $id){
+            global $path;
+            parent::__construct($db);
+            $s =
+              "SELECT " .
+              "  id, " .
+              "  com2us_id, " .
+              "  assigned_to, " .
+              "  type, " .
+              "  slot, " .
+              "  stars, " .
+              "  level, " .
+              "  quality, " .
+              "  original_quality, " .
+              "  value, " .
+              "  substat_upgrades_remaining, " .
+              "  efficiency, " .
+              "  max_efficiency, " .
+              "  main_stat, " .
+              "  main_stat_value, " .
+              "  innate_stat, " .
+              "  innate_stat_value, " .
+              "  substat_1, " .
+              "  substat_1_value, " .
+              "  substat_1_craft, " .
+              "  substat_2, " .
+              "  substat_2_value, " .
+              "  substat_2_craft, " .
+              "  substat_3, " .
+              "  substat_3_value, " .
+              "  substat_3_craft, " .
+              "  substat_4, " .
+              "  substat_4_value, " .
+              "  substat_4_craft " .
+              "FROM rune " .
+              "WHERE id = '$id'; ";
+            error_log("RUNE: " . $s);
+            $q = $this->db->query($s);
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            if ($r){
+                $this->id = $r["id"];
+                $this->com2us_id = $r["com2us_id"];
+                $this->assigned_to = $r["assigned_to"];
+                $this->type = $r["type"];
+                $this->slot = $r["slot"];
+                $this->stars = $r["stars"];
+                $this->level = $r["level"];
+                $this->runeset = $r["runeset"];
+                $this->quality = $r["quality"];
+                $this->original_quality = $r["original_quality"];
+                $this->value = $r["value"];
+                $this->substat_upgrades_remaining = $r["substat_upgrades_remaining"];
+                $this->efficiency = $r["efficiency"];
+                $this->max_efficiency = $r["max_efficiency"];
+                $this->main_stat = $r["main_stat"];
+                $this->main_stat_value = $r["main_stat_value"];
+                $this->innate_stat = $r["innate_stat"];
+                $this->innate_stat_value = $r["innate_stat_value"];
+                $this->substat_1 = $r["substat_1"];
+                $this->substat_1_value = $r["substat_1_value"];
+                $this->substat_1_craft = $r["substat_1_craft"];
+                $this->substat_2 = $r["substat_2"];
+                $this->substat_2_value = $r["substat_2_value"];
+                $this->substat_2_craft = $r["substat_2_craft"];
+                $this->substat_3 = $r["substat_3"];
+                $this->substat_3_value = $r["substat_3_value"];
+                $this->substat_3_craft = $r["substat_3_craft"];
+                $this->substat_4 = $r["substat_4"];
+                $this->substat_4_value = $r["substat_4_value"];
+                $this->substat_4_craft = $r["substat_4_craft"];
+            }
+        }
+
+    }
+?>

application/handler/Monster_Collection_Handler.php → application/handler/Collection_Handler.php

@@ -1,13 +1,13 @@
 <?php
 
     require_once($path["handler"] . "Handler.php");
-    require_once($path["entity"] . "Monster_Collection.php");
+    require_once($path["entity"] . "Collection.php");
 
 
     /**
      * Handles the update of a monster in the collection.
      */
-    class Monster_Collection_Handler extends Handler{
+    class Collection_Handler extends Handler{
 
         /**
          * Constructor.
@@ -25,7 +25,7 @@
          *                         inserting.
          */
         public function __construct($db, $id, $mode, $params){
-            parent::__construct($db, new Monster_Collection($db, $id));
+            parent::__construct($db, new Collection($db, $id));
             if (strtoupper($mode{0}) == "I"){
                 $this->insert($params);
             }
@@ -36,14 +36,14 @@
                 $this->update($params);
             }
             else{
-                error_log("Monster_Collection_Handler::__construct : Unknown mode " + $mode);
+                error_log("Collection_Handler::__construct : Unknown mode " + $mode);
                 $this->response = 400;
             }
         }
 
         private function insert($params){
             $s =
-              "INSERT INTO monster_collection (monster, stars, level, awaken) VALUES( " .
+              "INSERT INTO collection (monster, stars, level, awaken) VALUES( " .
                  $params["monster"] . ", " .
                  $params["stars"] . ", " .
                  $params["level"] . ", " .
@@ -53,14 +53,14 @@
                 $this->response = 200;
             }
             else{
-                error_log("Monster_Collection_Handler::insert : Query error for --" + $s + "-- " + mysqli_error($this->db));
+                error_log("Collection_Handler::insert : Query error for --" + $s + "-- " + mysqli_error($this->db));
                 $this->response = 400;
             }
         }
 
         private function delete(){
             $s =
-              "UPDATE monster_collection SET " .
+              "UPDATE collection SET " .
               "  stars = 0, " .
               "  level = 0, " .
               "  awaken = 0 " .
@@ -69,7 +69,7 @@
                 $this->response = 200;
             }
             else{
-                error_log("Monster_Collection_Handler::delete : Query error for --" + $s + "-- " + mysqli_error($this->db));
+                error_log("Collection_Handler::delete : Query error for --" + $s + "-- " + mysqli_error($this->db));
                 $this->response = 400;
             }
         }
@@ -88,7 +88,7 @@
                 $this->entity->awaken = $params["awaken"];
             }
             $s =
-              "UPDATE monster_collection SET " .
+              "UPDATE collection SET " .
               "  monster = " . $this->monster->id . ", " .
               "  stars = " . $this->stars . ", " .
               "  level = " . $this->level . ", " .
@@ -98,7 +98,7 @@
                 $this->response = 200;
             }
             else{
-                error_log("Monster_Collection_Handler::update : Query error for --" + $s + "-- " + mysqli_error($this->db));
+                error_log("Collection_Handler::update : Query error for --" + $s + "-- " + mysqli_error($this->db));
                 $this->response = 400;
             }
         }

application/handler/Handler.php

@@ -1,8 +1,5 @@
 <?php
 
-    require_once($path["handler"] . "Handler.php");
-    require_once($path["entity"] . "Monster_Collection.php");
-
 
     /**
      * Handles the update of a monster in the collection.

application/page/Catalog_Page.php

@@ -1,6 +1,7 @@
 <?php
 
     require_once($path["page"] . "Page.php");
+    require_once($path["entity"] . "K_Monster.php");
 
 
     /**
@@ -9,9 +10,16 @@
     class Catalog_Page extends Page{
 
         /**
-         * List of all monster types.
+         * Array of arrays of monsters, grouped by attribute id.
          */
-        public $types = [];
+	   public $monsters = [];
+	   
+	   public $filters = [
+	       "element" => "",
+	       "name" => "",
+	       "min_stars" => 1,
+	       "max_stars" => 6,
+	   ];
 
         /**
          * Constructor.
@@ -25,18 +33,44 @@
             global $root;
             parent::__construct($db);
             $this->view = $path["view"] . "catalog.php";
-            $s = "SELECT DISTINCT type FROM monster;";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->types, $r["type"]);
+            $this->parse_filters();
+            $s_mon = $this->build_query();
+            $q_mon = $this->db->query($s_mon);
+            while ($r_mon = $q_mon->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->monsters, new K_Monster($db, $r_mon["id"]));
             }
             $this->title = "Catalog - SWDB";
-            $this->name = "SWDB";
             $this->description = "Catalog of all monsters";
-            $this->favicon = "";
-            $this->icon = "";
             $this->canonical = $root . "catalog/";
-            $this->author = $root;
+        }
+        
+        private function parse_filters(){
+            $f_element = strtoupper($_GET["element"]);
+            if ($f_element == "FIRE" || $f_element == "WATER" || $f_element == "WIND" || $f_element == "LIGHT" || $f_element == "DARK"){
+                $this->filters["element"] = $_GET["element"];
+            }
+            if (isset($_GET["name"]) && strlen($_GET["name"]) > 0){
+                $this->filters["name"] = SQLite3::escapeString($_GET["name"]);
+            }
+            if (isset($_GET["min_stars"]) && intval($_GET["min_stars"]) > 0 && intval($_GET["min_stars"]) < 6){
+                $this->filters["min_stars"] = $_GET["min_stars"];
+            }
+            if (isset($_GET["max_stars"]) && intval($_GET["max_stars"]) > 0 && intval($_GET["max_stars"]) < 6){
+                $this->filters["max_stars"] = $_GET["max_stars"];
+            }
+            return;
+        }
+        
+        private function build_query(){
+            $s = "SELECT id FROM k_monster WHERE obtainable = 1 AND awakens_from IS NULL AND natural_stars >= " . $this->filters["min_stars"] . " AND natural_stars <= " . $this->filters["max_stars"];
+            if (strlen($this->filters["element"]) > 0){
+                $s = $s . " AND upper(element) = '" . strtoupper($this->filters["element"]) . "' ";
+            }
+            if ($this->filters["name"] != ""){
+                $s = $s . " AND monster IN (SELECT id FROM k_monster WHERE upper(name) LIKE '%" . strtoupper($this->filters["name"]) . "%') ";
+            }
+            $s = $s . " ORDER BY element, natural_stars;";
+            return $s;
         }
     }
 ?>

application/page/Collection_Page.php

@@ -1,47 +0,0 @@
-<?php
-
-    require_once($path["page"] . "Page.php");
-    require_once($path["entity"] . "Monster_Collection.php");
-
-
-    /**
-     * Collection page model.
-     */
-    class Collection_Page extends Page{
-
-
-        /**
-         * List of all the {@see Monster_base}.
-         */
-        public $base_monster = [];
-
-        /**
-         * 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"] . "collection.php";
-            $s = 
-              "SELECT id " .
-              "FROM monster_base " .
-              "ORDER BY name; ";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->base_monster, new Monster_Base($this->db, $r["id"]));
-            }
-            $this->title = "";
-            $this->name = "";
-            $this->description = "";
-            $this->favicon = "";
-            $this->icon = "";
-            $this->canonical = $root . "collection/";
-            $this->author = $root;
-        }
-    }
-?>

application/page/Fusion_Page.php

@@ -2,7 +2,7 @@
 
     require_once($path["page"] . "Page.php");
     require_once($path["entity"] . "Fusion.php");
-    require_once($path["entity"] . "Monster_Collection.php");
+    require_once($path["entity"] . "Collection.php");
 
 
     /**
@@ -16,7 +16,7 @@
         public $fusion = [];
 
         /**
-         * {@see Monster_Collection} of owned monsters.
+         * {@see Collection} of owned monsters.
          */
         public $collection = [];
 
@@ -40,24 +40,20 @@
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
                 array_push($this->fusion, new Fusion($this->db, $r["target"]));
             }
-            $s = 
+            $s =
               "SELECT id " .
-              "FROM monster_collection " .
+              "FROM collection " .
               "WHERE level <> 0 " .
               "ORDER BY " .
               "  stars DESC, " .
               "  level DESC; ";
             $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->collection, new Monster_Collection($this->db, $r["id"]));
+                array_push($this->collection, new Collection($this->db, $r["id"]));
             }
-            $this->title = "";
-            $this->name = "";
-            $this->description = "";
-            $this->favicon = "";
-            $this->icon = "";
+            $this->title = "Fusion - SWDB";
+            $this->description = "Fusion chart";
             $this->canonical = $root . "fusion/";
-            $this->author = $root;
         }
     }
 ?>

application/page/Home_Page.php

@@ -25,12 +25,8 @@
             parent::__construct($db);
             $this->view = $path["view"] . "home.php";
             $this->title = "SWDB";
-            $this->name = "";
-            $this->description = "";
-            $this->favicon = $path["img"]["layout"] . "logo/logo.svg";
-            $this->icon = $path["img"]["layout"] . "logo/logo.svg";
+            $this->description = "Summoners War DataBase";
             $this->canonical = $root;
-            $this->author = $root;
         }
     }
 ?>

application/page/Monster_Page.php

@@ -0,0 +1,36 @@
+ <?php
+
+    require_once($path["page"] . "Page.php");
+    require_once($path["entity"] . "Monster.php");
+
+
+    /**
+     * Monster view page.
+     */
+    class Monster_Page extends Page{
+
+        /**
+         * Selected @{see Monster}.
+         */
+        public $monsters;
+
+        /**
+         * Constructor.
+         *
+         * Retrieves the data and initializes the variables.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param string $id Monster id
+         */
+        public function __construct($db, $id){
+            global $path;
+            global $root;
+            parent::__construct($db);
+            $this->view = $path["view"] . "monster.php";
+            $this->monster = new Monster($db, $id);
+            $this->title = $this->monster->monster->name ." - SWDB";
+            $this->description = "Owned " . $this->monster->monster->name;
+            $this->canonical = $root . "monster/" . $id;
+        }
+    }
+?>

application/page/Monsters_Page.php

@@ -0,0 +1,90 @@
+ <?php
+
+    require_once($path["page"] . "Page.php");
+    require_once($path["entity"] . "Monster.php");
+
+
+    /**
+     * Monster list page.
+     */
+    class Monsters_Page extends Page{
+
+        /**
+         * Array of @{see Monsters}s.
+         */
+        public $monsters = [];
+
+        public $filters = [
+            "element" => "",
+            "name" => "",
+            "min_stars" => 1,
+            "max_stars" => 6,
+            "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"] . "monsters.php";
+            $this->parse_filters();
+            $s_mon = $this->build_query();
+            $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 = "Monsters - SWDB";
+            $this->description = "Owned monsters";
+            $this->canonical = $root . "monsters/";
+        }
+
+        private function parse_filters(){
+            $f_element = strtoupper($_GET["element"]);
+            if ($f_element == "FIRE" || $f_element == "WATER" || $f_element == "WIND" || $f_element == "LIGHT" || $f_element == "DARK"){
+                $this->filters["element"] = $_GET["element"];
+            }
+            if (isset($_GET["name"]) && strlen($_GET["name"]) > 0){
+                $this->filters["name"] = SQLite3::escapeString($_GET["name"]);
+            }
+            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["in_storage"]) && $_GET["in_storage"] != "on"){
+                $this->filters["in_storage"] = false;
+            }
+            if (isset($_GET["without_runes"]) && $_GET["without_runes"] != "on"){
+                $this->filters["without_runes"] = false;
+            }
+            return;
+        }
+
+        private function build_query(){
+            $s = "SELECT monster.id AS id FROM monster, k_monster WHERE monster.monster = k_monster.id AND stars >= " . $this->filters["min_stars"] . " AND stars <= " . $this->filters["max_stars"];
+            if (strlen($this->filters["element"]) > 0){
+                $s = $s . " AND monster IN (SELECT id FROM k_monster WHERE upper(element) = '" . strtoupper($this->filters["element"]) . "') ";
+            }
+            if ($this->filters["name"] != ""){
+                $s = $s . " AND monster IN (SELECT id FROM k_monster WHERE upper(name) LIKE '%" . strtoupper($this->filters["name"]) . "%') ";
+            }
+            if (!$this->filters["in_storage"]){
+                $s = $s . " AND in_storage = 0 ";
+            }
+            if (!$this->filters["without_runes"]){
+                $s = $s . " AND id IN (SELECT DISTINCT monster FROM monster_rune) ";
+            }
+            $s = $s . " ORDER BY stars DESC, level DESC, element;";
+            return $s;
+        }
+    }
+?>

application/page/Page.php

@@ -59,7 +59,13 @@
          * @param SQLite3 $db Connection to the database.
          */
         public function __construct($db){
+            global $path;
+            global $root;
             $this->db = $db;
+            $this->favicon = $path["img"]["layout"] . "logo/sw.png";
+            $this->icon = $path["img"]["layout"] . "logo/sw.png";
+            $this->name = "SWDB";
+            $this->author = $root;
         }
     }
 ?>

application/page/Runes_Page.php

@@ -0,0 +1,28 @@
+<?php
+
+    require_once($path["page"] . "Page.php");
+
+
+    /**
+     * Runes page model.
+     */
+    class Runes_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"] . "runes.php";
+            $this->title = "Runes - SWDB";
+            $this->description = "Collection of runes";
+            $this->canonical = $root . "runes/";
+        }
+    }
+?>

application/page/frame/Catalog_Catalog_Frame.php

@@ -1,165 +0,0 @@
-<?php
-
-    require_once($path["frame"] . "Frame.php");
-    require_once($path["entity"] . "Monster.php");
-
-
-    /**
-     * Monster catalog page.
-     */
-    class Catalog_Catalog_Frame extends Frame{
-
-        /**
-         * Selected {@see Monster}.
-         */
-        public $monster;
-
-        public $id;
-        public $name;
-        public $name_aw;
-        public $stars;
-        public $awakeable;
-        public $cur_img;
-        public $img;
-        public $img_aw;
-        public $img_star;
-        public $element;
-        public $owned;
-        public $skill;
-        public $stat = [];
-        public $stat_aw = [];
-        public $location = [];
-        public $essence = [];
-
-        /**
-         * Constructor.
-         *
-         * Retrieves the data and initializes the variables.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param Array $params Parameters array, containig at least 'id'.
-         */
-        public function __construct($db, $params){
-            global $path;
-            parent::__construct($db);
-            $this->view = $path["view"] . "frame/catalog.php";
-            $id = $params["id"];
-            $s =
-              "SELECT id, " .
-              "  ( " .
-              "    SELECT count(id) > 0 " .
-              "    FROM monster_collection " .
-              "    WHERE monster = monster.id " .
-              "  ) AS owned " .
-              "FROM monster " .
-              "WHERE id = " . $id . "; ";
-            $q = $this->db->query($s);
-            $r = $q->fetchArray(SQLITE3_ASSOC);
-            if ($r){
-                $this->monster = new Monster($this->db, $r["id"]);
-                $this->id = $id;
-                $this->name = $this->monster->name;
-                $this->name_aw = $this->monster->name_aw;
-                $this->stars = $this->monster->stars;
-                $this->awakeable = $this->monster->awakeable;
-                $this->skill = $this->monster->skill;
-                $this->img = $this->monster->image;
-                $this->img_aw = $this->monster->image_aw;
-                $this->element = $this->monster->element;
-                $this->owned = $r["owned"];
-            }
-            $s = 
-              "SELECT DISTINCT stars " .
-              "FROM monster_stat " .
-              "WHERE monster = " . $id . " " .
-              "ORDER BY stars; ";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                //error_log("    LOOP 1");
-                $st = [
-                    "STARS" => $r["stars"],
-                    "HP" => [
-                        "MIN" => 0,
-                        "MAX" => 0,
-                    ],
-                    "ATK" => [
-                        "MIN" => 0,
-                        "MAX" => 0,
-                    ],
-                    "DEF" => [
-                        "MIN" => 0,
-                        "MAX" => 0,
-                    ],
-                    "SPD" => 0,
-                    "CRID" => 0,
-                    "CRIR" => 0,
-                    "RES" => 0,
-                    "ACC" => 0,
-                ];
-                $ss =
-                  "SELECT * " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = " . $id . " AND " .
-                  "  stars = " . $r["stars"] . " AND " .
-                  "  awake = 0; ";
-                $qq = $this->db->query($ss);
-                while ($rr = $qq->fetchArray(SQLITE3_ASSOC)){
-                    error_log("    LOOP 2");
-                    if ($rr["stat"] == "HP" || $rr["stat"] == "ATK" || $rr["stat"] == "DEF"){
-                        $st[$rr["stat"]]["MAX"] = $rr["max"];
-                        $st[$rr["stat"]]["MIN"] = $rr["min"];
-                    }
-                    else{
-                        $st[$rr["stat"]] = $rr["min"];
-                    }
-                }
-                array_push($this->stat, $st);
-                $ss =
-                  "SELECT * " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = " . $id . " AND " .
-                  "  stars = " . $r["stars"] . " AND " .
-                  "  awake = 1; ";
-                $qq = $this->db->query($ss);
-                $rr = $qq->fetchArray(SQLITE3_ASSOC);
-                while ($rr = $qq->fetchArray(SQLITE3_ASSOC)){
-                    if ($rr["stat"] == "HP" || $rr["stat"] == "ATK" || $rr["stat"] == "DEF"){
-                        $st[$rr["stat"]]["MAX"] = $rr["max"];
-                        $st[$rr["stat"]]["MIN"] = $rr["min"];
-                    }
-                    else{
-                        $st[$rr["stat"]] = $rr["min"];
-                    }
-                }
-                array_push($this->stat_aw, $st);
-            }
-            $s = 
-              "SELECT location " .
-              "FROM monster_location " .
-              "WHERE monster = " . $id . " ";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->location, $r["location"]);
-            }
-            $s = 
-              "SELECT " .
-              "  element, " .
-              "  grade, " .
-              "  num " .
-              "FROM monster_essence " .
-              "WHERE monster = " . $id . " ";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                $e = [
-                  "IMAGE" => $path["img"]["content"] . "essence/" . $r["element"] . "_" . $r["grade"] . ".png",
-                  "ELEMENT" => $r["element"],
-                  "GRADE" => $r["grade"],
-                  "NUM" => $r["num"],
-                ];
-                array_push($this->essence, $e);
-            }
-        }
-    }
-?>

application/page/frame/Catalog_List_Frame.php

@@ -1,91 +0,0 @@
-<?php
-
-    require_once($path["frame"] . "Frame.php");
-
-
-    /**
-     * Catalog's page monster list.
-     */
-    class Catalog_List_Frame extends Frame{
-
-        /**
-         * List of all the monsters in the database.
-         */
-        public $entry = [];
-
-
-        /**
-         * Constructor.
-         *
-         * Retrieves the data and initializes the variables.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param Array $params Parameters array. May contain the 'selected' parameter
-         *                      to mark a monster as selected.
-         */
-        public function __construct($db, $params){
-            global $path;
-            parent::__construct($db);
-            $this->view = $path["view"] . "frame/catalog_list.php";
-
-            $w_name = "1 = 1";
-            $w_type = "1 = 1";
-            $w_element = "1 = 1";
-            $w_min_stars = "1 = 1";
-            $w_max_stars = "1 = 1";
-            if (isset($params["name"])){
-                $w_name = "(name LIKE '%" . $params["name"] . "%' OR name_aw LIKE '%" . $params["name"] . "%')";
-            }
-            if (isset($params["type"])){
-                $w_type = "type = '" . $params["type"] . "'";
-            }
-            if (isset($params["element"])){
-                $w_element = "element = '" . $params["element"] . "'";
-            }
-            if (isset($params["minstars"]) && intval($params["minstars"]) > 0 && intval($params["minstars"]) < 7){
-                $w_min_stars = "stars >= " . $params["minstars"];
-            }
-            if (isset($params["maxstars"]) && intval($params["maxstars"]) > 0 && intval($params["maxstars"]) < 7){
-                $w_max_stars = "stars <= " . $params["maxstars"];
-            }
-            $s =
-              "SELECT id, " .
-              "  element, " .
-              "  name, " .
-              "  img, " .
-              "  img_aw, " .
-              "  stars, " .
-              "  awakeable, " .
-              "  ( " .
-              "    SELECT count(id) > 0 " .
-              "    FROM monster_collection " .
-              "    WHERE monster = monster.id " .
-              "  ) AS owned " .
-              "FROM monster " .
-              "WHERE " .
-              "  $w_name AND " .
-              "  $w_type AND " .
-              "  $w_element AND " .
-              "  $w_min_stars AND " .
-              "  $w_max_stars " .
-              "ORDER BY " .
-              "  element, " .
-              "  stars, " .
-              "  awakeable ";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                $mon = [
-                    "id" => $r["id"],
-                    "element" => $r["element"],
-                    "name" => $r["name"],
-                    "image" => $path["img"]["monster"] . $r["img"],
-                    "image_aw" => $path["img"]["monster"] . $r["img_aw"],
-                    "stars" => $r["stars"],
-                    "awakeable" => $r["awakeable"],
-                    "owned" => $r["owned"],
-                ];
-                array_push($this->entry, $mon);
-            }
-        }
-    }
-?>

application/page/frame/Collection_Collection_Frame.php

@@ -1,51 +0,0 @@
-<?php
-
-    require_once($path["frame"] . "Frame.php");
-    require_once($path["entity"] . "Monster_Collection.php");
-
-
-    /**
-     * Collection's page monster list.
-     */
-    class Collection_Collection_Frame extends Frame{
-
-        /**
-         * {@see Monster_Collection} of owned monsters.
-         */
-        public $collection = [];
-
-        /**
-         * Monster to mark as selected
-         */
-        public $selected = -1;
-
-        /**
-         * Constructor.
-         *
-         * Retrieves the data and initializes the variables.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param Array $params Parameters array. May contain the 'selected' parameter
-         *                      to mark a monster as selected.
-         */
-        public function __construct($db, $params){
-            global $path;
-            parent::__construct($db);
-            $this->view = $path["view"] . "frame/collection.php";
-            if (isset($params["selected"])){
-                $this->selected = $params["selected"];
-            }
-            $s =
-              "SELECT id " .
-              "FROM monster_collection " .
-              "WHERE level <> 0 " .
-              "ORDER BY " .
-              "  stars DESC, " .
-              "  level DESC; ";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->collection, new Monster_Collection($this->db, $r["id"]));
-            }
-        }
-    }
-?>

application/page/frame/Collection_New_Frame.php

@@ -1,55 +0,0 @@
-<?php
-
-    require_once($path["frame"] . "Frame.php");
-    require_once($path["entity"] . "Monster.php");
-
-
-    /**
-     * Collection's page new monster form frame.
-     */
-    class Collection_New_Frame extends Frame{
-
-        public $id;
-        public $img;
-        public $img_aw;
-        public $element;
-
-        /**
-         * Selected {@see Monster}.
-         */
-        public $monster;
-
-        /**
-         * Constructor.
-         *
-         * Retrieves the data and initializes the variables.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param Array $params Parameters array, containig at least 'base'
-         *                      and 'element'.
-         */
-        public function __construct($db, $params){
-            global $path;
-            parent::__construct($db);
-            $this->view = $path["view"] . "frame/new.php";
-            $s = 
-              "SELECT monster.id AS id " .
-              "FROM  " .
-              "  monster, " .
-              "  monster_base " .
-              "WHERE " .
-              "  monster.base = monster_base.id AND " .
-              "  upper(monster_base.name) = '" . strtoupper($params["base"]) . "' AND " .
-              "  monster.element = '" . $params["element"] . "'; ";
-            $q = $this->db->query($s);
-            $r = $q->fetchArray(SQLITE3_ASSOC);
-            if ($r){
-                $this->monster = new Monster($this->db, $r["id"]);
-                $this->id = $r["id"];
-                $this->element = $params["element"];
-                $this->img = $this->monster->image;
-                $this->img_aw = $this->monster->image_aw;
-            }
-        }
-    }
-?>

application/page/frame/Collection_Portrait_Frame.php

@@ -1,201 +0,0 @@
-<?php
-
-    require_once($path["frame"] . "Frame.php");
-    require_once($path["entity"] . "Monster_Collection.php");
-
-
-    /**
-     * Collection page model.
-     */
-    class Collection_Portrait_Frame extends Frame{
-
-        public $id;
-        public $cur_name;
-        public $name;
-        public $name_aw;
-        public $stars;
-        public $default_stars;
-        public $level;
-        public $max_level;
-        public $awaken;
-        public $cur_img;
-        public $img;
-        public $img_aw;
-        public $img_star;
-        public $element;
-        public $owned;
-        public $skill;
-        public $hp = 0;
-        public $atk = 0;
-        public $def = 0;
-        public $spd = 0;
-        public $crir = 0;
-        public $crid = 0;
-        public $res = 0;
-        public $acc = 0;
-
-        /**
-         * Owned {@see Monster_Collection} of owned monsters.
-         */
-        public $collection;
-
-        /**
-         * Constructor.
-         *
-         * Retrieves the data and initializes the variables.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param Array $params Parameters array, containig at least 'id'.
-         */
-        public function __construct($db, $params){
-            global $path;
-            parent::__construct($db);
-            $this->view = $path["view"] . "frame/portrait.php";
-            $id = $params["id"];
-            $s = 
-              "SELECT id " .
-              "FROM monster_collection " .
-              "WHERE id = " . $id . "; ";
-            $q = $this->db->query($s);
-            $r = $q->fetchArray(SQLITE3_ASSOC);
-            if ($r){
-                $this->collection = new Monster_Collection($this->db, $r["id"]);
-                $this->id = $id;
-                $this->name = $this->collection->monster->name;
-                $this->name_aw = $this->collection->monster->name_aw;
-                $this->stars = $this->collection->stars;
-                $this->default_stars = $this->collection->monster->stars;
-                $this->skill = $this->collection->monster->skill;
-                $this->level = $this->collection->level;
-                $this->max_level = 10 + (5 * $this->stars);
-                $this->awaken = $this->collection->awaken;
-                $this->img = $this->collection->monster->image;
-                $this->img_aw = $this->collection->monster->image_aw;
-                $this->element = $this->collection->monster->element;
-                if ($this->level == 0 || $this->stars == 0){
-                    $this->owned = false;
-                }
-                if ($this->awaken == 1){
-                    $this->cur_name = $this->name_aw;
-                    $this->cur_img = $this->img_aw;
-                    $this->img_star = $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                }
-                else{
-                    $this->cur_name = $this->element . " " . $this->name;
-                    $this->cur_img = $this->img;
-                    $this->img_star = $star_src = $path["img"]["layout"] . "icon/star.png";
-                }
-                // Get stats
-                $l = $this->level;
-                $t = $this->stars;
-                $i = $this->collection->monster->id;
-                $w = $this->awaken;
-                $s =
-                  "SELECT min + (((max - min) / ((stars + 2) * 5)) * ($l + $l / ((stars + 2) * 5))) AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'HP'; ";
-                error_log($s);
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->hp = $r["stat"];
-                }
-                $s =
-                  "SELECT min + (((max - min) / ((stars + 2) * 5)) * ($l + $l / ((stars + 2) * 5))) AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'ATK'; ";
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->atk = $r["stat"];
-                }
-                $s =
-                  "SELECT min + (((max - min) / ((stars + 2) * 5)) * ($l + $l / ((stars + 2) * 5))) AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'DEF'; ";
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->def = $r["stat"];
-                }
-                $s =
-                  "SELECT min AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'SPD'; ";
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->spd = $r["stat"];
-                }
-                $s =
-                  "SELECT min AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'CRIR'; ";
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->crir = $r["stat"];
-                }
-                $s =
-                  "SELECT min AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'CRID'; ";
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->crid = $r["stat"];
-                }
-                $s =
-                  "SELECT min AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'RES'; ";
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->res = $r["stat"];
-                }
-                $s =
-                  "SELECT min AS stat " .
-                  "FROM monster_stat " .
-                  "WHERE " .
-                  "  monster = $i AND " .
-                  "  stars = $t AND " .
-                  "  awake = $w AND " .
-                  "  stat = 'ACC'; ";
-                $q = $this->db->query($s);
-                $r = $q->fetchArray(SQLITE3_ASSOC);
-                if ($r){
-                    $this->acc = $r["stat"];
-                }
-            }
-        }
-    }
-?>

application/page/frame/Frame.php

@@ -1,31 +0,0 @@
-<?php
-
-
-    /**
-     * Frame superclass.
-     *
-     * Every dinamicaly loaded section must inherit from this one.
-     */
-    abstract class Frame{
-
-        /**
-         * Database connection.
-         */
-        public $db;
-
-        /**
-         * View associated with the page.
-         */
-        public $view;
-
-
-        /**
-         * Constructor.
-         *
-         * @param SQLite3 $db Connection to the database.
-         */
-        public function __construct($db){
-            $this->db = $db;
-        }
-    }
-?>

application/view/catalog.php

@@ -2,7 +2,6 @@
 <html lang='en'>
     <head>
         <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
-        <meta charset='utf-8'/>
         <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?>'/>
@@ -10,8 +9,7 @@
         <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
         <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>catalog.css'/>
         <!-- Script files -->
-        <script type="text/javascript" src="<?=$path["js"]?>ui.js"></script>
-        <script type="text/javascript" src="<?=$path["js"]?>catalog.js"></script>
+        <script src="<?=$path["js"]?>ui.js"></script>
         <!-- Meta tags -->
         <link rel='canonical' href='<?=$page->canonical?>'/>
         <link rel='author' href='<?=$page->author?>'/>
@@ -31,71 +29,102 @@
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
     </head>
-    <body onLoad='loadCatalog();'>
+    <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <div id='content'>
-            <div class='section'>
-                <h3 class='section_title'>
-                    Monster catalog
-                </h3>
-                <div id='filters'>
+            <section id='filters'>
+                <form action='/catalog/' method='get'>
                     <div class='filter'>
-                        Element:
+                        <span>Element:</span>
                         <br/>
-                        <select id='filter_element'>
-                            <option value=''>All</option>
-                            <option value='Fire'>Fire</option>
-                            <option value='Water'>Water</option>
-                            <option value='Wind'>Wind</option>
-                            <option value='Light'>Light</option>
-                            <option value='Dark'>Dark</option>
-                        </select>
-                    </div>
-                    <div class='filter'>
-                        Type:
-                        <br/>
-                        <select id='filter_type'>
-                            <option value=''>All</option>
-<?php
-                            foreach ($page->types as $t){
-?>
-                                <option value='<?=$t?>'><?=$t?></option>
 <?php
-                            }
+                        $fire_selected = "";
+                        $water_selected = "";
+                        $wind_selected = "";
+                        $light_selected = "";
+                        $dark_selected = "";
+                        switch (strtoupper($page->filters["element"])){
+                            case "FIRE":
+                                $fire_selected = "selected='selected'";
+                                break;
+                            case "WATER":
+                                $water_selected = "selected='selected'";
+                                break;
+                            case "WIND":
+                                $wind_selected = "selected='selected'";
+                                break;
+                            case "LIGHT":
+                                $light_selected = "selected='selected'";
+                                break;
+                            case "DARK":
+                                $dark_selected = "selected='selected'";
+                                break;
+                        }
 ?>
+                        <select name='element' id='filter_type'>
+                            <option value=''>All</option>
+                            <option value='Fire' <?=$fire_selected?>>Fire</option>
+                            <option value='Water' <?=$water_selected?>>Water</option>
+                            <option value='Wind' <?=$wind_selected?>>Wind</option>
+                            <option value='Light' <?=$light_selected?>>Light</option>
+                            <option value='Dark' <?=$dark_selected?>>Dark</option>
                         </select>
-                    </div>
                     <div class='filter'>
-                        Name:
+                        <span>Name:</span>
                         <br/>
-                        <input type='text' id='filter_name'/>
+                        <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
                     </div>
                     <div class='filter' id='filter_stars'>
-                        Min. stars:
-                        <input type='number' id='filter_stars_min' min='1' max='6' value='1'/>
+                        <span>Min. stars:</span>
+                        <input type='number' name='min_stars' id='filter_stars_min' min='1' max='5' value='<?=$page->filters["min_stars"]?>'/>
                         <br/>
-                        Max. stars:
-                        <input type='number' id='filter_stars_max' min='1' max='6' value='6'/>
+                        <span>Max. stars:</span>
+                        <input type='number' name='max_stars' id='filter_stars_max' min='1' max='5' value='<?=$page->filters["max_stars"]?>'/>
                     </div>
                     <div id='filter_apply'>
-                        <input type='button' value='Apply' onClick='loadCatalog();'>
+                        <input type='submit' value='Apply'/>
                     </div>
-                </div>
-                <div id='catalog'>
-                    <img class='loader' alt='Loading...' src='<?$path["img"]["layout"]?>control/loader.png'/>
-                </div> <!-- #catalog -->
-            </div> <!-- .section -->
-        </div> <!-- .content -->
-        <div id='cover'></div>
-        <div id='viewer' class='section'>
-            <div id='viewer_wait'>
-                Loading...
-            </div>
-            <div id='viewer_info'>
-            </div>
-        </div> <!-- #new -->
+                </form>
+            </section> <!-- #filters -->
+            <section id='catalog'>
+            	<article>
+<?php
+                    foreach ($page->monsters as $mon){
+?>
+                    
+<?php
+                        if (strlen($mon->awakens_to) == 0){
+                            // No to, no from, silver monster.
+                            $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                            $mon_title = $mon->element . " " . $mon->name;
+                        }
+                        else{
+                            // Awakeable.
+                            $star_src = $path["img"]["layout"] . "icon/star.png";
+                            $mon_title = $mon->element . " " . $mon->name;
+                        }
+?>
+                        <div class='monster'>
+                            <a href='/monster_info/<?=$mon->id?>'>
+                                <span class='stars'>
+<?php
+                                    for ($i = 0; $i < $mon->natural_stars; $i ++){
+?>
+                                        <img class='star' src='<?=$star_src?>'/>
+<?php
+                                    }
+?>
+                                </span>
+                                <img title='<?=$mon_title?>' class='monster border_<?=$mon->element?>' src='<?=$mon->get_image()?>'/>
+                            </a>
+                        </div>
+<?php
+                    }
+?>
+				</article>
+            </section> <!-- #catalog -->
+
 <?php
         include __DIR__ . "/inc/footer.php";
 ?>

application/view/collection.php

@@ -1,127 +0,0 @@
-<!DOCTYPE html>
-<html lang='en'>
-    <head>
-        <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
-        <meta charset='utf-8'/>
-        <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"]?>collection.css'/>
-        <!-- Script files -->
-        <script type="text/javascript" src="<?=$path["js"]?>ui.js"></script>
-        <script type="text/javascript" src="<?=$path["js"]?>collection.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 onLoad='loadCollection(null);'>
-<?php
-        include __DIR__ . "/inc/header.php";
-?>
-        <div id='content'>
-            <div class='section'>
-                <h3 class='section_title'>
-                    Monster collection
-                </h3>
-                <input type='button' onClick='showNew(true);' value='New monster'>
-                <br/>
-                <div id='collection' class='h_scroll'>
-                </div> <!-- #collection -->
-                <div id='portrait_container'>
-                </div> <!-- #portrait_container -->
-            </div> <!-- .section -->
-        </div> <!-- .content -->
-        <div id='cover'></div>
-        <div id='new' class='section'>
-            <h3 class='section_title'>
-                New Monster
-            </h3>
-            <table id='new_table'>
-                <tr>
-                    <td class='left'>
-                        Type:
-                    </td>
-                    <td class='right'>
-                        <input type='text' id='new_base' list='base_list' onChange='getMonsterId(this.value, document.getElementById("new_element").value);'/>
-                        <datalist id='base_list'>
-<?php
-                        foreach($page->base_monster as $base){
-?>
-                            <option value="<?=$base->name?>"><?=$base->name?></option>
-<?php
-                        }
-?>
-                        </datalist>
-                    </td>
-                <tr>
-                </tr>
-                    <td class='left'>
-                        Element:
-                    </td>
-                    <td class='right'>
-                        <select type="text" id="new_element" onChange='getMonsterId(document.getElementById("new_base").value, this.value);'>
-                            <option value="Fire">Fire</option>
-                            <option value="Water">Water</option>
-                            <option value="Wind">Wind</option>
-                            <option value="Dark">Dark</option>
-                            <option value="Light">Light</option>
-                        </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan='2' class='center'>
-                        <span id='new_frame'>
-                            <input type='hidden' id='new_monster' value=''/>
-                        </span>
-                    </td>
-                </tr>
-                <tr>
-                    <td class='left'>
-                        Stars:
-                    </td>
-                    <td class='right'>
-                        <input id='new_stars' value='3' type='number' min='1' max='6'/>
-                    </td>
-                </tr>
-                <tr>
-                    <td class='left'>
-                        Level:
-                    </td>
-                    <td class='right'>
-                        <input id='new_level' value='1' type='number' min='1' max='40'/>
-                    </td>
-                </tr>
-                <tr>
-                    <td class='left'>
-                        Awakened:
-                    </td>
-                    <td class='right'>
-                        <input id='new_awaken' type='checkbox'/>
-                    </td>
-                </tr>
-            </table>
-            <input type='button' value='Save' onClick='addMonster();'/>
-            <input type='button' value='Cancel' onClick='showNew(false);'/>
-        </div> <!-- #new -->
-<?php
-        include __DIR__ . "/inc/footer.php";
-?>
-    </body>
-</html>

application/view/frame/catalog.php

@@ -1,305 +0,0 @@
-<div id='monster'>
-    <a class='control_close' href='javascript:selectMonster(null);'>
-        <img src='<?=$path["img"]["layout"]?>control/close.svg' />
-    </a>
-    <input type='hidden' id='selected_id' value='<?=$page->id?>'/>
-    <table id='monster_header'>
-        <tr>
-            <td>
-<?php
-                if ($page->awakeable == 0 || $page->awakeable == 1){
-?>
-                    <img id='monster_img' class='monster_img border_<?=$page->element?>' src='<?=$page->img?>'/>
-<?php
-                }
-                if ($page->awakeable == 1 || $page->awakeable == 2){
-?>
-                    <img id='monster_img_aw' class='monster_img border_<?=$page->element?>' src='<?=$page->img_aw?>'/>
-<?php
-                }
-?>
-            <td/>
-            <td>
-                <h3 id='section-title'>
-                    <span id='name'><?=$page->element?> <?=$page->name?></span>&nbsp;&nbsp;&nbsp;<span class='color_<?=$page->element?>'><?=$page->name_aw?></span>
-                </h3>
-                <div id='monster_stars'>
-<?php
-                    $star_src = $path["img"]["layout"] . "icon/star.png";
-                    if ($page->awakeable == 0){
-                        $star_src = $path["img"]["layout"] . "icon/star_silver.png";
-                    }
-                    elseif ($page->awakeable == 2){
-                        $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                    }
-                    for ($i = 1; $i <= $page->stars; $i++){
-?>
-                        <img class='monster_star' src='<?=$star_src?>'/>
-<?php
-                    }
-?>
-                </div> <!-- #monster_stars -->
-            </td>
-        </tr>
-    </table>
-    <table id='monster_skills'>
-        <tr>
-<?php
-            foreach ($page->skill as $skill){
-                $skill_awaken = "";
-                $skill_leader = "";
-                if ($skill->awaken == 1){
-                    $skill_awaken = "skill_awaken";
-                }
-                if ($skill->leader == 1){
-                    $skill_leader = 'skill_leader';
-                }
-?>
-                <td>
-                    <span class='skill_image'>
-                        <img class='skill_image <?=$skill_awaken?> <?=$skill_leader?>' src='<?=$skill->img?>' alt=''/>
-                        <span class='skill_tooltip'>
-                            <img class='skill_tooltip_image <?=$skill_awaken?> <?=$skill_leader?>' src='<?=$skill->img?>' alt=''/>
-                            <span class='skill_tooltip_title'><?=$skill->name?></span>
-                            <br/>
-                            <?=$skill->desc?>
-                        </span>
-                    </span>
-<?php
-                    if (isset($skill->upgrade)){
-?>
-                        <span class='skill_image skill_image_upgrade'>
-                            <img class='skill_image skill_awaken' src='<?=$skill->upgrade->img?>' alt=''/>
-                            <span class='skill_tooltip'>
-                                <img class='skill_tooltip_image skill_awaken' src='<?=$skill->upgrade->img?>' alt=''/>
-                                <span class='skill_tooltip_title'><?=$skill->upgrade->name?></span>
-                                <br/>
-                                <?=$skill->upgrade->desc?>
-                            </span>
-                        </span>
-<?php
-                    }
-?>
-                    <span class='skill_name <?=$skill_awaken?> <?=$skill_leader?>'><?=$skill->name?></span>
-                </td>
-<?php
-            }
-?>
-        </tr>
-    </table>
-    <table id='monster_stats'>
-        <tr id='stats_header_names'>
-            <th>
-                Stars
-            </th>
-            <th colspan='2'>
-                Health
-            </th>
-            <th colspan='2'>
-                Attack
-            </th>
-            <th colspan='2'>
-                Defense
-            </th>
-            <th>
-                Critical damage
-            </th>
-            <th>
-                Critical rate
-            </th>
-            <th>
-                Resistance
-            </th>
-            <th>
-                Accuracy
-            </th>
-        </tr>
-        <tr id='stats_header_ranges'>
-            <th>
-            </th>
-            <th>
-                Lv. 1
-            </th>
-            <th>
-                Lv. MAX
-            </th>
-            <th>
-                Lv. 1
-            </th>
-            <th>
-                Lv. MAX
-            </th>
-            <th>
-                Lv. 1
-            </th>
-            <th>
-                Lv. MAX
-            </th>
-            <th>
-            </th>
-            <th>
-            </th>
-            <th>
-            </th>
-            <th>
-            </th>
-        </tr>
-<?php
-        $w = 0;
-        $even = 0;
-        foreach ($page->stat as $stat){
-?>
-            <tr>
-                <td class='even<?=(($even ++) % 2)?>'>
-<?php
-                    for ($i = 1; $i <= $stat["STARS"]; $i ++){
-?>
-                        <img class='star' src='<?=($path["img"]["layout"] . "icon/star.png")?>'/>
-<?php
-                    }
-?>
-                    <?=$sts?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["HP"]["MIN"]?></span>
-<?php
-                    if (isset($page->stat_aw[$w]["HP"]["MIN"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["HP"]["MIN"]?></span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["HP"]["MAX"]?></span>
-<?php
-                    if (isset($page->stat_aw[$w]["HP"]["MAX"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["HP"]["MAX"]?></span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["ATK"]["MIN"]?></span>
-<?php
-                    if (isset($page->stat_aw["ATK"]["MIN"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["ATK"]["MIN"]?></span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["ATK"]["MAX"]?></span>
-<?php
-                    if (isset($page->stat_aw["ATK"]["MAX"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["ATK"]["MAX"]?></span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["DEF"]["MIN"]?></span>
-<?php
-                    if (isset($page->stat_aw[$w]["DEF"]["MIN"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["DEF"]["MIN"]?></span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["DEF"]["MAX"]?></span>
-<?php
-                    if (isset($page->stat_aw[$w]["DEF"]["MAX"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["DEF"]["MAX"]?></span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["CRID"]?>%</span>
-<?php
-                    if (isset($page->stat_aw[$w]["CRID"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["CRID"]?>%</span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["CRIR"]?>%</span>
-<?php
-                    if (isset($page->stat_aw[$w]["CRIR"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["CRIR"]?>%</span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["RES"]?>%</span>
-<?php
-                    if (isset($page->stat_aw[$w]["RES"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["RES"]?>%</span>
-<?php
-                    }
-?>
-                </td>
-                <td class='even<?=(($even ++) % 2)?>'>
-                    <span class='stat'><?=$stat["ACC"]?>%</span>
-<?php
-                    if (isset($page->stat_aw[$w]["ACC"])){
-?>
-                        <span class='stat awake'><?=$page->stat_aw[$w]["ACC"]?>%</span>
-<?php
-                    }
-?>
-                </td>
-            </tr>
-<?php
-            $w ++;
-        }
-?>
-    </table> <!-- #monster_stats -->
-<?php
-    if (count($page->location) > 0){
-        $location = "Obtainable in ";
-        foreach ($page->location as $loc){
-            $location = $location . $loc . ", ";
-        }
-        $location = rtrim($location, ", ");
-?>
-        <div id='monster_location'>
-            <?=$location?>
-        </div>
-<?php
-    }
-?>
-<?php
-    if (count($page->essence) > 0){
-?>
-        <div id='monster_awake'>
-            <table>
-                <tr>
-<?php
-                    foreach ($page->essence as $e){
-?>
-                        <td class='essence'>
-                            <img src='<?=$e["IMAGE"]?>' class='border_<?=$e["ELEMENT"]?>'/>
-                            <span>x<?=$e["NUM"]?></span>
-                        </td>
-<?php
-                    }
-?>
-                </tr>
-            </table>
-        </div>
-<?php
-    }
-?>
-</div> <!-- #monster -->

application/view/frame/catalog_list.php

@@ -1,33 +0,0 @@
-<?php
-    foreach ($page->entry as $mon){
-        $star_src = $path["img"]["layout"] . "icon/star.png";
-        $monster_src = $monster_src = $mon["image"];
-        if ($mon["awakeable"] == 0){
-            $star_src = $path["img"]["layout"] . "icon/star_silver.png";
-        }
-        elseif ($mon["awakeable"] == 2){
-            $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-            $monster_src = $mon["image_aw"];
-        }
-        $unowned = "";
-        if ($mon["owned"] == 0){
-            $unowneds = "unowned";
-        }
-?>
-        <div class='monster <?=$unowned?>'>
-            <a href='javascript:selectMonster(<?=$mon["id"]?>);'>
-                <span class='stars'>
-<?php
-                    for ($i = 0; $i < $mon["stars"]; $i ++){
-?>
-                        <img class='star' src='<?=$star_src?>'/>
-<?php
-                    }
-?>
-                </span>
-                <img class='monster border_<?=$mon["element"]?>' src='<?=$monster_src?>'/>
-            </a>
-        </div>
-<?php
-    }
-?>

application/view/frame/collection.php

@@ -1,29 +0,0 @@
-<?php
-    foreach ($page->collection as $collection){
-        $monster_src = $collection->monster->image;
-        $star_src = $path["img"]["layout"] . "icon/star.png";
-        if ($collection->awaken == 1){
-            $monster_src = $collection->monster->image_aw;
-            $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-        }
-?>
-        <div class='monster'>
-            <a href='javascript:selectMonster(<?=$collection->id?>);'>
-                <span class='stars'>
-<?php
-                    for ($i = 0; $i < $collection->stars; $i ++){
-?>
-                        <img class='star' src='<?=$star_src?>'/>
-<?php
-                    }
-?>
-                </span>
-                <img class='monster border_<?=$collection->monster->element?>' src='<?=$monster_src?>'/>
-                <span class='level'>
-                    Lv. <?=$collection->level?>
-                </span>
-            </a>
-        </div>
-<?php
-    } // foreach ($page->fusion as $fusion)
-?>

application/view/frame/new.php

@@ -1,3 +0,0 @@
-<input type='hidden' id='new_monster' value='<?=$page->id?>'/>
-<img class='new_img border_<?=$page->element?>' src='<?=$page->img?>'/>
-<img class='new_img desktop border_<?=$page->element?>' src='<?=$page->img_aw?>'/>

application/view/frame/portrait.php

@@ -1,134 +0,0 @@
-<div id='portrait'>
-    <input type='hidden' id='selected_id' value='<?=$page->id?>'/>
-    <img id='portrait_img' class='border_<?=$page->element?>' src='<?=$page->cur_img?>'/>
-    <h4 id='portrait_title' class='color_<?=$page->element?>'>
-        <?=$page->cur_name?>
-    </h4>
-    <div id='portrait_default_stars'>
-<?php
-        for ($i = 0; $i < $page->collection->monster->stars; $i++){
-?>
-            <img class='portrait_star' src='<?=($path["img"]["layout"] . "icon/star.png")?>'/>
-<?php
-        }
-?>
-    </div> <!-- #default_stars -->
-    <div id='portrait_current_stars'>
-<?php
-        if ($page->awaken == 1){
-            $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-        }
-        else{
-            $star_src = $path["img"]["layout"] . "icon/star.png";
-        }
-        for ($i = 1; $i < 7; $i++){
-            $translucent = "";
-            if ($i > $page->stars){
-                $translucent = "portrait_star_translucent";
-            }
-?>
-            <img class='portrait_star <?=$translucent?>' src='<?=$star_src?>'/>
-<?php
-        }
-?>
-    </div> <!-- #current_stars -->
-    <table id='portrait_stats'>
-        <tr>
-            <td class='name'>Health</td>
-            <td class='value'><?=$page->hp?></td>
-            <td class='name'>Speed</td>
-            <td class='value'><?=$page->spd?></td>
-        </tr>
-        <tr>
-            <td class='name'>Attack</td>
-            <td class='value'><?=$page->atk?></td>
-            <td class='name'>Defense</td>
-            <td class='value'><?=$page->def?></td>
-        </tr>
-        <tr>
-            <td class='name'>Critical damage</td>
-            <td class='value'><?=$page->crid?>%</td>
-            <td class='name'>Critical rate</td>
-            <td class='value'><?=$page->crir?>%</td>
-        </tr>
-        <tr>
-            <td class='name'>Resistance</td>
-            <td class='value'><?=$page->res?>%</td>
-            <td class='name'>Accuracy</td>
-            <td class='value'><?=$page->acc?>%</td>
-        </tr>
-    </table> <!-- #portrait_skills -->
-    <table id='portrait_skills'>
-        <tr>
-<?php
-            foreach ($page->skill as $s){
-                if (isset($s->upgrade) && $page->awaken == 1){
-                    $skill = $s->upgrade;
-                }
-                else{
-                    $skill = $s;
-                }
-                $skill_awaken = "";
-                $skill_leader = "";
-                if ($page->awaken == 1 && $skill->awaken == 1){
-                    $skill_awaken = "skill_awaken";
-                }
-                elseif ($page->awaken == 0 && $skill->awaken == 1){
-                    $skill_awaken = "skill_disabled";
-                }
-                if ($skill->leader == 1){
-                    $skill_leader = 'skill_leader';
-                }
-?>
-                <td>
-                    <span class='skill_image'>
-                        <img class='skill_image <?=$skill_awaken?> <?=$skill_leader?>' src='<?=$skill->img?>' alt=''/>
-                        <span class='skill_tooltip'>
-                            <img class='skill_tooltip_image <?=$skill_awaken?> <?=$skill_leader?>' src='<?=$skill->img?>' alt=''/>
-                            <span class='skill_tooltip_title'><?=$skill->name?></span>
-                            <br/>
-                            <?=$skill->desc?>
-                        </span>
-                    </span>
-                    <span class='skill_name <?=$skill_awaken?> <?=$skill_leader?>'><?=$skill->name?></span>
-                </td>
-<?php
-            }
-?>
-        </tr>
-    </table>
-    <hr id='portrait_separator'>
-    <table id='portrait_table'>
-        <tr>
-            <td class='left'>
-                Stars:
-            </td>
-            <td class='right'>
-                <input id='v_stars' value='<?=$page->stars?>' type='number' min='1' max='6' onChange='selectMaxLevel(this.value); updateMonster(document.getElementById("selected_id").value, "stars", this.value);'/>
-            </td>
-        <tr>
-        </tr>
-            <td class='left'>
-                Level:
-            </td>
-            <td class='right'>
-                <input id='v_level' value='<?=$page->level?>' type='number' min='1' max='<?=$page->max_level?>' onChange='updateMonster(document.getElementById("selected_id").value, "level", this.value);'/>
-            </td>
-        </tr>
-        <tr>
-            <td class='left'>
-                Awakened:
-            </td>
-            <td class='right'>
-<?php
-                $checked = "";
-                if ($page->awaken == 1){
-                    $checked = "checked";
-                }
-?>
-                <input id='v_awaken' type='checkbox' <?=$checked?> onChange='updateMonster(document.getElementById("selected_id").value, "awaken", this.checked);'/>
-            </td>
-        </tr>
-    </table>
-    <input type='button' onClick='removeMonster(document.getElementById("selected_id").value);' value='Delete monster'/>
-</div> <!-- #portrait -->

application/view/fusion.php

@@ -2,7 +2,6 @@
 <html lang='en'>
     <head>
         <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
-        <meta charset='utf-8'/>
         <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?>'/>
@@ -10,7 +9,7 @@
         <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
         <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>fusion.css'/>
         <!-- Script files -->
-        <script type="text/javascript" src="<?=$path["js"]?>ui.js"></script>
+        <script src="<?=$path["js"]?>ui.js"></script>
         <!-- Meta tags -->
         <link rel='canonical' href='<?=$page->canonical?>'/>
         <link rel='author' href='<?=$page->author?>'/>
@@ -41,181 +40,213 @@
                 </h3>
 <?php
                 foreach ($page->fusion as $fusion){
+                    if ($fusion->target_stars == 5){
 ?>
-                    <table class='fusion level_1'>
-                        <tr>
-                            <td class='level_1'>
-                                <h4 class='name_aw color_<?=$fusion->target->element?>'><?=$fusion->target->name_aw?></h4>
-                                <h5 class='name italic'><?=$fusion->target->element?> <?=$fusion->target->name?></h5>
-                                <img class='monster border_<?=$fusion->target->element?> desktop' src='<?=$fusion->target->image?>'/>
-                                <img class='monster border_<?=$fusion->target->element?>' src='<?=$fusion->target->image_aw?>'/>
-                                <br/>
+                        <div class='fusion'>
+                            <div class='target'>
+                                <div class='monster lv1'>
+                                    <span class='stars'>
 <?php
-                                    for ($i = 0; $i < $fusion->target_stars; $i ++){
+                                        for ($i = 0; $i < $fusion->target_stars; $i ++){
 ?>
-                                        <img class='monster_star' src='<?=$path["img"]["layout"] . "icon/star.png";?>'/>
+                                            <img class='star' src='<?=$path["img"]["layout"] . "icon/star.png"?>' alt='*'/>
 <?php
-                                    }
+                                        }
 ?>
-                            </td>
-                            <td>
+                                    </span>
+                                    <img class='monster border_<?=$fusion->target->element?>' src='<?=$fusion->target->image?>' alt='<?=$fusion->target->element?> <?=$fusion->target->name?>'/>
+                                    <span class='level'>
+                                        Lv. 1
+                                    </span>
+                                </div> <!-- .monster -->
+                                <div class='monster_details lv1'>
+                                    <h5 class='name italic color_<?=$fusion->target->element?>'><?=$fusion->target->element?> <?=$fusion->target->name?></h5>
 <?php
-                                foreach ($fusion->source as $source){
+                                    $owned = null;
+                                    foreach ($page->collection as $col){
+                                        if ($col->monster->id == $fusion->target->id){
+                                            $owned = $col;
+                                        }
+                                    }
+                                    if (isset($owned)){
+                                        $owned_src = $owned->monster->image;
+                                        $star_src = $path["img"]["layout"] . "icon/star.png";
+                                        $owned_alt = $owned->monster->element . " " . $owned->monster->name;
+                                        if ($owned->awaken == 1){
+                                            $owned_src = $owned->monster->image_aw;
+                                            $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                                            $owned_alt = $owned->monster->name_aw;
+                                        }
 ?>
-                                    <table class='fusion level_2'>
-                                        <tr>
-                                            <td>
-                                                <h4 class='name_aw color_<?=$source->element?>'><?=$source->name_aw?></h4>
-                                                <h5 class='name italic'><?=$source->element?> <?=$source->name?></h5>
-                                                <img class='monster border_<?=$source->element?> desktop' src='<?=$source->image?>'/>
-                                                <img class='monster border_<?=$source->element?>' src='<?=$source->image_aw?>'/>
-                                                <br/>
+                                        <hr class='owned_separator'/>
+                                        <div class='monster_owned lv1'>
+                                            <span class='stars'>
 <?php
-                                                for ($i = 0; $i < $fusion->source_stars; $i ++){
+                                                for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                    <img class='monster_star' src='<?=$path["img"]["layout"] . "icon/star_aw.png";?>'/>
+                                                    <img class='star' src='<?=$star_src?>' alt='*'/>
 <?php
                                                 }
 ?>
-                                                <span class='monster_level'>Lv. <?=$fusion->source_level?></span>
+                                            </span>
+                                            <img class='monster border_<?=$owned->monster->element?>' src='<?=$owned_src?>' alt='<?=$owned_alt?>'/>
+                                            <span class='level'>
+                                                Lv. <?=$owned->level?>
+                                            </span>
+                                        </div> <!-- .monster_owned.lv1-->
 <?php
-                                                $owned = null;
-                                                foreach ($page->collection as $col){
-                                                    if ($col->monster->id == $source->id){
-                                                        $owned = $col;
-                                                    }
-                                                }
-                                                if (isset($owned)){
-                                                    $owned_src = $owned->monster->image;
-                                                    $star_src = $path["img"]["layout"] . "icon/star.png";
-                                                    if ($owned->awake == 1){
-                                                        $owned_src = $owned->monster->image_aw;
-                                                        $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                                                    }
+                                    }
 ?>
-                                                    <hr class='owned_separator'/>
-                                                    <table class='owned'>
-                                                        <tr>
-                                                            <td>
-                                                                <img class='owned_monster border_<?=$owned->monster->element?>' src='<?=$owned_src?>'/>
-                                                            </td>
-                                                            <td>
+                                </div> <!-- .monster_details.lv1 -->
+                            </div>
+                            <div class='sources'>
 <?php
-                                                                for ($i = 0; $i < $owned->stars; $i ++){
+                                foreach ($fusion->source as $source){
 ?>
-                                                                    <img class='owned_star' src='<?=$star_src?>'/>
+                                    <div class='sources_inside'>
+                                        <div class='monster lv2'>
+                                            <span class='stars'>
 <?php
-                                                                }
+                                                for ($i = 0; $i < $fusion->source_stars; $i ++){
 ?>
-                                                                <span class='owned_level'>Lv. <?=$owned->level?></span>
-                                                            </td>
+                                                    <img class='star' src='<?=$path["img"]["layout"] . "icon/star_aw.png"?>' alt='*'/>
 <?php
-                                                            if ($owned->level == $fusion->source_level && $owned->stars == $fusion->source_stars && $owned->awaken){
+                                                }
 ?>
-                                                                <td>
-                                                                    <img class='owned_check' src='<?=$path["img"]["layout"]?>icon/check.png'/>
-                                                                </td>
+                                            </span>
+                                            <img class='monster border_<?=$source->element?>' src='<?=$source->image_aw?>' alt='<?=$source->name_aw?>'/>
+                                            <span class='level'>
+                                                Lv. <?=$fusion->source_level?>
+                                            </span>
+                                        </div> <!-- .monster -->
+                                        <div class='monster_details lv2'>
+                                            <h5 class='name italic color_<?=$source->element?>'><?=$source->name_aw?> <br/> <?=$source->element?> <?=$source->name?></h5>
 <?php
-                                                            }
+                                            $owned = null;
+                                            foreach ($page->collection as $col){
+                                                if ($col->monster->id == $source->id){
+                                                    $owned = $col;
+                                                }
+                                            }
+                                            if (isset($owned)){
+                                                $owned_src = $owned->monster->image;
+                                                $star_src = $path["img"]["layout"] . "icon/star.png";
+                                                $owned_alt = $owned->monster->element . " " . $owned->monster->name;
+                                                if ($owned->awaken == 1){
+                                                    $owned_src = $owned->monster->image_aw;
+                                                    $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                                                    $owned_alt = $owned->monster->name_aw;
+                                                }
 ?>
-                                                        </tr>
-                                                    </table>
+                                                <hr class='owned_separator'/>
+                                                <div class='monster_owned lv2'>
+                                                    <span class='stars'>
 <?php
-                                                }
+                                                        for ($i = 0; $i < $owned->stars; $i ++){
+?>
+                                                            <img class='star' src='<?=$star_src?>' alt='*'/>
+<?php
+                                                        }
 ?>
-                                            </td>
-                                            <td>
+                                                    </span>
+                                                    <img class='monster border_<?=$owned->monster->element?>' src='<?=$owned_src?>' alt='<?=$owned_alt?>'/>
+                                                    <span class='level'>
+                                                        <?=$owned->level?>
+                                                    </span>
+                                                </div> <!-- .monster_owned.lv2 -->
 <?php
-                                                foreach ($page->fusion as $f){
-                                                    if ($f->target->id == $source->id){
-                                                        foreach($f->source as $s){
+                                            }
 ?>
-                                                            <table class='fusion level_3'>
-                                                                <tr>
-                                                                    <td class='left'>
-                                                                        <h4 class='name_aw color_<?=$s->element?>'><?=$s->name_aw?></h4>
-                                                                        <h5 class='name italic'><?=$s->element?> <?=$s->name?></h5>
-                                                                        <br/>
+                                        </div> <!-- .monster_details.lv2 -->
+                                        <div class='monster lv2'>
+                                            <span class='stars'>
 <?php
-                                                                        for ($i = 0; $i < $f->source_stars; $i ++){
+                                                for ($i = 0; $i < $fusion->source_stars; $i ++){
 ?>
-                                                                            <img class='monster_star' src='<?=$path["img"]["layout"] . "icon/star_aw.png";?>'/>
+                                                    <img class='star' src='<?=$path["img"]["layout"] . "icon/star.png"?>' alt='*'/>
 <?php
-                                                                        }
+                                                }
 ?>
-                                                                        <span class='monster_level'>Lv. <?=$f->source_level?></span>
-                                                                    </td>
-                                                                    <td class='right'>
-                                                                        <img class='monster border_<?=$s->element?> desktop' src='<?=$s->image?>'/>
-                                                                        <img class='monster border_<?=$s->element?>' src='<?=$s->image_aw?>'/>
-                                                                    </td>
-                                                                </tr>
-                                                                <tr>
-                                                                    <td colspan='2'>
+                                            </span>
+                                            <img class='monster border_<?=$source->element?>' src='<?=$source->image?>' alt='<?=$source->name_aw?>'/>
+                                            <span class='level'>
+                                                Lv. 1
+                                            </span>
+                                        </div> <!-- .monster -->
+                                    </div> <!-- .sources_inside -->
+                                    <div class='sub_sources'>
 <?php
-                                                                        $owned = null;
-                                                                        foreach ($page->collection as $col){
-                                                                            if ($col->monster->id == $s->id){
-                                                                                $owned = $col;
-                                                                            }
-                                                                        }
-                                                                        if (isset($owned)){
-                                                                            $owned_src = $owned->monster->image;
-                                                                            $star_src = $path["img"]["layout"] . "icon/star.png";
-                                                                            if ($owned->awaken == 1){
-                                                                                $owned_src = $owned->monster->image_aw;
-                                                                                $star_src = $path["img"]["layout"] . "icon/star_aw.png";
-                                                                            }
+                                        foreach ($page->fusion as $f){
+                                            if ($f->target->id == $source->id){
+                                                foreach($f->source as $s){
 ?>
-                                                                            <hr class='owned_separator'/>
-                                                                            <table class='owned'>
-                                                                                <tr>
-                                                                                    <td>
-                                                                                        <img class='owned_monster border_<?=$owned->monster->element?>' src='<?=$owned_src?>'/>
-                                                                                    </td>
-                                                                                    <td>
+                                                    <div class='monster lv3'>
+                                                        <span class='stars'>
 <?php
-                                                                                        for ($i = 0; $i < $owned->stars; $i ++){
+                                                            for ($i = 0; $i < $f->source_stars; $i ++){
 ?>
-                                                                                            <img class='owned_star' src='<?=$star_src?>'/>
+                                                                <img class='star' src='<?=$path["img"]["layout"] . "icon/star_aw.png"?>' alt='*'/>
 <?php
-                                                                                        }
+                                                            }
 ?>
-                                                                                        <span class='owned_level'>Lv. <?=$owned->level?></span>
-                                                                                    </td>
+                                                        </span>
+                                                        <img class='monster border_<?=$s->element?>' src='<?=$s->image_aw?>' alt='<?=$s->name_aw?>'/>
+                                                        <span class='level'>
+                                                            <?=$f->source_level?>
+                                                        </span>
 <?php
-                                                                                    if ($owned->level == $f->source_level && $owned->stars == $f->source_stars && $owned->awaken){
+                                                        $owned = null;
+                                                        foreach ($page->collection as $col){
+                                                            if ($col->monster->id == $s->id){
+                                                                $owned = $col;
+                                                            }
+                                                        }
+                                                        if (isset($owned)){
+                                                            $owned_src = $owned->monster->image;
+                                                            $star_src = $path["img"]["layout"] . "icon/star.png";
+                                                            $owned_alt = $owned->monster->element . " " . $owned->monster->name;
+                                                            if ($owned->awaken == 1){
+                                                                $owned_src = $owned->monster->image_aw;
+                                                                $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                                                                $owned_alt = $owned->monster->name_aw;
+                                                            }
 ?>
-                                                                                        <td>
-                                                                                            <img class='owned_check' src='<?=$path["img"]["layout"]?>icon/check.png'/>
-                                                                                        </td>
+                                                            <div class='monster_owned lv3'>
+                                                                <span class='stars'>
 <?php
-                                                                                    }
+                                                                    for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                                                </tr>
-                                                                            </table>
+                                                                        <img class='star' src='<?=$star_src?>' alt='*'/>
 <?php
-                                                                        }
+                                                                    }
 ?>
-                                                                    </td>
-                                                                </tr>
-                                                            </table>
+                                                                </span>
+                                                                <img class='monster border_<?=$owned->monster->element?>' src='<?=$owned_src?>' alt='<?=$owned_alt?>'/>
+                                                                <span class='level'>
+                                                                    <?=$owned->level?>
+                                                                </span>
+                                                            </div> <!-- .monster_owned.lv3 -->
 <?php
                                                         }
-                                                    }
+?>
+                                                    </div> <!-- .monster -->
+<?php
                                                 }
+                                            }
+                                        }
 ?>
-                                            </td>
-                                        </tr>
-                                    </table>
+                                    </div> <!-- .sub_sources -->
+                                    <br/>
 <?php
                                 }
 ?>
-                            </td>
-                        </tr>
-                    </table>
+                            </div>
+                        </div>
 <?php
-                } // foreach ($page->fusion as $fusion)
+                    }
+                    elseif ($fusion->target_stars == 4){
+                    }
+                }
 ?>
             </div> <!-- .section -->
         </div> <!-- .content -->

application/view/help.php

@@ -1,98 +1,47 @@
-<?php
-    session_start();
-    $http_host = $_SERVER["HTTP_HOST"];
-    $doc_root = $_SERVER["DOCUMENT_ROOT"] . "/";
-    include $doc_root . "functions.php";
-    $proto = get_protocol();
-    $con = start_db();
-    $server = $proto . $http_host;
-    $lang = select_language($con);
-    $lserver = $server . "/" . $lang;
-    $cur_section = "";
-    $cur_entry = "";
-?>
 <!DOCTYPE html>
-<html>
+<html lang='en'>
     <head>
         <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
-        <meta charset='utf-8'/>
         <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
-        <title><?=text($con, "USER_NAME", $lang);?></title>
-        <link rel='shortcut icon' href='<?=$lserver?>/img/logo/favicon.ico'/>
+        <title><?=$page->title?></title>
+        <link rel='shortcut icon' href='<?=$page->favicon?>'/>
         <!-- CSS files -->
-        <style>
-<?php
-            include $doc_root . "css/ui.css";
-            include $doc_root . "css/home.css";
-?>
-        </style>
-        <!-- CSS for mobile version -->
-        <style media='(max-width : 990px)'>
-<?php
-            include $doc_root . "css/m/ui.css";
-            include $doc_root . "css/m/home.css";
-?>
-        </style>
+        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
+        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>help.css'/>
         <!-- Script files -->
-        <script type='text/javascript'>
-<?php
-            include $doc_root . "script/ui.js";
-?>
-        </script>
+        <script src="<?=$path["js"]?>ui.js"></script>
         <!-- Meta tags -->
-        <link rel='canonical' href='<?=$lserver?>'/>
-        <link rel='author' href='<?=$lserver?>'/>
-        <link rel='publisher' href='<?=$lserver?>'/>
-        <meta name='description' content=''/>
-        <meta property='og:title' content='<?=text($con, "USER_NAME", $lang);?>'/>
-        <meta property='og:url' content='<?=$lserver?>'/>
-        <meta property='og:description' content=''/>
-        <meta property='og:image' content=''/>
-        <meta property='og:site_name' content='<?=text($con, "USER_NAME", $lang);?>'/>
+        <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='<?=$lang?>'/>
+        <meta property='og:locale' content='en'/>
         <meta name='twitter:card' content='summary'/>
-        <meta name='twitter:title' content='<?=text($con, "USER_NAME", $lang);?>'/>
-        <meta name='twitter:description' content=''/>
-        <meta name='twitter:image' content=''/>
-        <meta name='twitter:url' content='<?=$lserver?>'/>
+        <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>
-        <div id='body'>
-            <div id='body_row'>
-                <div id='left'>
-                    <div id='logo'>
-                        <img id='logo' src='<?=$lserver?>/img/logo/x6/inigovalentin.png' alt='<?=text($con, "USER_NAME", $lang);?>'/>
-                    </div>
-                    <div class='entry'>
-                        <img id='profile' src='<?=$lserver?>/img/profile/x6/0.png' alt='<?=text($con, "USER_NAME", $lang);?>' title='<?=text($con, "USER_NAME", $lang);?>' />
-                        <br/>
-                        <span id='tagline'><?=text($con, "USER_TAGLINE", $lang);?></span>
-                    </div> <!-- .entry -->
-                    <a class='a_button' href='<?=$lserver?>/profile/'>
-                        <span class='header_container'>
-                            <span class='header_icon_container'><img class='header_icon' alt='<?=text($con, "HEADER_ME", $lang);?>' src='<?=$lserver?>/img/icon/profile.gif'/></span>
-                            <?=text($con, "INDEX_PROFILE", $lang);?>
-                        </span>
-                    </a>
-                    <span class='link_separator desktop'></span>
-                    <a class='a_button' href='<?=$lserver?>/project/'>
-                        <span class='header_container'>
-                            <span class='header_icon_container'><img class='header_icon' alt='<?=text($con, "HEADER_PROJECTS", $lang);?>' src='<?=$lserver?>/img/icon/projects.gif'/></span>
-                            <?=text($con, "INDEX_PROJECTS", $lang);?>
-                        </span>
-                    </a>
 <?php
-                    include $doc_root . "footer.php";
+        include __DIR__ . "/inc/header.php";
+?>
+        <div id='content'>
+            <div class='section'>
+                <h3 class='section_title'>
+                    Help
+                </h3>
+            </div> <!-- .section -->
+        </div> <!-- .content -->
+<?php
+        include __DIR__ . "/inc/footer.php";
 ?>
-                </div> <!-- left -->
-                <div id='right'>
-                    <p>
-                        <?=text($con, "USER_BIO", $lang);?>
-                    </p>
-                </div>
-            </div> <!-- #body_row -->
-        </div> <!-- #body -->
     </body>
 </html>

application/view/home.php

@@ -2,7 +2,6 @@
 <html lang='en'>
     <head>
         <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
-        <meta charset='utf-8'/>
         <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?>'/>
@@ -10,7 +9,7 @@
         <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
         <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>home.css'/>
         <!-- Script files -->
-        <script type="text/javascript" src="<?=$path["js"]?>ui.js"></script>
+        <script src="<?=$path["js"]?>ui.js"></script>
         <!-- Meta tags -->
         <link rel='canonical' href='<?=$page->canonical?>'/>
         <link rel='author' href='<?=$page->author?>'/>

application/view/inc/footer.php

@@ -1,4 +1,4 @@
-<div id='footer'>
+<footer>
     <table id='footer_table'>
         <tr>
             <td id='footer_left'>
@@ -14,4 +14,4 @@
             </td>
         </tr>
     </table>
-</div>
+</footer>

application/view/inc/header.php

@@ -1,6 +1,6 @@
-<div id='header'>
+<header>
     <div id='logo'>
-        <img id='logo_img' src='<?=$path["img"]["layout"]?>logo/sw.png'/>
+        <img id='logo_img' src='<?=$path["img"]["layout"]?>logo/sw.png' alt=''/>
         <h1 id='logo_text'>
             <span class='large'>D</span>
             <span class='small'>ata</span>
@@ -12,14 +12,17 @@
         <a href='<?=$root?>'>
             Home
         </a>
-        <a href='<?=$root?>catalog'/>
+        <a href='<?=$root?>catalog'>
             Catalog
         </a>
-        <a href='<?=$root?>collection'/>
-            Collection
+        <a href='<?=$root?>monsters'>
+            Monsters
         </a>
-        <a href='<?=$root?>fusion'/>
+        <a href='<?=$root?>runes'>
+            Runes
+        </a>
+        <a href='<?=$root?>fusion'>
             Fusion
         </a>
     </nav>
-</div>
+</header>

application/view/monster.php

@@ -0,0 +1,749 @@
+<!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"]?>monster.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>
+<?php
+        include __DIR__ . "/inc/header.php";
+?>
+        <section id='monster'>
+<?php
+            if ($page->monster->monster->awakens_from == "" && $page->monster->monster->awakens_to != ""){
+                // No to, no from, silver monster.
+                $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                $mon_title = $page->monster->monster->element . " " . $page->monster->monster->name;
+            }
+            elseif ($page->monster->monster->awakens_from =! ""){
+                // Already awakened.
+                $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                $mon_title = $page->monster->monster->name;
+            }
+            elseif ($page->monster->monster->awakens_to =! ""){
+                // Awakeable.
+                $star_src = $path["img"]["layout"] . "icon/star.png";
+                $mon_title = $page->monster->monster->element . " " . $page->monster->monster->name;
+            }
+            // TODO: Handle second awakenings
+?>
+            <article id='profile'>
+            	<img id='monster_image' title='<?=$mon_title?>' class='border_<?=$page->monster->monster->element?>' src='<?=$page->monster->monster->get_image()?>'/>
+            	<div id='details'>
+            		<h1><?=$mon_title?></h1>
+                	<span class='stars'>
+<?php
+                        for ($i = 0; $i < $page->monster->stars; $i ++){
+?>
+                        	<img class='star' src='<?=$star_src?>'/>
+<?php
+                        }
+?>
+                    </span>
+                    <span class='level'>
+                        Lv. <?=$page->monster->level?>
+                    </span>
+                </div> <!-- #details -->
+<?php
+                // TODO
+                $building_attack = 0;
+                $building_defense = 0;
+                $building_hp = 0;
+                $building_speed = 0;
+                $building_crit_rate = 0;
+                $building_crit_damage = 0;
+                $building_accuracy = 0;
+                $building_resistance = 0;
+?>
+                <table id='stats'>
+                    <tr>
+                        <th>
+                            Stats
+                        </th>
+                        <th>
+                            Base
+                        </th>
+                        <th>
+                            Runes
+                        </th>
+                        <th>
+                            Buildings
+                        </th>
+                        <th>
+                            Total
+                        </th>
+                    </tr>
+                    <tr>
+                        <th>
+                            ATK
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_attack?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_attack?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_attack?>
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_attack + $page->monster->rune_attack + $building_attack?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            DEF
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_defense?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_defense?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_defense?>
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_defense + $page->monster->rune_defense + $building_defense?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            HP
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_hp?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_hp?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_hp?>
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_hp + $page->monster->rune_hp + $building_hp?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            SPD
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_speed?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_speed?>
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_speed?>
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_speed + $page->monster->rune_speed + $building_speed?>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            CRR
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_crit_rate?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_crit_rate?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_crit_rate?>%
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_crit_rate + $page->monster->rune_crit_rate + $building_crit_rate?>%
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            CRD
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_crit_damage?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_crit_damage?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_crit_damage?>%
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_crit_damage + $page->monster->rune_crit_damage + $building_crit_damage?>%
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            ACC
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_accuracy?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_accuracy?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_accuracy?>%
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_accuracy + $page->monster->rune_accuracy + $building_accuracy?>%
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            RES
+                        </th>
+                        <td class='base'>
+                            <?=$page->monster->base_resistance?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$page->monster->rune_resistance?>%
+                        </td>
+                        <td class='extra'>
+                            +<?=$building_resistance?>%
+                        </td>
+                        <td class='total'>
+                            <?=$page->monster->base_resistance + $page->monster->rune_resistance + $building_resistance?>%
+                        </td>
+                    </tr>
+                </table>
+                <div id='skills'>
+<?php
+                    if ($page->monster->monster->leader_skill){
+?>
+						<div class='skill'>
+                            <img class='skill_img' src='<?=$page->monster->monster->leader_skill->get_image()?>'/>
+                            <span class='skill_level'>
+                            	&nbsp;
+                            </span>
+                            <span class='skill_name'>
+                                Leader skill
+                            </span>
+                            <span class='skill_description'>
+                                <?=$page->monster->monster->leader_skill->create_description()?>
+                            </span>
+						</div>
+<?php
+                    }
+                    $skill_num = 1;
+                    $absolute_level = 0;
+                    $absolute_max_level = 0;
+                    $ponderated_level = 0;
+                    $ponderated_max_level = 0;
+                    foreach ($page->monster->monster->skill as $skill){
+                        if ($skill->max_level > 1){
+                            $absolute_max_level += $skill->max_level - 1;
+                        }
+                        switch ($skill_num){
+                            case 1:
+                                $cur_lvl = $page->monster->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 = $page->monster->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 = $page->monster->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 = $page->monster->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 class='skill_img' src='<?=$skill->get_image()?>'/>
+                            <span class='skill_level <?=$maxed?>'>
+                            	<?=$cur_lvl?>/<?=$max_lvl?>
+                            </span>
+                            <span class='skill_name'>
+                                <?=$skill->name?>
+                            </span>
+                            <span class='skill_description'>
+                                <?=$skill->description?>
+                            </span>
+<?php
+                            if (count($skill->effect) > 0){
+?>
+                                <span class='skill_effects'>
+<?php
+                                    foreach ($skill->effect as $effect){
+?>
+										<img class='effect_img' title='<?=$effect->name?>' src='<?=$effect->get_image()?>'/>
+<?php
+                                    }
+?>
+                                </span>
+<?php
+                            }
+                            if ($skill->max_level > 1){
+?>
+                                <table class='skill_up'>
+<?php
+                                    foreach ($skill->level as $level){
+                                        if ($level->level > 1){
+                                            $aquired = "";
+                                            if ($level->level <= $cur_lvl){
+                                                $aquired = "aquired";
+                                            }
+?>
+											<tr>
+												<td class='level <?=$aquired?>'>
+													Lv. <?=$level->level?>
+												</td>
+												<td class='description <?=$aquired?>'>
+													<?=$level->description?>
+												</td>
+											</tr>
+<?php
+                                        }
+                                    }
+?>
+                                </table>
+<?php
+                            }
+?>
+                        </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>
+				</table>
+            </article> <!-- #profile -->
+            <article id='runes'>
+            	<table id='table_runes'>
+<?php
+                    $total_efficiency = 0;
+                    $total_max_efficiency = 0;
+                    $total_reached_efficiency = 0;
+                    $total_level = 0;
+                    $total_stars = 0;
+                    $total_value = 0;
+                    $total_runes = 0;
+                    foreach ($page->monster->rune as $rune){
+                        $total_efficiency += $rune->efficiency;
+                        $total_max_efficiency += $rune->max_efficiency;
+                        $total_reached_efficiency += ($rune->efficiency * 100 / $rune->max_efficiency);
+                        $total_level += $rune->level;
+                        $total_stars += $rune->stars;
+                        $total_value += $rune->value;
+                        $total_runes ++;
+?>
+						<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'>
+<?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 ++){
+?>
+                        				<img class='star' src='<?=$star_src?>'/>
+<?php
+                                    }
+?>
+                    			</span>
+                    			<span class='level <?=$level15?>'>
+                    				+<?=$rune->level?>
+                    			</span>
+							</td>
+							<td class='stats'>
+								<table>
+									<tr class='main_stat'>
+										<td class='stat'>
+<?php
+                                            if (strpos($rune->main_stat, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->main_stat);
+                                                $stat_value = "+ " . $rune->main_stat_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->main_stat;
+                                                $stat_value = "+ " . $rune->main_stat_value;
+                                            }
+?>
+											<?=$stat_name?>
+										</td>
+										<td class='value'>
+											<?=$stat_value?>
+										<td>
+									</tr>
+									<tr class='innate_stat'>
+										<td class='stat'>
+<?php
+                                            if (strlen($rune->innate_stat) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->innate_stat, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->innate_stat);
+                                                $stat_value = "+ " . $rune->innate_stat_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->innate_stat;
+                                                $stat_value = "+ " . $rune->innate_stat_value;
+                                            }
+?>
+											<?=$stat_name?>
+										</td>
+										<td class='value'>
+											<?=$stat_value?>
+										<td>
+									</tr>
+									<tr class=substat>
+										<td class='stat'>
+<?php
+                                            if (strlen($rune->substat_1) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_1, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_1);
+                                                $stat_value = "+ " . $rune->substat_1_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_1;
+                                                $stat_value = "+ " . $rune->substat_1_value;
+                                            }
+                                            if ($rune->substat_1_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+											<?=$stat_name?>
+										</td>
+										<td class='value <?=$craft?>'>
+											<?=$stat_value?>
+										<td>
+									</tr>
+									<tr class=substat>
+										<td class='stat'>
+<?php
+                                            if (strlen($rune->substat_2) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_2, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_2);
+                                                $stat_value = "+ " . $rune->substat_2_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_2;
+                                                $stat_value = "+ " . $rune->substat_2_value;
+                                            }
+                                            if ($rune->substat_2_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+											<?=$stat_name?>
+										</td>
+										<td class='value <?=$craft?>'>
+											<?=$stat_value?>
+										<td>
+									</tr>
+									<tr class=substat>
+										<td class='stat'>
+<?php
+                                            if (strlen($rune->substat_3) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_3, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_3);
+                                                $stat_value = "+ " . $rune->substat_3_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_3;
+                                                $stat_value = "+ " . $rune->substat_3_value;
+                                            }
+                                            if ($rune->substat_3_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+											<?=$stat_name?>
+										</td>
+										<td class='value <?=$craft?>'>
+											<?=$stat_value?>
+										<td>
+									</tr>
+									<tr class=substat>
+										<td class='stat'>
+<?php
+                                            if (strlen($rune->substat_4) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_4, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_4);
+                                                $stat_value = "+ " . $rune->substat_4_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_4;
+                                                $stat_value = "+ " . $rune->substat_4_value;
+                                            }
+                                            if ($rune->substat_4_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+											<?=$stat_name?>
+										</td>
+										<td class='value <?=$craft?>'>
+											<?=$stat_value?>
+										<td>
+									</tr>
+								</table>
+							</td>
+							<td class='details'>
+<?php
+                                switch ($rune->quality){
+                                    case 0:
+                                        $q = "Normal";
+                                        break;
+                                    case 1:
+                                        $q = "Magic";
+                                        break;
+                                    case 2:
+                                        $q = "Rare";
+                                        break;
+                                    case 3:
+                                        $q = "Hero";
+                                        break;
+                                    case 4:
+                                        $q = "Legend";
+                                        break;
+                                }
+                                switch ($rune->original_quality){
+                                    case 0:
+                                        $oq = "Normal";
+                                        break;
+                                    case 1:
+                                        $oq = "Magic";
+                                        break;
+                                    case 2:
+                                        $oq = "Rare";
+                                        break;
+                                    case 3:
+                                        $oq = "Hero";
+                                        break;
+                                    case 4:
+                                        $oq = "Legend";
+                                        break;
+                                }
+?>
+								<table class='table_details'>
+									<tr>
+										<td class='title'>
+											Quality:
+										</td>
+										<td class='value'>
+											<span class='quality quality_<?=strtolower($q)?>'>
+												<?=$q?>
+											</span>
+										</td>
+									</tr>
+									<tr>
+										<td class='title'>
+											Original quality:
+										</td>
+										<td class='value'>
+											<span class='quality quality_<?=strtolower($oq)?>'>
+												<?=$oq?>
+											</span>
+										</td>
+									</tr>
+									<tr>
+										<td class='title'>
+											Value:
+										</td>
+										<td class='value'>
+											<?=$rune->value?>
+										</td>
+									</tr>
+									<tr>
+    									<td class='title'>
+    										Efficiency:
+    									</td>
+    									<td class='value'>
+    										<?=number_format($rune->efficiency, 2)?>%
+    									</td>
+    								</tr>
+    								<tr>
+    									<td class='title'>
+    										Max. efficiency:
+    									</td>
+    									<td class='value'>
+    										<?=number_format($rune->max_efficiency, 2)?>%
+    									</td>
+    								</tr>
+    								<tr>
+    									<td class='title'>
+    										Reached efficiency:
+    									</td>
+    									<td class='value'>
+    										<?=number_format($rune->efficiency * 100 / $rune->max_efficiency)?>%
+    									</td>
+    								</tr>
+								</table>
+							</td>
+						</tr>
+						
+<?php
+                    }
+?>
+				</table>
+				<div id='rune_averages'>
+					<table id='table_averages'>
+						<tr>
+							<td class='title'>
+								Avg. level:
+							</td>
+							<td class='value'>
+								<?=number_format($total_level / $total_runes, 2)?>
+							</td>
+						</tr>
+						<tr>
+							<td class='title'>
+								Avg. stars:
+							</td>
+							<td class='value'>
+								<?=number_format($total_stars / $total_runes, 2)?>
+							</td>
+						</tr>
+						<tr>
+							<td class='title'>
+								Avg. value:
+							</td>
+							<td class='value'>
+								<?=number_format($total_value / $total_runes, 2, '.', '')?>
+							</td>
+						</tr>
+						<tr>
+							<td class='title'>
+								Total value:
+							</td>
+							<td class='value'>
+								<?=$total_value?>
+							</td>
+						</tr>
+						<tr>
+							<td class='title'>
+								Avg. efficiency:
+							</td>
+							<td class='value'>
+								<?=number_format($total_efficiency / $total_runes, 2)?>%
+							</td>
+						</tr>
+						<tr>
+							<td class='title'>
+								Avg. max. efficiency:
+							</td>
+							<td class='value'>
+								<?=number_format($total_max_efficiency / $total_runes, 2)?>%
+							</td>
+						</tr>
+						<tr>
+							<td class='title'>
+								Avg. reached efficiency:
+							</td>
+							<td class='value'>
+								<?=number_format($total_reached_efficiency / $total_runes, 2)?>%
+							</td>
+						</tr>
+					</table>
+				</div>
+            </article>
+        </section> <!-- #monster -->
+
+<?php
+        include __DIR__ . "/inc/footer.php";
+?>
+    </body>
+</html>

application/view/monsters.php

@@ -0,0 +1,369 @@
+<!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"]?>monsters.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>
+<?php
+        include __DIR__ . "/inc/header.php";
+?>
+            <section id='filters'>
+                <form action='/monsters/' method='get'>
+                    <div class='filter'>
+                        <span>Element:</span>
+                        <br/>
+<?php
+                        $fire_selected = "";
+                        $water_selected = "";
+                        $wind_selected = "";
+                        $light_selected = "";
+                        $dark_selected = "";
+                        switch (strtoupper($page->filters["element"])){
+                            case "FIRE":
+                                $fire_selected = "selected='selected'";
+                                break;
+                            case "WATER":
+                                $water_selected = "selected='selected'";
+                                break;
+                            case "WIND":
+                                $wind_selected = "selected='selected'";
+                                break;
+                            case "LIGHT":
+                                $light_selected = "selected='selected'";
+                                break;
+                            case "DARK":
+                                $dark_selected = "selected='selected'";
+                                break;
+                        }
+?>
+                        <select name='element' id='filter_type'>
+                            <option value=''>All</option>
+                            <option value='Fire' <?=$fire_selected?>>Fire</option>
+                            <option value='Water' <?=$water_selected?>>Water</option>
+                            <option value='Wind' <?=$wind_selected?>>Wind</option>
+                            <option value='Light' <?=$light_selected?>>Light</option>
+                            <option value='Dark' <?=$dark_selected?>>Dark</option>
+                        </select>
+                    </div>
+                    <div class='filter'>
+                        <span>Name:</span>
+                        <br/>
+                        <input type='text' name='name' id='filter_name' value='<?=$page->filters["name"]?>'/>
+                    </div>
+                    <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'>
+<?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'>
+                            <a href='/monster/<?=$mon->id?>'>
+                                <span class='stars'>
+<?php
+                                    for ($i = 0; $i < $mon->stars; $i ++){
+?>
+                                        <img class='star' src='<?=$star_src?>'/>
+<?php
+                                    }
+?>
+                                </span>
+                                <img title='<?=$mon_title?>' class='monster border_<?=$mon->monster->element?>' src='<?=$mon->monster->get_image()?>'/>
+                                <span class='level'>
+                                    Lv. <?=$mon->level?>
+                                </span>
+                            </a>
+                            <div class='monster_tooltip'>
+                            	<h4>
+                            		<?=$mon_title?>
+                            	</h4>
+<?php
+                                // TODO
+                                $building_attack = 0;
+                                $building_defense = 0;
+                                $building_hp = 0;
+                                $building_speed = 0;
+                                $building_crit_rate = 0;
+                                $building_crit_damage = 0;
+                                $building_accuracy = 0;
+                                $building_resistance = 0;
+?>
+                                <table class='stats'>
+                                    <tr>
+                                        <th>
+                                            Stats
+                                        </th>
+                                        <th>
+                                            Base
+                                        </th>
+                                        <th>
+                                            Runes
+                                        </th>
+                                        <th>
+                                            Buildings
+                                        </th>
+                                        <th>
+                                            Total
+                                        </th>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            ATK
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_attack?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_attack?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_attack?>
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_attack + $mon->rune_attack + $building_attack?>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            DEF
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_defense?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_defense?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_defense?>
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_defense + $mon->rune_defense + $building_defense?>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            HP
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_hp?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_hp?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_hp?>
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_hp + $mon->rune_hp + $building_hp?>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            SPD
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_speed?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_speed?>
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_speed?>
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_speed + $mon->rune_speed + $building_speed?>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            CRR
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_crit_rate?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_crit_rate?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_crit_rate?>%
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_crit_rate + $mon->rune_crit_rate + $building_crit_rate?>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            CRD
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_crit_damage?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_crit_damage?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_crit_damage?>%
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_crit_damage + $mon->rune_crit_damage + $building_crit_damage?>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            ACC
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_accuracy?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_accuracy?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_accuracy?>%
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_accuracy + $mon->rune_accuracy + $building_accuracy?>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th>
+                                            RES
+                                        </th>
+                                        <td class='base'>
+                                            <?=$mon->base_resistance?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$mon->rune_resistance?>%
+                                        </td>
+                                        <td class='extra'>
+                                            +<?=$building_resistance?>%
+                                        </td>
+                                        <td class='total'>
+                                            <?=$mon->base_resistance + $mon->rune_resistance + $building_resistance?>%
+                                        </td>
+                                    </tr>
+                                </table>
+                                <div class='skills'>
+<?php
+                                    $skill_num = 1;
+                                    foreach ($mon->monster->skill as $skill){
+                                        switch ($skill_num){
+                                            case 1:
+                                                $cur_lvl = $mon->skill_1_level;
+                                                break;
+                                            case 2:
+                                                $cur_lvl = $mon->skill_2_level;
+                                                break;
+                                            case 3:
+                                                $cur_lvl = $mon->skill_3_level;
+                                                break;
+                                            case 4:
+                                                $cur_lvl = $mon->skill_4_level;
+                                                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>
+                            </div>
+                        </div>
+<?php
+                }
+?>
+                    </article>
+            </section> <!-- #catalog -->
+
+<?php
+        include __DIR__ . "/inc/footer.php";
+?>
+    </body>
+</html>

application/view/runes.php

@@ -0,0 +1,83 @@
+<!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"]?>runes.css'/>
+        <!-- Script files -->
+        <script src="<?=$path["js"]?>ui.js"></script>
+        <script src="<?=$path["js"]?>runes.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 onLoad='loadRunes();'>
+<?php
+        include __DIR__ . "/inc/header.php";
+?>
+        <div id='content'>
+            <div class='section'>
+                <h3 class='section_title'>
+                    Rune collection
+                </h3>
+                <div id='rune_list'>
+                    <img class='loader' alt='Loading...' src='<?$path["img"]["layout"]?>control/loader.png'/>
+                </div> <!-- #rune_list -->
+            </div> <!-- .section -->
+        </div> <!-- .content -->
+        <div id='cover'></div>
+        <div id='viewer' class='section'>
+            <div id='viewer_wait'>
+                <img class='loader' alt='Loading...' src='<?$path["img"]["layout"]?>control/loader.png'/>
+            </div>
+            <div id='viewer_info'>
+            </div>
+        </div> <!-- #viewer -->
+        <div id='new'>
+            <div class='rune_circle'>
+                <img class='rune_circle_slots' src='<?=$path["img"]["layout"]?>rune/Rune_slots.png'/>
+<?php
+                for ($i = 1; $i < 7; $i ++){
+?>
+                    <div class='rune rune_<?=$i?>'>
+                        <a href='javascript:selectNewRuneSlot(<?=$i?>);'>
+                            <img class='rune_base rune_base_<?=$i?>' src='<?=$path["img"]["rune"]?>base.png'/>
+                            <img class='rune_icon rune_icon_<?=$i?>' src='<?=$path["img"]["rune"]?>Energy.png'/>
+                            <span class='rune_level rune_level_<?=$i?>'>
+                                +15
+                            </span>
+                            <span class='rune_stars rune_stars_<?=$i?>'>
+                                <span class='rune_stars_num'>1</span>
+                                <img class='rune_stars_star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                            </span>
+                        </a>
+                    </div>
+<?php
+                }
+?>
+            </div> <!-- .rune_circle -->
+        </div> <!-- #new -->
+<?php
+        include __DIR__ . "/inc/footer.php";
+?>
+    </body>
+</html>

install

@@ -1,771 +0,0 @@
-#!/usr/bin/python3
-
-
-
-
-
-import urllib3
-import sys
-import os
-import requests
-import urllib.request
-import sqlite3
-import wget
-
-
-
-
-
-"""
-Toggles.
-"""
-OPT_CREATE_DB = True
-OPT_DOWNLOAD = True
-OPT_SKILLS = True
-OPT_ESSENCES = True
-OPT_BASE = True
-
-
-
-
-
-"""
-Initializes the database file and creates all the tables.
-
-:param name: The path to the sqlite database.
-:returns: Connection to the database.
-:raises IntegrityError: The queryes couldn't bre executed.
-:raises IOError: The sqlite file couldn't be created.
-"""
-def createDatabase(name):
-    global OPT_CREATE_DB
-    print('Configuring database...')
-    try:
-        db = sqlite3.connect(name)
-        if OPT_CREATE_DB == False:
-            return db
-        cursor = db.cursor()
-        cursor.execute('''
-            CREATE TABLE IF NOT EXISTS monster(
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            base INTEGER,
-            stars INT,
-            element TEXT,
-            name TEXT,
-            name_aw TEXT,
-            type TEXT,
-            awakeable INT,
-            img TEXT,
-            img_aw TEXT
-            );
-        ''')
-        cursor.execute('''
-            CREATE TABLE IF NOT EXISTS monster_base(
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            name TEXT
-            );
-        ''')
-        cursor.execute('''
-            CREATE TABLE IF NOT EXISTS monster_skill(
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            monster INT,
-            idx INT,
-            name TEXT,
-            desc TEXT,
-            passive INT,
-            awaken INT,
-            upgrade INT,
-            leader INT,
-            img TEXT,
-            cooldown INT
-            );
-        ''')
-        cursor.execute('''
-            CREATE TABLE IF NOT EXISTS monster_stat(
-            monster INTEGER,
-            stars INT,
-            awake INT,
-            stat TEXT,
-            min INT,
-            max INT
-            );
-        ''')
-        cursor.execute('''
-            CREATE TABLE IF NOT EXISTS monster_essence(
-            monster INT,
-            element TEXT,
-            grade TEXT,
-            num INT
-            );
-        ''')
-        cursor.execute('''
-            CREATE TABLE IF NOT EXISTS monster_location(
-            monster INT,
-            location TEXT
-            );
-        ''')
-        cursor.execute('''
-            CREATE TABLE IF NOT EXISTS monster_collection (
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            monster INT,
-            stars   INT,
-            level   INT,
-            awaken  INT
-            );
-        ''')
-        db.commit()
-        cursor.close()
-        return db
-    except sqlite3.IntegrityError as e:
-        print("Error executing statement: " + str(e))
-        raise
-    except IOError as e:
-        print("I/O Error creating database " + name + ": " + str(e))
-        raise
-
-
-
-
-
-"""
-Inserts a row into the database.
-
-:param db: Connection to the database.
-:param table: Name of the table to insert into.
-:param values: List of values to insert.
-:raises IntegrityError: The insert query was unsuccesfull.
-"""
-def insert(db, table, values):
-    cursor = db.cursor()
-    placeholders = ''
-    for x in range(0, len(values)):
-        placeholders = placeholders + '?, '
-    placeholders = placeholders[:len(placeholders) - 2]
-    query = 'INSERT INTO ' + table + ' VALUES (' + placeholders + ')'
-    try:
-        cursor.execute(query, values)
-    except sqlite3.IntegrityError as e:
-        print('Error Inserting into ' + table + ' with values (' + str(values) + '): ' + str(e))
-        raise
-    cursor.close;
-
-
-
-
-
-def download(url, target):
-    if OPT_DOWNLOAD == False:
-        return True
-    try:
-        urllib.request.urlretrieve(url, target)
-        return True
-    except:
-        return False
-
-
-def getDetails(page):
-    details = []
-    name = ''
-    name_aw = ''
-    img = ''
-    img_aw = ''
-    awakeable = 0
-    mtype = ''
-    stars = 1
-    if ('alt="Purple Star"' in page):
-        if ('alt="Gold Star"' in page):
-            awakeable = 1 # Awakeable (Gold)
-        else:
-            awakeable = 2 # Only awaken (Purple)
-    else:
-        awakeable = 0 # No awakeable (Silver)
-
-    try:
-        stars = int(page[page.index('x', page.index('_Star.png"')) + 1:page.index(')', page.index('x', page.index('_Star.png"')))])
-    except:
-        stars = 1
-        pass
-
-    header = page[page.index('>') + 1:page.index('<', page.index('>'))]
-    if ') - ' in header:
-        name = header[:header.index(' (')]
-        name_aw = header[header.index(') - ') + 4:]
-    else:
-        if ' (' in header:
-            name = header[:header.index(' (')]
-        else:
-            name = header
-
-    imgs = page[page.index('<div id="images">'):page.index('</div>', page.index('<div id="images">'))]
-    if 'data-src="' in imgs:
-        im = imgs[imgs.index('data-src="') + 10:imgs.index('"', imgs.index('data-src="') + 11)]
-        imgs = imgs[imgs.index('"', imgs.index('data-src="') + 11):]
-    else:
-        im = imgs[imgs.index('<img src="') + 10:imgs.index('"', imgs.index('<img src="') + 11)]
-        imgs = imgs[imgs.index('"', imgs.index('<img src="') + 11):]
-
-    if 'data-src="' in imgs:
-        img = im
-        img_aw = imgs[imgs.index('data-src="') + 10:imgs.index('"', imgs.index('data-src="') + 11)]
-    elif '<img src="' in imgs:
-        img = im
-        img_aw = imgs[imgs.index('<img src="') + 10:imgs.index('"', imgs.index('<img src="') + 11)]
-    else:
-        img = im
-        img_aw = ''
-
-    if awakeable == 2 and name_aw == '':
-        name_aw = name
-        name = ''
-    if awakeable == 2 and img_aw == '':
-        img_aw = img
-        img = ''
-
-    mtype = page[page.index('<b>Type:</b>') + 13:page.index('\n', page.index('<b>Type:</b>'))]
-    details = [name, name_aw, img, img_aw, awakeable, mtype, stars]
-    return details
-
-
-
-
-
-def getObtainable(page):
-    obtainable = []
-    while 'title=' in page:
-        obtainable.append(page[page.index('title="') + 7:page.index('"', page.index('title="') + 7)])
-        page = page[page.index('"', page.index('title="') + 7):]
-    return obtainable
-
-
-
-
-
-def getEssences(page):
-    essences = []
-    while '\n' in page:
-        line = page[:page.index('\n')]
-        if '<span class="essence-number">' in line:
-            num = line[line.index('<span class="essence-number">') + 29:line.index('</span>', line.index('<span class="essence-number">'))]
-            desc = line[line.index('alt="') + 5:line.index('"', line.index('alt="') + 6)].split(" ")
-            elm = desc[2]
-            if elm == 'Darkness':
-                elm = 'Dark'
-            grade = desc[3]
-            grade = grade[1:len(grade) - 1]
-            essences.append([num, elm, grade])
-        page = page[page.index('\n') + 1:]
-    return essences
-
-
-
-
-
-def getSkills(page):
-    skills = []
-    while '<td style="text-align' in page:
-        passive = 0
-        awaken = 0
-        upgrade = 0
-        leader = 0
-        image = ''
-        name = ''
-        description = ''
-        cooldown = 0
-
-        name = page[page.index('alt="') + 5:page.index('"', page.index('alt="') + 6)]
-        if ' (Passive)' in name:
-            passive = 1
-            name = name[:name.index(' (Passive)')]
-        if 'Strengthened ' in name:
-            upgrade = 1
-            awaken = 1
-            name = name[13:]
-        if len(name) > 12 and name[:13] == 'Leader Skill ':
-            leader = 1
-            name = 'LEADER SKILL'
-        if leader == 1:
-            subawaken = page[:page.index(':</b> ')]
-        else:
-            subawaken = page[:page.index('</b>: ')]
-        if '(Awakened)' in subawaken:
-            awaken = 1
-        image = page[page.index('data-src="') + 10:page.index('"', page.index('data-src="') + 11)]
-        if leader == 1:
-            description = page[page.index(':</b> ') + 6:page.index('\n', page.index(':</b> '))]
-        else:
-            description = page[page.index('</b>: ') + 6:page.index('\n', page.index('</b>: '))]
-        if ' (Reusable in ' in description:
-            try:
-                cooldown = int(description[description.index(' (Reusable in ') + 14:description.index(' turns)', description.index(' (Reusable in '))])
-                description = description[:description.index(' (Reusable in ')]
-            except:
-                pass
-        if ' [Automatic Effect]' in description:
-            description = description[:description.index(' [Automatic Effect]')]
-
-        skills.append([name, description, passive, awaken, upgrade, leader, image, cooldown])
-        page = page[page.index('</tr>', page.index('<td style="text-align')) + 10:]
-    return skills
-
-
-
-
-
-def getStats(page, awakeable):
-    stats = []
-    ahp = []
-    aatk = []
-    adef = []
-    wahp = []
-    waatk = []
-    wadef = []
-    spd = 0
-    crir = 0
-    crid = 0
-    res = 0
-    acc = 0
-    wspd = 0
-    wcrir = 0
-    wcrid = 0
-    wres = 0
-    wacc = 0
-
-    thp = page[page.index('<b>HP</b>'):page.index('</tr>', page.index('<b>HP</b>'))]
-    while '<td class="monstercell">' in thp:
-        n = thp[thp.index('<td class="monstercell">') + 24:thp.index('\n', thp.index('<td class="monstercell">'))]
-        try:
-            ahp.append(int(thp[thp.index('<td class="monstercell">') + 24:thp.index('\n', thp.index('<td class="monstercell">'))]))
-        except Exception as e:
-            pass
-        thp = thp[thp.index('<td class="monstercell">') + 1:]
-    tatk = page[page.index('<b>ATK</b>'):page.index('</tr>', page.index('<b>ATK</b>'))]
-    while '<td class="monstercell">' in tatk:
-        n = tatk[tatk.index('<td class="monstercell">') + 24:tatk.index('\n', tatk.index('<td class="monstercell">'))]
-        try:
-            aatk.append(int(tatk[tatk.index('<td class="monstercell">') + 24:tatk.index('\n', tatk.index('<td class="monstercell">'))]))
-        except Exception as e:
-            pass
-        tatk = tatk[tatk.index('<td class="monstercell">') + 1:]
-    tdef = page[page.index('<b>ATK</b>'):page.index('</tr>', page.index('<b>ATK</b>'))]
-    while '<td class="monstercell">' in tdef:
-        n = tdef[tdef.index('<td class="monstercell">') + 24:tdef.index('\n', tdef.index('<td class="monstercell">'))]
-        try:
-            adef.append(int(tdef[tdef.index('<td class="monstercell">') + 24:tdef.index('\n', tdef.index('<td class="monstercell">'))]))
-        except Exception as e:
-            pass
-        tdef = tdef[tdef.index('<td class="monstercell">') + 1:]
-    # STATS (awakened)
-    if '#246BB2; width:10%;">Awakened' in page:
-        mpag = page[page.index('#246BB2; width:10%;">Awakened'):]
-        thp = page[page.index('<b>HP</b>'):page.index('</tr>', page.index('<b>HP</b>'))]
-        while '<td class="monstercell">' in thp:
-            n = thp[thp.index('<td class="monstercell">') + 24:thp.index('\n', thp.index('<td class="monstercell">'))]
-            try:
-                wahp.append(int(thp[thp.index('<td class="monstercell">') + 24:thp.index('\n', thp.index('<td class="monstercell">'))]))
-            except Exception as e:
-                pass
-            thp = thp[thp.index('<td class="monstercell">') + 1:]
-        tatk = page[page.index('<b>ATK</b>'):page.index('</tr>', page.index('<b>ATK</b>'))]
-        while '<td class="monstercell">' in tatk:
-            n = tatk[tatk.index('<td class="monstercell">') + 24:tatk.index('\n', tatk.index('<td class="monstercell">'))]
-            try:
-                waatk.append(int(tatk[tatk.index('<td class="monstercell">') + 24:tatk.index('\n', tatk.index('<td class="monstercell">'))]))
-            except Exception as e:
-                pass
-            tatk = tatk[tatk.index('<td class="monstercell">') + 1:]
-        tdef = page[page.index('<b>ATK</b>'):page.index('</tr>', page.index('<b>ATK</b>'))]
-        while '<td class="monstercell">' in tdef:
-            n = tdef[tdef.index('<td class="monstercell">') + 24:tdef.index('\n', tdef.index('<td class="monstercell">'))]
-            try:
-                wadef.append(int(tdef[tdef.index('<td class="monstercell">') + 24:tdef.index('\n', tdef.index('<td class="monstercell">'))]))
-            except Exception as e:
-                pass
-            tdef = tdef[tdef.index('<td class="monstercell">') + 1:]
-        mpag = page[page.index('Static Attributes'):]
-    # STATIC STATS
-    if awakeable == 1: # For awakeable monsters, skip one line
-        page = page[page.index('\n', page.index('style="width: 9%;">')):]
-    spd = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-    page = page[page.index('\n', page.index('style="width: 9%;">')):]
-    crir = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-    page = page[page.index('\n', page.index('style="width: 9%;">')):]
-    crid = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-    page = page[page.index('\n', page.index('style="width: 9%;">')):]
-    res = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-    page = page[page.index('\n', page.index('style="width: 9%;">')):]
-    acc = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-    page = page[page.index('\n', page.index('style="width: 9%;">')):]
-    # Remove percent symbols and cast
-    spd = int(spd.replace('<b>', '').replace('</b>', ''))
-    crir = int(crir[:len(crir) - 1].replace('<b>', '').replace('</b>', ''))
-    crid = int(crid[:len(crid) - 1].replace('<b>', '').replace('</b>', ''))
-    res = int(res[:len(res) - 1].replace('<b>', '').replace('</b>', ''))
-    acc = int(acc[:len(acc) - 1].replace('<b>', '').replace('</b>', ''))
-    # Static stats, awakened
-    if 'style="width: 9%;"><b>Awakened</b>' in page:
-        page = page[page.index('style="width: 9%;"><b>Awakened</b>') + 10:]
-        wspd = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-        page = page[page.index('\n', page.index('style="width: 9%;">')):]
-        wcrir = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-        page = page[page.index('\n', page.index('style="width: 9%;">')):]
-        wcrid = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-        page = page[page.index('\n', page.index('style="width: 9%;">')):]
-        wres = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-        page = page[page.index('\n', page.index('style="width: 9%;">')):]
-        wacc = page[page.index('style="width: 9%;">') + 19:page.index('\n', page.index('style="width: 9%;">'))]
-        page = page[page.index('\n', page.index('style="width: 9%;">')):]
-        # Remove percent symbols and cast
-        wspd = int(wspd.replace('<b>', '').replace('</b>', ''))
-        wcrir = int(wcrir[:len(wcrir) - 1].replace('<b>', '').replace('</b>', ''))
-        wcrid = int(wcrid[:len(wcrid) - 1].replace('<b>', '').replace('</b>', ''))
-        wres = int(wres[:len(wres) - 1].replace('<b>', '').replace('</b>', ''))
-        wacc = int(wacc[:len(wacc) - 1].replace('<b>', '').replace('</b>', ''))
-    else:
-        wspd = None
-        wcrir = None
-        wcrid = None
-        wres = None
-        wacc = None
-    stats = [ahp, aatk, adef, wahp, waatk, wadef, spd, crir, crid, res, acc, wspd, wcrir, wcrid, wres, wacc]
-    return stats
-
-
-
-
-
-"""
-Parses the url with info abount one monster, extracts the info and saves it to
-the database.
-
-:param db: Connection to the database.
-:param url: URL with the info to parse.
-:param url: Element of the monster.
-:raises Exception: The monster data couldn't be saved.
-"""
-def parseMonster(db, url, element):
-    http = urllib3.PoolManager()
-    try:
-        cursor = db.cursor()
-
-        name = '';
-        name_aw = '';
-        img = '';
-        img_aw = '';
-        awakeable = 0;
-        mtype = ''
-        stars = 0
-        obtainable = []
-        essences = []
-        skills = []
-        ahp = []
-        aatk = []
-        adef = []
-        wahp = []
-        waatk = []
-        wadef = []
-        spd = 0
-        crir = 0
-        crid = 0
-        res = 0
-        acc = 0
-        wspd = 0
-        wcrir = 0
-        wcrid = 0
-        wres = 0
-        wacc = 0
-
-        # DEBUG - GOLD
-        #url = 'http://summonerswar.wikia.com/wiki/Fairy_(Water)_-_Elucia'
-        # DEBUG - SILVER
-        #url = 'http://summonerswar.wikia.com/wiki/Forest_Keeper_(Water)'
-        # DEBUG - PURPLE
-        #url = 'http://summonerswar.wikia.com/wiki/Rainbowmon'
-        # DEBUG - Upgradeable skill
-        #url = 'http://summonerswar.wikia.com/wiki/Paladin_(Wind)_-_Louise'
-
-        mpage = http.request('GET', url).data.decode('utf-8');
-
-        # Basic details
-        detailsPage = mpage[mpage.index('<h1 class="page-header__title">'):mpage.index('</tr>', mpage.index('<b>Type:</b>', mpage.index('<h1 class="page-header__title">')))]
-        details = getDetails(detailsPage)
-        name = details[0]
-        name_aw = details[1]
-        img = details[2]
-        img_aw = details[3]
-        awakeable = details[4]
-        mtype = details[5]
-        stars = details[6]
-
-        # Check if monster already parsed
-        cursor.execute('SELECT count(id) AS c FROM monster WHERE element = ? AND name = ? AND name_aw = ?', (element, name, name_aw))
-        if cursor.fetchone()[0] == 0:
-
-            # Regions where the monster can be obtained
-            obtainablePage = mpage[mpage.index('<b>Obtainable from:</b>'):mpage.index('</td>', mpage.index('<b>Obtainable from:</b>'))]
-            obtainable = getObtainable(obtainablePage)
-
-            # Essences required to awaken the monster
-            if awakeable == 1:
-                essencesPage = mpage[mpage.index('<div id="essences">'):mpage.index('</table>', mpage.index('<div id="essences">'))]
-                essences = getEssences(essencesPage)
-
-            # Skills
-            skillsPage = mpage[mpage.index('<table', mpage.index('<table', mpage.index('<div id="skills">') + 1) + 1):mpage.index('</table>', mpage.index('<table', mpage.index('<table', mpage.index('<div id="skills">') + 1) + 1))]
-            skills = getSkills(skillsPage)
-
-            # Stats
-            statsPage = mpage[mpage.index('Evolution Stats'):]
-            stats = getStats(statsPage, awakeable)
-            ahp = stats[0]
-            aatk = stats[1]
-            adef = stats[2]
-            wahp = stats[3]
-            waatk = stats[4]
-            wadef = stats[5]
-            spd = stats[6]
-            crir = stats[7]
-            crid = stats[8]
-            res = stats[9]
-            acc = stats[10]
-            wspd = stats[11]
-            wcrir = stats[12]
-            wcrid = stats[13]
-            wres = stats[14]
-            wacc = stats[15]
-
-            # Save monster
-            strname = element  + ' ' + name + " - " + name_aw
-            if awakeable == 0:
-                strname = element  + ' ' + name
-            elif awakeable == 2:
-                strname = name_aw
-            print ("    Saving monster: " + strname + "...")
-            if img != '':
-                if download(img, 'public/img/content/monster/' + str(id["monster"]).zfill(3) + '.png'):
-                    img = str(id["monster"]).zfill(3) + '.png'
-                else:
-                    print("Error downloading image for monster " + str(id["monster"]))
-            if img != '':
-                if download(img_aw, 'public/img/content/monster/' + str(id["monster"]).zfill(3) + '_aw.png'):
-                    img_aw = str(id["monster"]).zfill(3) + '_aw.png'
-                else:
-                    print("Error downloading image for awakened monster " + str(id["monster"]))
-            insert(db, 'monster', (id["monster"], None, stars, element, name, name_aw, mtype, awakeable, img, img_aw))
-
-            # Save locations
-            for o in obtainable:
-                insert(db, 'monster_location', (id["monster"], o))
-            for e in essences:
-                insert(db, 'monster_essence', (id["monster"], e[1], e[2], e[0]))
-
-            # Save skills
-            idx = 0
-            for s in skills:
-                #                0    1    2       3      4       5      6   7
-                # id monster idx name desc passive awaken upgrade leader img cooldown
-                if download(s[6], 'public/img/content/skill/' + str(id["monster_skill"]).zfill(4) + '.png'):
-                    s[6] = str(id["monster_skill"]).zfill(4) + '.png'
-                else:
-                    s[6] = ''
-                if s[4] == 1:
-                    s[4] = id["monster_skill"] - 1
-                insert(db, 'monster_skill', (id["monster_skill"], id["monster"], idx, s[0], s[1], s[2], s[3], None, s[5], s[6], s[7]))
-                idx = idx + 1
-                id["monster_skill"] = id["monster_skill"] + 1
-
-            # Save stats
-            i = 0
-            s = stars
-            while i < len(ahp):
-                if i + 1 < len(ahp):
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'HP', ahp[i], ahp[i + 1]))
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'ATK', aatk[i], aatk[i + 1]))
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'DEF', aatk[i], aatk[i + 1]))
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'SPD', spd, spd))
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'CRIR', crir, crir))
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'CRID', crid, crid))
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'RES', res, res))
-                    insert(db, 'monster_stat', (id["monster"], s, 0, 'ACC', acc, acc))
-                if i + 1 < len(wahp):
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'HP', wahp[i], wahp[i + 1]))
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'ATK', waatk[i], waatk[i + 1]))
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'DEF', waatk[i], waatk[i + 1]))
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'SPD', wspd, wspd))
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'CRIR', wcrir, wcrir))
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'CRID', wcrid, wcrid))
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'RES', wres, wres))
-                    insert(db, 'monster_stat', (id["monster"], s, 1, 'ACC', wacc, wacc))
-                s = s + 1
-                i = i + 2
-
-            # Save and proceed
-            db.commit()
-            id["monster"] = id["monster"] + 1
-
-    except IOError as e:
-        db.rollback()
-        print('Error saving monster with id ' + str(id['monster']) + ': ' + str(e))
-        print('  Current data:')
-        print('    Name:          ' + name)
-        print('    Name (awaken): ' + name_aw)
-        print('    Element:       ' + element)
-        print('    Type:          ' + mtype)
-        print('    Awakeable:     ' + str(awakeable))
-        print('    Obtainable:')
-        for o in obtainable:
-            print('      ' + o)
-        print('    Essences:')
-        for e in essences:
-            print('      ' + e[0] + ' x ' + e[2] + ' ' + e[1] + ' essences')
-        print('    Skills:')
-        for s in skills:
-            print('      ' + s[1])
-        pass
-        #sys.exit("DEBUG EXIT")
-
-
-
-def makeDirs():
-    dirs = ['public/img/content/monster/', 'public/img/content/skill/', 'public/img/content/essence/']
-    for dir in dirs:
-        try:
-            if os.path.isdir(dir) == False:
-                os.makedirs(dir)
-        except IOError as e:
-            print('Unable to create directory: ' + dir);
-            raise
-
-
-
-"""
-Create the entries for the table monster_base, reading data from the table
-monster.
-
-:param db: Connection to the database.
-:raise IntegrityError: One or more bases could not be created.
-"""
-def createBases(db):
-    cursor = db.cursor()
-    cursor_base = db.cursor()
-    try:
-        cursor.execute('SELECT DISTINCT name FROM monster;')
-
-        for row in cursor:
-            try:
-                cursor_base.execute('INSERT INTO monster_base VALUES (?, ?);', (id["monster_base"], row[0]));
-                cursor.execute('UPDATE monster SET base = ? WHERE name = ?;', (id["monster_base"], row[0]));
-            except sqlite3.IntegrityError as e:
-                print("Error creating monster bases: " + str(e))
-                raise
-            id["monster_base"] = id["monster_base"] + 1;
-        db.commit()
-        cursor_base.close();
-    except sqlite3.IntegrityError as e:
-        print("Error creating monster bases: " + str(e))
-        raise
-
-
-
-
-
-"""
-Downloads the essence icons.
-
-"""
-def getEssenceIcons():
-    url = 'http://summonerswar.wikia.com/wiki/Essences'
-    http = urllib3.PoolManager()
-    page = http.request('GET', url).data.decode('utf-8')
-    page = page[page.index('id="List_of_Essences"'):page.index('id="Essence_fusion"')]
-    while 'data-src="' in page:
-        name = page[page.index('data-image-name="') + 7:page.index('"', page.index('data-image-name="') + 17)].split(" ")
-        element = name[2]
-        if element == 'Darkness':
-            element = 'Dark'
-        grade = name[3][1:len(name)]
-        file = page[page.index('data-src="') + 10:page.index('"', page.index('data-src="') + 11)]
-        if download(file, 'public/img/content/essence/' + element + '_' + grade + '.png') == False:
-            print("Unable to save image for essence: " + element + " (" + grade + ")");
-        page = page[page.index('data-src="') + 10:]
-
-
-
-
-
-def setBases(db):
-    cursor = db.cursor()
-    cursor_base = db.cursor()
-    cursor.execute('SELECT DISTINCT name FROM monster;')
-    for row in cursor:
-        cursor_base.execute('INSERT INTO monster_base VALUES (?, ?);', (id["monster_base"], row[0]));
-        cursor_base.execute('UPDATE monster SET base = ? WHERE name = ?;', (id["monster_base"], row[0]));
-        id["monster_base"] = id["monster_base"] + 1;
-    db.commit()
-    cursor_base.close();
-    cursor.close()
-
-
-
-
-
-"""
-Starts scrapping th page.
-
-:param db: Connection to the database.
-:param baseUrl: URL of the list of monsters of any element, where the element
-                name has been replaced by  '#'.
-:param elements: Array with all five elements.
-:raise IndexError: The page doesn't match the expected format.
-"""
-def parse(db, baseUrl, elements):
-    print('Fetching monster data...')
-    http = urllib3.PoolManager()
-    makeDirs()
-    for elm in elements:
-        url = baseUrl.replace('#', elm)
-        try:
-            mlist = http.request('GET', url).data.decode('utf-8')
-            mlist = mlist[mlist.index('</th></tr>'):]
-            element = url[url.rfind('/') + 1:url.rfind('_')]
-            while '</td></tr>' in mlist:
-                murl = 'http://summonerswar.wikia.com' + mlist[mlist.index('a href="') + 8:mlist.index('"', mlist.index('a href="') + 8)]
-                parseMonster(db, murl, elm)
-                mlist = mlist[mlist.index('</td></tr>') + 1:]
-        except IndexError as e:
-            print("Error processing " + elm + " monster list page: " + str(e))
-            print("Maybe the page has changed and this parser is no longer valid.")
-            raise
-        #print("ENDED FIRE")
-        #sys.exit("DEBUG EXIT")
-
-    # Detect upgrade skills
-    cursor = db.cursor()
-    cursor.execute('UPDATE monster_skill SET upgrade = id + 1 WHERE name = (SELECT name FROM monster_skill s WHERE s.id = monster_skill.id + 1)')
-    cursor.execute('UPDATE monster_skill SET monster = null WHERE id IN (SELECT upgrade FROM monster_skill);')
-    cursor.close;
-
-    # Get essence icons
-    getEssenceIcons();
-
-    # Create base monsters
-    setBases(db)
-
-
-
-"""
-Indexes to keep track of the number of insertions in each affected table.
-"""
-id = {}
-id["monster"] = 1;
-id["monster_base"] = 1;
-id["monster_skill"] = 1;
-id["monster_essence"] = 1;
-id["monster_location"] = 1;
-
-
-"""
-Begin script
-"""
-db = createDatabase('application/sw.sqlite')
-parse(db, 'http://summonerswar.wikia.com/wiki/#_Monsters', ['Fire', 'Water', 'Wind', 'Light', 'Dark'])
-db.close()

install_base.py

@@ -0,0 +1,577 @@
+#!/usr/bin/python3
+
+import urllib3
+import sys
+import os
+import requests
+import urllib.request
+import sqlite3
+import wget
+import json
+
+OPT_DOWNLOAD = True;
+
+"""
+Initializes the database file and creates all the tables.
+
+:param name: The path to the sqlite database.
+:returns: Connection to the database.
+:raises IntegrityError: The queryes couldn't bre executed.
+:raises IOError: The sqlite file couldn't be created.
+"""
+def createDatabase(name):
+    global OPT_CREATE_DB
+    print('Configuring database...')
+    try:
+        db = sqlite3.connect(name)
+        cursor = db.cursor()
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_building(
+                id INT,
+                com2us_id INT,
+                area TEXT,
+                affected_stat TEXT,
+                name TEXT,
+                description TEXT,
+                max_level INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_building_level(
+                building INT,
+                level INT,
+                bonus INT,
+                cost INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_effect(
+                id INT,
+                name TEXT,
+                is_buff INT,
+                description TEXT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_skill_level(
+                skill INT,
+                level INT,
+                description TEXT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_skill(
+                id INT,
+                com2us_id TEXT,
+                name TEXT,
+                description TEXT,
+                slot INT,
+                cooltime INT,
+                hits INT,
+                passive INT,
+                aoe INT,
+                max_level INT,
+                multiplier_formula TEXT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_skill_effect(
+                skill INT,
+                effect INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_leader_skill(
+                id INT,
+                attribute TEXT,
+                amount INT,
+                area TEXT,
+                element TEXT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_source(
+                id INT,
+                name TEXT,
+                description TEXT,
+                farmable_source INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_monster(
+                id INT,
+                com2us_id TEXT,
+                family_id TEXT,
+                name TEXT,
+                element TEXT,
+                archetype TEXT,
+                base_stars INT,
+                natural_stars INT,
+                obtainable INT,
+                can_awaken INT,
+                awaken_bonus TEXT,
+                skill_ups_to_max INT,
+                leader_skill INT,
+                base_hp INT,
+                base_attack INT,
+                base_defense INT,
+                speed INT,
+                crit_rate INT,
+                crit_damage INT,
+                resistance INT,
+                accuracy INT,
+                raw_hp INT,
+                raw_attack INT,
+                raw_defense INT,
+                max_lvl_hp INT,
+                max_lvl_attack INT,
+                max_lvl_defense INT,
+                awakens_from INT,
+                awakens_to INT,
+                fusion_food INT,
+                homunculus INT,
+                craft_cost INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_monster_skill(
+                monster INT,
+                skill INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_monster_source(
+                monster INT,
+                source INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_monster_essence(
+                monster INT,
+                element TEXT,
+                grade TEXT,
+                amount TEXT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS k_fusion(
+                id INT,
+                product INT,
+                stars INT,
+                cost INT,
+                ingredient INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS monster(
+                id TEXT,
+                com2us_id TEXT,
+                monster INT,
+                stars INT,
+                level INT,
+                skill_1_level INT,
+                skill_2_level INT,
+                skill_3_level INT,
+                skill_4_level INT,
+                base_hp INT,
+                base_attack INT,
+                base_defense INT,
+                base_speed INT,
+                base_crit_rate INT,
+                base_crit_damage INT,
+                base_resistance INT,
+                base_accuracy INT,
+                rune_hp INT,
+                rune_attack INT,
+                rune_defense INT,
+                rune_speed INT,
+                rune_crit_rate INT,
+                rune_crit_damage INT,
+                rune_resistance INT,
+                rune_accuracy INT,
+                avg_rune_efficiency INT,
+                fodder INT,
+                in_storage INT,
+                ignore_for_fusion INT,
+                priority INT,
+                notes INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS rune(
+                id TEXT,
+                com2us_id TEXT,
+                assigned_to TEXT,
+                type TEXT,
+                slot INT,
+                stars INT,
+                level INT,
+                quality INT,
+                original_quality INT,
+                value INT,
+                substat_upgrades_remaining INT,
+                efficiency INT,
+                max_efficiency INT,
+                main_stat TEXT,
+                main_stat_value INT,
+                innate_stat TEXT,
+                innate_stat_value INT,
+                substat_1 TEXT,
+                substat_1_value INT,
+                substat_1_craft INT,
+                substat_2 TEXT,
+                substat_2_value INT,
+                substat_2_craft INT,
+                substat_3 TEXT,
+                substat_3_value INT,
+                substat_3_craft INT,
+                substat_4 TEXT,
+                substat_4_value INT,
+                substat_4_craft INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS monster_rune(
+                monster TEXT,
+                rune INT
+            );
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS building(
+                building INT,
+                level INT
+            );
+        ''')
+        db.commit()
+        cursor.close()
+        return db
+    except sqlite3.IntegrityError as e:
+        print("Error executing statement: " + str(e))
+        raise
+    except IOError as e:
+        print("I/O Error creating database " + name + ": " + str(e))
+        raise
+
+
+"""
+Inserts a row into the database.
+
+:param db: Connection to the database.
+:param table: Name of the table to insert into.
+:param values: List of values to insert.
+:raises IntegrityError: The insert query was unsuccesfull.
+"""
+def insert(db, table, values):
+    cursor = db.cursor()
+    placeholders = ''
+    for x in range(0, len(values)):
+        placeholders = placeholders + '?, '
+    placeholders = placeholders[:len(placeholders) - 2]
+    query = 'INSERT INTO ' + table + ' VALUES (' + placeholders + ')'
+    try:
+        cursor.execute(query, values)
+    except sqlite3.IntegrityError as e:
+        print('Error Inserting into ' + table + ' with values (' + str(values) + '): ' + str(e))
+        raise
+    cursor.close;
+
+def download(url, target):
+    if OPT_DOWNLOAD == False:
+        return True
+    try:
+        urllib.request.urlretrieve(url, target)
+        return True
+    except:
+        return False
+
+def parseBuildings(db, url):
+    print("Parsing buildings...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for building in data["results"]:
+            id = building["id"]
+            com2us_id = building["com2us_id"]
+            area = building["area"]
+            affected_stat = building["affected_stat"]
+            name = building["name"]
+            description = building["description"]
+            max_level = building["max_level"]
+            insert(db, "k_building", (id, com2us_id, area, affected_stat, name, description, max_level))
+            lv = 0
+            for bonus in building["stat_bonus"]:
+                insert(db, "k_building_level", (id, lv, bonus, building["upgrade_cost"][lv]))
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+def parseSkills(db, url):
+    print("Parsing skills...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for skill in data["results"]:
+            id = skill["id"]
+            com2us_id = skill["com2us_id"]
+            name = skill["name"]
+            description = skill["description"]
+            slot = skill["slot"]
+            cooltime = skill["cooltime"]
+            hits = skill["hits"]
+            passive = skill["passive"]
+            aoe = skill["aoe"]
+            max_level = skill["max_level"]
+            multiplier_formula = skill["multiplier_formula"]
+            insert(db, "k_skill", (id, com2us_id, name, description, slot, cooltime, hits, passive, aoe, max_level, multiplier_formula))
+            insert(db, "k_skill_level", (id, 1, ""))
+            if (max_level > 1):
+                lv = 2
+                for level in skill["level_progress_description"]:
+                    insert(db, "k_skill_level", (id, str(lv), level))
+                    lv = lv + 1
+            for effect in skill["effects"]:
+                insert(db, "k_skill_effect", (id, effect["effect"]["id"]))
+            image = "https://swarfarm.com/static/herders/images/skills/" + skill["icon_filename"]
+            #download(image, 'public/img/content/skill/' + str(id).zfill(4) + '.png')
+            if id > 2253:
+                download(image, 'public/img/content/skill/' + str(id).zfill(4) + '.png')
+            
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+def parseLeaderSkills(db, url):
+    print("Parsing leader skills...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for skill in data["results"]:
+            id = skill["id"]
+            attribute = skill["attribute"]
+            amount = skill["amount"]
+            area = skill["area"]
+            element = skill["element"]
+            insert(db, "k_leader_skill", (id, attribute, amount, area, element))
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+def parseEffects(db, url):
+    print("Parsing skill effects...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for effect in data["results"]:
+            id = effect["id"]
+            name = effect["name"]
+            is_buff = effect["is_buff"]
+            description = effect["description"]
+            insert(db, "k_effect", (id, name, is_buff, description))
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+def parseSources(db, url):
+    print("Parsing sources...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for source in data["results"]:
+            id = source["id"]
+            name = source["name"]
+            description = source["description"]
+            farmable_source = source["farmable_source"]
+            insert(db, "k_source", (id, name, description, farmable_source))
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+
+def parseMonsters(db, url):
+    print("Parsing monsters...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for mon in data["results"]:
+            id = mon["id"]
+            url = mon["url"]
+            com2us_id = mon["com2us_id"]
+            family_id = mon["family_id"]
+            name = mon["name"]
+            image_filename = mon["image_filename"]
+            element = mon["element"]
+            archetype = mon["archetype"]
+            base_stars = mon["base_stars"]
+            natural_stars = mon["natural_stars"]
+            obtainable = mon["obtainable"]
+            can_awaken = mon["can_awaken"]
+            awaken_level = mon["awaken_level"]
+            awaken_bonus = mon["awaken_bonus"]
+            skill_ups_to_max = mon["skill_ups_to_max"]
+            if mon["leader_skill"] != None:
+                leader_skill = mon["leader_skill"]["id"]
+            else:
+                leader_skill = None
+            homunculus_skills = mon["homunculus_skills"]
+            base_hp = mon["base_hp"]
+            base_attack = mon["base_attack"]
+            base_defense = mon["base_defense"]
+            speed = mon["speed"]
+            crit_rate = mon["crit_rate"]
+            crit_damage = mon["crit_damage"]
+            resistance = mon["resistance"]
+            accuracy = mon["accuracy"]
+            raw_hp = mon["raw_hp"]
+            raw_attack = mon["raw_attack"]
+            raw_defense = mon["raw_defense"]
+            max_lvl_hp = mon["max_lvl_hp"]
+            max_lvl_attack = mon["max_lvl_attack"]
+            max_lvl_defense = mon["max_lvl_defense"]
+            awakens_from = mon["awakens_from"]
+            awakens_to = mon["awakens_to"]
+            awaken_mats_fire_low = mon["awaken_mats_fire_low"]
+            awaken_mats_fire_mid = mon["awaken_mats_fire_mid"]
+            awaken_mats_fire_high = mon["awaken_mats_fire_high"]
+            awaken_mats_water_low = mon["awaken_mats_water_low"]
+            awaken_mats_water_mid = mon["awaken_mats_water_mid"]
+            awaken_mats_water_high = mon["awaken_mats_water_high"]
+            awaken_mats_wind_low = mon["awaken_mats_wind_low"]
+            awaken_mats_wind_mid = mon["awaken_mats_wind_mid"]
+            awaken_mats_wind_high = mon["awaken_mats_wind_high"]
+            awaken_mats_light_low = mon["awaken_mats_light_low"]
+            awaken_mats_light_mid = mon["awaken_mats_light_mid"]
+            awaken_mats_light_high = mon["awaken_mats_light_high"]
+            awaken_mats_dark_low = mon["awaken_mats_dark_low"]
+            awaken_mats_dark_mid = mon["awaken_mats_dark_mid"]
+            awaken_mats_dark_high = mon["awaken_mats_dark_high"]
+            awaken_mats_magic_low = mon["awaken_mats_magic_low"]
+            awaken_mats_magic_mid = mon["awaken_mats_magic_mid"]
+            awaken_mats_magic_high = mon["awaken_mats_magic_high"]
+            fusion_food = mon["fusion_food"]
+            homunculus = mon["homunculus"]
+            craft_cost = mon["craft_cost"]
+            insert(db, "k_monster", (id, com2us_id, family_id, name, element, archetype, base_stars, natural_stars, obtainable, can_awaken, awaken_bonus, skill_ups_to_max, leader_skill, base_hp, base_attack, base_defense, speed, crit_rate, crit_damage, resistance, accuracy, raw_hp, raw_attack, raw_defense, max_lvl_hp, max_lvl_attack, max_lvl_defense, awakens_from, awakens_to, fusion_food, homunculus, craft_cost))
+            if awaken_mats_fire_low > 0:
+                insert(db, "k_monster_essence", (id, "Fire", "Low", awaken_mats_fire_low))
+            if awaken_mats_fire_mid > 0:
+                insert(db, "k_monster_essence", (id, "Fire", "Mid", awaken_mats_fire_mid))
+            if awaken_mats_fire_high > 0:
+                insert(db, "k_monster_essence", (id, "Fire", "High", awaken_mats_fire_high))
+            if awaken_mats_water_low > 0:
+                insert(db, "k_monster_essence", (id, "Water", "Low", awaken_mats_water_low))
+            if awaken_mats_water_mid > 0:
+                insert(db, "k_monster_essence", (id, "Water", "Mid", awaken_mats_water_mid))
+            if awaken_mats_water_high > 0:
+                insert(db, "k_monster_essence", (id, "Water", "High", awaken_mats_water_high))
+            if awaken_mats_wind_low > 0:
+                insert(db, "k_monster_essence", (id, "Wind", "Low", awaken_mats_wind_low))
+            if awaken_mats_wind_mid > 0:
+                insert(db, "k_monster_essence", (id, "Wind", "Mid", awaken_mats_wind_mid))
+            if awaken_mats_wind_high > 0:
+                insert(db, "k_monster_essence", (id, "Wind", "High", awaken_mats_wind_high))
+            if awaken_mats_dark_low > 0:
+                insert(db, "k_monster_essence", (id, "Dark", "Low", awaken_mats_dark_low))
+            if awaken_mats_dark_mid > 0:
+                insert(db, "k_monster_essence", (id, "Dark", "Mid", awaken_mats_dark_mid))
+            if awaken_mats_dark_high > 0:
+                insert(db, "k_monster_essence", (id, "Dark", "High", awaken_mats_dark_high))
+            if awaken_mats_light_low > 0:
+                insert(db, "k_monster_essence", (id, "Light", "Low", awaken_mats_light_low))
+            if awaken_mats_light_mid > 0:
+                insert(db, "k_monster_essence", (id, "Light", "Mid", awaken_mats_light_mid))
+            if awaken_mats_light_high > 0:
+                insert(db, "k_monster_essence", (id, "Light", "High", awaken_mats_light_high))
+            if awaken_mats_magic_low > 0:
+                insert(db, "k_monster_essence", (id, "Magic", "Low", awaken_mats_magic_low))
+            if awaken_mats_magic_mid > 0:
+                insert(db, "k_monster_essence", (id, "Magic", "Mid", awaken_mats_magic_mid))
+            if awaken_mats_magic_high > 0:
+                insert(db, "k_monster_essence", (id, "Magic", "High", awaken_mats_magic_high))
+            for skill in mon["skills"]:
+                insert(db, "k_monster_skill", (id, skill))
+            for source in mon["source"]:
+                insert(db, "k_monster_source", (id, source["id"]))
+            # TODO: craft_materials
+            image = "https://swarfarm.com/static/herders/images/monsters/" + mon["image_filename"]
+            #download(image, 'public/img/content/monster/' + str(id).zfill(4) + '.png')
+            if id > 1215:
+                download(image, 'public/img/content/monster/' + str(id).zfill(4) + '.png')
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+def parseFusions(db, url):
+    print("Parsing fusions...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    first = True
+    while first or data["next"] != None:
+        first = False
+        for fusion in data["results"]:
+            id = fusion["id"]
+            product = fusion["product"]
+            stars = fusion["stars"]
+            cost = fusion["cost"]
+            for ingredient in fusion["ingredients"]:
+                insert(db, "k_fusion", (id, product, stars, cost, ingredient))
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+
+
+
+
+
+"""
+Begin script
+"""
+db = createDatabase('application/sw.sqlite')
+parseBuildings(db, 'https://swarfarm.com/api/v2/buildings/')
+parseEffects(db, 'https://swarfarm.com/api/v2/skill-effects/')
+parseSkills(db, 'https://swarfarm.com/api/v2/skills/')
+parseLeaderSkills(db, 'https://swarfarm.com/api/v2/leader-skills/')
+parseSources(db, 'https://swarfarm.com/api/v2/monster-sources/')
+parseMonsters(db, 'https://swarfarm.com/api/v2/monsters/')
+parseFusions(db, 'https://swarfarm.com/api/v2/fusions/')

install_user.py

@@ -0,0 +1,379 @@
+#!/usr/bin/python3
+
+import urllib3
+import sys
+import os
+import requests
+import urllib.request
+import sqlite3
+import wget
+import json
+
+user = "ivv0"
+
+"""
+Opens the database file.
+
+:param name: The path to the sqlite database.
+:returns: Connection to the database.
+:raises IntegrityError: The queryes couldn't bre executed.
+:raises IOError: The sqlite file couldn't be created.
+"""
+def openDatabase(name):
+    global OPT_CREATE_DB
+    print('Configuring database...')
+    try:
+        db = sqlite3.connect(name)
+        cursor = db.cursor()
+        cursor.execute('''DELETE FROM monster''')
+        cursor.execute('''DELETE FROM monster_rune''')
+        cursor.execute('''DELETE FROM rune''')
+        #cursor.execute('''DELETE FROM player''')
+        cursor.execute('''DELETE FROM building''')
+        db.commit()
+        cursor.close()
+        return db
+    except sqlite3.IntegrityError as e:
+        print("Error executing statement: " + str(e))
+        raise
+    except IOError as e:
+        print("I/O Error creating database " + name + ": " + str(e))
+        raise
+
+
+"""
+Inserts a row into the database.
+
+:param db: Connection to the database.
+:param table: Name of the table to insert into.
+:param values: List of values to insert.
+:raises IntegrityError: The insert query was unsuccesfull.
+"""
+def insert(db, table, values):
+    cursor = db.cursor()
+    placeholders = ''
+    for x in range(0, len(values)):
+        placeholders = placeholders + '?, '
+    placeholders = placeholders[:len(placeholders) - 2]
+    query = 'INSERT INTO ' + table + ' VALUES (' + placeholders + ')'
+    try:
+        cursor.execute(query, values)
+    except sqlite3.IntegrityError as e:
+        print('Error Inserting into ' + table + ' with values (' + str(values) + '): ' + str(e))
+        raise
+    cursor.close;
+
+def parseBuildings(db, url):
+    print("Parsing buildings...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for building in data["results"]:
+            building_id = building["building"]
+            level = building["level"]
+            insert(db, "building", (building_id, level))
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+def parseRunes(db, url):
+    print("Parsing runes...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for rune in data["results"]:
+            id = rune["id"]
+            com2us_id = rune["com2us_id"]
+            assigned_to = rune["assigned_to"]
+            rtype = rune["type"]
+            if rtype == 1:
+                rtype = 'Energy'
+            elif rtype == 2:
+                rtype = 'Fatal'
+            elif rtype == 3:
+                rtype = 'Blade'
+            elif rtype == 4:
+                rtype = 'Rage'
+            elif rtype == 5:
+                rtype = 'Swift'
+            elif rtype == 6:
+                rtype = 'Focus'
+            elif rtype == 7:
+                rtype = 'Guard'
+            elif rtype == 8:
+                rtype = 'Endure'
+            elif rtype == 9:
+                rtype = 'Violent'
+            elif rtype == 10:
+                rtype = 'Will'
+            elif rtype == 11:
+                rtype = 'Nemesis'
+            elif rtype == 12:
+                rtype = 'Shield'
+            elif rtype == 13:
+                rtype = 'Revenge'
+            elif rtype == 14:
+                rtype = 'Despair'
+            elif rtype == 15:
+                rtype = 'Vampire'
+            elif rtype == 16:
+                rtype = 'Destroy'
+            elif rtype == 17:
+                rtype = 'Fight'
+            elif rtype == 18:
+                rtype = 'Determination'
+            elif rtype == 19:
+                rtype = 'Enhance'
+            elif rtype == 20:
+                rtype = 'Accuracy'
+            elif rtype == 21:
+                rtype = 'Tolerance'
+            slot = rune["slot"]
+            stars = rune["stars"]
+            level = rune["level"]
+            quality = rune["quality"]
+            original_quality = rune["original_quality"]
+            value = rune["value"]
+            substat_upgrades_remaining = rune["substat_upgrades_remaining"]
+            efficiency = rune["efficiency"]
+            max_efficiency = rune["max_efficiency"]
+            main_stat = rune["main_stat"]
+            main_stat_value = rune["main_stat_value"]
+            innate_stat = rune["innate_stat"]
+            innate_stat_value = rune["innate_stat_value"]
+            substat_1 = rune["substat_1"]
+            substat_1_value = rune["substat_1_value"]
+            substat_1_craft = rune["substat_1_craft"]
+            substat_2 = rune["substat_2"]
+            substat_2_value = rune["substat_2_value"]
+            substat_2_craft = rune["substat_2_craft"]
+            substat_3 = rune["substat_3"]
+            substat_3_value = rune["substat_3_value"]
+            substat_3_craft = rune["substat_3_craft"]
+            substat_4 = rune["substat_4"]
+            substat_4_value = rune["substat_4_value"]
+            substat_4_craft = rune["substat_4_craft"]
+            """
+            Human readable stat names (as of 2019-08-16):
+                STAT_HP = 1
+                STAT_HP_PCT = 2
+                STAT_ATK = 3
+                STAT_ATK_PCT = 4
+                STAT_DEF = 5
+                STAT_DEF_PCT = 6
+                STAT_SPD = 7
+                STAT_CRIT_RATE_PCT = 8
+                STAT_CRIT_DMG_PCT = 9
+                STAT_RESIST_PCT = 10
+                STAT_ACCURACY_PCT = 11
+            """
+            if (main_stat == 1):
+                main_stat = "HP"
+            elif (main_stat == 2):
+                main_stat = "HP%"
+            elif (main_stat == 3):
+                main_stat = "ATK"
+            elif (main_stat == 4):
+                main_stat = "ATK%"
+            elif (main_stat == 5):
+                main_stat = "DEF"
+            elif (main_stat == 6):
+                main_stat = "DEF%"
+            elif (main_stat == 7):
+                main_stat = "SPD"
+            elif (main_stat == 8):
+                main_stat = "CRR"
+            elif (main_stat == 9):
+                main_stat = "CRD"
+            elif (main_stat == 10):
+                main_stat = "RES"
+            elif (main_stat == 11):
+                main_stat = "ACC"
+            if (innate_stat == 1):
+                innate_stat = "HP"
+            elif (innate_stat == 2):
+                innate_stat = "HP%"
+            elif (innate_stat == 3):
+                innate_stat = "ATK"
+            elif (innate_stat == 4):
+                innate_stat = "ATK%"
+            elif (innate_stat == 5):
+                innate_stat = "DEF"
+            elif (innate_stat == 6):
+                innate_stat = "DEF%"
+            elif (innate_stat == 7):
+                innate_stat = "SPD"
+            elif (innate_stat == 8):
+                innate_stat = "CRR"
+            elif (innate_stat == 9):
+                innate_stat = "CRD"
+            elif (innate_stat == 10):
+                innate_stat = "RES"
+            elif (innate_stat == 11):
+                innate_stat = "ACC"
+            if (substat_1 == 1):
+                substat_1 = "HP"
+            elif (substat_1 == 2):
+                substat_1 = "HP%"
+            elif (substat_1 == 3):
+                substat_1 = "ATK"
+            elif (substat_1 == 4):
+                substat_1 = "ATK%"
+            elif (substat_1 == 5):
+                substat_1 = "DEF"
+            elif (substat_1 == 6):
+                substat_1 = "DEF%"
+            elif (substat_1 == 7):
+                substat_1 = "SPD"
+            elif (substat_1 == 8):
+                substat_1 = "CRR"
+            elif (substat_1 == 9):
+                substat_1 = "CRD"
+            elif (substat_1 == 10):
+                substat_1 = "RES"
+            elif (substat_1 == 11):
+                substat_1 = "ACC"
+            if (substat_2 == 1):
+                substat_2 = "HP"
+            elif (substat_2 == 2):
+                substat_2 = "HP%"
+            elif (substat_2 == 3):
+                substat_2 = "ATK"
+            elif (substat_2 == 4):
+                substat_2 = "ATK%"
+            elif (substat_2 == 5):
+                substat_2 = "DEF"
+            elif (substat_2 == 6):
+                substat_2 = "DEF%"
+            elif (substat_2 == 7):
+                substat_2 = "SPD"
+            elif (substat_2 == 8):
+                substat_2 = "CRR"
+            elif (substat_2 == 9):
+                substat_2 = "CRD"
+            elif (substat_2 == 10):
+                substat_2 = "RES"
+            elif (substat_2 == 11):
+                substat_2 = "ACC"
+            if (substat_3 == 1):
+                substat_3 = "HP"
+            elif (substat_3 == 2):
+                substat_3 = "HP%"
+            elif (substat_3 == 3):
+                substat_3 = "ATK"
+            elif (substat_3 == 4):
+                substat_3 = "ATK%"
+            elif (substat_3 == 5):
+                substat_3 = "DEF"
+            elif (substat_3 == 6):
+                substat_3 = "DEF%"
+            elif (substat_3 == 7):
+                substat_3 = "SPD"
+            elif (substat_3 == 8):
+                substat_3 = "CRR"
+            elif (substat_3 == 9):
+                substat_3 = "CRD"
+            elif (substat_3 == 10):
+                substat_3 = "RES"
+            elif (substat_3 == 11):
+                substat_3 = "ACC"
+            if (substat_4 == 1):
+                substat_4 = "HP"
+            elif (substat_4 == 2):
+                substat_4 = "HP%"
+            elif (substat_4 == 3):
+                substat_4 = "ATK"
+            elif (substat_4 == 4):
+                substat_4 = "ATK%"
+            elif (substat_4 == 5):
+                substat_4 = "DEF"
+            elif (substat_4 == 6):
+                substat_4 = "DEF%"
+            elif (substat_4 == 7):
+                substat_4 = "SPD"
+            elif (substat_4 == 8):
+                substat_4 = "CRR"
+            elif (substat_4 == 9):
+                substat_4 = "CRD"
+            elif (substat_4 == 10):
+                substat_4 = "RES"
+            elif (substat_4 == 11):
+                substat_4 = "ACC"
+            insert(db, "rune", (id, com2us_id, assigned_to, rtype, slot, stars, level, quality, original_quality, value, substat_upgrades_remaining, efficiency, max_efficiency, main_stat, main_stat_value, innate_stat, innate_stat_value, substat_1, substat_1_value, substat_1_craft, substat_2, substat_2_value, substat_2_craft, substat_3, substat_3_value, substat_3_craft, substat_4, substat_4_value, substat_4_craft))
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+def parseMonsters(db, url):
+    print("Parsing monsters...")
+    http = urllib3.PoolManager()
+    mlist = str(http.request('GET', url).data.decode('utf-8'))
+    data = json.loads(mlist)
+    while True:
+        for mon in data["results"]:
+            id = mon["id"]
+            com2us_id = mon["com2us_id"]
+            monster = mon["monster"]
+            stars = mon["stars"]
+            level = mon["level"]
+            skill_1_level = mon["skill_1_level"]
+            skill_2_level = mon["skill_2_level"]
+            skill_3_level = mon["skill_3_level"]
+            skill_4_level = mon["skill_4_level"]
+            base_hp = mon["base_hp"]
+            base_attack = mon["base_attack"]
+            base_defense = mon["base_defense"]
+            base_speed = mon["base_speed"]
+            base_crit_rate = mon["base_crit_rate"]
+            base_crit_damage = mon["base_crit_damage"]
+            base_resistance = mon["base_resistance"]
+            base_accuracy = mon["base_accuracy"]
+            rune_hp = mon["rune_hp"]
+            rune_attack = mon["rune_attack"]
+            rune_defense = mon["rune_defense"]
+            rune_speed = mon["rune_speed"]
+            rune_crit_rate = mon["rune_crit_rate"]
+            rune_crit_damage = mon["rune_crit_damage"]
+            rune_resistance = mon["rune_resistance"]
+            rune_accuracy = mon["rune_accuracy"]
+            avg_rune_efficiency = mon["avg_rune_efficiency"]
+            fodder = mon["fodder"]
+            in_storage = mon["in_storage"]
+            ignore_for_fusion = mon["ignore_for_fusion"]
+            priority = mon["priority"]
+            notes = mon["notes"]
+            insert(db, "monster", (id, com2us_id, monster, stars, level, skill_1_level, skill_2_level, skill_3_level, skill_4_level, base_hp, base_attack, base_defense, base_speed, base_crit_rate, base_crit_damage, base_resistance, base_accuracy, rune_hp, rune_attack, rune_defense, rune_speed, rune_crit_rate, rune_crit_damage, rune_resistance, rune_accuracy, avg_rune_efficiency, fodder, in_storage, ignore_for_fusion, priority, notes))
+            for rune in mon["runes"]:
+                insert(db, "monster_rune", (id, rune["id"]))
+
+        # Next page
+        db.commit()
+        if data["next"] != None:
+            mlist = str(http.request('GET', data["next"]).data.decode('utf-8'))
+            data = json.loads(mlist)
+        else:
+            break
+
+
+
+"""
+Begin script
+"""
+db = openDatabase('application/sw.sqlite')
+parseBuildings(db, 'https://swarfarm.com/api/v2/profiles/' + user +  '/buildings/')
+parseRunes(db, 'https://swarfarm.com/api/v2/profiles/' + user +  '/runes/')
+parseMonsters(db, 'https://swarfarm.com/api/v2/profiles/' + user +  '/monsters/')
+db.commit()
+

public/css/catalog.css

@@ -1,4 +1,4 @@
-div#filters{
+section#filters{
     width: 80%;
     text-align:center;
     margin: 1em auto 2em auto;
@@ -6,36 +6,39 @@ div#filters{
     border-radius: 0.5em;
     background-color: #aa8866;
 }
-div#filters div.filter{
+section#filters div.filter{
     vertical-align: top;
     margin: 0.7em;
     display: inline-block;
     text-align: center;
 }
-div#filters div.filter input{
+section#filters div.filter span{
+    color: #ffffff;
+}
+section#filters div.filter input{
     margin-top: 0.5em;
 }
-div#filters div#filter_stars input{
+section#filters div#filter_stars input{
     width: 3em;
 }
-div#filters div#filter_apply{
+section#filters div#filter_apply{
     text-align: center;
     margin: 2em auto 1em auto;
 }
 
-div#catalog{
+section#catalog{
     display: block;
     width: 80%;
     margin: auto;
     text-align: center;
 }
 @media screen and (max-width : 990px){
-    div#catalog{
+    section#catalog{
         width: 100%;
     }
 }
 
-div#catalog div.monster{
+section#catalog div.monster{
     display: inline-block;
     width: 7em;
     height: 7em;
@@ -45,12 +48,12 @@ div#catalog div.monster{
     border-radius: 15%;
 }
 
-div#catalog div.monster.unowned{
+section#catalog div.monster.unowned{
     background-color: #000000;
     filter: brightness(50%);
 }
 @media screen and (max-width : 990px){
-    div#catalog div.monster{
+    section#catalog div.monster{
         height: 6em;
         width: 6em;
         border: 0.1em solid #000000;
@@ -59,34 +62,34 @@ div#catalog div.monster.unowned{
     }
 }
 
-div#catalog div.monster span.stars{
+section#catalog div.monster span.stars{
     position: absolute;
-    z-index: 1;
+/*     z-index: 1; */
     top: 0.4em;
     right: 0.5em;
 }
 @media screen and (max-width : 990px){
-    div#catalog div.monster span.stars{
+    section#catalog div.monster span.stars{
         top: 0.3em;
         right: 0.4em;
     }
 }
 
-div#catalog div.monster span.stars img.star{
+section#catalog div.monster span.stars img.star{
     width: 1em;
     height: 1em;
     margin-left: -0.6em;
     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#catalog div.monster span.stars img.star{
+    section#catalog div.monster span.stars img.star{
         width: 0.9em;
         height: 0.9em;
         margin-left: -0.7em;
     }
 }
 
-div#catalog div.monster img.monster{
+section#catalog div.monster img.monster{
     width: 6.5em;
     height: 6.5em;
     border-style: solid;
@@ -94,7 +97,7 @@ div#catalog div.monster img.monster{
     border-radius: 15%;
 }
 @media screen and (max-width : 990px){
-    div#catalog div.monster img.monster{
+    section#catalog div.monster img.monster{
         width: 5.6em;
         height: 5.6em;
         border-width: 0.2em;
@@ -108,7 +111,7 @@ div#viewer{
     position: fixed;
     left: 22%;
     top: 10%;
-    z-index: 2;
+    z-index: 20;
     display: none;
     padding: 0;
 }

public/css/collection.css

@@ -1,290 +0,0 @@
-div#collection{
-    display: inline-block;
-    width: 50%;
-    margin-right: 2em;
-    margin-top: 2em;
-    vertical-align: top;
-    border: 0.2em solid #f2c920;
-    border-radius: 1.5em;
-    padding: 1em;
-    background-color: #222222;
-    box-shadow: inset 0 0 2em #aaaaaa;
-}
-@media screen and (max-width : 990px){
-    div#collection{
-        display: block;
-        width: 90%;
-        margin: 0.5em auto 0.5em auto;
-        overflow-x: scroll;
-        white-space: nowrap;
-        border: initial;
-        border-top: 0.1em solid #000000;
-        border-left: 0.1em solid #000000;
-        border-right: 0.1em solid #000000;
-        border-bottom: 0;
-        border-radius: initial;
-        border-top-left-radius: 1em;
-        border-top-right-radius: 1em;
-        border-bottom-left-radius: 0em;
-        border-bottom-right-radius: 0em;
-    }
-}
-
-div#collection div.monster{
-    display: inline-block;
-    width: 6em;
-    height: 6em;
-    border: 0.2em solid #000000;
-    margin: 0.5em;
-    position: relative;
-    border-radius: 15%;
-}
-
-@media screen and (max-width : 990px){
-    div#collection div.monster{
-        height: 5em;
-        width: 5em;
-        border: 0.1em solid #000000;
-        margin: 0.2em;
-        border-radius: 10%;
-    }
-}
-
-div#collection div.monster span.stars{
-    position: absolute;
-    z-index: 1;
-    top: 0.4em;
-    right: 0.5em;
-}
-@media screen and (max-width : 990px){
-    div#collection div.monster span.stars{
-        top: 0.3em;
-        right: 0.4em;
-    }
-}
-
-div#collection div.monster span.stars img.star{
-    width: 1em;
-    height: 1em;
-    margin-left: -0.6em;
-    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#collection div.monster span.stars img.star{
-        width: 0.9em;
-        height: 0.9em;
-        margin-left: -0.7em;
-    }
-}
-
-div#collection div.monster img.monster{
-    width: 5.5em;
-    height: 5.5em;
-    border-style: solid;
-    border-width: 0.3em;
-    position: absolute;
-    border-radius: 15%;
-}
-@media screen and (max-width : 990px){
-    div#collection div.monster img.monster{
-        width: 4.6em;
-        height: 4.6em;
-        border-width: 0.2em;
-        border-radius: 10%;
-    }
-}
-
-div#collection div.monster span.level{
-    color: #000000;
-    font-weight: bold;
-    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
-    position: absolute;
-    z-index: 1;
-    bottom: 0.2em;
-    left: 0.5em;
-}
-@media screen and (max-width : 990px){
-    div#collection div.monster span.level{
-        font-size: 90%;
-        text-shadow: 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.3em #ffffff;
-        left: 0.4em;
-    }
-}
-
-div#portrait_container{
-    display: inline-block;
-    width: 30%;
-    vertical-align: top;
-    background-color: #f5e7c8;
-    border: 0.2em solid #f2c920;
-    border-radius: 2em;
-    padding: 1em;
-    min-height: 36em;
-    margin-top: 2em;
-    box-shadow: inset 0 0 2em #000000;
-}
-@media screen and (max-width : 990px){
-    div#portrait_container{
-        display: block;
-        width: 80%;
-        margin: 0.5em auto 0.5em auto;
-    }
-}
-
-div#portrait_container div#portrait{
-    text-align: center;
-}
-
-div#portrait_container div#portrait img#portrait_img{
-    width: 7em;
-    height: 7em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 15%;
-    filter: drop-shadow(0 0 0.1em #000000);
-}
-
-div#portrait_container div#portrait h4#portrait_title{
-    font-size: 130%;
-    font-weight: bold;
-    margin: 0.2em 0.2em 0.5em 0.2em;
-    text-shadow: 0 0 0.1em #000000;
-}
-
-div#portrait_container div#portrait h5#portrait_details{
-}
-
-div#portrait_container div#portrait div#portrait_default_stars{
-    margin: 0.2em;
-    text-align: center;
-}
-
-div#portrait_container div#portrait div#portrait_default_stars img.portrait_star{
-    width: 1em;
-    height: 1em;
-    filter: drop-shadow(0 0 0.1em #000000);
-}
-
-div#portrait_container div#portrait div#portrait_current_stars{
-    margin: 0.5em;
-    text-align: center;
-}
-
-div#portrait_container div#portrait div#portrait_current_stars img.portrait_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);
-}
-
-div#portrait_container div#portrait div#portrait_current_stars img.portrait_star_translucent{
-    opacity: 0.2;
-}
-
-div#portrait_container div#portrait table#portrait_stats{
-    width: 90%;
-    margin: auto;
-    border-collapse: collapse;
-}
-
-div#portrait_container div#portrait table#portrait_stats td.name{
-    text-align: right;
-    padding: 0 0.5em;
-    width: 30%;
-    font-style: italic;
-    font-size: 90%;
-}
-
-div#portrait_container div#portrait table#portrait_stats td.value{
-    text-align: left;
-    padding: 0 0.5em;
-    width: 20%;
-    font-style: italic;
-    font-weight: bold;
-}
-
-div#portrait_container div#portrait table#portrait_skills{
-    width: 80%;
-    margin: auto;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-    background-color: #aa8866;
-}
-
-div#portrait_container div#portrait table#portrait_skills td{
-    vertical-align: top;
-    padding: 0.1em 0.2em;
-    text-align: center;
-    width: 1%;
-}
-
-div#portrait_container div#portrait hr#portrait_separator{
-    width: 70%;
-    margin: 2em auto;
-}
-
-div#portrait_container div#portrait table#portrait_table{
-    width: 80%;
-    margin: auto;
-    border-collapse: collapse;
-}
-
-div#portrait_container div#portrait table#portrait_table td{
-    padding: 0.5em;
-}
-
-div#portrait_container div#portrait table#portrait_table td.left{
-    text-align: right;
-}
-
-div#portrait_container div#portrait table#portrait_table td.right{
-    text-align: left;
-}
-
-div#portrait_container div#portrait table#portrait_table input[type="number"]{
-    width: 4em;
-}
-
-div#new{
-    width: 50%;
-    height: 50%;
-    position: fixed;
-    left: 25%;
-    top: 10%;
-    z-index: 2;
-    display: none;
-}
-
-div#new #new_table{
-    width: 80%;
-    margin: auto;
-    border-collapse: collapse;
-}
-
-div#new #new_table td{
-    padding: 0.5em;
-}
-
-div#new #new_table td.left{
-    text-align: right;
-}
-
-div#new #new_table td.right{
-    text-align: left;
-}
-
-div#new #new_table td.center{
-    text-align: center;
-}
-
-div#new #new_table td.center img.new_img{
-    width: 2.5em;
-    height: 2.5em;
-    border-style: solid;
-    border-width: 0.2em;
-    border-radius: 50%;
-}
-
-div#new #new_table input[type="number"]{
-    width: 4em;
-}

public/css/fusion.css

@@ -1,202 +1,275 @@
-table.fusion{
+div.fusion{
+    width: 90%;
+    margin: 1em auto;
+    border: 0.2em solid #f2c920;
+    border-radius: 1.5em;
+    background-color: #f5e7c8;
+    box-shadow: 0 0 2em #aaaaaa;
+    padding: 1em;
 }
-table.fusion td{
-    text-align: center;
-    padding: 0.3em;
+div.fusion div.target{
+    display: inline-block;
+    vertical-align: middle;
 }
-table.fusion img.monster_star{
-    width: 1em;
-    height: 1em;
+div.fusion div.sources{
+    display: inline-block;
+    vertical-align: middle;
 }
-@media screen and (max-width : 990px){
-    table.fusion img.monster_star{
-        width: 0.9em;
-        height: 0.9em;
-        margin:0 -0.3em 0 -0.3em;
-    }
+div.fusion div.sources div.sources_inside{
+    border-top: 0.2em solid #c2a485;
+    border-bottom: 0.2em solid #c2a485;
+    margin: 0;
+    padding: 0.7em;
+    display: inline-block;
+    vertical-align: middle;
 }
-table.fusion span.monster_level{
-    font-weight: bold;
-    font-size: 85%;
+div.fusion div.sub_sources{
+    display: inline-block;
+    vertical-align: middle;
+    border-left: 0.2em solid #c2a485;
+    margin: 0.5em;
+    padding: 0.5em;
 }
-table.fusion h4.name_aw{
-    font-size: 85%;
-    min-width: 15em;
-    margin: 0.1em 0 0 0;
+div.fusion div.sub_sources:after{
+    content:"\A";
+    white-space: pre;
 }
-@media screen and (max-width : 990px){
-    table.fusion h4.name_aw{
-        min-width: initial;
-    }
+
+div.fusion div.monster{
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
 }
-table.fusion table.fusion h5.name{
-    font-size: 85%;
-    margin: 0.1em 0 0 0;
+div.fusion div.monster.lv1{
+    width: 7em;
+    height: 7em;
+    margin: 0.5em;
 }
-table.fusion hr.owned_separator{
-    width: 50%;
-    margin: 0.1em auto;
+div.fusion div.monster.lv2{
+    width: 6em;
+    height: 6em;
+    margin: 0.3em;
 }
-table.fusion table.owned{
-    border-collapse: collapse;
-    text-align: left;
-    margin: auto;
+div.fusion div.monster.lv3{
+    width: 4em;
+    height: 4em;
+    margin: 0.2em;
+    text-align: center;
 }
-table.fusion table.owned td{
-    border: 0px;
+div.fusion div.monster span.stars{
+    position: absolute;
+    z-index: 1;
+    top: 0.4em;
+    right: 0.5em;
 }
-
-table.fusion table.owned img.owned_monster{
-    width: 1.7em;
-    height: 1.7em;
-    margin-right: 0.5em;
-    border-style: solid;
-    border-width: 0.15em;
-    border-radius: 50%;
+div.fusion div.monster.lv1 span.stars{
+    top: 0.5em;
+    right: 0;
 }
-@media screen and (max-width : 990px){
-    table.fusion table.owned img.owned_monster{
-        width: 1.3em;
-        height: 1.3em;
-        margin-right: 0.2em;
-        border-width: 0.1em;
-    }
-}
-table.fusion table.owned img.owned_star{
-    width: 0.8em;
-    height: 0.8em;
-}
-@media screen and (max-width : 990px){
-    table.fusion table.owned img.owned_star{
-        width: 0.6em;
-        height: 0.6em;
-        margin: 0 -0.2em 0 -0.2em;
-    }
+div.fusion div.monster.lv2 span.stars{
+    top: 0.4em;
+    right: 0;
 }
-
-table.fusion table.owned img.owned_check{
-    margin-left: 1em;
+div.fusion div.monster.lv3 span.stars{
+    top: 0;
+    right: 0;
+}
+div.fusion div.monster.lv1 span.stars img.star{
     width: 1.5em;
     height: 1.5em;
+    margin-left: -0.6em;
+    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}
+div.fusion div.monster.lv2 span.stars img.star{
+    width: 1.1em;
+    height: 1.1em;
+    margin-left: -0.5em;
+    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}
+div.fusion div.monster.lv3 span.stars img.star{
+    width: 0.7em;
+    height: 0.7em;
+    margin-left: -0.5em;
+    filter: drop-shadow(0 0 0.1em #000000);
+}
+
+
+div.fusion div.monster img.monster{
+    border-style: solid;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 1em #555555;
+}
+div.fusion div.monster.lv1 img.monster{
+    border-width: 0.3em;
+    border-radius: 25%;
+}
+div.fusion div.monster.lv2 img.monster{
+    border-width: 0.2em;
+    border-radius: 20%;
 }
-@media screen and (max-width : 990px){
-    table.fusion table.owned img.owned_check{
-        margin-left: 0.2em;
-        width: 1.2em;
-        height: 1.2em;
-    }
+div.fusion div.monster.lv3 img.monster{
+    border-width: 0.1em;
+    border-radius: 15%;
 }
-table.fusion table.owned span.owned_level{
+
+div.fusion div.monster span.level{
+    color: #000000;
     font-weight: bold;
-    font-size: 0.6em;
-    margin-top: -0.6em;
+    position: absolute;
+    z-index: 1;
+}
+div.fusion div.monster.lv1 span.level{
+    bottom: 0.2em;
+    left: 0.5em;
+    font-size: 100%;
+    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
+}
+div.fusion div.monster.lv2 span.level{
+    bottom: 0.1em;
+    left: 0.5em;
+    font-size: 90%;
+    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
+}
+div.fusion div.monster.lv3 span.level{
+    top: 0.2em;
+    left: 0.25em;
+    font-size: 70%;
+    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff;
+}
+
+
+
+
+div.fusion div.monster_details{
+    width: 8em;
+    display: inline-block;
+    vertical-align: top;
+}
+div.fusion div.monster_details.lv1{
     display: block;
 }
-table.level_1{
-    background: linear-gradient(to right, #ef8d31 0%,#f5ab66 53%,#fac695 100%);
-    margin: 2em auto;
-    width: 90%;
-    border-collapse: collapse;
-    border: 0.2em solid #f2c920;
-    box-shadow: 0 0 0.3em #000000;
+div.fusion div.monster_details h5{
+    text-align: center;
 }
-table.level_1 td{
-    padding: 0;
+div.fusion div.monster_details.lv1 h5{
+    margin: 1em auto;
+    font-size: 150%;
+    text-shadow: 0 0 0.09em #000000, 0 0 2em #ffffff;
 }
-table.level_1 td.level_1{
-    width: 33%;
+div.fusion div.monster_details.lv2 h5{
+    margin: 0.5em auto;
+    font-size: 90%;
+    text-shadow: 0 0 0.05em #000000, 0 0 2em #ffffff;
 }
-table.level_1 img.monster{
-    width: 4em;
-    height: 4em;
-    border-style: solid;
-    border-width: 0.3em;
-    border-radius: 50%;
+div.fusion div.monster_details hr.owned_separator{
+    margin: 0 1em;
+    height: 0;
 }
-@media screen and (max-width : 990px){
-    table.level_1 img.monster{
-        width: 3em;
-        height: 3em;
-        border-width: 0.2em;
-    }
+
+
+div.fusion div.monster_owned{
+    display: inline-block;
+    position: relative;
+}
+div.fusion div.monster_owned.lv1{
+    width: 3.5em;
+    height: 3.5em;
+    margin: 0.2em;
+    border-radius: 10%;
+}
+div.fusion div.monster_owned.lv2{
+    width: 2.3em;
+    height: 2.3em;
+    margin: 0.3em auto;
+    border-radius: 5%;
+    display: block;
 }
-table.level_2{
-    width: 100%;
-    border-left: 0.1em solid #000000;
-    border-top: 0.1em solid #000000;
-    border-bottom: 0.1em solid #000000;
-    margin: -0.1em -0.1em 0 -0.1em;
-    padding: 0;
-    border-collapse: collapse;
-}
-table.level_2 td{
-    padding: 0;
-}
-table.level_2 img.monster{
-    width: 3em;
-    height: 3em;
-    border-style: solid;
+div.fusion div.monster_owned.lv3{
+    width: 2.2em;
+    height: 2.2em;
+    margin: auto;
+    border-radius: 25%;
     border-width: 0.2em;
-    border-radius: 50%;
+    position: absolute;
+    bottom: -1em;
+    z-index: 4;
+    filter: drop-shadow(0 0 0.2em #ffffff);
 }
-@media screen and (max-width : 990px){
-    table.level_2 img.monster{
-        width: 2em;
-        height: 2em;
-        border-width: 0.15em;
-    }
+
+
+div.fusion div.monster_owned span.stars{
+    position: absolute;
+    z-index: 1;
 }
-table.level_3{
-    width: 100%;
-    margin: -0.1em;
-    border-left: 0.1em solid #000000;
-    border-top: 0.1em solid #000000;
-    border-bottom: 0.1em solid #000000;
-    margin: -0.1em -0.1em 0 -0.1em;
-    border-collapse: collapse;
-}
-table.level_3 td{
-    padding: 0;
-}
-table.level_3 td.left{
-    text-align: right;
-    padding-right: 0.5em;
-}
-table.level_3 td.right{
-    text-align: left;
-    padding-left: 0.5em;
-}
-table.level_3 h4.name_aw{
-    min-width: initial;
-    display: inline-block;
-    vertical-align: middle;
+div.fusion div.monster_owned.lv1 span.stars{
+    top: 0.2em;
+    right: 0.2em;
 }
-table.level_3 h5.name{
-    display: inline-block;
-    vertical-align: middle;
+div.fusion div.monster_owned.lv2 span.stars{
+    top: -0.2em;
+    right: 0em;
+}
+div.fusion div.monster_owned.lv3 span.stars{
+    top: -0.1em;
+    right: 0.2em;
 }
-table.level_3 h5.name:pre{
-    content: ' - ';
+
+div.fusion div.monster_owned.lv1 span.stars img.star{
+    width: 0.6em;
+    height: 0.6em;
+    margin-left: -0.6em;
+    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}
+div.fusion div.monster_owned.lv2 span.stars img.star{
+    width: 0.5em;
+    height: 0.5em;
+    margin-left: -0.4em;
+    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}
+div.fusion div.monster_owned.lv3 span.stars img.star{
+    width: 0.4em;
+    height: 0.4em;
+    margin-left: -0.3em;
+    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
 }
-table.level_3 img.monster{
-    width: 1.8em;
-    height: 1.8em;
+
+div.fusion div.monster_details div.monster_owned img.monster{
     border-style: solid;
     border-width: 0.1em;
-    border-radius: 50%;
-    vertical-align: middle;
+    width: 100%;
+    height: 100%;
 }
-@media screen and (max-width : 990px){
-    table.level_3 img.monster{
-        width: 1.4em;
-        height: 1.4em;
-    }
+div.fusion div.monster_owned.lv1 img.monster{
+    border-radius: 10%;
 }
-table.level_3 img.owned_monster{
-    width: 1.1em;
-    height: 1.1em;
-    margin-right: 0.2em;
-    border-style: solid;
-    border-width: 0.1em;
+div.fusion div.monster_owned.lv2 img.monster{
+    border-radius: 10%;
+}
+div.fusion div.monster_owned.lv3 img.monster{
     border-radius: 50%;
 }
+
+div.fusion div.monster_owned span.level{
+    color: #000000;
+    font-weight: bold;
+    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
+    position: absolute;
+    z-index: 1;
+}
+div.fusion div.monster_owned.lv1 span.level{
+    bottom: 0.2em;
+    left: 0.5em;
+    font-size: 90%;
+}
+div.fusion div.monster_owned.lv2 span.level{
+    bottom: 0em;
+    left: 0.5em;
+    font-size: 80%;
+}
+div.fusion div.monster_owned.lv3 span.level{
+    top: initial;
+    bottom: 0;
+    left: 1.2em;
+    font-size: 70%;
+}

public/css/monster.css

@@ -0,0 +1,594 @@
+section#monster{
+    display: block;
+    width: 98%;
+    margin: auto;
+    text-align: center;
+}
+@media screen and (max-width : 990px){
+    section#monster{
+        width: 100%;
+    }
+}
+
+section#monster article#profile{
+	max-width: 60%;
+    display: inline-block;
+    vertical-align: top;
+    /*width: 7em;*/
+    border: 0.2em solid #000000;
+    margin: 0.5em;
+    position: relative;
+    border-radius: 15%;
+    background: #351e0b;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0.5em;
+}
+@media screen and (max-width : 990px){
+    section#monster article#profile{
+        height: 6em;
+        width: 6em;
+        border: 0.1em solid #000000;
+        margin: 0.2em;
+        border-radius: 10%;
+    }
+}
+section#monster article#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;
+}
+section#monster article#profile div#details{
+	display: inline-block;
+	vertical-align: top;
+	text-align: center;
+}
+section#monster article#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;
+}
+section#monster article#profile div#details span.stars{
+    display: block;
+}
+section#monster article#profile div#details span.stars img.star{
+    width: 1.5em;
+    height: 1.5em;
+    filter: drop-shadow(0 0 0.05em #ffffff);
+    margin: -0.1em;
+}
+section#monster article#profile div#details span.level{
+    color: #ffffff;
+    display: block;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
+}
+section#monster article#profile h4{
+	color: #ffffff;
+	font-weight: bold;
+	text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
+	margin: 0.1em;
+	display: block;
+}
+
+section#monster article#profile table#stats{
+    font-size: 80%;
+    border: 0.1em solid black;
+    color: #ffffff;
+}
+
+section#monster article#profile table#stats th{
+    font-weight: bold;
+}
+
+section#monster article#profile table#stats td.extra{
+    color: #aaaaff;
+}
+
+section#monster article#profile table#stats td.total{
+    color: #f2c920;
+    font-weight: bold;
+}
+
+section#monster article#profile div#skills{
+	text-align: center;
+}
+
+section#monster article#profile div#skills div.skill{
+	display: inline-block;
+	vertical-align: top;
+	margin: 0.5em;
+	color: #ffffff;
+	text-align: center;
+	max-width: 20%;
+}
+
+section#monster article#profile div#skills div.skill img.skill_img{
+	width: 5em;
+	height: 5em;
+	border: 0.3em solid #f2c920;
+    border-radius: 0.5em;
+}
+section#monster article#profile div#skills div.skill span.skill_level{
+	font-size: 130%;
+	position: relative;
+	top: -2em;
+	right: -0.8em;
+	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;
+}
+
+section#monster article#profile div#skills div.skill span.skill_level.maxed{
+	color: #f2c920;
+}
+
+section#monster article#profile 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.5em;
+	display: block;
+	font-weight: bold;
+}
+
+section#monster article#profile div#skills div.skill span.skill_description{
+	font-size: 90%;
+	font-style: italic;
+}
+
+section#monster article#profile div#skills div.skill span.skill_effects{
+	display: block;
+	text-align: center;
+	margin-top: 1em;
+}
+
+section#monster article#profile div#skills div.skill span.skill_effects img.effect_img{
+	width: 1.5em;
+	height: 1.5em;
+	border: 0.1em solid #000000;
+    border-radius: 0.5em;
+}
+
+section#monster article#profile div#skills div.skill table.skill_up{
+	font-size: 80%;
+	margin-top: 1em;
+}
+
+section#monster article#profile div#skills div.skill table.skill_up td{
+	color: #888888;
+}
+
+section#monster article#profile div#skills div.skill table.skill_up td.level{
+	font-style: italic;
+	padding-right: 0.8em;
+	min-width: 3em; 
+}
+
+section#monster article#profile div#skills div.skill table.skill_up td.aquired{
+	color: #ffffff;
+	font-weight: bold;
+}
+
+section#monster article#profile table#skill_averages{
+	margin: 3em auto 2em auto;
+	color: #ffffff;
+	font-size: 120%;
+	border-top: 0.1em solid #ffffff;
+	border-bottom: 0.1em solid #ffffff;
+	border-radius: 0.3em;
+	padding-top: 2em;
+	padding-bottom: 2em;
+}
+
+section#monster article#profile table#skill_averages td.title{
+	padding-left: 4em;
+	text-align: right;
+}
+section#monster article#profile table#skill_averages td.value{
+	padding-right: 4em;
+	text-align: left;
+	padding-left: 1em;
+}
+
+section#monster article#runes{
+	max-width: 45%;
+    display: inline-block;
+    vertical-align: top;
+    /*width: 7em;*/
+    border: 0.2em solid #000000;
+    margin: 0.5em;
+    position: relative;
+    border-radius: 15%;
+    background: #351e0b;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0em;
+}
+
+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;
+}
+
+section#monster article#runes table#table_runes td.stats table{
+	color: #ffffff;
+	font-size: 80%;
+}
+
+section#monster article#runes table#table_runes td.stats table tr.main_stat{
+	font-weight: bold;
+	font-size: 110%;
+}
+
+section#monster article#runes table#table_runes td.stats table tr.innate_stat{
+	font-style: italic;
+}
+
+section#monster article#runes table#table_runes td.stats table td.stat{
+	text-align: right;
+}
+section#monster article#runes table#table_runes td.stats table td.value{
+	text-align: left;
+	padding-left: 1em;
+}
+
+section#monster article#runes table#table_runes td.stats table td.craft{
+	color: #ff7700;
+}
+
+section#monster article#runes table#table_runes td.details{
+	color: #ffffff;
+	border-bottom: 0.1em solid #ffffff;
+	padding-left: 0.5em;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details{
+	font-size: 80%;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details td.title{
+	text-align: right;
+}
+section#monster article#runes table#table_runes td.details table.table_details td.value{
+	text-align: left;
+	padding-left: 1em;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details span.quality{
+	border: 0.1em solid #000000;
+	border-radius: 0.2em;
+	font-weight: bold;
+	color: #ffffff;
+	text-shadow: 0 0 0.1em #000000;
+	padding: 0 0.3em;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_normal{
+	background-color: #cccccc;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_magic{
+	background-color: #55ff55;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_rare{
+	background-color: #15c6e1;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_hero{
+	background-color: #ad7fa8;
+}
+
+section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_legend{
+	background-color: #f57900;
+}
+
+section#monster article#runes table#table_runes td.details{
+	color: #ffffff;
+	border-bottom: 0.1em solid #ffffff;
+	padding-left: 0.5em;
+}
+
+section#monster article#runes div#rune_averages{
+	margin: 5em auto 2em auto;
+	text-align: center;
+}
+
+section#monster article#runes div#rune_averages table#table_averages{
+	margin: auto;
+	color: #ffffff;
+}
+
+section#monster article#runes div#rune_averages table#table_averages td.title{
+	text-align: right;
+}
+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/monsters.css

@@ -0,0 +1,390 @@
+section#filters{
+    width: 80%;
+    text-align:center;
+    margin: 1em auto 2em auto;
+    border: 0.1em solid #000000;
+    border-radius: 0.5em;
+    background-color: #aa8866;
+}
+section#filters div.filter{
+    vertical-align: top;
+    margin: 0.7em;
+    display: inline-block;
+    text-align: center;
+}
+section#filters div.filter span{
+    color: #ffffff;
+}
+section#filters div.filter input{
+    margin-top: 0.5em;
+}
+section#filters div#filter_stars input{
+    width: 3em;
+}
+section#filters div#filter_apply{
+    text-align: center;
+    margin: 2em auto 1em auto;
+}
+
+section#list{
+    display: block;
+    width: 80%;
+    margin: auto;
+    text-align: center;
+}
+@media screen and (max-width : 990px){
+    section#list{
+        width: 100%;
+    }
+}
+
+section#list div.monster{
+    display: inline-block;
+    width: 7em;
+    height: 7em;
+    border: 0.2em solid #000000;
+    margin: 0.5em;
+    position: relative;
+    border-radius: 15%;
+}
+
+section#list div.monster.unowned{
+    background-color: #000000;
+    filter: brightness(50%);
+}
+@media screen and (max-width : 990px){
+    section#list div.monster{
+        height: 6em;
+        width: 6em;
+        border: 0.1em solid #000000;
+        margin: 0.2em;
+        border-radius: 10%;
+    }
+}
+
+section#list div.monster span.stars{
+    position: absolute;
+/*     z-index: 1; */
+    top: 0.4em;
+    right: 0.5em;
+}
+@media screen and (max-width : 990px){
+    section#list div.monster span.stars{
+        top: 0.3em;
+        right: 0.4em;
+    }
+}
+
+section#list div.monster span.stars img.star{
+    width: 1em;
+    height: 1em;
+    margin-left: -0.6em;
+    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){
+    section#list div.monster span.stars img.star{
+        width: 0.9em;
+        height: 0.9em;
+        margin-left: -0.7em;
+    }
+}
+
+section#list div.monster img.monster{
+    width: 6.5em;
+    height: 6.5em;
+    border-style: solid;
+    border-width: 0.3em;
+    border-radius: 15%;
+}
+
+section#list div.monster span.level{
+    position: relative;
+    bottom: 1.6em;
+    font-weight: bold;
+    color: #000;
+    text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
+    font-size: 1.4em;
+    right: -0.8em;
+}
+@media screen and (max-width : 990px){
+    section#list div.monster img.monster{
+        width: 5.6em;
+        height: 5.6em;
+        border-width: 0.2em;
+        border-radius: 10%;
+    }
+}
+
+section#list div.monster div.monster_tooltip{
+    position: absolute;
+    top: 0;
+    left: 6em;
+    z-index: 10;
+    display: none;
+    background: #351e0b;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0.5em;
+}
+
+section#list div.monster:hover div.monster_tooltip{
+    display: block;
+}
+
+section#list div.monster div.monster_tooltip h4{
+	color: #ffffff;
+	font-weight: bold;
+	text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
+	margin: 0.1em;
+	display: block;
+}
+
+section#list div.monster div.monster_tooltip table.stats{
+    font-size: 80%;
+    border: 0.1em solid black;
+    color: #ffffff;
+}
+
+section#list div.monster div.monster_tooltip table.stats th{
+    font-weight: bold;
+}
+
+section#list div.monster div.monster_tooltip table.stats td.extra{
+    color: #aaaaff;
+}
+
+section#list div.monster div.monster_tooltip table.stats td.total{
+    color: #f2c920;
+    font-weight: bold;
+}
+
+section#list div.monster div.monster_tooltip div.skills{
+	text-align: center;
+}
+
+section#list div.monster div.monster_tooltip div.skills div.skill{
+	display: inline-block;
+	vertical-align: top;
+	max-width: 22%;
+	margin: 0.5em;
+	font-size: 50%;
+	color: #ffffff;
+	text-align: center;
+}
+
+section#list div.monster div.monster_tooltip div.skills div.skill img{
+	width: 90%;
+	height: 90%;
+	border: 0.3em solid #f2c920;
+    border-radius: 0.5em;
+}
+section#list div.monster div.monster_tooltip div.skills div.skill span.skill_level{
+	font-size: 180%;
+	position: relative;
+	top: -2em;
+	right: -0.8em;
+	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;
+}
+
+section#list div.monster div.monster_tooltip div.skills div.skill span.skill_level.maxed{
+	color: #f2c920;
+}
+
+section#list div.monster div.monster_tooltip 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: -4em;
+	display: block;
+}
+
+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{
+    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/runes.css

@@ -0,0 +1,113 @@
+table.rune_type{
+    border: 0.2em solid #f2c920;
+    border-radius: 1.5em;
+    padding: 1em;
+    background-color: #222222;
+    box-shadow: inset 0 0 2em #aaaaaa;
+    width: 90%;
+    margin: auto;
+}
+
+table.rune_type td.rune_type_header{
+    padding: 0.8em;
+    width: 4em;
+    font-size: 140%;
+    color: #ffffff;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.3em #000000;
+    border-right: 0.1em solid #000000;
+    font-style: italic;
+    text-align: center;
+}
+table.rune_type td.rune_type_header img{
+    display: block;
+    margin: auto;
+}
+able.rune_type td.rune_type_list{
+    text-align: left;
+}
+
+div#rune_list div.rune{
+    display: inline-block;
+    width: 6em;
+    height: 6em;
+    border: 0.2em solid #000000;
+    margin: 0.5em;
+    position: relative;
+    border-radius: 15%;
+}
+
+@media screen and (max-width : 990px){
+    div#rune_list div.rune{
+        height: 5em;
+        width: 5em;
+        border: 0.1em solid #000000;
+        margin: 0.2em;
+        border-radius: 10%;
+    }
+}
+
+div#rune_list div.rune span.stars{
+    position: absolute;
+/*     z-index: 1; */
+    top: 0.4em;
+    right: 0.5em;
+}
+@media screen and (max-width : 990px){
+    div#rune_list div.rune span.stars{
+        top: 0.3em;
+        right: 0.4em;
+    }
+}
+
+div#rune_list div.rune span.stars img.star{
+    width: 1em;
+    height: 1em;
+    margin-left: -0.6em;
+    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#rune_list div.rune span.stars img.star{
+        width: 0.9em;
+        height: 0.9em;
+        margin-left: -0.7em;
+    }
+}
+
+div#rune_list div.rune img.rune{
+    width: 6em;
+    height: 6em;
+    border-style: solid;
+    border-width: 0;
+    position: absolute;
+    baorder-radius: 15%;
+}
+@media screen and (max-width : 990px){
+    div#rune_list div.rune img.rune{
+        width: 4.6em;
+        height: 4.6em;
+        border-width: 0;
+        border-radius: 10%;
+    }
+}
+div#rune_list div.rune img.rune_icon{
+    width: 40%;
+    height: 40%;
+    position: absolute;
+    margin: 30%;
+}
+div#rune_list div.rune span.level{
+    color: #000000;
+    font-weight: bold;
+    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
+    position: absolute;
+/*     z-index: 1; */
+    bottom: 0.2em;
+    left: 0.5em;
+}
+@media screen and (max-width : 990px){
+    div#rune_list div.rune span.level{
+        font-size: 90%;
+        text-shadow: 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.3em #ffffff;
+        left: 0.4em;
+    }
+}

public/css/ui.css

@@ -86,6 +86,7 @@
 .background_Magic{
     background-color: #e21af4;
 }
+
 html {
     height: 100%;
 }
@@ -119,7 +120,7 @@ a:hover{
 img.slider{
     width: 1em;
     height: 1em;
-    vertial-align: middle;
+    vertical-align: middle;
     transition: all .3s ease-in-out;
 }
 img.loader{
@@ -131,7 +132,7 @@ img.loader{
 }
 div#cover{ /* Page cofer for opening floating windows. */
     display: none;
-    background-color: #000000bb;
+    background-color: #000000;
     opacity: 0;
     transition: opacity .3s ease-in-out;
     position: fixed;
@@ -139,8 +140,9 @@ div#cover{ /* Page cofer for opening floating windows. */
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 10;
 }
-div#header{
+header{
     border-bottom: 0.3em solid #f2c920;
     border-left: 0.3em solid #f2c920;
     border-right: 0.3em solid #f2c920;
@@ -150,31 +152,31 @@ div#header{
     margin: 0 0 2em 0;
     background-color: #884444;
 }
-div#header div#logo{
+header div#logo{
     margin: auto;
     display: inline-block;
     vertical-align: middle;
     width: 20em;
     text-align: center;
 }
-div#header div#logo h1#logo_text{
+header div#logo h1#logo_text{
     font-style: italic;
     margin: -2em auto -0.7em auto;
     color: #ffffff;
     text-shadow: 0 0 0.3em #000000, 0 0 0.3em #000000, 0 0 0.3em #000000, 0 0 0.3em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 1em #000000, 0 0 1em #000000;
 }
-div#header div#logo h1#logo_text span.large{
+header div#logo h1#logo_text span.large{
     font-size: 150%;
 }
-div#header div#logo h1#logo_text span.small{
+header div#logo h1#logo_text span.small{
     font-size: 70%;
     margin-left: -0.5em;
 }
-div#header nav{
+header nav{
     display: inline-block;
     vertical-align: middle;
 }
-div#header nav a{
+header nav a{
     font-size: 2em;
     font-weight: bold;
     margin: 0.5em;
@@ -183,13 +185,13 @@ div#header nav a{
     position: relative;
     transition: all .4s ease-in-out;
 }
-div#header nav a:hover{
+header nav a:hover{
     color: #333333;
     text-shadow: 0 0 0.7em #ffffff;
 }
-div#footer{
+footer{
     color: #ffffff;
-    font-size: 110%;
+    font-size: 80%;
     text-align: center;
     border-top: 0.3em solid #f2c920;
     border-left: 0.3em solid #f2c920;
@@ -199,20 +201,20 @@ div#footer{
     box-shadow: 0 0 1em #ffffff;
     margin: 2em 0 0 0;
     background-color: #884444;
-    padding: 1em 2em 3em 2em;
+    padding: 1em 2em 1em 2em;
 }
-div#footer table#footer_table{
+footer table#footer_table{
     margin-left: auto;
     margin-right: auto;
     width: 95%;
     table-layout: fixed;
 }
-div#footer table#footer_table td{
+footer table#footer_table td{
     width: 33%;
     padding: 0.5em;
 }
 @media screen and (max-width : 990px){
-    div#footer table#footer_table td{
+    footer table#footer_table td{
         width: auto;
         padding: 0.2em;
         font-size: 70%;
@@ -281,6 +283,14 @@ span.skill_name.skill_disabled{
 span.skill_name.skill_leader{
     display: none;
 }
+span.skill_level{
+    display: block;
+    margin: 0.5em;
+    font-size: 90%;
+}
+span.skill_level input{
+    width: 2em;
+}
 span.skill_image{
     position: relative;
 }
@@ -300,7 +310,7 @@ span.skill_image span.skill_tooltip{
     position: absolute;
     text-align: center;
     display: none;
-    z-index: 2;
+/*     z-index: 2; */
     text-transform: none;
     transition: all 0.3s ease-in-out;
 }
@@ -338,6 +348,16 @@ span.skill_image span.skill_tooltip img.skill_tooltip_image.skill_leader{
 span.skill_image span.skill_tooltip span.skill_tooltip_title{
     font-weight: bold;
 }
+span.skill_image span.skill_tooltip ul.skill_levels{
+    display: block;
+    text-align: left;
+    margin: 0.5em auto 0.5em 0.5em;
+    font-size: 90%;
+}
+span.skill_image span.skill_tooltip ul.skill_levels li.unreached{
+    font-style: italic;
+    color: #aaaaaa;
+}
 
 
 input[type=button], input[type=submit]{
@@ -403,3 +423,299 @@ a.a_button{ /* Links that look like buttons. */
 ::placeholder {
     color: #777777;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Runes */
+div.rune_circle{
+    width: 300px;
+    height: 300px;
+    position: relative;
+}
+div.rune_circle img.rune_circle_slots{
+    position: absolute;
+    width: 219px;
+    height: 249px;
+    left: 40px;
+    top: 25px;
+/*     z-index: 1; */
+}
+div.rune_circle img.rune_base{
+    position: absolute;
+    width: 105px;
+    height: 105px;
+/*     z-index: 2; */
+}
+div.rune_circle img.rune_base.rune_base_1{
+    transform: rotate(0deg);
+    top: 29px;
+    left: 96px;
+}
+div.rune_circle img.rune_base.rune_base_2{
+    transform: rotate(60deg);
+    top: 60px;
+    left: 157px;
+}
+div.rune_circle img.rune_base.rune_base_3{
+    transform: rotate(120deg);
+    top: 130px;
+    left: 157px;
+}
+div.rune_circle img.rune_base.rune_base_4{
+    transform: rotate(180deg);
+    top: 160px;
+    left: 96px;
+}
+div.rune_circle img.rune_base.rune_base_5{
+    transform: rotate(240deg);
+    top: 130px;
+    left: 35px;
+}
+div.rune_circle img.rune_base.rune_base_6{
+    transform: rotate(300deg);
+    top: 60px;
+    left: 36px;
+}
+div.rune_circle img.rune_icon{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+/*     z-index: 3; */
+}
+div.rune_circle img.rune_icon.rune_icon_1{
+    top: 65px;
+    left: 132px;
+}
+div.rune_circle img.rune_icon.rune_icon_2{
+    top: 95px;
+    left: 195px;
+}
+div.rune_circle img.rune_icon.rune_icon_3{
+    top: 168px;
+    left: 197px;
+}
+div.rune_circle img.rune_icon.rune_icon_4{
+    top: 200px;
+    left: 132px;
+}
+div.rune_circle img.rune_icon.rune_icon_5{
+    top: 170px;
+    left: 70px;
+}
+div.rune_circle img.rune_icon.rune_icon_6{
+    top: 92px;
+    left: 71px;
+}
+div.rune_circle img.rune_icon.rune_icon_Normal{
+    filter: sepia(100%) saturate(500%) grayscale(100%);;
+}
+div.rune_circle img.rune_icon.rune_icon_Magic{
+    filter: sepia(100%) saturate(500%) hue-rotate(60deg);
+}
+div.rune_circle img.rune_icon.rune_icon_Rare{
+    filter: sepia(100%) saturate(500%) hue-rotate(120deg);
+}
+div.rune_circle img.rune_icon.rune_icon_Hero{
+    filter: sepia(100%) saturate(500%) hue-rotate(250deg);
+}
+div.rune_circle img.rune_icon.rune_icon_Legendary{
+    filter: sepia(100%) saturate(500%) hue-rotate(330deg);
+}
+div.rune_circle span.rune_level{
+	text-align: left;
+    color: #ffffff;
+    font-weight: bold;
+    font-size: 70%;
+    position: absolute;
+    width: 40px;
+    height: 40px;
+/*     z-index: 3; */
+}
+div.rune_circle span.rune_level.rune_level_1{
+    transform: rotate(0deg);
+    top: 105px;
+    left: 137px;
+}
+div.rune_circle span.rune_level.rune_level_2{
+    transform: rotate(60deg);
+    top: 124px;
+    left: 155px;
+}
+div.rune_circle span.rune_level.rune_level_3{
+    transform: rotate(300deg);
+    top: 145px;
+    left: 180px;
+}
+div.rune_circle span.rune_level.rune_level_4{
+    transform: rotate(0deg);
+    top: 177px;
+    left: 137px;
+}
+div.rune_circle span.rune_level.rune_level_5{
+    transform: rotate(60deg);
+    top: 162px;
+    left: 87px;
+}
+div.rune_circle span.rune_level.rune_level_6{
+    transform: rotate(300deg);
+    top: 108px;
+    left: 111px;
+}
+div.rune_circle span.rune_stars{
+	text-align: left;
+    position: absolute;
+    width: 40px;
+    height: 40px;
+/*     z-index: 3; */
+    color: #ffffff;
+    font-weight: bold;
+    font-size: 70%;
+}
+div.rune_circle span.rune_stars.rune_stars_1{
+    transform: rotate(0deg);
+    top: 94px;
+    left: 140px;
+}
+div.rune_circle span.rune_stars.rune_stars_2{
+    transform: rotate(60deg);
+    top: 120px;
+    left: 167px;
+}
+div.rune_circle span.rune_stars.rune_stars_3{
+    transform: rotate(300deg);
+    top: 147px;
+    left: 193px;
+}
+div.rune_circle span.rune_stars.rune_stars_4{
+    transform: rotate(0deg);
+    top: 188px;
+    left: 142px;
+}
+div.rune_circle span.rune_stars.rune_stars_5{
+    transform: rotate(60deg);
+    top: 172px;
+    left: 80px;
+}
+div.rune_circle span.rune_stars.rune_stars_6{
+    transform: rotate(300deg);
+    top: 100px;
+    left: 102px;
+}
+div.rune_circle span.rune_stars span.rune_stars_num{
+    color: #ffffff;
+    font-weight: bold;
+}
+div.rune_circle span.rune_stars img.rune_stars_star{
+    width: 10px;
+    height: 10px;
+    margin-left: -5px;
+}
+
+div.rune_box{
+	width: 10em;
+	height: 10em;
+	position:relative;
+	border-radius: 1em;
+	border: 0.2em solid #000000;
+}
+div.rune_box.rune_box_Normal{
+    background-image: repeating-radial-gradient(#ffffff, #cccccc 30%, #ffffff 60%);
+}
+div.rune_box.rune_box_Magic{
+    background-image: repeating-radial-gradient(#aaffaa, #88cc88 30%, #aaffaa 60%);
+}
+div.rune_box.rune_box_Rare{
+    background-image: repeating-radial-gradient(#aaaaff, #8888cc 30%, #aaaaff 60%);
+}
+div.rune_box.rune_box_Hero{
+    background-image: repeating-radial-gradient(#ffaacc, #cc88aa 30%, #ffaacc 60%);
+}
+div.rune_box.rune_box_Legendary{
+    background-image: repeating-radial-gradient(#f48200, #b76201 30%, #f48200 60%);
+}
+div.rune_box img.rune_base{
+    position: absolute;
+    width: 10em;
+    height: 10em;
+/*     z-index: 1; */
+    top: 0;
+    left: 0;
+}
+div.rune_box img.rune_base.rune_base_1{
+    transform: rotate(0deg);
+}
+div.rune_box img.rune_base.rune_base_2{
+    transform: rotate(60deg);
+}
+div.rune_box img.rune_base.rune_base_3{
+    transform: rotate(120deg);
+}
+div.rune_box img.rune_base.rune_base_4{
+    transform: rotate(180deg);
+}
+div.rune_box img.rune_base.rune_base_5{
+    transform: rotate(240deg);
+}
+div.rune_box img.rune_base.rune_base_6{
+    transform: rotate(300deg);
+}
+div.rune_box img.rune_icon{
+    position: absolute;
+    width: 3em;
+    height: 3em;
+/*     z-index: 2; */
+    top: 3.8em;
+    left: 3.5em;
+}
+div.rune_box img.rune_icon.rune_icon_Normal{
+    filter: sepia(100%) saturate(500%) grayscale(100%);;
+}
+div.rune_box img.rune_icon.rune_icon_Magic{
+    filter: sepia(100%) saturate(500%) hue-rotate(60deg);
+}
+div.rune_box img.rune_icon.rune_icon_Rare{
+    filter: sepia(100%) saturate(500%) hue-rotate(120deg);
+}
+div.rune_box img.rune_icon.rune_icon_Hero{
+    filter: sepia(100%) saturate(500%) hue-rotate(250deg);
+}
+div.rune_box img.rune_icon.rune_icon_Legendary{
+    filter: sepia(100%) saturate(500%) hue-rotate(330deg);
+}
+div.rune_box span.rune_level{
+	position: absolute;
+	font-size: 110%;
+	bottom: 0.2em;
+	left: 0.2em;
+	color: #ffffff;
+	font-weight: bold;
+	text-shadow: 0 0 0.1em #000000;
+}
+div.rune_box span.rune_stars{
+	position: absolute;
+	width: 9em;
+	left: 0.5em;
+	top: 0.2em;
+	text-align: right;
+}
+div.rune_box span.rune_stars img.rune_star{
+/* 	z-index: 4; */
+	width: 1.5em;
+	height: 1.5em;
+	margin-left: -0.6em;
+    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+}

public/script/catalog.js

@@ -1,88 +0,0 @@
-function loadCatalog(){
-    document.getElementById("catalog").innerHTML = "<img class='loader' alt='Loading...' src='/img/layout/control/loader.png'/>";
-    // Get filter values
-    var filters = "";
-    var fName = document.getElementById('filter_name').value;
-    var fType = document.getElementById('filter_type').value;
-    var fElement = document.getElementById('filter_element').value;
-    var fMinStars = document.getElementById('filter_stars_min').value;
-    var fMaxStars = document.getElementById('filter_stars_max').value;
-    if (fName && /^\s*$/.test(fName) == false){
-        filters = filters + "name=" + fName + "&";
-    }
-    if (fType && /^\s*$/.test(fType) == false){
-        filters = filters + "type=" + fType + "&";
-    }
-    if (fElement && /^\s*$/.test(fElement) == false){
-        filters = filters + "element=" + fElement + "&";
-    }
-    if (Number.isInteger(fMinStars) && Number.isInteger(fMaxStars) && fMinStars < fMaxStars){
-        var p = fMinStars;
-        fMinStars = fMaxStars;
-        fMaxStars = p;
-    }
-    if (Number.isInteger(fMinStars) && fMinStars > 0 && fMinStars < 7){
-        filters = filters + "minstars=" + fMinStars + "&";
-    }
-    if (Number.isInteger(fMaxStars) && fMaxStars > 0 && fMaxStars < 7){
-        filters = filters + "maxstars=" + fMaxStars + "&";
-    }
-    if (filters.length > 0 && filters.slice(-1) == '&'){
-        filters = filters.slice(0, -1)
-    }
-    var req = new XMLHttpRequest();
-    req.onreadystatechange = function() {
-        if (this.readyState == 4){
-            if (this.status == 200){
-                document.getElementById("catalog").innerHTML = this.responseText;
-            }
-            else{
-                document.getElementById("catalog").innerHTML = "Error getting monster collection (HTTP status " + this.status + ")";
-            }
-        }
-    };
-    req.open("POST", "/frame/catalog_list/", true);
-    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    if (filters.length > 0){
-        req.send(filters);
-    }
-    else{
-        req.send();
-    }
-}
-
-function selectMonster(id) {
-    if (id == null){
-        document.getElementById('cover').style.display = 'none';
-        document.getElementById('cover').style.opacity = '0';
-        document.getElementById('viewer').style.display = 'none';
-        document.getElementById('viewer_info').innerHTML = '';
-        document.getElementById('viewer_info').style_display = 'none';
-        document.getElementById('viewer_wait').style_display = 'block';
-    }
-    else{
-        document.getElementById('cover').style.display = 'block';
-        document.getElementById('cover').style.opacity = '0.8';
-        document.getElementById('viewer').style.display = 'block';
-        document.getElementById('viewer_info').innerHTML = '';
-        document.getElementById('viewer_info').style_display = 'none';
-        document.getElementById('viewer_wait').style_display = 'block';
-        var req = new XMLHttpRequest();
-        req.onreadystatechange = function() {
-            if (this.readyState == 4){
-                if (this.status == 200) {
-                    document.getElementById('viewer_info').innerHTML = this.responseText;
-                    document.getElementById('viewer_info').style.display = 'block';
-                    document.getElementById('viewer_wait').style.display = 'none';
-                }
-                else{
-                    alert("Error selecting monster (HTTP status " + this.status + ")");
-                    selectMonster(null);
-                }
-            }
-        };
-        req.open("POST", "/frame/catalog/", true);
-        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-        req.send("id=" + id);
-    }
-}

public/script/collection.js

@@ -1,148 +0,0 @@
-function loadCollection(selected){
-    var req = new XMLHttpRequest();
-    req.onreadystatechange = function() {
-        if (this.readyState == 4){
-            if (this.status == 200){
-                document.getElementById("collection").innerHTML = this.responseText;
-            }
-            else{
-                alert("Error getting monster collection (HTTP status " + this.status + ")");
-            }
-        }
-    };
-    req.open("POST", "/frame/collection/", true);
-    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    if (selected == null){
-        req.send();
-    }
-    else{
-        req.send("selected=" + selected);
-    }
-}
-
-function getMonsterId(base, element){
-    if (["Fire", "Water", "Wind", "Light", "Dark"].indexOf(element) == -1){
-        return;
-    }
-    var bases = [];
-    for (var i = 1; i < base_list.childNodes.length; i = i +2){
-        bases.push(base_list.childNodes[i].value);
-    }
-    if(bases.indexOf(base) == -1){
-        return;
-    }
-    var req = new XMLHttpRequest();
-    req.onreadystatechange = function() {
-        if (this.readyState == 4){
-            if (this.status == 200){
-                document.getElementById("new_frame").innerHTML = this.responseText;
-            }
-            else{
-                alert("Error getting monster info (HTTP status " + this.status + ")");
-            }
-        }
-    };
-    req.open("POST", "/frame/new/", true);
-    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    req.send("base=" + base + "&element=" + element);
-}
-
-function showNew(show){
-    if (show === true){
-        document.getElementById('cover').style.display = 'block';
-        document.getElementById('cover').style.opacity = '0.8';
-        document.getElementById('new').style.display = 'block';
-    }
-    else{
-        document.getElementById('cover').style.display = 'none';
-        document.getElementById('cover').style.opacity = '0';
-        document.getElementById('new').style.display = 'none';
-    }
-}
-
-function selectMonster(id) {
-    if (id == null){
-        document.getElementById("portrait_container").innerHTML = '';
-    }
-    else{
-        var req = new XMLHttpRequest();
-        req.onreadystatechange = function() {
-            if (this.readyState == 4){
-                if (this.status == 200) {
-                    document.getElementById("portrait_container").innerHTML = this.responseText;
-                }
-                else{
-                    alert("Error selecting monster (HTTP status " + this.status + ")");
-                }
-            }
-        };
-        req.open("POST", "/frame/portrait/", true);
-        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-        req.send("id=" + id);
-    }
-}
-
-function selectMaxLevel(stars){
-    document.getElementById('v_level').max = 10 + (5 * stars);
-}
-
-function removeMonster(id){
-    if (!confirm("Really delete the monster?")){
-        return;
-    }
-    var req = new XMLHttpRequest();
-    req.onreadystatechange = function() {
-        if (this.readyState == 4){
-            if (this.status == 200){
-                loadCollection(null);
-                selectMonster(null);
-            }
-            else{
-                alert("Error deleting monster (HTTP status " + this.status + ")");
-            }
-        }
-    };
-    req.open("POST", "/handler/monster_collection/", true);
-    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    req.send("id=" + id + "&mode=delete");
-}
-
-function updateMonster(id, property, value){
-    var req = new XMLHttpRequest();
-    req.onreadystatechange = function() {
-        if (this.readyState == 4){
-            if (this.status == 200){
-                loadCollection(id);
-                selectMonster(id);
-            }
-            else{
-                alert("Error updating monster (HTTP status " + this.status + ")");
-            }
-        }
-    };
-    req.open("POST", "/handler/monster_collection/", true);
-    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    req.send("id=" + id + "&mode=update&" + property + "=" + value);
-}
-
-function addMonster(){
-    var monster = document.getElementById('new_monster').value;
-    var stars = document.getElementById('new_stars').value;
-    var level = document.getElementById('new_level').value;
-    var awaken = document.getElementById('new_awaken').checked;
-    var req = new XMLHttpRequest();
-    req.onreadystatechange = function() {
-        if (this.readyState == 4){
-            if (this.status == 200){
-                showNew(false);
-                loadCollection(null);
-            }
-            else{
-                alert("Error creating monster (HTTP status " + this.status + ")");
-            }
-        }
-    };
-    req.open("POST", "/handler/monster_collection/", true);
-    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    req.send("id=-1&mode=insert&monster=" + monster + "&stars=" + stars + "&level=" + level + "&awaken=" + awaken);
-}

public/script/ui.js

@@ -1,11 +0,0 @@
-function showCover(visible){
-    var cover = document.getElementById('cover');
-    if (visible){
-        cover.style.display = 'block';
-        cover.style.opacity = 1;
-    }
-    else{
-        cover.style.display = 'none';
-        cover.style.opacity = 0;
-    }
-}