SWDB/application/view/frame/portrait.php

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