<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<style>
button {
background-color: #b36e14;
border: 1px solid #64320d;
outline: none;
cursor: pointer;
padding: 7px 16px;
transition: 0.3s;
display: inline;
color: white;
height: 31px;
}
- buttons {
text-align: center;
position: relative;
display: block;
float:left;
}
- chars a img.thumbborder {
display: inline-grid;
border: none;
}
- chars a:hover img.thumbborder {
-webkit-filter: grayscale(50%) brightness(50%);
filter: grayscale(70%) brightness(50%) blur(2px);
-webkit-transition : -webkit-filter 250ms linear;
transition: filter 250ms linear;
}
- chars a:hover .tcont{
opacity: 1;
transition: opacity 250ms linear;
}
- chars a:hover
{
text-decoration: none;
}
div#chars .tcont{
position: relative;
opacity: 0;
color:white;
font-family: Berkshire Swash;
font-size: 18px;
display: inline-block;
width: 135px;
top: -90px;
left: 10px;
text-align: center;
}
- chars a {
display: inline-grid;
max-width: 150px;
max-height: 150px;
margin-right: 20px;
margin-left:30px;
margin-bottom: 30px;
}
div#filter{
border: 3px solid #dddddd;
border-radius: 20px;
overflow: hidden;
display: block;
}
div#chars {
text-align: center;
}
div#chars #breaker {
text-align: left;
text-size: 18px;
text-weight: bold;
}
- breaker {
display: block;
text-align:left;
font-size: 20px;
font-weight: bold;
padding: 5px;
}
- charSelect-s1, #charSelect-s2 {
border: 1px solid #000;
font-size: 14px;
color: #fff;
background: #444;
padding: 2px;
position: relative;
width: 220px;
float: right;
}
- charTitle{
display: block;
text-align:center;
font-size: 24px;
font-weight: bold;
padding-top: 40px;
}
</style>
<script>
var charListSorted;
var s1ListSorted;
var s2ListSorted;
window.addEventListener('load',
function() {
$("#chars img.thumbborder").wrap("
");
$("div#filter").each(function(){
$(this).after("" + $(this).parent("a").attr("title") +"")});
$("#chars img").each(function() {
var text = $(this).attr("class");
text = text.substring(0, text.indexOf(" "));
$(this).parent().parent().attr("class", text);
});
$("span.tcont").each(function() {
if($(this).height() >= 29 && $(this).height() < 57){
$(this).parent().css("position", "relative");
$(this).css("top", "-100px");
}
if($(this).height() >= 57){
$(this).parent().css("position", "relative");
$(this).css("top", "-110px");
}
});
var classList = [];
$("div#chars a").each(function() {
var val = $(this).attr("class");
val = val.substring(0, val.indexOf("-"));
if(classList.indexOf(val) < 0){
classList.push(val);
}
});
var charList = [];
$("span.tcont").each(function() {
if(charList.indexOf($(this).text()) < 0){
charList.push($(this).text());
}
});
charListSorted = charList.sort();
var s1List = [];
$("div#chars a").each(function() {
if($(this).attr("class").startsWith("s1")){
if(s1List.indexOf($(this).find("span.tcont").text()) < 0){
s1List.push($(this).find("span.tcont").text());
}
}
});
s1ListSorted = s1List.sort();
var s2List = [];
$("div#chars a").each(function() {
if($(this).attr("class").startsWith("s2")){
if(s2List.indexOf($(this).find("span.tcont").text()) < 0){
s2List.push($(this).find("span.tcont").text());
}
}
});
s2ListSorted = s2List.sort();
$("div#chars").before("<select id='charSelect-s1'> <option>Season 1 Characters</option><option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</option> <option>The Many Gobos of Pat</option> <option>The Sunswords</option> <option>The Unseen Rogues</option> <option>Kobold Headhunters</option> <option>Zarlin Catacombs</option> <option>The New Crew</option> <option>Silvermine Mountains</option><option>All Characters</option></select>");
$("#charSelect-s1").before("<select id='charSelect-s2'><option>Season 2 Characters</option> <option>Woodcarvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>The Tower of Ultimate Wizardry: Chapter One</option> <option>Unexpected Discovery</option> <option>Buckeroos</option> <option>Fall of Dundinborough</option> <option>Den of Devils</option> <option>The Skeleton King</option><option>All Characters</option></select>");
$("#charSelect-s2").before('
<button id="b-s1" onclick="changeSeason(this)">Season One</button><button id="b-s2" onclick="changeSeason(this)">Season Two</button>');
/*Default Select Behavior */
$("#charSelect-s1").show();
$("#charSelect-s2").hide();
$("#b-s1").css('background-color', '#89540F');
/*Default*/
$("div#chars a").hide();
$("span#breaker").remove();
$("#charTitle").remove();
for(var i = 0; i < s1List.length; i++){
$("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
}
$("#charSelect-s1").after("Season 1 Characters");
$("select#charSelect-s1").change(function () {
$("div#chars a").hide();
$("span#breaker").remove();
$("#charTitle").remove();
$("#charSelect-s1").after("" + $(this).val() + "");
if($(this).val() == "All Characters"){
for(var i = 0; i < charList.length; i++){
$("span.tcont:contains('" + charList[i] + "'):first").parent().show();
}
}
if($(this).val() == "Season 1 Characters"){
for(var i = 0; i < s1List.length; i++){
$("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
}
}
if($(this).val() == "Band of Thieves"){
$("div#chars a").hide();
$("div#chars a[class*='s1c1-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Porc Hunters"){
$("div#chars a").hide();
$("div#chars a[class*='s1c2-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The Jewel of the Dingo Isles"){
$("div#chars a").hide();
$("div#chars a[class*='s1c3-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The Many Gobos of Pat"){
$("div#chars a").hide();
$("div#chars a[class*='s1c4-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The Sunswords"){
$("div#chars a").hide();
$("div#chars a[class*='s1c5-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The Unseen Rogues"){
$("div#chars a").hide();
$("div#chars a[class*='s1c6-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Kobold Headhunters"){
$("div#chars a").hide();
$("div#chars a[class*='s1c7-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Zarlin Catacombs"){
$("div#chars a").hide();
$("div#chars a[class*='s1c8-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The New Crew"){
$("div#chars a").hide();
$("div#chars a[class*='s1c9-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Silvermine Mountains"){
$("div#chars a").hide();
$("div#chars a[class*='s1c10-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
});
$("select#charSelect-s2").change(function () {
$("div#chars a").hide();
$("span#breaker").remove();
$("#charTitle").remove();
$("#charSelect-s2").after("" + $(this).val() + "");
if($(this).val() == "All Characters"){
for(var i = 0; i < charList.length; i++){
$("span.tcont:contains('" + charList[i] + "'):first").parent().show();
}
}
if($(this).val() == "Season 2 Characters"){
for(var i = 0; i < s2List.length; i++){
$("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
}
}
if($(this).val() == "Woodcarvers"){
$("div#chars a").hide();
$("div#chars a[class*='s2c1-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Okagnoma Guild Hall"){
$("div#chars a").hide();
$("div#chars a[class*='s2c2-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Murder Bros"){
$("div#chars a").hide();
$("div#chars a[class*='s2c3-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The Cobblers"){
$("div#chars a").hide();
$("div#chars a[class*='s2c4-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The Tower of Ultimate Wizardry: Chapter One"){
$("div#chars a").hide();
$("div#chars a[class*='s2c5-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Unexpected Discovery"){
$("div#chars a").hide();
$("div#chars a[class*='s2c6-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Buckeroos"){
$("div#chars a").hide();
$("div#chars a[class*='s2c7-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Fall of Dundinborough"){
$("div#chars a").hide();
$("div#chars a[class*='s2c8-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "Den of Devils"){
$("div#chars a").hide();
$("div#chars a[class*='s2c5-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
if($(this).val() == "The Skeleton King"){
$("div#chars a").hide();
$("div#chars a[class*='s2c5-']").show();
$("span#breaker").remove();
$("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
$("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
}
});
$("span.tcont").each(function(){
if($(this)[0].scrollWidth > 135){
console.log("Fix Spacing > " + $(this).text());
}
});
$("#b-s2").after('<button id="b-sort" style="float:right;" onclick="sortList(this)">Sort</button>');
if ($(window).width() <= 992) {
$("span.tcont").css("opacity", "1");
$("#chars a img.thumbborder").css("filter","brightness(50%)");
}
}, false);
function changeSeason(val){
if(val.id == "b-s1"){
$("#b-s1").css('background-color', '#89540F');
$("#b-s2").css('background-color', '#b36e14');
$('#charSelect-s2').prop('selectedIndex',0);
$("#charSelect-s1").show();
$("#charSelect-s2").hide();
$('#charSelect-s1').trigger('change');
}
if(val.id == "b-s2"){
$("#b-s2").css('background-color', '#89540F');
$("#b-s1").css('background-color', '#b36e14');
$('#charSelect-s1').prop('selectedIndex',0);
$("#charSelect-s1").hide();
$("#charSelect-s2").show();
$('#charSelect-s2').trigger('change');
}
}
function sortList(val){
$("div#chars a").hide();
$("span#breaker").remove();
$("#charTitle").remove();
if ($("select:visible option:selected").val() == "All Characters"){
$("#charSelect-s2").after("" + $("select:visible option:selected").val() + "");
for(var i = 0; i < charListSorted.length; i++){
$("span.tcont:contains('" + charListSorted[i] + "'):first").parent().show();
}
}
}
}
</script>
