Skip to content

Instantly share code, notes, and snippets.

@bhughes339

bhughes339/drafthelper.php

Last active November 7, 2017 14:35
Show Gist options
  • Save bhughes339/9ff81cf8f95f1570a8326a5c5cfa98ed to your computer and use it in GitHub Desktop.
Save bhughes339/9ff81cf8f95f1570a8326a5c5cfa98ed to your computer and use it in GitHub Desktop.
Download ZIP
Raw
drafthelper.php
<html>
<head>
<link rel="stylesheet" href='style.css' >
<link rel="stylesheet" href='/eternal/css/normalize.css' >
<script src="https://whughes.co/jquery/jquery.js"></script>
<script src="methods.js"></script>
</head>
<?php
const FRAME_WIDTH = 300;
const BUTTON_WIDTH = 36;
const FC_BITWISE = array(
'Fire' => 16,
'Time' => 8,
'Justice' => 4,
'Primal' => 2,
'Shadow' => 1);
?>
<body>
<title>Eternal Draft Tier Visualizer</title>
<div id='filterFrame' style='width:<?php echo FRAME_WIDTH; ?>px;'>
<div class='basicContainer' style='margin:8px; margin-bottom: 20px;'><b>Eternal Draft Tier Visualizer</b></div>
<div class='filterContainer' id='textFilter'>
<div class='basicContainer'>
<input type="textBox" id="filterSearch" placeholder='Filter by card name'>
<button id="textClear" type="reset"></button>
</div>
</div>
<div class='filterContainer' id='factionFilter'>
<div class='basicContainer'>
<input type='checkbox' class='factionCheckbox' value='<?php echo FC_BITWISE['Fire'];?>' id='Fire'/><label for='Fire' style="background-position: 0px 0;"></label>
<input type='checkbox' class='factionCheckbox' value='<?php echo FC_BITWISE['Time'];?>' id='Time'/><label for='Time' style="background-position: -<?php echo BUTTON_WIDTH;?>px 0;"></label>
<input type='checkbox' class='factionCheckbox' value='<?php echo FC_BITWISE['Justice'];?>' id='Justice'/><label for='Justice' style="background-position: -<?php echo BUTTON_WIDTH*2;?>px 0;"></label>
<input type='checkbox' class='factionCheckbox' value='<?php echo FC_BITWISE['Primal'];?>' id='Primal'/><label for='Primal' style="background-position: -<?php echo BUTTON_WIDTH*3;?>px 0;"></label>
<input type='checkbox' class='factionCheckbox' value='<?php echo FC_BITWISE['Shadow'];?>' id='Shadow'/><label for='Shadow' style="background-position: -<?php echo BUTTON_WIDTH*4;?>px 0;"></label>
<input type='checkbox' class='factionCheckbox' value='0' id='colorlessCheck'/><label for='colorlessCheck' style="background-position: -<?php echo BUTTON_WIDTH*6;?>px 0;"></label>
</div>
<div class='basicContainer'>
<input type="button" id="factionClear" value="Clear Factions">
</div>
<div class='basicContainer' id='theFaction'>Faction: </div>
</div>
<div class='filterContainer' id='rarityFilter'>
<div class='basicContainer'>
<input type='checkbox' class='rarityCheckbox' id='Common'/><label for='Common' style='border: 2px solid grey;'>Common</label>
<input type='checkbox' class='rarityCheckbox' id='Uncommon'/><label for='Uncommon' style='border: 2px solid green;'>Uncommon</label>
<input type='checkbox' class='rarityCheckbox' id='Rare'/><label for='Rare' style='border: 2px solid blue;'>Rare</label>
<input type='checkbox' class='rarityCheckbox' id='Legendary'/><label for='Legendary' style='border: 2px solid #f1cc00;'>Legendary</label>
<input type='checkbox' class='rarityCheckbox' id='Promo'/><label for='Promo' style='border: 2px solid #bc48ff;'>Promo</label>
</div>
<div class='basicContainer'>
<input type="button" id="rarityClear" value="Clear Rarities">
</div>
</div>
<div class='basicContainer' style='font-size: 12px;'>Based on tier list by Reddit user Aetherllama<br /><br />(Updated Feb 14, 2017)</div>
</div>
<div class='cardsWrapper' id='cardsWrapper' style='left:<?php echo FRAME_WIDTH+3; ?>;'>
<div class='cards' id='cards'>
<?php
$conn = new mysqli("localhost","xxxxxx", "xxxxxx", "xxxxxx");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$query = "SELECT cards.name, cards.colors, cards.rarity, tiers_aetherllama.tier as 'tier', cards.image, tiers_aetherllama.cardorder FROM cards ";
$query .= "INNER JOIN tiers_aetherllama ON cards.uid=tiers_aetherllama.cardid WHERE tier>0 ORDER BY cardorder ASC, tier ASC, name ASC";
$list = $conn->query($query);
$query = "SELECT value, tier FROM tiers";
$result = $conn->query($query);
foreach ($result as $v) {
$num = $v['value'];
$tierlist[$num] = $v['tier'];
}
$tier = 0;
$maxwidth = 250;
foreach ($list as $c) {
if ($tier != $c['tier']) {
if ($tier != 0) echo "</div>";
$tier = $c['tier'];
echo "<div class=\"tierDiv\"><div class=\"tierHeader\">{$tierlist[$tier]} Tier</div>";
}
$width = $maxwidth - ($tier * 10);
echo "<img name=\"{$c['name']}\" class=\"{$c['colors']} {$c['rarity']}\"width=\"{$width}\" src=\"{$c['image']}\">";
}
echo "</div>";
?>
</div>
</div>
</body>
</html>
Raw
methods.js
var colors;
var $cards;
var $visible;
var val = '^(?=.*\\b).*$';
var reg = RegExp(val, 'i');
var facList = [];
$.getJSON('/eternal/faction.php', function(data) {
$.each(data, function(key, val) {
facList[parseInt(key)] = val;
});
});
function filterCards() {
$cards.hide();
if ($('.rarityCheckbox:checked').length > 0) {
$('.rarityCheckbox:checked').each(function() {
rarities = 'img.' + $(this).attr("id");
$(rarities).show();
});
} else {
$cards.show();
}
colors = 31;
if ($('.factionCheckbox:checked').length > 0) {
colors = 0;
$('.factionCheckbox:checked').each(function() {
colors += parseInt($(this).attr('value'));
});
if ($('#colorlessCheck').prop('checked') === false) {
$('img.0').hide();
}
}
$('#theFaction').text('Faction: ' + (facList[colors] ? facList[colors] : ''));
$cards.filter(function() {
return (parseInt($(this).attr('class').split(' ')[0]) | colors) != colors;
}).hide();
$visible = $('img:visible');
$cards.filter(function() {
return !reg.test($(this).attr('name'));
}).hide();
$('.tierDiv').show().filter(function() {
return $(this).find('img:visible').length === 0;
}).hide();
}
function textFilter() {
val = '^(?=.*\\b' + $.trim($('#filterSearch').val()) + ').*$';
reg = RegExp(val, 'i');
$visible.show().filter(function() {
return !reg.test($(this).attr('name'));
}).hide();
$('.tierDiv').show().filter(function() {
return $(this).find('img:visible').length === 0;
}).hide();
}
$(document).ready(function(){
$cards = $('img');
$visible = $cards;
$('.factionCheckbox').change(function() {
filterCards();
});
$('#factionClear').click(function() {
$('.factionCheckbox').prop('checked', false);
filterCards();
});
$('#textClear').click(function() {
$('#filterSearch').val('');
textFilter();
filterCards();
});
$('#filterSearch').keyup(function() {
textFilter();
});
$('.rarityCheckbox').change(function() {
filterCards();
});
$('#rarityClear').click(function() {
$('.rarityCheckbox').prop('checked', false);
filterCards();
});
});
Raw
style.css
body {
background-color: #ECECEA;
font-family: 'Verdana';
}
#filterFrame {
border-right-style: solid;
position:fixed;
display:block;
text-align: center;
top:0;
left:0;
bottom:0;
z-index:100;
overflow:hidden;
}
.filterContainer {
background-color: #DCDCDA;
display:block;
position:relative;
margin:8px;
border: 2px solid grey;
border-radius: 10px;
padding-top: 8px;
}
.basicContainer {
display:block;
position:relative;
margin-bottom:8px;
margin-left:8px;
margin-right:8px;
}
.filterContainer input[type="textBox"] {
width:100%;
height: 30px;
font-size: 15px;
font-family: Verdana;
line-height: 30px;
display:block;
vertical-align:top;
}
#textClear {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
#textClear:after {
content: "✕";
display: block;
width: 15px;
height: 15px;
position: absolute;
z-index:1;
right: 5px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
text-align: center;
color: black;
font-weight: bold;
font-size: 12px;
cursor: pointer;
}
#factionFilter input[type="checkbox"] {
display: none;
}
#factionFilter input[type="checkbox"] + label {
width: 36px;
height: 36px;
background: url('https://whughes.co/eternal/img/factioncolors.png') no-repeat;
background-size: 252px, 36px;
filter: grayscale(100%);
display:inline-block;
cursor: pointer;
}
#factionFilter input[type="checkbox"]:checked + label {
width: 36px;
height: 36px;
background: url('https://whughes.co/eternal/img/factioncolors.png') no-repeat;
background-size: 252px, 36px;
filter: grayscale(0);
-webkit-filter: drop-shadow(5px 5px 5px grey);
display:inline-block;
cursor: pointer;
}
#rarityFilter input[type="checkbox"] {
display: none;
}
#rarityFilter input[type="checkbox"] + label {
position:relative;
font-size: 14px;
display:block;
padding: 5px;
margin-top:5px;
border-radius: 10px;
filter: grayscale(100%);
cursor: pointer;
}
#rarityFilter input[type="checkbox"]:checked + label {
position:relative;
font-size: 14px;
background-color: lightgrey;
display:block;
padding: 5px;
border-radius: 10px;
filter: grayscale(0);
cursor: pointer;
}
.cardsWrapper {
display:block;
position:fixed;
height:auto;
top:0;
right:0;
bottom:0;
margin-left:8px;
z-index:100;
overflow-y: auto;
}
.tierDiv {
font-size: 24px;
}
.tierHeader {
margin-top: 20px;
}
#rngeternal {
position:absolute;
margin-top: 10px;
margin-left:20px;
display:inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment