Characterprofile equipped items + skills + aquired outfits showcase

characterprofile.php

<!-- EQ shower -->
<tr>
	<?php
	// Item image server
	$imageServer = $config['shop']['imageServer'];
	$imageType = $config['shop']['imageType'];
	$PEQ = mysql_select_multi("
		SELECT 
			`player_id`, 
			`pid`, 
			`itemtype`, 
			`count` 
		FROM `player_items` 
		WHERE `player_id`={$user_id} 
		AND `pid`<'11'
	");
	$playerstats = mysql_select_single("
		SELECT 
			`health`, `healthmax`,
			`mana`, `manamax`,
			`cap`,
			`experience`, `level`, `soul`, `stamina`,
			`maglevel`,
			`skill_fist`,
			`skill_club`,
			`skill_sword`,
			`skill_axe`,
			`skill_dist`,
			`skill_shielding`,
			`skill_fishing`
		FROM `players` 
		WHERE `id`={$user_id} 
		LIMIT 1;
	");

	$playerstats['experience'] = number_format($playerstats['experience'],0,'',',');
	$playerstats['stamina'] = number_format($playerstats['stamina']/60,2,':','');

	$bar_length = 95;
	$bar_health = (int)($bar_length * ($playerstats['health'] / $playerstats['healthmax']));
	$bar_mana = (int)($bar_length * ($playerstats['mana'] / $playerstats['manamax']));
	
	$outfit_server = $config['show_outfits']['imageServer'];
	$outfit_storage = 10000;

	$male_outfits = array(
		128,129,131,130,133,143,
		144,132,146,134,145,152,
		153,151,154,251,273,289,
		268,278,325,194,253,328
	);
	$female_outfits = array(
		136,137,139,138,141,147,
		148,140,150,142,149,156,
		157,155,158,252,270,288,
		269,279,324,194,264,329
	);
	$featured_outfits = ($profile_data['sex'] == 1) ? $male_outfits : $female_outfits;

	$highest_outfit_id = MAX($featured_outfits);
	$outfit_storage_max = $outfit_storage + $highest_outfit_id + 1; 

	$player_outfits = array();
	$storage_sql = mysql_select_multi("
		SELECT `key`, `value` 
		FROM `player_storage` 
		WHERE `player_id`={$user_id} 
		AND `key` > {$outfit_storage} 
		AND `key` < {$outfit_storage_max} 
	");
	if ($storage_sql !== false && !empty($storage_sql)) {
		foreach ($storage_sql as $row) {
			$player_outfits[$row['key']] = $row['value'];
		}
	}

	$aquired_outfits = array();
	foreach ($featured_outfits as $outfit_id) {
		$outfit_key = $outfit_storage + $outfit_id;
		if (isset($player_outfits[$outfit_key]) && $player_outfits[$outfit_key] == 3) {
			$aquired_outfits[$outfit_id] = true;
		}
	}

	//data_dump($playerstats, false, "player stats");
	?>
	<td colspan="2" id="piv">
		<div id="piv_flex">
			<div id="piv_i">
				<img class="bg" src="/engine/img/outfit.png">
				<div id="piv_lifebar"></div><span id="piv_lifetext"><?php echo $playerstats['health']; ?></span>
				<div id="piv_manabar"></div><span id="piv_manatext"><?php echo $playerstats['mana']; ?></span>
				<?php if ($PEQ !== false && !empty($PEQ)): foreach($PEQ as $item): ?>
					<img class="itm itm-<?php echo $item['pid']; ?>" 
					src="<?php echo "http://{$imageServer}/".$item['itemtype'].".{$imageType}"; ?>">
				<?php endforeach; endif; ?>
				<span id="piv_cap">Cap:<br><?php echo $playerstats['cap']; ?></span>
			</div>
			<div id="piv_s">
				<img class="bg" src="/engine/img/skillsbackground.png">
				<span id="s_exp" class="txt"><?php echo $playerstats['experience']; ?></span>
				<span id="s_lvl" class="txt"><?php echo $playerstats['level']; ?></span>
				<span id="s_hp" class="txt"><?php echo number_format($playerstats['health'],0,'',','); ?></span>
				<span id="s_mp" class="txt"><?php echo number_format($playerstats['mana'],0,'',','); ?></span>
				<span id="s_soul" class="txt"><?php echo $playerstats['soul']; ?></span>
				<span id="s_cap" class="txt"><?php echo number_format($playerstats['cap'],0,'',','); ?></span>
				<span id="s_stamina" class="txt"><?php echo $playerstats['stamina']; ?></span>
				<span id="s_maglevel" class="txt"><?php echo $playerstats['maglevel']; ?></span>
				<span id="s_skill_fist" class="txt"><?php echo $playerstats['skill_fist']; ?></span>
				<span id="s_skill_club" class="txt"><?php echo $playerstats['skill_club']; ?></span>
				<span id="s_skill_sword" class="txt"><?php echo $playerstats['skill_sword']; ?></span>
				<span id="s_skill_axe" class="txt"><?php echo $playerstats['skill_axe']; ?></span>
				<span id="s_skill_dist" class="txt"><?php echo $playerstats['skill_dist']; ?></span>
				<span id="s_skill_shielding" class="txt"><?php echo $playerstats['skill_shielding']; ?></span>
				<span id="s_skill_fishing" class="txt"><?php echo $playerstats['skill_fishing']; ?></span>
			</div>
			<div id="piv_o">
				<img class="bg" src="/engine/img/outfitbackgrounds.png">
				<div id="piv_o_container">
					<?php foreach ($featured_outfits as $outfit_id): $g = (isset($aquired_outfits[$outfit_id])) ? "" : "grayimg"; ?>
						<img class="o <?php echo $g; ?>" src="<?php echo $outfit_server . "?id=" . $outfit_id; ?>&addons=3&head=0&body=0&legs=0&feet=0">
					<?php endforeach; ?>
				</div>
			</div>
		</div>
		<style type="text/css">
			#piv_flex {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				font-family: Verdana,Geneva,sans-serif; 
				font-size: 7.0pt;
				line-height: 1;
				color: rgb(201,201,201);
			}
			#piv_i, #piv_s, #piv_o {
				position: relative;
				height: 232px;
			}

			#piv_i {
				width: 176px;
			}
			#piv_s {
				width: 184px;
			}
			#piv_o {
				width: 178px;
			}
			#piv_flex img {
				position: absolute;
			}
			#piv_flex .bg {
				top: 0;
				left: 0;
			}
			#piv_lifebar {
				position: absolute;
				border-radius: 6px;
				top: 6px;
				left: 27px;
				height: 11px;
				/*width: 95px;*/
				width: <?php echo $bar_health; ?>px;
				background-image: url("/engine/img/lifebarra.png");
			}
			#piv_manabar {
				position: absolute;
				border-radius: 6px;
				top: 19px;
				left: 27px;
				height: 11px;
				/*width: 95px;*/
				width: <?php echo $bar_mana; ?>px;
				background-image: url("/engine/img/manabar.png");
			}
			#piv_lifetext {
				position: absolute;
				display: block;
				left: 127px;
				top: 7px;
			}
			#piv_manatext {
				position: absolute;
				display: block;
				left: 127px;
				top: 20px;
			}
			#piv_flex .itm { background-image: url("/engine/img/bg.png"); }
			#piv_flex .itm-1  { left: 48px; top: 39px; }
			#piv_flex .itm-2  { left: 11px; top: 53px; }
			#piv_flex .itm-3  { left: 85px; top: 53px; }
			#piv_flex .itm-4  { left: 48px; top: 76px; }
			#piv_flex .itm-5  { left: 85px; top: 90px; }
			#piv_flex .itm-6  { left: 11px; top: 90px; }
			#piv_flex .itm-7  { left: 48px; top: 113px; }
			#piv_flex .itm-8  { left: 48px; top: 150px; }
			#piv_flex .itm-9  { left: 11px; top: 127px; }
			#piv_flex .itm-10 { left: 85px; top: 127px; }
			#piv_cap {
				position: absolute;
				top: 162px;
				left: 85px;
				min-width: 32px;
				text-align: center;
			}

			#piv_s .txt {
				position: absolute;
			}
			#s_exp 				{ right: 22px; top: 16px; }
			#s_lvl 				{ right: 22px; top: 30px; }
			#s_hp 				{ right: 22px; top: 44px; }
			#s_mp 				{ right: 22px; top: 58px; }
			#s_soul 			{ right: 22px; top: 71px; }
			#s_cap 				{ right: 22px; top: 86px; }
			#s_stamina 			{ right: 22px; top: 100px; }
			#s_maglevel 		{ right: 22px; top: 114px; }
			#s_skill_fist 		{ right: 22px; top: 132px; }
			#s_skill_club 		{ right: 22px; top: 146px; }
			#s_skill_sword 		{ right: 22px; top: 160px; }
			#s_skill_axe 		{ right: 22px; top: 174px; }
			#s_skill_dist 		{ right: 22px; top: 188px; }
			#s_skill_shielding 	{ right: 22px; top: 202px; }
			#s_skill_fishing 	{ right: 22px; top: 215px; }

			#piv_o_container {
				height: inherit;
				width: inherit;
			}
			#piv_o_container .o {
				position: absolute;
				right: 0;
				bottom: 0;
			}

			/* Outfit column positions (4) */
			#piv_o_container .o:nth-child(4n+1) { right: 130px;  }
			#piv_o_container .o:nth-child(4n+2) { right: 90px;  }
			#piv_o_container .o:nth-child(4n+3) { right: 50px;  }
			#piv_o_container .o:nth-child(4n+4) { right: 10px; }

			/* Outfit row positions (5) */
			#piv_o_container .o:nth-child( n+1):nth-child( -n+4) { bottom: 175px;  }
			#piv_o_container .o:nth-child( n+5):nth-child( -n+8) { bottom: 142px;  }
			#piv_o_container .o:nth-child( n+9):nth-child(-n+12) { bottom: 109px;  }
			#piv_o_container .o:nth-child(n+13):nth-child(-n+16) { bottom: 76px;  }
			#piv_o_container .o:nth-child(n+17):nth-child(-n+20) { bottom: 43px; }
			#piv_o_container .o:nth-child(n+21):nth-child(-n+24) { bottom: 10px; }

			#piv_o_container .o.grayimg {
			    filter: none;
			    -webkit-filter: grayscale(100%);
			    -moz-filter: grayscale(100%);
			    -ms-filter: grayscale(100%);
			    -o-filter: grayscale(100%);
			    opacity: .5;
			    filter: alpha(opacity=50);
			    margin-left: -25pt;
			    margin-top: -25px;
			}

		</style>
	</td>
</tr>