Fussion page

application/Controller.php

@@ -8,20 +8,11 @@
     require_once($path["page"] . "Monsters_Page.php");
     require_once($path["page"] . "Monster_Page.php");
     require_once($path["page"] . "Catalog_Page.php");
+    require_once($path["page"] . "Fusion_Page.php");
     require_once($path["page"] . "Runes_Page.php");
     require_once($path["page"] . "Report_Page.php");
     require_once($path["page"] . "Report_Skillup_Page.php");
     require_once($path["page"] . "Report_Runeupgrade_Page.php");
-    /*foreach (glob($path["page"] . "*.php") as $pagename){
-        require_once($pagename);
-    }
-    foreach (glob($path["frame"] . "*.php") as $framename){
-        require_once($framename);
-    }
-    foreach (glob($path["handler"] . "*.php") as $pagename){
-        require_once($pagename);
-    }*/
-
 
     /**
      * Application controller.
@@ -44,7 +35,6 @@
             global $path;
             global $root;
             $page;
-            $handler;
 
             $db = start_db();
 
@@ -87,34 +77,6 @@
                         $page = new Report_Runeupgrade_Page($db, $pars[1]);
                     }
                 }
-                elseif (strtoupper($pars[0]) == "FRAME"){
-                    if (strtoupper($pars[1]) == "PORTRAIT"){
-                        $page = new Collection_Portrait_Frame($db, $_POST);
-                    }
-                    elseif (strtoupper($pars[1]) == "NEW"){
-                        $page = new Collection_New_Frame($db, $_POST);
-                    }
-                    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]) == "COLLECTION"){
-                        $handler = new Collection_Handler($db, $_POST["id"], $_POST["mode"], $_POST);
-                    }
-                }
             }
 
             // Load the view, or set an error code.

application/entity/K_Fusion.php

@@ -1,73 +1,139 @@
 <?php
 
     require_once($path["entity"] . "Entity.php");
-    //require_once($path["entity"] . "Monster.php");
+    require_once($path["entity"] . "K_Monster.php");
 
 
     /**
-     * Monster.
+     * Fusion.
      *
-     * Represents an object from the table 'monster'.
+     * Represents an object from the table 'fusion'.
      */
     class Fusion extends Entity{
 
         /**
-         * {@see Monster} to fuse.
+         * Fusion identifier.
          */
-        public $target;
+        public $id;
 
         /**
-         * {@see Monster} material.
+         * {@see K_Monster} to fuse.
          */
-        public $source = [];
+        public $product;
 
         /**
-         * Stars of the monster to fuse.
+         * {@see K_Monster} to fuse (awakened).
+         */
+        public $product_awaken;
+
+        /**
+         * {@see K_Monster} to fuse (awakened).
          */
-        public $target_stars;
+        public $product_unawaken;
 
         /**
-         * Stars of the source monsters.
+         * Fusions required to create ingredients.
          */
-        public $source_stars;
+        public $fusion = [];
 
         /**
-         * Monster materials level.
+         * List of unfuseable {@see K_Monster} material.
          */
-        public $source_level;
+        public $ingredient = [];
+
+        /**
+         * List of unfuseable {@see K_Monster} material (awakened).
+         */
+        public $ingredient_unawaken = [];
+
+        /**
+         * Stars of the monster to fuse.
+         */
+        public $stars;
+
+        /**
+         * Fusion cost.
+         */
+        public $cost;
 
         /**
          * Constructor.
          *
          * Searches the database and retrieves the information about the
-         * project, populating it and it's items.
+         * fusion, populating it and it's items.
          *
          * @param SQLite3 $db Connection to the database.
-         * @param int $id Target monster id.
+         * @param int $id Product 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; ";
+              "SELECT DISTINCT " .
+              "  id, " .
+              "  product, " .
+              "  stars, " .
+              "  cost " .
+              "FROM k_fusion " .
+              "WHERE " .
+              "  product = $id OR " .
+              "  product = (SELECT awakens_to FROM k_monster WHERE id = $id) OR " .
+              "  product = (SELECT awakens_from FROM k_monster WHERE id = $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"]));
+            $r = $q->fetchArray(SQLITE3_ASSOC);
+            $this->id = $r["id"];
+            $this->product = new K_Monster($this->db, $r["product"]);
+            $this->product_awaken = new K_Monster($this->db, $this->product->awakens_to);
+            $this->stars = $r["stars"];
+            $this->cost = $r["cost"];
+            $s_f =
+              "SELECT DISTINCT " .
+              "  ingredient " .
+              "FROM k_fusion " .
+              "WHERE  " .
+              "  product = " . $this->product->id . " AND " .
+              "  ingredient IN (  " .
+              "    SELECT DISTINCT k_monster.id  " .
+              "    FROM  " .
+              "      k_fusion,  " .
+              "      k_monster  " .
+              "    WHERE " .
+              "      k_fusion.product = k_monster.awakens_from OR " .
+              "      k_fusion.product = k_monster.awakens_to OR " .
+              "      k_fusion.product = k_monster.id " .
+              "  ); ";
+            $q_f = $this->db->query($s_f);
+            while ($r_f = $q_f->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->fusion, new Fusion($this->db, $r_f["ingredient"]));
+            }
+            $s_m =
+              "SELECT  " .
+              "  id, " .
+              "  awakens_from " .
+              "FROM k_monster " .
+              "WHERE id IN ( " .
+              "  SELECT DISTINCT " .
+              "    ingredient " .
+              "  FROM k_fusion " .
+              "  WHERE  " .
+              "    product = " . $this->product->id . " AND " .
+              "    ingredient NOT IN (  " .
+              "      SELECT DISTINCT k_monster.id  " .
+              "      FROM  " .
+              "        k_fusion,  " .
+              "        k_monster  " .
+              "      WHERE " .
+              "        k_fusion.product = k_monster.awakens_from OR " .
+              "        k_fusion.product = k_monster.awakens_to OR " .
+              "        k_fusion.product = k_monster.id " .
+              "    ) " .
+              "  ); ";
+            error_log("ING: " . $s_m);
+            $q_m = $this->db->query($s_m);
+            while ($r_m = $q_m->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->ingredient, new K_Monster($this->db, $r_m["id"]));
+                error_log("NEW awakens_from: " . $r_m["awakens_from"]);
+                array_push($this->ingredient_unawaken, new K_Monster($this->db, $r_m["awakens_from"]));
             }
         }
     }

application/entity/K_Monster.php

@@ -177,6 +177,16 @@
          */
         public $skill = [];
 
+        /**
+         * Required essences to awaken the monster. Formed by arrays of:
+         * [
+         *   "element" => "",
+         *   "grade" => "",
+         *   "amount" => 
+         * ]
+         */
+        public $essences = [];
+
         /**
          * Constructor.
          *
@@ -257,12 +267,6 @@
                 $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"];
@@ -283,6 +287,27 @@
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
                 array_push($this->skill, new K_Skill($this->db, $r["skill"]));
             }
+            $s =
+              "SELECT " .
+              "  element, " .
+              "  grade, " .
+              "  amount " .
+              "FROM k_monster_essence " .
+              "WHERE " .
+              "  monster = $id " .
+              "ORDER BY " .
+              "  element <> 'Magic', " .
+              "  grade <> 'Low', " .
+              "  grade <> 'Mid'; ";
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                $e = [
+                    "element" => $r["element"],
+                    "grade" => $r["grade"],
+                    "amount" => $r["amount"]
+                ];
+                array_push($this->essences, $e);
+            }
         }
         
         public function get_image(){

application/page/Fusion_Page.php

@@ -1,8 +1,7 @@
 <?php
 
     require_once($path["page"] . "Page.php");
-    require_once($path["entity"] . "Fusion.php");
-    require_once($path["entity"] . "Collection.php");
+    require_once($path["entity"] . "K_Fusion.php");
 
 
     /**
@@ -11,15 +10,10 @@
     class Fusion_Page extends Page{
 
         /**
-         * List of fusions.
+         * List of top-level fusions.
          */
         public $fusion = [];
 
-        /**
-         * {@see Collection} of owned monsters.
-         */
-        public $collection = [];
-
         /**
          * Constructor.
          *
@@ -33,23 +27,13 @@
             parent::__construct($db);
             $this->view = $path["view"] . "fusion.php";
             $s =
-              "SELECT DISTINCT target " .
-              "FROM fusion " .
-              "ORDER BY target_stars DESC; ";
-            $q = $this->db->query($s);
-            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->fusion, new Fusion($this->db, $r["target"]));
-            }
-            $s =
-              "SELECT id " .
-              "FROM collection " .
-              "WHERE level <> 0 " .
-              "ORDER BY " .
-              "  stars DESC, " .
-              "  level DESC; ";
+              "SELECT DISTINCT product " .
+              "FROM k_fusion " .
+              "WHERE stars = 5 " .
+              "ORDER BY stars DESC; ";
             $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->collection, new Collection($this->db, $r["id"]));
+                array_push($this->fusion, new Fusion($this->db, $r["product"]));
             }
             $this->title = "Fusion - SWDB";
             $this->description = "Fusion chart";

application/view/fusion.php

@@ -33,223 +33,222 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <div id='content'>
-            <div class='section'>
-                <h3 class='section_title'>
-                    Fusion
-                </h3>
+        <section>
+            <h3>
+                Fusion
+            </h3>
 <?php
-                foreach ($page->fusion as $fusion){
-                    if ($fusion->target_stars == 5){
+            foreach ($page->fusion as $fusion){
 ?>
-                        <div class='fusion'>
-                            <div class='target'>
-                                <div class='monster lv1'>
-                                    <span class='stars'>
+                <article>
+                    <div class='f5'>
+                        <img title='<?=$fusion->product->name?>' class='monster_image border_<?=$fusion->product->element?>' src='<?=$fusion->product->get_image()?>'/>
+                        <div class='details'>
+                            <h4><?=$fusion->product->name?></h4>
+                                <span class='stars'>
 <?php
-                                        for ($i = 0; $i < $fusion->target_stars; $i ++){
+                                    for ($i = 0; $i < $fusion->stars; $i ++){
 ?>
-                                            <img class='star' src='<?=$path["img"]["layout"] . "icon/star.png"?>' alt='*'/>
+                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
-                                        }
-?>
-                                    </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
-                                    $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;
-                                        }
-?>
-                                        <hr class='owned_separator'/>
-                                        <div class='monster_owned lv1'>
-                                            <span class='stars'>
-<?php
-                                                for ($i = 0; $i < $owned->stars; $i ++){
-?>
-                                                    <img class='star' src='<?=$star_src?>' alt='*'/>
-<?php
-                                                }
-?>
-                                            </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
-                                    }
-?>
-                                </div> <!-- .monster_details.lv1 -->
-                            </div>
-                            <div class='sources'>
-<?php
-                                foreach ($fusion->source as $source){
 ?>
-                                    <div class='sources_inside'>
-                                        <div class='monster lv2'>
-                                            <span class='stars'>
+                                </span>
+                        </div> <!-- #details -->
+                        <div class='ingredients'>
 <?php
-                                                for ($i = 0; $i < $fusion->source_stars; $i ++){
+                            $num0 = 0;
+                            foreach ($fusion->fusion as $sub_fusion){
 ?>
-                                                    <img class='star' src='<?=$path["img"]["layout"] . "icon/star_aw.png"?>' alt='*'/>
+                                <div class='f4'>
+                                    <table>
+                                        <tr>
+                                            <td class='awaken'>
+                                                <div>
+                                                    <img title='<?=$sub_fusion->product_awaken->name?>' class='monster_image border_<?=$sub_fusion->product_awaken->element?>' src='<?=$sub_fusion->product_awaken->get_image()?>'/>
+                                                    <span class='stars'>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                    </span>
+                                                    <span class='level'>
+                                                        Lv. 35
+                                                    </span>
+                                                    <h4><?=$sub_fusion->product_awaken->name?></h4>
+                                                </div>
+                                            </td>
+                                            <td class='essences'>
 <?php
-                                                }
+                                                foreach ($sub_fusion->product->essences as $essence){
 ?>
-                                            </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>
+                                                    <div class='essence border_<?=$essence["element"]?>'>
+                                                        <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["layout"]?>essence/<?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
+                                                        <span>
+                                                            <?=$essence["amount"]?>
+                                                        </span>
+                                                    </div>
 <?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;
                                                 }
 ?>
-                                                <hr class='owned_separator'/>
-                                                <div class='monster_owned lv2'>
+                                                        </td>
+                                            <td class='unawaken'>
+                                                <div>
+                                                    <img title='<?=$sub_fusion->product->name?>' class='monster_image border_<?=$sub_fusion->product->element?>' src='<?=$sub_fusion->product->get_image()?>'/>
                                                     <span class='stars'>
 <?php
-                                                        for ($i = 0; $i < $owned->stars; $i ++){
+                                                        for ($i = 0; $i < $sub_fusion->product->base_stars; $i ++){
 ?>
-                                                            <img class='star' src='<?=$star_src?>' alt='*'/>
+                                                            <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
                                                         }
 ?>
                                                     </span>
-                                                    <img class='monster border_<?=$owned->monster->element?>' src='<?=$owned_src?>' alt='<?=$owned_alt?>'/>
                                                     <span class='level'>
-                                                        <?=$owned->level?>
+                                                        Lv. 1
                                                     </span>
-                                                </div> <!-- .monster_owned.lv2 -->
+                                                    <h4><?=$sub_fusion->product->name?></h4>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                    <div class='ingredients'>
 <?php
-                                            }
+                                        $num = 0;
+                                        foreach ($sub_fusion->ingredient as $sub_monster){
 ?>
-                                        </div> <!-- .monster_details.lv2 -->
-                                        <div class='monster lv2'>
-                                            <span class='stars'>
+                                            <div class='f3'>
+                                                <table>
+                                                    <tr>
+                                                        <td class='awaken'>
+                                                            <div>
+                                                                <img title='<?=$sub_monster->name?>' class='monster_image border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
+                                                                <span class='stars'>
+                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                                    <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                                </span>
+                                                                <span class='level'>
+                                                                    Lv. 30
+                                                                </span>
+                                                                <h4><?=$sub_monster->name?></h4>
+                                                            </div>
+                                                        </td>
+                                                        <td class='essences'>
 <?php
-                                                for ($i = 0; $i < $fusion->source_stars; $i ++){
+                                                            foreach ($sub_fusion->ingredient_unawaken[$num]->essences as $essence){
 ?>
-                                                    <img class='star' src='<?=$path["img"]["layout"] . "icon/star.png"?>' alt='*'/>
+                                                                <div class='essence border_<?=$essence["element"]?>'>
+                                                                    <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["layout"]?>essence/<?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
+                                                                    <span>
+                                                                        <?=$essence["amount"]?>
+                                                                    </span>
+                                                                </div>
 <?php
-                                                }
+                                                            }
 ?>
-                                            </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'>
+                                                        </td>
+                                                        <td class='unawaken'>
+                                                            <div>
+                                                                <img title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' class='monster_image border_<?=$sub_fusion->ingredient_unawaken[$num]->element?>' src='<?=$sub_fusion->ingredient_unawaken[$num]->get_image()?>'/>
+                                                                <span class='stars'>
 <?php
-                                        foreach ($page->fusion as $f){
-                                            if ($f->target->id == $source->id){
-                                                foreach($f->source as $s){
+                                                                    for ($i = 0; $i < $sub_fusion->ingredient_unawaken[$num]->base_stars; $i ++){
 ?>
-                                                    <div class='monster lv3'>
-                                                        <span class='stars'>
+                                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
-                                                            for ($i = 0; $i < $f->source_stars; $i ++){
+                                                                    }
 ?>
-                                                                <img class='star' src='<?=$path["img"]["layout"] . "icon/star_aw.png"?>' alt='*'/>
+                                                                </span>
+                                                                <span class='level'>
+                                                                    Lv. 1
+                                                                </span>
+                                                                <h4><?=$sub_fusion->ingredient_unawaken[$num]->name?></h4>
+
+                                                            </div> <!-- #details -->
+                                                        </td>
+                                                    </tr>
+                                                </table>
+                                            </div> <!-- .f5 -->
 <?php
-                                                            }
+                                            $num ++;
+                                        }
 ?>
-                                                        </span>
-                                                        <img class='monster border_<?=$s->element?>' src='<?=$s->image_aw?>' alt='<?=$s->name_aw?>'/>
-                                                        <span class='level'>
-                                                            <?=$f->source_level?>
-                                                        </span>
+                                    </div> <!-- .ingredients -->
 <?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";
-                                                            $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;
-                                                            }
+                                $num0 ++;
+                            }
+                            $num = 0;
+                            foreach ($fusion->ingredient as $sub_monster){
 ?>
-                                                            <div class='monster_owned lv3'>
-                                                                <span class='stars'>
+                                <div class='f4'>
+                                    <table>
+                                        <tr>
+                                            <td class='awaken'>
+                                                <div>
+                                                    <img title='<?=$sub_monster->name?>' class='monster_image border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
+                                                    <span class='stars'>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                        <img class='star' src='<?=$path["img"]["layout"]?>icon/star_aw.png'/>
+                                                    </span>
+                                                    <span class='level'>
+                                                        Lv. 35
+                                                    </span>
+                                                    <h4><?=$sub_monster->name?></h4>
+                                                </div>
+                                            </td>
+                                            <td class='essences'>
 <?php
-                                                                    for ($i = 0; $i < $owned->stars; $i ++){
+                                                foreach ($fusion->ingredient_unawaken[$num]->essences as $essence){
 ?>
-                                                                        <img class='star' src='<?=$star_src?>' alt='*'/>
+                                                    <div class='essence border_<?=$essence["element"]?>'>
+                                                        <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["layout"]?>essence/<?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
+                                                        <span>
+                                                            <?=$essence["amount"]?>
+                                                        </span>
+                                                    </div>
 <?php
-                                                                    }
+                                                }
 ?>
-                                                                </span>
-                                                                <img class='monster border_<?=$owned->monster->element?>' src='<?=$owned_src?>' alt='<?=$owned_alt?>'/>
-                                                                <span class='level'>
-                                                                    <?=$owned->level?>
-                                                                </span>
-                                                            </div> <!-- .monster_owned.lv3 -->
+                                            </td>
+                                            <td class='unawaken'>
+                                                <div>
+                                                    <img title='<?=$fusion->ingredient_unawaken[$num]->name?>' class='monster_image border_<?=$fusion->ingredient_unawaken[$num]->element?>' src='<?=$fusion->ingredient_unawaken[$num]->get_image()?>'/>
+                                                    <span class='stars'>
 <?php
-                                                        }
+                                                        for ($i = 0; $i < $fusion->ingredient_unawaken[$num]->base_stars; $i ++){
 ?>
-                                                    </div> <!-- .monster -->
+                                                            <img class='star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
-                                                }
-                                            }
-                                        }
+                                                        }
 ?>
-                                    </div> <!-- .sub_sources -->
-                                    <br/>
+                                                    </span>
+                                                    <span class='level'>
+                                                        Lv. 1
+                                                    </span>
+                                                    <h4><?=$fusion->ingredient_unawaken[$num]->name?></h4>
+
+                                                </div> <!-- #details -->
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </div> <!-- .f4 -->
 <?php
-                                }
+                                $num ++;
+                            }
 ?>
-                            </div>
-                        </div>
+                        </div> <!-- ingredients -->
+                    </div> <!-- .f5 -->
+                </article>
 <?php
-                    }
-                    elseif ($fusion->target_stars == 4){
-                    }
-                }
+            }
 ?>
-            </div> <!-- .section -->
-        </div> <!-- .content -->
+        </section>
 <?php
         include __DIR__ . "/inc/footer.php";
 ?>

public/css/fusion.css

@@ -1,4 +1,4 @@
-div.fusion{
+article{
     width: 90%;
     margin: 1em auto;
     border: 0.2em solid #f2c920;
@@ -7,15 +7,226 @@ div.fusion{
     box-shadow: 0 0 2em #aaaaaa;
     padding: 1em;
 }
-div.fusion div.target{
+
+article div.f5{
+    width: 100%;
+}
+
+article div.f5 img.monster_image{
+    max-width: 8em;
+    max-height: 8em;
+    border-style: solid;
+    border-width: 0.3em;
+    border-radius: 15%;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 1.5em 1.5em 1.5em;
+}
+article div.f5 div.details{
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+}
+article div.f5 div.details h4{
+    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;
+    margin: 0.2em;
+}
+article div.f5 div.details span.stars{
+    display: block;
+}
+article div.f5 div.details span.stars img.star{
+    width: 1.5em;
+    height: 1.5em;
+    filter: drop-shadow(0 0 0.05em #ffffff);
+    margin: -0.1em;
+}
+article div.f5 div.details span.level{
+    color: #ffffff;
+    display: block;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
+}
+
+article div.f5 div.ingredients{
+    margin-left: 2em;
+    border-left: 0.2em solid #000000;
+    border-bottom-left-radius: 1.5em;
+    margin-top: -2em;
+    padding-top: 1em;
+}
+
+article div.f5 div.ingredients div.f4  td div{
+    position: relative;
+}
+article div.f5 div.ingredients div.f4 td.essences{
+    width: 4em;
+    text-align: center;
+}
+article div.f5 div.ingredients div.f4 td.essences div.essence{
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    border-style: solid;
+    border-width: 0.1em;
+    border-radius: 15%;
+    width: 1.5em;
+    height: 1.5em;
+    margin-bottom: 0.1em;
+}
+article div.f5 div.ingredients div.f4 td.essences div.essence img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1.5em;
+    height: 1.5em;
+}
+article div.f5 div.ingredients div.f4 td.essences div.essence span{
+    position: absolute;
+    font-size: 80%;
+    top: 0.8em;
+    left: 0.8em;
+    color: #ffffff;
+    text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
+}
+article div.f5 div.ingredients div.f4 td div img.monster_image{
+    max-width: 4em;
+    max-height: 4em;
+    border-style: solid;
+    border-width: 0.3em;
+    border-radius: 15%;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 0.5em 0.5em 0.5em;
+}
+article div.f5 div.ingredients div.f4  td div span.stars{
+    display: block;
+    position: absolute;
+    top: 0.3em;
+    left: 1.2em
+}
+article div.f5 div.ingredients div.f4  td div span.stars img.star{
+    width: 0.8em;
+    height: 0.8em;
+    filter: drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000);
+    margin-left: -0.4em;
+}
+article div.f5 div.ingredients div.f4  td div span.level{
+    color: #ffffff;
+    display: block;
+    position: absolute;
+    text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
+    top: 1.5em;
+    left: 1.1em;
+    font-size: 80%;
+}
+article div.f5 div.ingredients div.f4  td div h4{
+    color: #ffffff;
+    font-size: 100%;
+    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;
+    margin: 0;
+    position: relative;
+    top: -1.5em;
+    left: 0em;
+    text-align: center;
+}
+
+
+
+
+
+
+
+
+
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div{
+    position: relative;
+    margin-bottom: -1.2em;
+}
+
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td.essences{
+    width: 4em;
+    text-align: center;
+}
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td.essences div.essence{
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    border-style: solid;
+    border-width: 0.1em;
+    border-radius: 15%;
+    width: 1.5em;
+    height: 1.5em;
+    margin-bottom: 0.1em;
+}
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td.essences div.essence img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1.5em;
+    height: 1.5em;
+}
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td.essences div.essence span{
+    position: absolute;
+    font-size: 80%;
+    top: 0.8em;
+    left: 0.8em;
+    color: #ffffff;
+    text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
+}
+
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div img.monster_image{
+    max-width: 4em;
+    max-height: 4em;
+    border-style: solid;
+    border-width: 0.3em;
+    border-radius: 15%;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 0.5em 0.5em 0.5em;
+}
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div span.stars{
+    display: block;
+    position: absolute;
+    top: 0.3em;
+    left: 1.2em
+}
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div span.stars img.star{
+    width: 0.8em;
+    height: 0.8em;
+    filter: drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000) drop-shadow(0 0 0.05em #000000);
+    margin-left: -0.4em;
+}
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div span.level{
+    color: #ffffff;
+    display: block;
+    position: absolute;
+    text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
+    top: 1.5em;
+    left: 1.1em;
+    font-size: 80%;
+}
+article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div h4{
+    color: #ffffff;
+    font-size: 100%;
+    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;
+    margin: 0;
+    position: relative;
+    top: -1.5em;
+    left: 0em;
+    text-align: center;
+}
+
+
+
+article div.target{
     display: inline-block;
     vertical-align: middle;
 }
-div.fusion div.sources{
+article div.sources{
     display: inline-block;
     vertical-align: middle;
 }
-div.fusion div.sources div.sources_inside{
+article div.sources div.sources_inside{
     border-top: 0.2em solid #c2a485;
     border-bottom: 0.2em solid #c2a485;
     margin: 0;
@@ -23,70 +234,70 @@ div.fusion div.sources div.sources_inside{
     display: inline-block;
     vertical-align: middle;
 }
-div.fusion div.sub_sources{
+article div.sub_sources{
     display: inline-block;
     vertical-align: middle;
     border-left: 0.2em solid #c2a485;
     margin: 0.5em;
     padding: 0.5em;
 }
-div.fusion div.sub_sources:after{
+article div.sub_sources:after{
     content:"\A";
     white-space: pre;
 }
 
-div.fusion div.monster{
+article div.monster{
     display: inline-block;
     position: relative;
     vertical-align: top;
 }
-div.fusion div.monster.lv1{
+article div.monster.lv1{
     width: 7em;
     height: 7em;
     margin: 0.5em;
 }
-div.fusion div.monster.lv2{
+article div.monster.lv2{
     width: 6em;
     height: 6em;
     margin: 0.3em;
 }
-div.fusion div.monster.lv3{
+article div.monster.lv3{
     width: 4em;
     height: 4em;
     margin: 0.2em;
     text-align: center;
 }
-div.fusion div.monster span.stars{
+article div.monster span.stars{
     position: absolute;
     z-index: 1;
     top: 0.4em;
     right: 0.5em;
 }
-div.fusion div.monster.lv1 span.stars{
+article div.monster.lv1 span.stars{
     top: 0.5em;
     right: 0;
 }
-div.fusion div.monster.lv2 span.stars{
+article div.monster.lv2 span.stars{
     top: 0.4em;
     right: 0;
 }
-div.fusion div.monster.lv3 span.stars{
+article div.monster.lv3 span.stars{
     top: 0;
     right: 0;
 }
-div.fusion div.monster.lv1 span.stars img.star{
+article 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{
+article 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{
+article div.monster.lv3 span.stars img.star{
     width: 0.7em;
     height: 0.7em;
     margin-left: -0.5em;
@@ -94,44 +305,44 @@ div.fusion div.monster.lv3 span.stars img.star{
 }
 
 
-div.fusion div.monster img.monster{
+article div.monster img.monster{
     border-style: solid;
     width: 100%;
     height: 100%;
     box-shadow: 0 0 1em #555555;
 }
-div.fusion div.monster.lv1 img.monster{
+article div.monster.lv1 img.monster{
     border-width: 0.3em;
     border-radius: 25%;
 }
-div.fusion div.monster.lv2 img.monster{
+article div.monster.lv2 img.monster{
     border-width: 0.2em;
     border-radius: 20%;
 }
-div.fusion div.monster.lv3 img.monster{
+article div.monster.lv3 img.monster{
     border-width: 0.1em;
     border-radius: 15%;
 }
 
-div.fusion div.monster span.level{
+article div.monster span.level{
     color: #000000;
     font-weight: bold;
     position: absolute;
     z-index: 1;
 }
-div.fusion div.monster.lv1 span.level{
+article 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{
+article 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{
+article div.monster.lv3 span.level{
     top: 0.2em;
     left: 0.25em;
     font-size: 70%;
@@ -141,51 +352,51 @@ div.fusion div.monster.lv3 span.level{
 
 
 
-div.fusion div.monster_details{
+article div.monster_details{
     width: 8em;
     display: inline-block;
     vertical-align: top;
 }
-div.fusion div.monster_details.lv1{
+article div.monster_details.lv1{
     display: block;
 }
-div.fusion div.monster_details h5{
+article div.monster_details h5{
     text-align: center;
 }
-div.fusion div.monster_details.lv1 h5{
+article div.monster_details.lv1 h5{
     margin: 1em auto;
     font-size: 150%;
     text-shadow: 0 0 0.09em #000000, 0 0 2em #ffffff;
 }
-div.fusion div.monster_details.lv2 h5{
+article div.monster_details.lv2 h5{
     margin: 0.5em auto;
     font-size: 90%;
     text-shadow: 0 0 0.05em #000000, 0 0 2em #ffffff;
 }
-div.fusion div.monster_details hr.owned_separator{
+article div.monster_details hr.owned_separator{
     margin: 0 1em;
     height: 0;
 }
 
 
-div.fusion div.monster_owned{
+article div.monster_owned{
     display: inline-block;
     position: relative;
 }
-div.fusion div.monster_owned.lv1{
+article div.monster_owned.lv1{
     width: 3.5em;
     height: 3.5em;
     margin: 0.2em;
     border-radius: 10%;
 }
-div.fusion div.monster_owned.lv2{
+article div.monster_owned.lv2{
     width: 2.3em;
     height: 2.3em;
     margin: 0.3em auto;
     border-radius: 5%;
     display: block;
 }
-div.fusion div.monster_owned.lv3{
+article div.monster_owned.lv3{
     width: 2.2em;
     height: 2.2em;
     margin: auto;
@@ -198,76 +409,76 @@ div.fusion div.monster_owned.lv3{
 }
 
 
-div.fusion div.monster_owned span.stars{
+article div.monster_owned span.stars{
     position: absolute;
     z-index: 1;
 }
-div.fusion div.monster_owned.lv1 span.stars{
+article div.monster_owned.lv1 span.stars{
     top: 0.2em;
     right: 0.2em;
 }
-div.fusion div.monster_owned.lv2 span.stars{
+article div.monster_owned.lv2 span.stars{
     top: -0.2em;
     right: 0em;
 }
-div.fusion div.monster_owned.lv3 span.stars{
+article div.monster_owned.lv3 span.stars{
     top: -0.1em;
     right: 0.2em;
 }
 
-div.fusion div.monster_owned.lv1 span.stars img.star{
+article 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{
+article 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{
+article 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);
 }
 
-div.fusion div.monster_details div.monster_owned img.monster{
+article div.monster_details div.monster_owned img.monster{
     border-style: solid;
     border-width: 0.1em;
     width: 100%;
     height: 100%;
 }
-div.fusion div.monster_owned.lv1 img.monster{
+article div.monster_owned.lv1 img.monster{
     border-radius: 10%;
 }
-div.fusion div.monster_owned.lv2 img.monster{
+article div.monster_owned.lv2 img.monster{
     border-radius: 10%;
 }
-div.fusion div.monster_owned.lv3 img.monster{
+article div.monster_owned.lv3 img.monster{
     border-radius: 50%;
 }
 
-div.fusion div.monster_owned span.level{
+article 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{
+article div.monster_owned.lv1 span.level{
     bottom: 0.2em;
     left: 0.5em;
     font-size: 90%;
 }
-div.fusion div.monster_owned.lv2 span.level{
+article div.monster_owned.lv2 span.level{
     bottom: 0em;
     left: 0.5em;
     font-size: 80%;
 }
-div.fusion div.monster_owned.lv3 span.level{
+article div.monster_owned.lv3 span.level{
     top: initial;
     bottom: 0;
     left: 1.2em;