Improved fusion page: Links, shows monsters from collection, easier on the eye.

application/entity/K_Fusion.php

@@ -2,6 +2,50 @@
 
     require_once($path["entity"] . "Entity.php");
     require_once($path["entity"] . "K_Monster.php");
+    require_once($path["entity"] . "Monster.php");
+
+    /**
+     * Extension of {@see K_Monster} that also stores information about owned
+     * monsters.
+     */
+    class Monster_Fusion extends K_Monster{
+
+        /**
+         * All owned {@see Monster}s of this type.
+         */
+        public $owned = [];
+
+        /**
+         * Constructor.
+         *
+         * Searches the database and retrieves the information about the
+         * fusion, populating it and it's items.
+         *
+         * @param SQLite3 $db Connection to the database.
+         * @param int $id Monster id.
+         */
+        public function __construct($db, $id){
+            global $path;
+            parent::__construct($db, $id);
+            $s =
+              "SELECT monster.id AS id " .
+              "FROM " . 
+              "  monster, " .
+              "  k_monster " .
+              "WHERE " . 
+              "  k_monster.id = monster.monster AND " .
+              "  ( " .
+              "    k_monster.id = $id OR " .
+              "    k_monster.awakens_from = $id OR " .
+              "    k_monster.awakens_to = $id " .
+              "  ); ";
+            //error_log($s);
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                array_push($this->owned, new Monster($this->db, $r["id"]));
+            }
+        }
+    }
 
 
     /**
@@ -82,8 +126,8 @@
             $q = $this->db->query($s);
             $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->product = new Monster_Fusion($this->db, $r["product"]);
+            $this->product_awaken = new Monster_Fusion($this->db, $this->product->awakens_to);
             $this->stars = $r["stars"];
             $this->cost = $r["cost"];
             $s_f =
@@ -131,9 +175,9 @@
             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"]));
+                array_push($this->ingredient, new Monster_Fusion($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"]));
+                array_push($this->ingredient_unawaken, new Monster_Fusion($this->db, $r_m["awakens_from"]));
             }
         }
     }

application/view/fusion.php

@@ -64,228 +64,406 @@
                     <input type='submit' value='Apply'/>
                 </div>
             </form>
-        </section> <!-- #filters -->
-        <section class='content'>
-            <h2>
-                Fusion
-            </h2>
+        </section><!-- #filters -->
 <?php
-            foreach ($page->fusion as $fusion){
+        foreach ($page->fusion as $fusion){
 ?>
+            <section class='content'>
+                <h2>
+                    <?=$fusion->product->element?> <?=$fusion->product->name?>
+                </h2>
                 <article>
                     <div class='f5'>
-                        <div class='box'>
-                            <div class='monster_panel'>
-                                <img title='<?=$fusion->product->name?>' class='monster border_<?=$fusion->product->element?>' src='<?=$fusion->product->get_image()?>'/>
-                            </div>
-                            <div class='details'>
-                                <h4><?=$fusion->product->name?></h4>
+                        <div class='product'>
+                            <a target='_blank' title='<?=$fusion->product->name?>' href='/catalog/<?=$fusion->product->id?>'>
+                                <div class='monster_panel'>
                                     <span class='stars'>
+                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                    </span>
+                                    <img title='<?=$fusion->product->name?>' class='monster border_<?=$fusion->product->element?>' src='<?=$fusion->product->get_image()?>'/>
+                                    <span class='level'>
+                                        1
+                                    </span>
+                                </div><!-- .monster_panel -->
+                            </a>
+                            <div class='owned'>
+                                <span class='owned'>
+                                    Collection:
+                                </span>
 <?php
-                                        for ($i = 0; $i < $fusion->stars; $i ++){
+                                foreach ($fusion->product->owned as $owned){
+                                    if ($owned->monster->awakens_from == "" && $owned->monster->awakens_to == ""){
+                                        // No to, no from, silver monster.
+                                        $star_class ="star_silver";
+                                        $mon_title = $owned->monster->element . " " . $owned->monster->name;
+                                    }
+                                    elseif ($owned->monster->awakens_from =! "" && $owned->monster->awakens_to == ""){
+                                        // Already awakened
+                                        if ($owned->monster->base_stars - $owned->monster->natural_stars == 1){
+                                            // Normal awaken.
+                                            $star_class ="star_purple";
+                                        }
+                                        else{
+                                            // Second awaken.
+                                            $star_class ="star_red";
+                                        }
+                                        $mon_title = $owned->monster->name;
+                                    }
+                                    elseif ($owned->monster->awakens_to =! ""){
+                                        // Awakeable.
+                                        $star_class ="star_gold";
+                                        $mon_title = $owned->monster->element . " " . $owned->monster->name;
+                                    }
+                                    $mon_title = $mon_title . " - " . $owned->stars . "* - Lv." . $owned->level;
 ?>
-                                            <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                    <a target="_blank" title='<?=$monster_title?>' href='/monsters/<?=$owned->id?>'>
+                                        <div class='monster_panel'>
+                                            <span class='stars'>
 <?php
-                                        }
+                                                for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                    </span>
-                            </div> <!-- #details -->
-                        </div> <!-- box -->
-                        <div class='ingredients'>
+                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+<?php
+                                                }
+?>
+                                            </span>
+                                            <img title='<?=$mon_title?>' class='monster border_<?=$owned->monster->element?>' src='<?=$owned->monster->get_image()?>'/>
+                                            <span class='level'>
+                                                <?=$owned->level?>
+                                            </span>
+                                        </div>
+                                    </a>
+<?php
+                                }// foreach ($fusion->product->owned as $owned)
+?>
+                            </div><!-- .owned -->
+                        </div><!-- .product --><div class='ingredients'><!-- No newline because CSS reads it as a whitespace -->
 <?php
-                            $num0 = 0;
                             foreach ($fusion->fusion as $sub_fusion){
 ?>
                                 <div class='f4'>
-                                    <table class='box'>
-                                        <tr>
-                                            <td class='awaken'>
-                                                <div class='monster_panel'>
-                                                    <span class='stars'>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                    </span>
-                                                    <img title='<?=$sub_fusion->product_awaken->name?>' class='monster border_<?=$sub_fusion->product_awaken->element?>' src='<?=$sub_fusion->product_awaken->get_image()?>'/>
-                                                    <span class='level'>
-                                                        35
+                                    <div class='product'>
+                                        <a target='_blank' title='<?=$sub_fusion->product_awaken->name?>' href='/catalog/<?=$sub_fusion->product_awaken->id?>'>
+                                            <div class='awakened monster_panel'>
+                                                <span class='stars'>
+                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                </span>
+                                                <img title='<?=$sub_fusion->product_awaken->name?>' class='monster border_<?=$sub_fusion->product_awaken->element?>' src='<?=$sub_fusion->product_awaken->get_image()?>'/>
+                                                <span class='level'>
+                                                    35
+                                                </span>
+                                            </div><!-- .awakened .monster_panel -->
+                                        </a>
+                                        <a target='_blank' title='<?=$sub_fusion->product->name?>' href='/catalog/<?=$sub_fusion->product->id?>'>
+                                            <div class='unawakened monster_panel'>
+                                                <span class='stars'>
+<?php
+                                                    for ($i = 0; $i < $sub_fusion->product->base_stars; $i ++){
+?>
+                                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+<?php
+                                                    }
+?>
+                                                </span>
+                                                <img title='<?=$sub_fusion->product->name?>' class='monster border_<?=$sub_fusion->product->element?>' src='<?=$sub_fusion->product->get_image()?>'/>
+                                                <span class='level'>
+                                                    1
+                                                </span>
+                                            </div><!-- .unawakened .monster_panel -->
+                                        </a>
+                                        <div class='essences'>
+<?php
+                                            foreach ($sub_fusion->product->essences as $essence){
+?>
+                                                <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>
-                                                    <h4><?=$sub_fusion->product_awaken->name?></h4>
                                                 </div>
-                                            </td>
-                                            <td class='essences'>
 <?php
-                                                foreach ($sub_fusion->product->essences as $essence){
+                                            }
 ?>
-                                                    <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>
+                                        </div><!-- .essences -->
+                                        <div class='owned'>
+                                            <span class='owned'>
+                                                Collection:
+                                            </span>
 <?php
+                                            foreach ($sub_fusion->product->owned as $owned){
+                                                if ($owned->monster->awakens_from == "" && $owned->monster->awakens_to == ""){
+                                                    // No to, no from, silver monster.
+                                                    $star_class ="star_silver";
+                                                    $mon_title = $owned->monster->element . " " . $owned->monster->name;
                                                 }
+                                                elseif ($owned->monster->awakens_from =! "" && $owned->monster->awakens_to == ""){
+                                                    // Already awakened
+                                                    if ($owned->monster->base_stars - $owned->monster->natural_stars == 1){
+                                                        // Normal awaken.
+                                                        $star_class ="star_purple";
+                                                    }
+                                                    else{
+                                                        // Second awaken.
+                                                        $star_class ="star_red";
+                                                    }
+                                                    $mon_title = $owned->monster->name;
+                                                }
+                                                elseif ($owned->monster->awakens_to =! ""){
+                                                    // Awakeable.
+                                                    $star_class ="star_gold";
+                                                    $mon_title = $owned->monster->element . " " . $owned->monster->name;
+                                                }
+                                                $mon_title = $mon_title . " - " . $owned->stars . "* - Lv." . $owned->level;
 ?>
-                                                        </td>
-                                            <td class='unawaken'>
-                                                <div class='monster_panel'>
-                                                    <span class='stars'>
+                                                <a target="_blank" title='<?=$monster_title?>' href='/monsters/<?=$owned->id?>'>
+                                                    <div class='monster_panel'>
+                                                        <span class='stars'>
 <?php
-                                                        for ($i = 0; $i < $sub_fusion->product->base_stars; $i ++){
+                                                            for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                            <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
-                                                        }
+                                                            }
 ?>
-                                                    </span>
-                                                    <img title='<?=$sub_fusion->product->name?>' class='monster border_<?=$sub_fusion->product->element?>' src='<?=$sub_fusion->product->get_image()?>'/>
-                                                    <span class='level'>
-                                                        1
-                                                    </span>
-                                                    <h4><?=$sub_fusion->product->name?></h4>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </table>
-                                    <div class='ingredients'>
+                                                        </span>
+                                                        <img title='<?=$mon_title?>' class='monster border_<?=$owned->monster->element?>' src='<?=$owned->monster->get_image()?>'/>
+                                                        <span class='level'>
+                                                            <?=$owned->level?>
+                                                        </span>
+                                                    </div>
+                                                </a>
+<?php
+                                            }
+?>
+                                        </div><!-- .owned -->
+                                    </div><!-- .product --><div class='ingredients'><!-- No newline because CSS reads it as a whitespace -->
 <?php
                                         $num = 0;
                                         foreach ($sub_fusion->ingredient as $sub_monster){
 ?>
                                             <div class='f3'>
-                                                <table class='box'>
-                                                    <tr>
-                                                        <td class='awaken'>
-                                                            <div class='monster_panel'>
-                                                                <span class='stars'>
-                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                                </span>
-                                                                <img title='<?=$sub_monster->name?>' class='monster border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
-                                                                <span class='level'>
-                                                                    30
+                                                <div class='product'>
+                                                    <a target='_blank' title='<?=$sub_monster->name?>' href='/catalog/<?=$sub_monster->id?>'>
+                                                        <div class='awakened monster_panel'>
+                                                            <span class='stars'>
+                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                            </span>
+                                                            <img title='<?=$sub_monster->name?>' class='monster border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
+                                                            <span class='level'>
+                                                                30
+                                                            </span>
+                                                        </div><!-- .awakened .monster_panel -->
+                                                    </a>
+                                                    <div class='essences'>
+<?php
+                                                        foreach ($sub_fusion->ingredient_unawaken[$num]->essences as $essence){
+?>
+                                                            <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>
-                                                                <h4><?=$sub_monster->name?></h4>
                                                             </div>
-                                                        </td>
-                                                        <td class='essences'>
 <?php
-                                                            foreach ($sub_fusion->ingredient_unawaken[$num]->essences as $essence){
+                                                        }
 ?>
-                                                                <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>
+                                                    </div><!-- .essences -->
+                                                    <a target='_blank' title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' href='/catalog/<?=$sub_fusion->ingredient_unawaken[$num]->id?>'>
+                                                        <div class='unawakened monster_panel'>
+                                                            <span class='stars'>
+<?php
+                                                                for ($i = 0; $i < $sub_fusion->ingredient_unawaken[$num]->base_stars; $i ++){
+?>
+                                                                    <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
+                                                                }
+?>
+                                                            </span>
+                                                            <img title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' class='monster border_<?=$sub_fusion->ingredient_unawaken[$num]->element?>' src='<?=$sub_fusion->ingredient_unawaken[$num]->get_image()?>'/>
+                                                            <span class='level'>
+                                                                1
+                                                            </span>
+                                                        </div><!-- .unawakened .monster_panel -->
+                                                    </a>
+                                                    <div class='owned'>
+                                                        <span class='owned'>
+                                                            Collection:
+                                                        </span>
+<?php
+                                                        foreach ($sub_monster->owned as $owned){
+                                                            if ($owned->monster->awakens_from == "" && $owned->monster->awakens_to == ""){
+                                                                // No to, no from, silver monster.
+                                                                $star_class ="star_silver";
+                                                                $mon_title = $owned->monster->element . " " . $owned->monster->name;
+                                                            }
+                                                            elseif ($owned->monster->awakens_from =! "" && $owned->monster->awakens_to == ""){
+                                                                // Already awakened
+                                                                if ($owned->monster->base_stars - $owned->monster->natural_stars == 1){
+                                                                    // Normal awaken.
+                                                                    $star_class ="star_purple";
+                                                                }
+                                                                else{
+                                                                    // Second awaken.
+                                                                    $star_class ="star_red";
+                                                                }
+                                                                $mon_title = $owned->monster->name;
                                                             }
+                                                            elseif ($owned->monster->awakens_to =! ""){
+                                                                // Awakeable.
+                                                                $star_class ="star_gold";
+                                                                $mon_title = $owned->monster->element . " " . $owned->monster->name;
+                                                            }
+                                                            $mon_title = $mon_title . " - " . $owned->stars . "* - Lv." . $owned->level;
 ?>
-                                                        </td>
-                                                        <td class='unawaken'>
-                                                            <div class='monster_panel'>
-                                                                <span class='stars'>
+                                                            <a target="_blank" title='<?=$monster_title?>' href='/monsters/<?=$owned->id?>'>
+                                                                <div class='monster_panel'>
+                                                                    <span class='stars'>
 <?php
-                                                                    for ($i = 0; $i < $sub_fusion->ingredient_unawaken[$num]->base_stars; $i ++){
+                                                                        for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
-                                                                    }
+                                                                        }
 ?>
-                                                                </span>
-                                                                <img title='<?=$sub_fusion->ingredient_unawaken[$num]->name?>' class='monster border_<?=$sub_fusion->ingredient_unawaken[$num]->element?>' src='<?=$sub_fusion->ingredient_unawaken[$num]->get_image()?>'/>
-                                                                <span class='level'>
-                                                                    1
-                                                                </span>
-                                                                <h4><?=$sub_fusion->ingredient_unawaken[$num]->name?></h4>
-
-                                                            </div> <!-- #details -->
-                                                        </td>
-                                                    </tr>
-                                                </table>
-                                            </div> <!-- .f5 -->
+                                                                    </span>
+                                                                    <img title='<?=$mon_title?>' class='monster border_<?=$owned->monster->element?>' src='<?=$owned->monster->get_image()?>'/>
+                                                                    <span class='level'>
+                                                                        <?=$owned->level?>
+                                                                    </span>
+                                                                </div>
+                                                            </a>
+<?php
+                                                        }
+?>
+                                                    </div><!-- .owned -->
+                                                </div><!-- product -->
+                                            </div><!-- .f3 -->
 <?php
                                             $num ++;
                                         }
 ?>
-                                    </div> <!-- .ingredients -->
+                                    </div><!-- .ingredients -->
+                                </div><!-- .f4 -->
 <?php
                                 $num0 ++;
-                            }
-                            $num = 0;
-                            foreach ($fusion->ingredient as $sub_monster){
+                            } // foreach ($fusion->product->owned as $owned)
 ?>
-                                <div class='f4'>
-                                    <table class='box'>
-                                        <tr>
-                                            <td class='awaken'>
-                                                <div class='monster_panel'>
-                                                    <span class='stars'>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                        <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                    </span>
-                                                    <img title='<?=$sub_monster->name?>' class='monster border_<?=$sub_monster->element?>' src='<?=$sub_monster->get_image()?>'/>
-                                                    <span class='level'>
-                                                        35
-                                                    </span>
-                                                    <h4><?=$sub_monster->name?></h4>
-                                                </div>
-                                            </td>
-                                            <td class='essences'>
+                            <!-- Last ingredient, non fuseable -->
+                            <div class='f4 extra'>
+                                <div class='product'>
+                                    <a target='_blank' title='<?=$fusion->ingredient[0]->name?>' href='/catalog/<?=$fusion->ingredient[0]->id?>'>
+                                        <div class='awakened monster_panel'>
+                                            <span class='stars'>
+                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                            </span>
+                                            <img title='<?=$fusion->ingredient[0]->name?>' class='monster border_<?=$fusion->ingredient[0]->element?>' src='<?=$fusion->ingredient[0]->get_image()?>'/>
+                                            <span class='level'>
+                                                35
+                                            </span>
+                                        </div><!-- .awakened .monster_panel -->
+                                    </a>
+                                    <div class='essences'>
 <?php
-                                                foreach ($fusion->ingredient_unawaken[$num]->essences as $essence){
+                                        foreach ($fusion->ingredient_unawaken[0]->essences as $essence){
 ?>
-                                                    <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>
+                                            <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
+                                        }
+?>
+                                    </div><!-- .essences -->
+                                    <a target='_blank' title='<?=$fusion->ingredient_unawaken[0]->name?>' href='/catalog/<?=$fusion->ingredient_unawaken[0]->id?>'>
+                                        <div class='unawakened monster_panel'>
+                                            <span class='stars'>
+<?php
+                                                for ($i = 0; $i < $fusion->ingredient[0]->base_stars; $i ++){
+?>
+                                                    <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
                                                 }
 ?>
-                                            </td>
-                                            <td class='unawaken'>
-                                                <div class='monster_panel'>
-                                                    <span class='stars'>
+                                            </span>
+                                            <img title='<?=$fusion->ingredient_unawaken[0]->name?>' class='monster border_<?=$fusion->ingredient_unawaken[0]->element?>' src='<?=$fusion->ingredient_unawaken[0]->get_image()?>'/>
+                                            <span class='level'>
+                                                1
+                                            </span>
+                                        </div><!-- .unawakened .monster_panel -->
+                                    </a>
+                                    <div class='owned'>
+                                        <span class='owned'>
+                                            Collection:
+                                        </span>
 <?php
-                                                        for ($i = 0; $i < $fusion->ingredient_unawaken[$num]->base_stars; $i ++){
+                                        foreach ($fusion->ingredient[0]->owned as $owned){
 ?>
-                                                            <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                            <div class='monster_panel'>
+                                                <span class='stars'>
 <?php
+                                                    if ($owned->monster->awakens_from == "" && $owned->monster->awakens_to == ""){
+                                                        // No to, no from, silver monster.
+                                                        $star_class ="star_silver";
+                                                        $mon_title = $owned->monster->element . " " . $owned->monster->name;
+                                                    }
+                                                    elseif ($owned->monster->awakens_from =! "" && $owned->monster->awakens_to == ""){
+                                                        // Already awakened
+                                                        if ($owned->monster->base_stars - $owned->monster->natural_stars == 1){
+                                                            // Normal awaken.
+                                                            $star_class ="star_purple";
+                                                        }
+                                                        else{
+                                                            // Second awaken.
+                                                            $star_class ="star_red";
                                                         }
+                                                        $mon_title = $owned->monster->name;
+                                                    }
+                                                    elseif ($owned->monster->awakens_to =! ""){
+                                                        // Awakeable.
+                                                        $star_class ="star_gold";
+                                                        $mon_title = $owned->monster->element . " " . $owned->monster->name;
+                                                    }
+                                                    for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                    </span>
-                                                    <img title='<?=$fusion->ingredient_unawaken[$num]->name?>' class='monster border_<?=$fusion->ingredient_unawaken[$num]->element?>' src='<?=$fusion->ingredient_unawaken[$num]->get_image()?>'/>
-                                                    <span class='level'>
-                                                        1
-                                                    </span>
-                                                    <h4><?=$fusion->ingredient_unawaken[$num]->name?></h4>
-
-                                                </div> <!-- #details -->
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </div> <!-- .f4 -->
-<?php
-                                $num ++;
-                            }
-?>
-                        </div> <!-- ingredients -->
-                    </div> <!-- .f5 -->
-                </article>
+                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
 <?php
-            }
+                                                    }
 ?>
-        </section>
+                                                </span>
+                                                <img title='<?=$owned_title?>' class='monster border_<?=$owned->monster->element?>' src='<?=$owned->monster->get_image()?>'/>
+                                                <span class='level'>
+                                                    <?=$owned->level?>
+                                                </span>
+                                            </div>
+<?php
+                                        }
+?>
+                                    </div><!-- .owned -->
+                                </div><!-- .product -->
+                            </div><!-- .f4 -->
+                        </div><!-- .ingredients -->
+                    </div><!-- .f5 -->
+                </article>
+            </section>
 <?php
+        } // foreach ($page->fusion as $fusion)
         include __DIR__ . "/inc/footer.php";
 ?>
     </body>

public/css/fusion.css

@@ -1,174 +1,189 @@
-.box{
-    border: 0.2em solid #777777;
-    background-color: #655c59;
+div.essence{
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    border-style: solid;
+    border-width: 0.1em;
+    border-radius: 15%;
+    width: 2.5em;
+    height: 2.5em;
+    margin-bottom: 0.1em;
 }
-
-article{
-    text-align: left;
+div.essence img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2.5em;
+    height: 2.5em;
+}
+div.essence span{
+    position: absolute;
+    top: 1.4em;
+    text-align: right;
+    right: 0.2em;
+    color: #ffffff;
+    font-weight: bold;
+    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{
-    width: 100%;
-    margin: 1em 0 2em 4em;
+div.owned{
+    border: 0.1em solid #000000;
+    background-color: #555555;
+    border-radius: 1em;
+    padding: 0 0.3em;
 }
-@media screen and (max-width : 990px){
-    article div.f5{
-        margin: 1em 0 1em 1.5em;
-    }
+
+div.owned span.owned{
+    display: block;
+    text-align: center;
+    margin: 0.1em 0.3em;
+    font-size: 90%;
+    color: #ffffff;
 }
 
-article div.f5 .box{
+div.owned div.monster_panel{
     display: inline-block;
-    padding: 0.5em;
+    font-size: 60%;
+    margin: -0.2em;
 }
 
-article div.f5 div.monster_panel{
-    font-size: 100%
+div.f5{
+    display: block;
 }
-article div.f5 div.details{
+
+div.f5 > div.product{
+    display: inline-block;
+    font-size: 150%;
+    width: 10em;
+    vertical-align: middle;
+    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 100%);
+    border-left: 1em solid #ffffff;
+    border-top: 1em solid #ffffff;;
+    border-bottom: 1em solid #ffffff;
+    border-top-left-radius: 8em;
+    border-bottom-left-radius: 8em;
+    padding: 2em;
+}
+div.f5 > div.product > div.owned{
     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;
+
+div.f5 > div.ingredients{
+    display: inline-block;
+    vertical-align: middle;
+    border-left: 1em solid #ffffff;
+    border-top: 0.3em solid #ffffff;;
+    border-bottom: 0.3em solid #ffffff;
+    border-top-left-radius: 6em;
+    border-bottom-left-radius: 6em;
+    border-top-right-radius: 1em;
+    border-bottom-right-radius: 1em;
+    padding: 0.5em 0.5em 0.5em 0;
 }
-article div.f5 div.details span.stars img.star{
-    width: 1.5em;
-    height: 1.5em;
-    margin: -0.1em;
+
+div.f4{
+    display:block;
 }
-article div.f5 div.details span.level{
-    color: #ffffff;
+
+div.f4 > div.product{
+    display: inline-block;
+    width: 20em;
+    vertical-align: middle;
+    border-left: 0.3em solid #ffffff;
+    border-top: 0.3em solid #ffffff;
+    border-bottom: 0.3em solid #ffffff;
+    border-top-left-radius: 4em;
+    border-bottom-left-radius: 4em;
+    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 100%);
+}
+div.f4.extra > div.product{
     display: block;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
+    width: auto;
+    margin-top: 0.2em;
+    margin-bottom: 0.5em;
 }
-
-article div.f5 div.ingredients{
-    margin-left: 5em;
-    border-left: 0.4em solid #333333;
-    margin-top: 0em;
-    padding-top: 0.5em;
-    margin-bottom: 1em;
+div.f4 > div.product > a > div.unawakened{
+    display: inline-block;
+    vertical-align: top;
+    width: 6em;
 }
-@media screen and (max-width : 990px){
-    article div.f5 div.ingredients{
-        margin-left: 2em;
-    }
+div.f4.extra > div.product > a > div.unawakened{
+    vertical-align: middle;
 }
 
-article div.f5 div.ingredients div.f4 .box{
+div.f4 > div.product > div.essences{
     display: inline-block;
-    padding: 0em;
-    margin-bottom: -0.3em;
-}
-
-article div.f5 div.ingredients div.f4 td div{
-    position: relative;
-}
-article div.f5 div.ingredients div.f4 td.essences{
-    width: 4em;
+    width: 6em;
     text-align: center;
+    vertical-align: top;
 }
-article div.f5 div.ingredients div.f4 td.essences div.essence{
-    position: relative;
+div.f4.extra > div.product > div.essences{
+    vertical-align: middle;
+    margin-left: 1em;
+}
+
+div.f4 > div.product > a > div.awakened{
     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;
+    width: 6em;
 }
-article div.f5 div.ingredients div.f4 td.essences div.essence img{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 1.5em;
-    height: 1.5em;
+div.f4.extra > div.product > a > div.awakened{
+    vertical-align: middle;
 }
-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;
+div.f4 > div.product > div.owned{
+    display: inline-block;
+    vertical-align: top;
 }
-article div.f5 div.ingredients div.f4 td div.monster_panel{
-    font-size: 80%
+div.f4.extra > div.product > div.owned{
+    vertical-align: middle;
+    margin-left: 1em;
 }
-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;
+div.f4 > div.ingredients{
+    display: inline-block;
+    vertical-align: middle;
+    border-left: 0.5em solid #ffffff;
+    border-top: 0.15em solid #ffffff;;
+    border-bottom: 0.15em solid #ffffff;
+    border-top-left-radius: 2em;
+    border-bottom-left-radius: 2em;
+    padding: 0;
+    margin: 0.2em 0;
 }
 
+div.f3{
+    display: block;
+    width: 100%;
+    font-size: 60%;
+    border-left: 0.1em solid #ffffff;
+    border-top: 0.1em solid #ffffff;
+    border-bottom: 0.1em solid #ffffff;
+    border-top-left-radius: 2em;
+    border-bottom-left-radius: 2em;
+    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 100%);
+}
 
+div.f3 > div.product{
+}
 
-
-
-
-
-
-
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div{
-    position: relative;
-    margin-bottom: -1.2em;
+div.f3 > div.product > a > div.unawakened{
+    display: inline-block;
+    vertical-align: middle;
 }
 
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td.essences{
-    width: 4em;
+
+div.f3 > div.product > div.essences{
+    display: inline-block;
+    width: 6em;
     text-align: center;
+    vertical-align: middle;
 }
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td.essences div.essence{
-    position: relative;
+
+div.f3 > div.product > a > div.awakened{
     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;
+    vertical-align: middle;
 }
 
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div.monster_panel{
-    font-size: 60%
-}
-article div.f5 div.ingredients div.f4 div.ingredients div.f3 td div h4{
-    color: #ffffff;
-    font-size: 110%;
-    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;
-}
+div.f3 > div.product > div.owned{
+    display: inline-block;
+    vertical-align: middle;
+}