Isolated Logic

web · Feb 15, 2020 · d32aa822bd74e9f004220c4d08add56d4a70e019 · d32aa82
1 parent 8c943ec
commit d32aa822bd74e9f004220c4d08add56d4a70e019
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 4 deletions.
diff --git a/exercises/06_games/cards/cards.js b/exercises/06_games/cards/cards.js
@@ -0,0 +1,61 @@
+/**
+ * Builds the deck of cards on the screen
+ * @param {Array} cards the cards to add to the deck
+ * @param {String} element the id of the containing div
+ */
+export function buildDeck(cards, element) {
+	const startLeft = 0.85
+	const top = 0.6
+	// const startZ = 10
+	const parent = document.getElementById(element)
+	parent.dataset.zindex = 10 // store the zIndex of the top card
+	parent.dataset.dealtcards = 0
+	const offset = -0.005
+	for(const index in cards) addCard(index)
+	// add event handler for the last card only
+	const topCard = document.querySelector(`img[style*="z-index: ${document.getElementById('game').dataset.zindex};"]`)
+	// console.log(topCard.id)
+	topCard.addEventListener('click', cardOnClick)
+	topCard.style.cursor = 'pointer'
+}
+
+function addCard(index) {
+	const card = deck[index]
+	const parent = document.getElementById('game')
+	// increment the zindex value
+	const zindex = parseInt(parent.dataset.zindex) + 1
+	// console.log(zindex)
+	parent.dataset.zindex = zindex
+	// constants used for layout
+	const startLeft = 0.85
+	const top = 0.6
+	const offset = -0.005
+	const img = document.createElement('img')
+	img.src = 'assets/B.gif'
+	img.id = card.id
+	// store the card data in the new element...
+	img.dataset.name = card.name
+	img.classList.add('card')
+	Object.assign(img.style, {'z-index': zindex, top: `${top * 100}%`, left: `${(startLeft+(offset*index)) * 100}%`})
+	// img.addEventListener('click', cardOnClick)
+	parent.appendChild(img)
+}
+
+function cardOnClick(event) {
+	const parent = document.getElementById('game')
+	const oldzIndex = event.target.style.zIndex - 1
+	document.getElementById('game').dataset.zindex = event.target.style.zIndex = parseInt(document.getElementById('game').dataset.zindex) + 1
+	event.target.src = `assets/${event.target.id}.gif`
+	event.target.removeEventListener('click', cardOnClick)
+	event.target.style.cursor = 'default'
+	Object.assign(event.target.style, {'z-index': document.getElementById('game').dataset.zindex})
+	parent.dataset.dealtcards = parseInt(parent.dataset.dealtcards) + 1
+	// const left = (parseInt(parent.dataset.dealtcards) * 4) + 10
+	// console.log(left)
+	setTimeout( () => Object.assign(event.target.style, {top: '10%', left: `${(parseInt(parent.dataset.dealtcards) * 4) + 10}%`}), 250)
+	// remove event handler and pointer and add for the card with a zindex of one less
+	const nextCard = document.querySelector(`img[style*="z-index: ${oldzIndex};"]`)
+	console.log(nextCard.id)
+	nextCard.addEventListener('click', cardOnClick)
+	nextCard.style.cursor = 'pointer'
+}
diff --git a/exercises/06_games/cards/game.js b/exercises/06_games/cards/game.js
@@ -1,4 +1,6 @@
 
+// import {buildDeck} from './cards.js'
+
 const deck = []
 
 let stackOrder = 10 // each card we click needs to be placed at the top
@@ -12,18 +14,19 @@ async function gameSetup() {
 	const deckResponse = await fetch('deck.json')
 	let { cards } = await deckResponse.json()
 	for(const card of cards) deck.push(card) // add each card to the deck
-	buildDeck(cards)
+	buildDeck(cards, 'game')
 }
 
 /**
  * Builds the deck of cards on the screen
  * @param {Array} cards the cards to add to the deck
+ * @param {String} element the id of the containing div
  */
-function buildDeck(cards) {
+function buildDeck(cards, element) {
 	const startLeft = 0.85
 	const top = 0.6
 	// const startZ = 10
-	const parent = document.getElementById('game')
+	const parent = document.getElementById(element)
 	parent.dataset.zindex = 10 // store the zIndex of the top card
 	parent.dataset.dealtcards = 0
 	const offset = -0.005

diff --git a/exercises/06_games/cards/index.html b/exercises/06_games/cards/index.html
@@ -8,6 +8,7 @@
 	<meta name="description" content="Playing Cards">
 	<meta name="author" content="Mark Tyers">
 	<link rel="stylesheet" href="cards.css">
+	<script type="module" src="cards.js"></script>
 </head>
 
 <body data-responses="">
@@ -17,5 +18,5 @@
 		<p id="score">score 0</p>
 	</div>
 </body>
-<script src="game.js"></script>
+<script type="module" src="game.js"></script>
 </html>