From fccc4e887f9f70a84da86fcad78b05646d526cc5 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Wed, 20 Sep 2017 18:38:01 -0400
Subject: [PATCH] Fix card backgroundPosition in Chrome

Apperently, in Firefox you can get the style before appending, whereas
in Chrome you cannot
---
 script.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/script.js b/script.js
index 105d3fb..541f99e 100644
--- a/script.js
+++ b/script.js
@@ -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}`;