Level Progress Bar

Static Example (HTML)

This example uses static information, as seen in the code below. If you have an HTML-based trading post and don't mind doing the maths every time you update it, this is all you really need.

Static Code (HTML)

This is the code used to display the static example above.

<div>
	<img src="gobstones/level/04.png" />
	<div class="progress" title="40% (40/100)">
		<div class="progress-bar" style="width: 40%;"></div>
	</div>
</div>

This HTML is useful only to demonstrate how simple the progress bar really is. However, the bar size is a percentage, so we can't just insert our card worth and our level thresholds because our range isn't always going to be 0-100. We would have to do some calculations every time we updated it, and that's where the PHP becomes necessary.


Static Example (PHP)

This example uses static information, which requires updating every time your card worth changes. However, by using PHP we can do the necessary calculations automatically, making this a lot easier to use than the HTML example above.

If your post is manually updated but you're comfortable with PHP, this is what you want to use.

Required Data:

  • Current level: This determines which badge is displayed.
  • Current card worth ($CardWorth): We need this to calculate our level progress. In the example above, I used "40" to replace this value.
  • Starting threshold for this level ($LevelStart): We also need this to calculate our level progress
  • Starting threshold for next level ($NextLevelStart): Our goal! Once we reach this, our progress bar will be full. Also -- you guessed it: we'll use it to calculate our level progress.
  • Level Progress ($LevelProgress): We'll need to run a quick equation to calculate our current progress, it goes like this: ($CardWorth - $LevelStart) / ($NextLevelStart - $LevelStart) × 100

In the next step, we'll turn this code into something we can use with eTCG.

Static PHP Code

<?php
	$CurrentLevel = "02";
	$LevelStart = "1";
	$NextLevelStart = "100";
	$CardWorth = "40";
	$LevelProgress = ($CardWorth - $NextLevelStart) / ($LevelNext - $NextLevelStart) * 100;

echo '
<div>
	<img src="riddikulus/level/' . $CurrentLevel . '.png" />
	<div class="example-progress" title="' . $LevelProgress . '% (' . $CardWorth . '/' . $NextLevelStart . ')">
		<div class="example-progress-bar" style="width: ' . $LevelProgress . '%;"></div>
	</div>
</div>
'; 
?>

eTCG Integrated Example

This example uses live information from my installation of eTCG.
You can see this code in action on the Entirety section of my trading post.

If you're using eTCG to update your post, this is what you're here for.

eTCG-integrated PHP Code

To make this easier to update, I've added some additional fields in easyTCG. You can do this under "TCG Settings" in your own installation of easyTCG. I named my fields CurrentLevel, LevelStart, NextLevelStart.

I've also added a variable which declares the TCG name, so you won't have to edit the code to reuse it.

<?php
$tcgname = "Small Screen";
$badgeWidth = "145"; // To make this work on centered layouts.

$CurrentLevel = get_additional($tcgname,'CurrentLevel');
$LevelStart = get_additional($tcgname,'LevelStart');
$NextLevelStart = get_additional($tcgname,'NextLevelStart');
$CardWorth = cardcount($tcgname,'worth');
$LevelProgress = ($CardWorth - $LevelStart) / ($NextLevelStart - $LevelStart) * 100;

echo '<div style="width: ' . $badgeWidth . 'px;">
  <img src="smallscreen/level/' . $CurrentLevel . '.png" />
    <div class="progress" title="' . round($LevelProgress) . '% (' . $CardWorth . '/' . $NextLevelStart . ')">
      <div class="progress-bar" style="width: ' . $LevelProgress . '%;"></div>
    </div>
</div>';
?>

Note: $badgeWidth is used to declare the width of the badge image you're using. Without it, the bar won't display properly on centered layouts. Declaring the width also allows you to use your own method of displaying the level badge, as it won't need to be inside the same div as the bar.


Styling Example

.progress-bar {
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
		-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	background-color: #a9ceb6;
	float: left;
	height: 100%;
	width: 0%;
}

.progress {
	height: 10px;
	overflow: hidden;
}