adam/SotM_Playfield
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix card backgroundPosition in Chrome

Browse Source 
Apperently, in Firefox you can get the style before appending, whereas
in Chrome you cannot
This commit is contained in:
Adam Goldsmith 2017-09-20 18:38:01 -04:00
parent dd94513736
commit fccc4e887f
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
script.js
View File

@ -86,18 +86,19 @@ interact('.card-pile')
// draw a new card
let newCard = document.createElement('div');
newCard.className = "card";
// insert the card to the page
document.querySelector("#card-container").appendChild(newCard);
let style = window.getComputedStyle(newCard);
let cardNum = pile.pop();
newCard.setAttribute('data-num', cardNum);
newCard.style.backgroundPosition = `
${(cardNum % deckWidth) * parseInt(style.getPropertyValue("width"))}px
${Math.floor(cardNum/deckHeight) * parseInt(style.getPropertyValue("height"))}px`;
newCard.style.backgroundPositionX =
(cardNum % deckWidth) * parseInt(style.getPropertyValue("width")) + "px";
newCard.style.backgroundPositionY =
Math.floor(cardNum/deckHeight) * parseInt(style.getPropertyValue("height")) + "px";
newCard.style.backgroundImage = "url('deck.png')";
newCard.style.backgroundSize = `${deckWidth * 100}% ${deckHeight * 100}%`;
// insert the card to the page
document.querySelector("#card-container").appendChild(newCard);
// update deck text
event.target.innerHTML = `${pileName.toUpperCase()}<br>${pile.length}/${cardCount}`;