Skip to content
Permalink
Browse files

Merge pull request #638 from AnnanFay/rare-draft-info

Added basic rare drafting info to draft rows
  • Loading branch information...
Manuel-777 committed Oct 19, 2019
2 parents fdca4cf + 082f1d3 commit 01731f7f918f6377aeff44da87af11175fa36d21
Showing with 149 additions and 49 deletions.
  1. +7 −6 shared/util.js
  2. +4 −23 window_main/economy.js
  3. +49 −6 window_main/index.css
  4. +89 −14 window_main/renderer-util.js
@@ -33,18 +33,19 @@ function getCardArtCrop(cardObj) {

//
exports.getCardImage = getCardImage;
function getCardImage(cardObj) {
function getCardImage(cardObj, quality = undefined) {
if (typeof cardObj !== "object") {
cardObj = db.card(cardObj);
}

if (quality == undefined) {
quality = pd.settings.cards_quality;
}

try {
let url = cardObj.images[pd.settings.cards_quality];
let url = cardObj.images[quality];
if (url == undefined || url == "") throw "Undefined url";
return (
"https://img.scryfall.com/cards" +
cardObj.images[pd.settings.cards_quality]
);
return "https://img.scryfall.com/cards" + cardObj.images[quality];
} catch (e) {
console.log("Cant find card image: ", cardObj);
return "../images/notfound.png";
@@ -20,7 +20,8 @@ const {
formatNumber,
formatPercent,
resetMainContainer,
toggleArchived
toggleArchived,
createInventoryCard
} = require("./renderer-util");

const byId = id => document.getElementById(id);
@@ -662,28 +663,8 @@ function createChangeRow(change, economyId) {
change.delta.cardsAdded.sort(collectionSortRarity);
change.delta.cardsAdded.forEach(function(grpId) {
var card = db.card(grpId);

var d = createDiv(["inventory_card"]);
d.style.width = "39px";

var img = document.createElement("img");
img.classList.add("inventory_card_img");
img.style.width = "39px";
img.src = getCardImage(card);
img.title = card.name;

d.appendChild(img);

flexRight.appendChild(d);
addCardHover(img, card);

img.addEventListener("click", () => {
if (db.card(grpId).dfc == "SplitHalf") {
card = db.card(card.dfcId);
}
//let newname = card.name.split(' ').join('-');
openScryfallCard(card);
});
var divWithNoName = createInventoryCard(card);
flexRight.appendChild(divWithNoName);
});
}

@@ -1,5 +1,14 @@
@import '../node_modules/pikaday/css/pikaday.css';


:root {
--wc_common_png: url('../images/wc_common.png');
--wc_uncommon_png: url('../images/wc_uncommon.png');
--wc_rare_png: url('../images/wc_rare.png');
--wc_mythic_png: url('../images/wc_mythic.png');
--booster_png: url('../images/booster.png');
}

span i {
margin-left: 4px;
}
@@ -1214,11 +1223,11 @@ a:hover {
background-image: url('../images/complete.png');
}

.wc_common { background-image: url('../images/wc_common.png'); }
.wc_uncommon { background-image: url('../images/wc_uncommon.png'); }
.wc_rare { background-image: url('../images/wc_rare.png'); }
.wc_mythic { background-image: url('../images/wc_mythic.png'); }
.wc_booster { background-image: url('../images/booster.png'); height: 34px; line-height: 34px; }
.wc_common { background-image: var(--wc_common_png); }
.wc_uncommon { background-image: var(--wc_uncommon_png); }
.wc_rare { background-image: var(--wc_rare_png); }
.wc_mythic { background-image: var(--wc_mythic_png); }
.wc_booster { background-image: var(--booster_png); height: 34px; line-height: 34px; }

.inventory {
padding-left: 8px;
@@ -1279,7 +1288,7 @@ a:hover {
box-shadow: 0 5px 14px 2px rgba(0, 0, 0, 0.25);
}

.inventory_card_img {
.inventory_card img {
cursor: pointer;
-webkit-border-radius: 4.75% / 3.5%;
box-shadow: 0 5px 14px 2px rgba(0, 0, 0, 0.25);
@@ -1358,6 +1367,40 @@ a:hover {
background: center no-repeat url('../images/quantity_inf_orange.png');
}

.round_card {
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
margin: auto 4px;
background-size: contain;
}

.rarity-overlay:before {
pointer-events: none;
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
}

.rarity-overlay.common:before {
background-image: var(--wc_common_png);
}
.rarity-overlay.uncommon:before {
background-image: var(--wc_uncommon_png);
}
.rarity-overlay.rare:before {
background-image: var(--wc_rare_png);
}
.rarity-overlay.mythic:before {
background-image: var(--wc_mythic_png);
}

.icon_search_unowned {
display: -webkit-inline-box;
width: 20px;
@@ -39,7 +39,8 @@ const {
getCardImage,
getReadableEvent,
makeId,
toMMSS
toMMSS,
openScryfallCard
} = require("../shared/util");

const byId = id => document.getElementById(id);
@@ -955,23 +956,80 @@ function attachMatchData(listItem, match) {
}
}

//
exports.attachDraftData = attachDraftData;
function attachDraftData(listItem, draft) {
// console.log("Draft: ", match);
function createDraftSetDiv(draft) {
return createDiv(["list_deck_name"], draft.set + " draft");
}

const draftSetDiv = createDiv(["list_deck_name"], draft.set + " draft");
listItem.leftTop.appendChild(draftSetDiv);
exports.createInventoryCard = createInventoryCard;
function createInventoryCard(card) {
var inventoryCard = createDiv(["inventory_card"]);
inventoryCard.style.width = "39px";

const draftTimeDiv = createDiv(
["list_match_time"],
localTimeSince(new Date(draft.date))
);
listItem.rightBottom.appendChild(draftTimeDiv);
var img = createImg();
img.style.width = "39px";
img.src = getCardImage(card);
img.title = card.name;
inventoryCard.appendChild(img);

const replayDiv = createDiv(["list_match_replay"], "See replay");
listItem.rightTop.appendChild(replayDiv);
addCardHover(inventoryCard, card);

inventoryCard.addEventListener("click", () => {
if (card.dfc == "SplitHalf") {
card = db.card(card.dfcId);
}
//let newname = card.name.split(' ').join('-');
openScryfallCard(card);
});

return inventoryCard;
}

exports.createRoundCard = createRoundCard;
function createRoundCard(card, rarityOverlay = false) {
var roundCard = createDiv([
"round_card",
card.rarity,
`rarity-overlay${rarityOverlay ? "" : "-none"}`
]);

roundCard.title = card.name;
roundCard.style.backgroundImage = `url("${getCardImage(card, "art_crop")}")`;

addCardHover(roundCard, card);

roundCard.addEventListener("click", () => {
if (card.dfc == "SplitHalf") {
card = db.card(card.dfcId);
}
openScryfallCard(card);
});

return roundCard;
}

function createDraftRares(draft) {
var draftRares = createDiv(["flex_item"]);
draftRares.style.margin = "auto";
if (!draft.pickedCards) return draftRares;

draft.pickedCards
.map(cardId => db.card(cardId))
.filter(card => card.rarity == "rare" || card.rarity == "mythic")
.map(card => createRoundCard(card, true))
.forEach(inventoryCard => draftRares.appendChild(inventoryCard));

return draftRares;
}

function createDraftTimeDiv(draft) {
return createDiv(["list_match_time"], localTimeSince(new Date(draft.date)));
}

function createReplayDiv(draft) {
return createDiv(["list_match_replay"], "See replay");
}

function createReplayShareButton(draft) {
const replayShareButton = createDiv(["list_draft_share", draft.id + "dr"]);
replayShareButton.addEventListener("click", e => {
e.stopPropagation();
@@ -1005,6 +1063,23 @@ function attachDraftData(listItem, draft) {
openDialog(cont);
draftShareLink(draft.id, draft);
});
return replayShareButton;
}

exports.attachDraftData = attachDraftData;
function attachDraftData(listItem, draft) {
console.log("Draft: ", draft);

const draftSetDiv = createDraftSetDiv(draft);
const draftRares = createDraftRares(draft);
const draftTimeDiv = createDraftTimeDiv(draft);
const replayDiv = createReplayDiv(draft);
const replayShareButton = createReplayShareButton(draft);

listItem.leftTop.appendChild(draftSetDiv);
listItem.center.appendChild(draftRares);
listItem.rightBottom.appendChild(draftTimeDiv);
listItem.rightTop.appendChild(replayDiv);
listItem.right.after(replayShareButton);
}

0 comments on commit 01731f7

Please sign in to comment.
You can’t perform that action at this time.