Scryfall Deck Building Tool

Scryfall Deck Builder Utility

by skibulk

HTML

<div class="card-grid-item-card-front tam_bad_card">
  <img class="card c18 border-black " title="Adarkar Valkyrie (Commander 2018 #60)" alt="Adarkar Valkyrie (Commander 2018 #60)" loading="eager" src="https://cards.scryfall.io/normal/front/f/c/fc2a4abc-85da-46a6-a616-9aa607ce7372.jpg?1592710383">
</div>

CSS

.card-grid-item-card-front {
  display: inline-block;
  position: relative;
}

.card-grid-item-card-front.tam_bad_card img {
  opacity: 0.5;
}

.tam_overlay {
  visibility: hidden;
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(5, 1fr);
}

.tam_overlay div {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 5px 2px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 18pt;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}

.tam_overlay div.tam_bad_deck {
  background: rgba(127, 0, 0, 0.5);
}

.card-grid-item-card-front:hover .tam_overlay {
  visibility: visible;
}

JavaScript

let decks = [
  {name:"Test", id:""},
  {name:"Test", id:""},
];

let widget = document.createElement("div");
widget.className = "tam_overlay";

for(let i=0; i<decks.length; i++){
	let bad = document.createElement("div");
  bad.textContent = "Bad";
  widget.append(bad);
  
	let name = document.createElement("div");
  name.textContent = decks[i].name;
  widget.append(name);
  
	let add = document.createElement("div");
  add.textContent = "Add";
  widget.append(add);
}

let cards = document.getElementsByClassName("card-grid-item-card-front");

cards[0].prepend(widget);