Widget:CharacterList

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>

<style>

button {

     background-color: #b36e14;
   float: left;
   border: 1px solid #64320d;
   outline: none;
   cursor: pointer;
   padding: 7px 16px;
   transition: 0.3s;
   display: inline;
 color: white;

height: 31px; }

1. buttons {

 text-align: center;
 position: relative;
 display: block;

float:left; }

1. chars a img.thumbborder {

 border: none;

}

1. 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;

}

1. chars a:hover .tcont{

   opacity: 1;

transition: opacity 250ms linear;

}

1. chars a:hover

{

   text-decoration: none;

}

div#chars .tcont{

       position: relative;

opacity: 0; color:white; font-family: Cinzel Decorative; font-weight: bold; font-size: 14px; display: inline-block; width: 140px; top: -90px; left: 6px; text-align: center;

}

1. 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; }

1. breaker {

display: block; text-align:left; font-size: 20px; font-weight: bold; padding: 5px; }

1. charSelect-s1, #charSelect-s2 {

border: 1px solid #000;

   font-size: 14px;
   color: #fff;
   background: #444;
   padding: 2px;
 position: relative;
 width: 220px;

float: right; }

1. charTitle{

display: block; text-align:center; font-size: 24px; font-weight: bold; } </style>

<script> 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() >= 44 && $(this).height() < 67){ $(this).parent().css("position", "relative"); $(this).css("top", "-100px"); } if($(this).height() >= 67){ $(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()); } });

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()); } } });

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()); } } });

$("div#chars").before("<select id='charSelect-s1'> <option>Season 1 Characters</option> <option>All 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></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> </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"); } });

}, 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(); }

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();

} } </script>