<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;
height: 31px;
}
#charTitle {
display: block;
text-align: center;
font-size: 24px;
font-weight: bold;
padding-top: 40px;
}
</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() >= 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());
}
});
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>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>Guild of Explorers</option><option>Battle of the Bards</option><option>The Blood Snake Queen</option><option>The Death of Virgo</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</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>Player Characters</option><option>NPC Characters</option><option>Minor Characters</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");
}
if ($(this).val() == "Guild of Explorers") {
$("div#chars a").hide();
$("div#chars a[class*='s1c11-']").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() == "Battle of the Bards") {
$("div#chars a").hide();
$("div#chars a[class*='s1c12-']").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 Blood Snake Queen") {
$("div#chars a").hide();
$("div#chars a[class*='s1c13-']").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 Death of Virgo") {
$("div#chars a").hide();
$("div#chars a[class*='s1c14-']").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() == "Player Characters") {
$("div#chars a").hide();
for (var i = 0; i < s1List.length; i++) {
$("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
}
$("div#chars a:not([class*='-m'])").hide();
$("span#breaker").remove();
}
if ($(this).val() == "NPC Characters") {
$("div#chars a").hide();
for (var i = 0; i < s1List.length; i++) {
$("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
}
$("div#chars a:not([class*='-n'])").hide();
$("span#breaker").remove();
}
if ($(this).val() == "Minor Characters") {
$("div#chars a").hide();
for (var i = 0; i < s1List.length; i++) {
$("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
}
$("div#chars a:not([href*='Minor_Characters'])").hide();
$("span#breaker").remove();
}
});
$("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*='s2c9-']").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*='s2c10-']").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() == "Player Characters") {
$("div#chars a").hide();
for (var i = 0; i < s2List.length; i++) {
$("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
}
$("div#chars a:not([class*='-m'])").hide();
$("span#breaker").remove();
}
if ($(this).val() == "NPC Characters") {
$("div#chars a").hide();
for (var i = 0; i < s2List.length; i++) {
$("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
}
$("div#chars a:not([class*='-n'])").hide();
$("span#breaker").remove();
}
if ($(this).val() == "Minor Characters") {
$("div#chars a").hide();
for (var i = 0; i < s2List.length; i++) {
$("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
}
$("div#chars a:not([href*='Minor_Characters'])").hide();
$("span#breaker").remove();
}
});
$("span.tcont").each(function() {
if ($(this)[0].scrollWidth > 135) {
console.log("Fix Spacing > " + $(this).text());
}
});
if ($(window).width() <= 992) {
$("span.tcont").each(function() {
if($(this).height() >= 56){
$(this).parent().css("position", "relative");
$(this).parent().css("top", "25px");
}
});
$("span.tcont").css("opacity", "1");
$("#chars a img.thumbborder").css("filter", "brightness(50%)");
} else {
$("div#buttons").after("<button id='nametoggle' onclick='toggleNames(this)' style='float:right;'>Toggle Names</button>");
}
}, false);
function toggleNames(val){
if(val.id = "nametoggle"){
console.log("works");
if($(val).css("background-color") == "rgb(179, 110, 20)"){
$("span.tcont").css("opacity", "1");
$("#chars a img.thumbborder").css("filter", "brightness(50%)");
$("#nametoggle").css('background-color', '#89540F');
} else {
$("span.tcont").css("opacity", "0");
$("#chars a img.thumbborder").css("filter", "brightness(100%)");
$("#nametoggle").css('background-color', '#b36e14');
}
}
}
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');
}
}
</script>
