211 lines
5.7 KiB
Plaintext
211 lines
5.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Junk rare cube</title>
|
|
<style>
|
|
body {
|
|
background: #eee;
|
|
}
|
|
|
|
main {
|
|
background: white;
|
|
max-width: 1220px;
|
|
margin: 0 auto;
|
|
padding: 20pt;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.columns {
|
|
padding: 20pt 0;
|
|
display: flex;
|
|
}
|
|
|
|
.color-section {
|
|
flex: 1;
|
|
}
|
|
|
|
.color-section header {
|
|
text-align: center;
|
|
padding: 5px;
|
|
}
|
|
|
|
.color-W header.color-header {
|
|
background-color: #fff6eb;
|
|
}
|
|
|
|
.color-U header.color-header {
|
|
background-color: #49b0fd;
|
|
}
|
|
|
|
.color-B header.color-header {
|
|
background-color: #666;
|
|
color: white;
|
|
}
|
|
|
|
.color-R header.color-header {
|
|
background-color: #ff6868;
|
|
}
|
|
|
|
.color-G header.color-header {
|
|
background-color: #78ce59;
|
|
}
|
|
|
|
.color-MC header.color-header {
|
|
background: linear-gradient(to left, #f3ff6b, #ffb019);
|
|
}
|
|
|
|
.color-CL header.color-header {
|
|
background-color: #d2d2d2;
|
|
}
|
|
|
|
.color-L header.color-header {
|
|
background-color: #eeb445;
|
|
}
|
|
|
|
.type-section {
|
|
border: 1px solid #aaa;
|
|
border-radius: 5px;
|
|
font-size: 10pt;
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
.type-section header.type-header {
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 5px;
|
|
}
|
|
|
|
.cards {
|
|
position: relative;
|
|
}
|
|
|
|
.cmc-index {
|
|
position: absolute;
|
|
opacity: 0.1;
|
|
right: 5px;
|
|
font-size: 15pt;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
ul li {
|
|
display: flex;
|
|
}
|
|
|
|
ul li a {
|
|
padding: 5px;
|
|
flex: 1;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul li a:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
ul:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.img-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.img-overlay img {
|
|
width: auto;
|
|
height: 300px;
|
|
}
|
|
|
|
small {
|
|
color: #aaa;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Junk rare cube (<%=cards.length%> cards)</h1>
|
|
<h2>Using cards from <a href="https://www.cardmarket.com/en/Magic/Users/<%=user%>"><b><%= user %></b></a>
|
|
</h2>
|
|
<h2>Est. price without shipping: € <%= cards.reduce((a, c) => a + c.price, 0).toFixed(2) %></h2>
|
|
</header>
|
|
<section class="columns">
|
|
<% Object.entries(cubecards).forEach(([color, colorcards]) => { %>
|
|
<section class="color-section color-<%=color%>">
|
|
<header class="color-header">
|
|
<h3><%=utils.prettyColor(color)%> (<%=utils.deepSum(colorcards)%>)</h3>
|
|
</header>
|
|
<% Object.entries(colorcards).sort((a, b) => color == "MC" || color == "L" ? utils.abcSort(a[0], b[0]) : utils.typeSort(a[0], b[0])).forEach(([type, typecards]) => { %>
|
|
<article class="type-section">
|
|
<header class="type-header"><%= color == "MC" || color == "L" ? utils.prettyColor(type) : type %>
|
|
(<%=utils.deepSum(typecards)%>)</header>
|
|
<section class="cards">
|
|
<% Object.entries(typecards).forEach(([cmc, finalcards]) => { %>
|
|
<div class="cmc-index"><%=cmc%></div>
|
|
<ul>
|
|
<% finalcards.forEach(card => { %>
|
|
<li data-set="<%=card.set%>" data-num="<%=card.number%>">
|
|
<a target="_blank" data-image="<%=card.scryfallImageUrl%>"
|
|
href="<%= card.scryfallUrl %>">
|
|
<%= card.name %><small>€ <%=card.price.toFixed(2)%> - #<%=card.edhrecRank%></small>
|
|
</a>
|
|
</li>
|
|
<% }); %>
|
|
</ul>
|
|
<% }); %>
|
|
</section>
|
|
</article>
|
|
<% }); %>
|
|
</section>
|
|
<% }); %>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const overlay = document.createElement("div");
|
|
const img = document.createElement("img");
|
|
overlay.appendChild(img);
|
|
overlay.classList.add("img-overlay");
|
|
document.body.appendChild(overlay);
|
|
overlay.style.display = "none";
|
|
Array.prototype.slice.call(document.querySelectorAll("li a[data-image]"), 0).forEach(el => {
|
|
el.addEventListener("mouseenter", ev => {
|
|
overlay.style.display = "block";
|
|
img.src = el.dataset.image;
|
|
});
|
|
el.addEventListener("mouseleave", ev => {
|
|
overlay.style.display = "none";
|
|
});
|
|
el.addEventListener("mousemove", ev => {
|
|
overlay.style.left = `${ev.clientX}px`;
|
|
overlay.style.top = `${ev.clientY - 320}px`;
|
|
console.log(ev);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |