game.js

// import {buildDeck} from './cards.js'

const deck = []

// let stackOrder = 10 // each card we click needs to be placed at the top
let angle = -20

gameSetup()

async function gameSetup() {
	console.log('SETUP')
	// get the card data
	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, '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, 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'
}