const ctx = canvas.getContext('2d');
const canvasLeft = canvas.offsetLeft + canvas.clientLeft;
const canvasTop = canvas.offsetTop + canvas.clientTop;

const cardWidth = 80;
const cardHeight = 120;

const cards = new Image();
const back = new Image();

let clickableItems = [];
// Make all clickableItems sit in the same clickableItems array
// Not needed in a child, as loops will be on arrays below
clickableItems['board'] = [];
clickableItems['hand'] = [];
clickableItems['opponentHand'] = [];

// Counters to keep track of players, and boardElements, may be changed in future
// But once game starts, will be const anyway, so shouldn't need passing
let players 		= 2; // Player, Opponent for now, but will be up to 6 players for 5v1 boss raids?
let elements		= ['deck','board','hand','mana','shield'];
let elementsSizes	= {}; // May need to have the base XY WH of board, hand, etc. stored for loop draw
// Array of items, the 'Entity Manager' as such
let item		= [];
let itemCount		= 0;
// Component 1: Where on the board, hand, deck, mana, shield, etc.
// send back item, itemCount and individual comp. from server?
let boardElement	= {};
let cardData		= {};
let position		= {};
let size		= {};
//let shape		= {};
let cardStatus		= {}; // tapped, attacking, inspected, untargettable (TODO:maybe used this instead of inEvent later)
let player		= {};
let listPosition	= {};
let inEvent		= null;

let playerHand =	[];
let opponentHand =	[];
let playerBoard =	[];
let opponentBoard =	[];
let playerDeck = 	[];
let opponentDeck =	[];
let playerShield =	[];
let opponentShield =	[];
let playerMana =	[];
let opponentManaZone =	[];

// To disable drawing each time something changes
let drawEachEvent	= true;

let deckCount = 60;
let deckCountOpponent = 60;

let cardsInOpponentsHand = 0;
const maxHandSize = 4;
const maxBoardSize = 3;
const maxShield = 4;

let inspectCard = null;
let attackingCard = null;

// Gonna need lots of refactoring, and sorting
class Board{
	constructor(){
		console.log('initBoard');
		ctx.font = "12px Arial";
		canvas.style.backgroundColor = 'rgb(143 153 150)';
		cards.src = 'images/deck.svg';
		back.src = 'images/uno.svg';
		ctx.fillStyle = '#000';
	}

	drawBoard(force = false){
		if(drawEachEvent == false && force == false){
			return 0;
		}
		// Reset board
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		// Room Name
		ctx.fillText(name, 0, 10);

		this.drawCardsOnBoard();

		this.drawDecks();

		this.drawPlayerNames('Nathan', 'Evil Nathan');

		this.drawCardsECS(); // Atop most everything atm for testing

		if(this.checkGameWin == true){
			this.drawWin();
		}

		this.drawInspectedCard();
	}

	checkGameWin(){
		// TODO: Change logic to ECSey, and move into main loop (for other win-cons besides direct attack)
		if(false){
			if(opponentShield.length <= 0){
				return true;
			}
		}
		return false;
	}

	drawWin(){
		var winBoard = new Shape({
			name: name,
			x: 0,
			y: canvas.height/2 - (canvas.height/4)/2,
			width: canvas.width,
			height: canvas.height/4,
			fillStyle: '#CCC',
			strokeStyle: '#00EEAA' 
		});
		winBoard.draw();

		ctx.fillStyle = '#000';
		ctx.font = "bold 50pt Arial";
		ctx.fillText('WINNER', 200, 300);
		ctx.font = "10pt Arial";
	}

	drawPlayerNames(playerName, opponentName = false){
		// Player Name
		ctx.fillText(playerName, 50, canvas.height - 50);

		// Opponent's Name
		if(!opponentName){
			// Just clear the name
		}else{
			ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 50);
		}
	}

	drawCardsECS(){
		// ALL NON DECK CARDS DO BE DRAWN IN SAME LOOP (ideally)
		// Loop all items
		for(let itemKey = 0; itemKey < item.length; itemKey++){

			// Loop each element, and player
			for(let elementCount in elements){

				// Don't draw deck TODO:/gy/void
				// TODO: Unless inspecting
				let element = elements[elementCount];
				if(element == 'deck'){
					continue;
				}

				// Draw Elements
				// Loop each item left, and draw if element is currently looped. board,mana,etc.
				if(itemKey in boardElement && boardElement[itemKey] == element){
					if(boardElement[itemKey] == 'board' && player[itemKey] == 0){
						console.log('PLAYER BOARD');
					}
					// Get the player the item belongs to
					let itemPlayer = player[itemKey];
					//console.log('Element: '+element+', Player: '+itemPlayer);

					calculateItemSizePosition(itemKey);

					this.printCardToCanvas(itemKey);
				}
			}
		}
	}

	printCardToCanvas(itemKey){
		// If the itemKey has cardData, position, size, and boardElement we can draw it
		// TODO: Add a check for error handling

		// Check status, and change border colour for display (for tapped atm)
		let border = null;
		if(cardStatus[itemKey] == 'tapped'){border = '#E0BC00';}
		if(cardStatus[itemKey] == 'attacking'){border = '#C92D22';}

		// Set the card 'cardboard' colour based on the card colour type
		let colourId = cardData[itemKey].colour;
		let fill = null;
		if(colourId == 0){ fill = '#EEE'; }
		else if(colourId == 1){ fill = '#0033EE'; }

		let name = itemKey; // Not needed really anymore, but keeping for now
		let positionX = position[itemKey][0];
		let positionY = position[itemKey][1];
		let width = size[itemKey][0];
		let height = size[itemKey][1];

		// Draw the card shape itself
		let shape = new Shape({
			name: name,
			x: positionX,
			y: positionY,
			width: width,
			height: height,
			fillStyle: fill,
			strokeStyle: border
		});
		shape.draw();

		this.printCardImage(itemKey);

		this.printCardDetails(itemKey);


	}

	printCardImage(itemKey){
		let name = itemKey; // Not needed really anymore, but keeping for now
		let positionX = position[itemKey][0];
		let positionY = position[itemKey][1];
		let width = size[itemKey][0];
		let height = size[itemKey][1];
		let fill = '#BBB';
		let shape = 'semi'; // Will be decided based on cardData.something? (for unit, spell, etc)

		// Add 'image' shape, will need to blitz sprite here in the future (based on cardData.id)
		let cardImageContainer = new Shape({
			shape: 'semi',
			name: 'cardImageContainer_'+name,
			x: positionX+height/3,
			y: positionY+width/2,
			width: width*.9,
			height: height*.9,
			fillStyle: fill
		});
		cardImageContainer.draw();

		// Draw the actual image too

	}
	printCardDetails(itemKey){
		let name = itemKey; // Not needed really anymore, but keeping for now
		let positionX = position[itemKey][0];
		let positionY = position[itemKey][1];
		let width = size[itemKey][0];
		let height = size[itemKey][1];

		// Add card name
		let fontSize = width/cardWidth*10; // 10 = baseFontSize of 10pt
		ctx.font = "bold "+fontSize+"pt Arial";
		ctx.fillStyle = '#000';
		ctx.fillText(
			cardData[itemKey]['name']
			, positionX + (ctx.measureText(cardData[itemKey]['name']/2).width) - width/4
			, positionY+height*.25
		);

		// Add card type
		ctx.fillText(
			cardData[itemKey]['type']
			, positionX + (ctx.measureText(cardData[itemKey]['type']/2).width) - width/4
			, positionY+height*.7
		);
		// Add text/effect area
		if(cardData[itemKey]['effect'] !== null){
			ctx.fillText(
				cardData[itemKey]['effect']
				, positionX + (ctx.measureText(cardData[itemKey]['effect']/2).width) - width/4
				, positionY+height*.8
			);
		}
		// Attack
		ctx.fillText(
			cardData[itemKey]['atk']
			, positionX + (ctx.measureText(cardData[itemKey]['atk']).width)
			, positionY+height*.95
		);
		// Add cost
		ctx.fillText(
			cardData[itemKey]['cost']
			, positionX + (ctx.measureText(cardData[itemKey]['cost']).width)
			, positionY+height*.1
		);

		// Unbold font for other draws
		ctx.font = "10pt Arial";
	}


	// Draw Invidual Cards, called by other deck stuff
	// Might be put into a card class, makes sense, eh.
	drawCard(array, arrayKey, name, positionX, positionY, width, height, fill, border){
		// Card Colour
		//console.log('drawCard card: '+JSON.stringify(array[arrayKey]));
		let colourId = array[arrayKey].colour;
		if(colourId == 0){ fill = '#EEE' }
		else if(colourId == 1){ fill = '#0033EE' }

		if(array[arrayKey].tapped){
			border = '#E0BC00';
			console.log('drawCard tapped');
		}

		var cardClickable = new Shape({
			name: name,
			x: positionX,
			y: positionY,
			width: width,
			height: height,
			fillStyle: fill,
			strokeStyle: border
		});

		array[arrayKey]['clickable'] = cardClickable;
		array[arrayKey]['clickable'].draw();

		// Add image
		// half circle for unit Set start angle to 0 and end angle to Math.PI.
		// Ellipse for token (near full size)
		// Octagon for spell
		let cardImageContainer = new Shape({
			shape: 'semi',
			name: 'cardImageContainer_'+name,
			x: positionX+height/3,
			y: positionY+width/2,
			width: width*.9,
			height: height*.9,
			fillStyle: "#BBB"
		});
		cardImageContainer.draw();

		// Add card name
		let fontSize = width/cardWidth*10; // 10 = baseFontSize of 10pt
		ctx.font = "bold "+fontSize+"pt Arial";
		ctx.fillStyle = '#000';
		ctx.fillText(
			array[arrayKey]['name']
			, positionX + (ctx.measureText(array[arrayKey]['name']/2).width) - width/4
			, positionY+height*.25
		);

		// Add card type
		ctx.fillText(
			array[arrayKey]['type']
			, positionX + (ctx.measureText(array[arrayKey]['type']/2).width) - width/4
			, positionY+height*.7
		);
		// Add text/effect area
		if(array[arrayKey]['effect'] !== null){
			ctx.fillText(
				array[arrayKey]['effect']
				, positionX + (ctx.measureText(array[arrayKey]['effect']/2).width) - width/4
				, positionY+height*.8
			);
		}
		// Attack
		ctx.fillText(
			array[arrayKey]['atk']
			, positionX + (ctx.measureText(array[arrayKey]['atk']).width)
			, positionY+height*.95
		);
		// Add cost
		ctx.fillText(
			array[arrayKey]['cost']
			, positionX + (ctx.measureText(array[arrayKey]['cost']).width)
			, positionY+height*.1
		);

		// Unbold font for other draws
		ctx.font = "10pt Arial";
	}

	drawDecks(){
		// Draw all decks belonging to players (currently 2, could be 3-5 in future, for PvE raids)
		// TODO: Probably add this as an item of boardElement 'realDeck', as 'deck' is cards in deck
		// 	 actually, maybe change current 'deck' to 'inDeck', reads better
		let name = null;
		let countername = null;
		let x = null;
		let counterx = null;
		let y = null;
		let countery = null;
		let width = null;
		let counterwidth = null;
		let height = null;
		let counterheight = null;
		let fill = null;
		let counterfill = '#FFF';
		let textx = null;
		let texty = null;
		let deckLength = 0;

		for(let playerId = 0; playerId < players; playerId++){
			if(playerId == 0){
				// Deck
				name= 'deck';
				x= canvas.width-cardWidth*1.5-40;
				y= canvas.height-cardHeight*1.5-60;
				width= cardWidth*1.5;
				height= cardHeight*1.5;
				fill= "#0000FF";

				countername= 'deckCounter';
				counterx= canvas.width-cardWidth*.6;
				countery= canvas.height-cardHeight*.6;
				counterwidth= cardWidth*.375;
				counterheight= cardHeight*.375;

				// TODO: Center in the circle
				deckLength = getCurrentPositionAndLength('deck', 0)[1];
				textx = canvas.width-cardWidth*.6 - (ctx.measureText(deckLength).width) + 7;
				texty =	canvas.height-cardHeight*.6 + 5;
			}
			if(playerId == 1){
				// Opponent's Deck
				name= 'deckOpponent';
				x= 40;
				y= 60;
				width= cardWidth*1.5;
				height= cardHeight*1.5;
				fill= "#FF0000";

				countername= 'deckCounterOpponent';
				counterx= cardWidth*1.5+(cardWidth*.375);
				countery= cardHeight*1.5+(cardHeight*.375);
				counterwidth= cardWidth*.375;
				counterheight= cardHeight*.375;
				counterfill= "#FFF";

				deckLength = getCurrentPositionAndLength('deck', 1)[1];
				textx=cardWidth*1.5 + (ctx.measureText(deckLength).width) + 10;
				texty=cardHeight*1.9;

			}

			// Actually draw the decks base on the size/position, etc.
			clickableItems[name+'Sprite'] = new Shape({
				name: name,
				x: x,
				y: y,
				width: width, 
				height: height,
				fillStyle: fill 
			});
			//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
			clickableItems[name+'Sprite'].draw();

			// Draw circle for deck count to sit in
			let deckCounterSprite = new Shape({
				shape: 'circle',
				name: countername,
				x: counterx,
				y: countery,
				width: counterwidth,
				height: counterheight,
				fillStyle: counterfill
			});
			deckCounterSprite.draw();

			// Draw deck count text
			// TODO: Center in the circle
			ctx.fillStyle = '#000';
			ctx.fillText(deckLength, textx, texty);
		}

	}

	addFromBoardElement(playerFrom, fromPosition, elementFrom, elementTo, toPosition=null, playerTo=null){
		if(playerTo == null){
			playerTo	= playerFrom;
		}

		// Move itemKey fromPosition in elementFrom to toPosition in elementTo
		// Can also switch item between players


		// Loop all items, get the item with boardElement elementFrom and player playerFrom
		for(let itemKey = 0; itemKey < item.length; itemKey++){
			// Get the item from the element
			if(itemKey in boardElement && boardElement[itemKey] == elementFrom){
				// Check if item belongs to playerFrom
				if(itemKey in player && player[itemKey] == playerFrom){

					// Get item based on fromPosition listPosition
					if(listPosition[itemKey] == fromPosition){
						// Check if a toPostion supplied (likely won't be, dunno if I'll do this)
						if(toPosition == null){
							// Get the new position of item based on new boardElement
							toPosition = getCurrentPositionAndLength(elementTo, playerTo)[0]+1
							//console.log(toPosition);
						}
						//console.log('itemKey: '+itemKey+' fromPosition: '+fromPosition+' elementFrom: '+elementFrom+' elementTo: '+elementTo+' toPosition: '+toPosition+' playerFrom: '+playerFrom+' playerTo: '+playerTo);
						listPosition[itemKey] = toPosition;

						// Move from elementFrom to elementTo
						//console.log('elementTo: '+elementTo);
						//console.log(boardElement[itemKey]);
						boardElement[itemKey] = elementTo;
						//console.log(itemKey);
						//console.log(boardElement[itemKey]);

						// Move down(0) the positions of elementFrom, from fromPosition for player
						//console.log(JSON.stringify(boardElement));
						//console.log(JSON.stringify(listPosition));
						this.moveElementPositions(0, elementFrom, fromPosition, playerFrom);
						//console.log(JSON.stringify(boardElement));
						//console.log(JSON.stringify(listPosition));
						this.drawBoard();
						return 1; // Got a loop that calls a loop, and checks the new values atm, so this keeps counting down

					}
				}
			}
		}
	}
	moveElementPositions(direction, elementFrom, fromPosition, playerFrom){

		// Move the positions directionally 1 for elementFrom from fromPosition
		//console.log(listPosition);
		//console.log('Direction: '+direction+' elementFrom: '+elementFrom+' fromPosition: '+fromPosition+' player: '+playerId);

		// Loop the elementFrom, and move positions for anything after
		// item taken from position 34, 35..60 need to be moved down to 34..59
		// For each item
		for(let itemKey = 0; itemKey < item.length; itemKey++){
			// If boardElement is elementFrom
			if(itemKey in boardElement && boardElement[itemKey] == elementFrom){
				// And from the playerFrom (id)
				if(itemKey in player && player[itemKey] == playerFrom){
					//console.log(elementFrom);
					//console.log(boardElement[itemKey]);
					//console.log(listPosition[itemKey]);
					//console.log(itemKey);
					if(listPosition[itemKey] > fromPosition){
					//console.log('position: '+listPosition[itemKey]+' fromPosition: '+fromPosition);
						// Move items up, i.e. added to top of deck
						if(direction){
							listPosition[itemKey]++;
						}
						// Move items down, i.e. taken from top of deck
						listPosition[itemKey]--;
					}

				}
			}
		}
		//console.log(listPosition);

	}
	// Draw a card, traditional TCG
	drawACard(cardsToDraw = 1){
		for(let draw = 0; draw < cardsToDraw; draw++){
			// Check there's space in hand
			// TODO: Normalise this for all element/player combos
			let elementLength = getCurrentPositionAndLength('hand', 0)[1];
			if(elementLength >= maxHandSize){
				alert('Hand full '+elementLength+'/'+maxHandSize);
				return 0;
			}
			// Move from player0, position 0 (top) of deck, to hand
			this.addFromBoardElement(0, 0, 'deck', 'hand', null, null);
		}
	}

	drawACardOpponent(cardsToDraw = 1){
		for(let draw = 0; draw < cardsToDraw; draw++){
			// Move from player1, position 0 (top) of deck, to hand

			// Check there's space in hand
			// TODO: Normalise this for all element/player combos
			let elementLength = getCurrentPositionAndLength('hand', 1)[1];
			if(elementLength >= maxHandSize){
				alert('Hand full '+elementLength+'/'+maxHandSize);
				return 0;
			}
			this.addFromBoardElement(1, 0, 'deck', 'hand', null, null);
		}
	}


	drawCardsOnBoard(){
		// DUPE OF DRAW PLAYER HAND FOR NOW!!!
		for (let i = 0; i < playerBoard.length; i++) {

			let name = 'cardOnBoard_'+(i+1);

			let cardPadding = 10;
			let fill = '#'+i+i+'CC00';

			// TODO: fix positionX, actually have some maffs
			let positionX = canvas.width/2 - (cardWidth * (playerBoard.length - (i+1)) - (cardPadding * (i+1)));
			let positionY = canvas.height - cardHeight-30-(cardHeight);
			let width	= cardWidth;
			let height	= cardHeight;
			let border	= false;

			if(attackingCard !== null && playerBoard[i].name == attackingCard[0].name){
				border = '#FF0000';
			}
			this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill, border);
		}
	}

	// Currently only functionality in hand
	playCardToBoard(positionFrom, fromElement, toElement, fromPlayer, toPlayer = null, cardsToPlay = 1){

		// TODO: if from hand, use mana according to the card cost + mana types
		if(toPlayer === null){
			toPlayer = fromPlayer;
		}

		// Loop probably not needed, but may be for eg. 'play X cards from top of deck'
		for(let play = 0; play < cardsToPlay; play++){
			// Check there's space on board TODO: change to locationTo
			// TODO: Normalise this for all element/player combos
			let elementLength = getCurrentPositionAndLength(toElement, toPlayer)[1];
			// TODO: Compare against the maxSize for the boardElement
			//	this is fine(ish) for now, as just using hand
			if(elementLength >= maxHandSize){
				alert('Board full '+elementLength+'/'+maxHandSize);
				return 0;
			}
			// When done remove false &&
			// TODO: Rewrite for ECS
			// Mana cost required and mana tapping for playing a card from hand, etc
			if(false && cardPlayed.cost > playerMana.length){
				alert('Not enough mana');
				return 0;
			}

			// Move from player0, position 0 (top) of deck, to hand, to pos(null/auto) for toPlayer
			this.addFromBoardElement(fromPlayer, positionFrom, fromElement, toElement, null, toPlayer);
		}


		// Needs doing for playing cards from hand
		if(false){
		let manaUsed	= [];

		if(cardPlayed.cost > playerMana.length){
			alert('Not enough mana');
			return 0;
		}else{
			let canPlay = false;
			let needsMana = 1;
			let usedMana = 0;
			playerMana.forEach(function(manaCard, key){
				if(cardPlayed.colour == manaCard.colour && manaCard.tapped == false && needsMana > usedMana){
					console.log(manaCard);
					// Needs changing for multiple colour usage
					// 2 red, 1 red + 1 blue, etc.
					// Currently only gets one mana of the cards colour
					manaUsed.push(key);
					usedMana++;
					canPlay = true;
				}
			});

			if(!canPlay){
				alert('Mana conditions not met, right click hand unit to play as mana');
				return 0;
			}
		}

		// Tap mana to be used
		manaUsed.forEach(function(cardKey, key){
			playerMana[cardKey].tapped = true;
		});

		}

		this.drawBoard();
	}
	inspectOpponentBoard(index){
		// Get the card data
		inspectCard = [opponentBoard, index];

		this.drawBoard();
	}
	drawInspectedCard(){
		if(inspectCard != null){
			let positionX = canvas.width/2 - cardWidth;
			let positionY = canvas.height/2 - cardHeight;
			let width	= cardWidth*2;
			let height	= cardHeight*2;

			this.drawCard(inspectCard[0], inspectCard[1], name, positionX, positionY, width, height, '#D1D100');
			console.log('inspect');
		}
	}

	// Selects the card that will be attacking
	// Stop other actions besides selecting opponent/opponent unit
	// Can cancel, will do later
	// Rename to attack intent?
	startAttack(itemAttacking){
		// Can probably combine attacking/inspect, and set another array element to 'attacking', 'inspecting', etc.
		
		// Do error/legal checks here
		if(cardStatus[itemAttacking] == 'tapped'){
			alert('Cannot attack, as tapped');
			return false;
		}
		// Set event
		inEvent = ['attack', itemAttacking];
		// Set the status of card to attacking for drawing.
		// In future this may be what's used for check (or other in case you can attack with multiple units at once)
		cardStatus[itemAttacking] = 'attacking';

		this.drawBoard();
	}
	// Do the attack
	makeAttack(itemDefending, itemAttacking = null){

		// If itemAttacking not defined, use the item from inEvent
		if(itemAttacking == null){
			itemAttacking = inEvent[1];
		}

		if(cardStatus[itemAttacking] == 'tapped'){
			alert('Cannot attack, as tapped');
			return false;
		}

		switch (boardElement[itemDefending]) {
			// If card on 'board' attacked
			// Compare attackingCard and defendingCard	
			case 'board':
				let atkAttacker = cardData[itemAttacking].attack;
				let atkDefender = cardData[itemDefending].attack;

				// Does Attacker kill Defender
				if(atkDefender <= atkAttacker){
					// TODO:Send the item to grave, boardElement = 'grave'
				}

				// Does Defender kill Attacker
				if(atkAttacker <= atkDefender){
					// TODO:Send the item to grave
					this.endAttackFor(itemAttacking);
				}else{
					// If not, end the attacker cards attack 'phase'
					this.endAttackFor(itemAttacking);
				}

				break;

			case 'shield':
				// If the shield is tapped 'destroy' it
				if(cardStatus[itemDefending] == 'tapped'){
					// Remove from shield, add to hand
					// Untap, add to hand (when moving item between status, ANY ITEM. remove status)
					this.destroyShield(itemDefending);
				}
				else{
					this.tapCard(itemDefending);
				}
				// End the attacker card attack 'phase'
				this.endAttackFor(itemAttacking);

				break;
		}


		this.drawBoard();
	}
	endAttackFor(itemAttacking){
		// Tap the card (this would check if after attack cards taps or not.
		this.tapCard(itemAttacking);

		// If the item attacking was from the 'attack' event, remove the event
		if(itemAttacking == inEvent[1]){
			inEvent = null;
		}
	}
	cancelAttackFor(itemAttacking){
		if(itemAttacking != inEvent[1]){
			return false;
		}

		// If the card to attack is from inEvent of 'attack', remove it and its cardStatus
		cardStatus[itemAttacking] = null;
		inEvent = null;
		this.drawBoard();
	}

	// Like everything else, need to consolidate into one function that
	// can work for both players, and even more for 2v2 3v1 combats, etc.
	playShield(fromPosition, fromElement, playerId, cardsToPlay = 1){
		for(let shieldNo = 0; shieldNo < cardsToPlay; shieldNo++){
			// Check there's space for shield TODO: change to locationTo
			// TODO: Normalise this for all element/player combos
			let elementLength = getCurrentPositionAndLength('shield', playerId)[1];
			if(elementLength >= maxShield){
				alert('Shield full '+elementLength+'/'+maxShield);
				// Kill loop if there's too many shiled already, no need re-notifying
				return 0;
			}

			// Move from player, position 0 (top) of deck, to hand (next available position)
			this.addFromBoardElement(playerId, fromPosition, fromElement, 'shield', null, null);
		}

		if(false){
		for(let shieldNo = 0; shieldNo < shieldsToPlay; shieldNo++){
			if(playerShield.length >= maxShield){
				alert('Shield zone full '+playerShield.length+'/'+maxShield);
				return 0;
			}

			// Random card from deck, remove from deck, add to hand
			let cardToDraw	= Math.floor(Math.random() * deckCount);
			let cardDrawn	= playerDeck[cardToDraw];
			// Remove from deck
			playerDeck.splice(cardToDraw, 1);
			// Add to shield zone
			playerShield.push(cardDrawn);
			this.drawBoard();
		}
		}
	}

	playMana(fromPosition, fromElement, cardsToPlay = 1){
		// Move from player0, fromPosition of hand (for now), to mana
		// TODO: FOR ALL addFromBoardElements, if 'fromPosition' not passed get the
		// fromPosition and boardElementFrom from the itemId (will need to change to pass this)
		this.addFromBoardElement(0, fromPosition, fromElement, 'mana', null, null);

		if(false){
		let manaCard = null;
		if(fromDeck){
			let cardToDraw	= Math.floor(Math.random() * deckCount);
			manaCard	= playerDeck[cardToDraw];
			// Remove from deck
			playerDeck.splice(cardToDraw, 1);
		}else{
			manaCard = playerHand[index];
			playerHand.splice(index, 1);
		}

		playerMana.push(manaCard);

		this.drawBoard();
		}
	}

	// HELPER METHODS, to simplify code-base for me in the future
	destroyShield(itemKey){
		// Adds from 'shield' to 'hand' boardElement
		// Sets the listPosition to the next in line for new boardElement
		// Changes the listPosition of each item in previous boardElement
		// All for same player, although below playerFrom/playerTo can be set to switch between players
		// TODO: Removes any cardStatus 

		//addFromBoardElement(playerFrom, fromPosition, elementFrom, elementTo, toPosition=null, playerTo=null)
		this.addFromBoardElement(player[itemKey], listPosition[itemKey], boardElement[itemKey], 'hand', null, null);
	}
	tapCard(itemKey){
		// Set the cardStatus to tapped
		cardStatus[itemKey] = 'tapped';
		// Do any other 'on tap' effects, etc. in the future
	}
}

// TEMP!!
createDeckList(playerDeck, deckCount, 0);
createDeckList(opponentDeck, deckCountOpponent, 1);

// Run board commands here for testing
let board = new Board;
//board.initBoard();
//shuffleDeck(0);
//shuffleDeck(1);

//board.drawBoard();

// Play 4 shield from position 0 (top) of deck, for player 0 (you)
// TODO:May want to change this to play from opponents deck, or hand, etc. for future
// That will likely be a while though I assume?
board.playShield(0, 'deck', 0, 4);
board.playShield(0, 'deck', 1, 4);
//board.playShieldOpponent(4);

board.drawBoard(true);
//board.drawACard(3);


// Right Click, Rightclick, rightclick, right click
canvas.addEventListener('contextmenu', function(event) {
	event.preventDefault();

	var x = event.pageX - canvasLeft,
	    y = event.pageY - canvasTop;

	for(let itemKey = 0; itemKey < item.length; itemKey++){

		if(elements[itemKey] == 'deck'){
			continue;
		}

		// Check the item has a size and position
		if(itemKey in size && itemKey in position){
			// Compare the event XY position to the item
			if(clickableCheck(x,y,false,itemKey)){
				// Only want to happen once (for now)
				// Maybe in future add to hand would trigger another event if there's an effect?

				console.log(boardElement[itemKey]);
				// Check the location of element
				switch(boardElement[itemKey]){
					// Check item location, and trigger events based on it
					case 'board':
						// TODO: If the current event is attack, right clicking same item in event
						// will end the attack event
						// If there's an attack event, target other cards
						// If there is an event, the event is attack event, and the item currently loop
						// is the same one as currently in the event
						console.log(inEvent);
						if(inEvent && inEvent[0] == 'attack' && itemKey == inEvent[1]){
							board.cancelAttackFor(itemKey);
						}
						board.drawBoard();
						break;
					case 'hand':
						// Can be played as mana (right click for now)
						// Play item from boardElement hand. To boardElement mana (explanitory)
						board.playMana(listPosition[itemKey], 'hand');
						board.drawBoard();
						break;
				}
			}
		}
	}

	// Return false to prevent context opening: 
	// https://stackoverflow.com/a/4236294
	return false;

}, false);

// Left Click, Leftclick, leftclick, left click
canvas.addEventListener('click', function(event) {
	console.log('EVENT LISTENER');
	console.log('');

	// specialEvent used to prevent eventTriggers if something specific
	// is being done, attack needs to be made, inspecting card.
	// Prevents user from doing other actions until completed or cancelled event

	// If there is a 'specialEvent', and specialEvent is set to inspect
	// TODO: Inspect event
	if(false){
	if(inEvent && inEvent[0] == 'inspect'){
		clickable = inspectCard[0][inspectCard[1]].clickable;

		if(clickableCheck(x,y,clickable)){
			console.log('clicked inspect card');

		}else{
			console.log('not inspected card');
			// Stop inspecting card if player clicks off it
			inspectCard = null;
			board.drawBoard();
		}
	}
	}

	var x = event.pageX - canvasLeft,
	    y = event.pageY - canvasTop;


	// Check clicks against itemKey position+size
	// Will be the new way
	// TODO:Maybe write this into a function? If XY WH is hit return true, and the itemKey
	// then it can be re-used in contextclick, hover, etc without rewrite
	//console.log('X: '+x+' Y: '+y);
	for(let itemKey = 0; itemKey < item.length; itemKey++){

		if(elements[itemKey] == 'deck'){
			continue;
		}

		// Check the item has a size and position
		if(itemKey in size && itemKey in position){
			// Compare the event XY position to the item
			if(clickableCheck(x,y,false,itemKey)){
				// Only want to happen once (for now)
				// Maybe in future add to hand would trigger another event if there's an effect?

				// Get the playerId of who the item belongs to
				// TODO: Some other playerId may be needed to for 'mind control' cards
				let playerId = player[itemKey];

				// Check the location of element
				switch(boardElement[itemKey]){
					// Check item location, and trigger events based on it
					// TODO: Change inEvent locations, and checks elsewhere?
					// TODO: Make existing mechanics ECSey
					case 'board':
						// player/opponentBoard not seperated, as want to have
						// each player able to have effects, etc. to make others attack
						// etc.

						// playerBoard
						// Can attack
						console.log(inEvent);
						console.log(cardStatus[itemKey] != 'tapped');
						if(!inEvent && cardStatus[itemKey] != 'tapped'){
							board.startAttack(itemKey);
						}
						// opponentBoard
						// If there's an attack event, target other cards
						if(inEvent && inEvent[0] == 'attack' && inEvent[1] != itemKey){
							// Make attack on the card clicked, with card in inEvent[1]
							board.makeAttack(itemKey);
						}

						// If no event, and clicked an OPPONENT CARD (for now)
						// inspect the card (zoom in on it)
						if(!inEvent){
							board.inspectOpponentBoard(itemKey);
						}

						board.drawBoard();
						break;
					case 'hand':
						// Can be played
						// Play 1 item in listPosition, from hand, to board (case from leftmost, etc)
						// from playerId, to playerId
						board.playCardToBoard(listPosition[itemKey], 'hand', 'board', playerId, playerId, 1);
						board.drawBoard();
						break;
					case 'shield':
						// TODO:
						// If you have an attack, and click opponent shield, 
						// destroy (unless they can block, etc.)
						if(inEvent && inEvent[0] == 'attack' && inEvent[1] != itemKey){
							board.makeAttack(itemKey);
						}
						break;
				}
			}
		}
	}

	// Decks kept as-is for now
	// TODO: boardElement realDeck, or smth and add these to the loop
	// # PLAYER DECK
	clickable = clickableItems['deckSprite'];
	if(clickableCheck(x,y,clickable) && !inEvent){
		board.drawACard();
	}

	// TODO:
	// # OPPONENT DECK
	clickable = clickableItems['deckOpponentSprite'];
	if(clickableCheck(x,y,clickable) && !inEvent){
		board.drawACardOpponent();
	}

}, false);

function clickableCheck(x,y,clickable=false,itemKey=false){
	// Collision detection between clicked offset and clickableItems
	// https://stackoverflow.com/a/9880302

	// Temp solution to add the check while the old way also exists
	// simultaneously. It works, so that's nice
	if(clickable === false && itemKey !== false){
		clickable = {};
		//console.log(clickable);
		//console.log(itemKey);
		clickable.x = position[itemKey][0];
		clickable.y = position[itemKey][1];
		clickable.width = size[itemKey][0];
		clickable.height = size[itemKey][1];
		//console.log(clickable);
	}

	// Debug Stuff
	let debug = false
	if(debug){
		console.log(clickable.y+' <');
		console.log(y+ '<')
		console.log(clickable.y+clickable.height);
	}

	if(
		y > clickable.y && y < clickable.y + clickable.height
		&& x > clickable.x && x < clickable.x + clickable.width)
	{
		return true;
	}

	return false;
	
}

// TEMP: Create a deck of X different cards that can be drawn/played
// for UI development, will be done on server and not shown to clients
function createDeckList(deck, deckCount, playerId){
	for(let i = 0; i < deckCount; i++){
		// Randomise colour
		let colour	= Math.floor(Math.random() * 2);
		let effect	= Math.floor(Math.random() * 5);
		if(effect == 0){ effect = 'effect here'; } else{ effect = null }


		item.push(itemCount);
		boardElement[itemCount] = 'deck';
		cardData[itemCount] = {
			'name':'CardName '+(i+1)
			, 'cost':1
			, 'atk':1
			, 'def':1
			, 'rarity': 'common'
			, 'effect':effect
			, 'type':'human'
			, 'colour':colour
			, 'tapped':false
		};
		player[itemCount] = playerId;
		listPosition[itemCount] = i;
		// Previous iteration, kept to prevent errors for now
		deck.push(cardData[itemCount]);

		itemCount++;
	}
}

function shuffleDeck(playerId){
	let tempDeck = [];
	for(let itemKey = 0; itemKey < item.length; itemKey++){
		// Check if item is in deck
		// 'key' in 'object'
		if(itemKey in boardElement && boardElement[itemKey] == 'deck'){
			// Check if item belongs to opponent
			if(itemKey in player && player[itemKey] == playerId){
				// This will shuffle, but not from OG deck state.
				// Will need to get the listPosition and order by that first
				//console.log(itemKey);
				tempDeck.push(itemKey);
			}
		}
	}

	// Temporary shuffle until algo selected/written
	let id, shuffledPile, i;
	console.log(tempDeck.length);
	for (i = tempDeck.length - 1; i > 0; i--) {
		id = Math.floor(Math.random() * (i + 1));
		//shuffledPile = tempDeck[i];
		//tempDeck[i] = tempDeck[id];
		//tempDeck[id] = shuffledPile;

		// Change the position within the deck
		listPosition[tempDeck[id]] = i;
	}

}

function untap(array){
	console.log(array);
	array.forEach(function(card, key){
		array[key].tapped = false;
	});
	board.drawBoard();
}
function untapAll(){
	untap(playerMana);
	untap(playerBoard);
	untap(opponentShield);
}
function getCurrentPositionAndLength(elementName, playerId){

	let highestListPosition = 0;
	let length		= 0;
	// Loop all the items
	// Think making the for loop, and the if into something to be called that fires functions would be smart?
	for(let itemKey = 0; itemKey < item.length; itemKey++){
		// Check the item is the correct boardElement
		// 'key' in 'object'
		if(itemKey in boardElement && boardElement[itemKey] == elementName){
			// Check if item belongs to the player
			if(itemKey in player && player[itemKey] == playerId){

				if(listPosition[itemKey]){
					if(listPosition[itemKey] >= highestListPosition){
						highestListPosition = listPosition[itemKey];
						length++;
					}
				}

			}
		}
	}

	return [highestListPosition, length];

}

function calculateItemSizePosition(itemKey){

	// Calc position and size of the item
	// Used for drawing and interacting
	
	// TODO: Make better calculations and positions for here (also rescaling in future)
	// TODO: Maybe instead of checking each player/element combo in if, do some fancy loop?

	let itemPlayer	= player[itemKey];
	let itemElement	= boardElement[itemKey];

	let itemListPositionLength = getCurrentPositionAndLength(itemElement, itemPlayer);
	let itemListPositionNext = itemListPositionLength[0];
	let itemListLength = itemListPositionLength[1];

	let cardMargin = 10;
	let positionX	= 0;
	let positionY	= 0;
	let width	= 0;
	let height	= 0;

	let i = listPosition[itemKey];
	//console.log('cardName: '+cardData[itemKey].name+' listPosition/i: '+i);

	if(itemPlayer == 1 && itemElement == 'board'){
		positionX	= canvas.width/2 - (cardWidth * (itemListLength - i) - (cardMargin * i));
		positionY	= cardHeight + 30;
		width		= cardWidth;
		height		= cardHeight;
	}
	if(itemPlayer == 1 && itemElement == 'hand'){
		positionX 	= canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)));
		positionY 	= 20;
		width		= cardWidth;
		height		= cardHeight;
	}
	if(itemPlayer == 1 && itemElement == 'mana'){

	}
	if(itemPlayer == 1 && itemElement == 'shield'){
		let fromX	= canvas.width-60;
		let fromY	= 300;
		let cWidth	= cardWidth*.8;
		let cHeight	= cardHeight*.8;
		let split	= 0;
		// i-1 here as it's based on 0 being start, like array.
		// If there's 2 in a row, split onto next row
		// TODO: Not sure if I want to start elements at 1 (for clienty) or 0 (for programmy)
		if(i-1>=2){ split = 1; }

		// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
		positionX	= (fromX+((i%2)*cardMargin))+(i%2*cWidth)-(cWidth*2);
		positionY	= fromY+(split*cHeight+(cardMargin*split))-(cHeight*2 + cardMargin);
		width		= cWidth;
		height		= cHeight;

	}
	if(itemPlayer == 0 && itemElement == 'board'){
		positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)));
		positionY = canvas.height - cardHeight-30-(cardHeight);
		width	= cardWidth;
		height	= cardHeight;
	}
	if(itemPlayer == 0 && itemElement == 'hand'){
		positionX	= canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)));
		positionY	= canvas.height-cardWidth*1.5-20;
		width		= cardWidth;
		height		= cardHeight;
	}
	if(itemPlayer == 0 && itemElement == 'mana'){
		let fromX	= 60;
		let fromY	= 60;
		let cWidth	= cardWidth*.5;
		let cHeight	= cardHeight*.5;

		positionX	= (fromX+cardMargin)+(i*cWidth-cardMargin);
		positionY	= canvas.height-fromY;
		width	= cWidth;
		height	= cHeight;
	}
	if(itemPlayer == 0 && itemElement == 'shield'){
		let fromX	= 60;
		let fromY	= 300;
		let cWidth	= cardWidth*.8;
		let cHeight	= cardHeight*.8;
		let split	= 0;
		// i-1 here as it's based on 0 being start, like array.
		// TODO: Not sure if I want to start elements at 1 (for clienty) or 0 (for programmy)
		if(i-1>=2){ split = 1; }

		positionX	= (fromX+((i%2)*cardMargin)) +(i%2*cWidth);
		positionY	= canvas.height-fromY+(split*cHeight+(cardMargin*split));
		width		= cWidth;
		height		= cHeight;
	}

	//console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength);

	// Set the size/position of the item
	size[itemKey]		= [width, height];
	position[itemKey]	= [positionX,positionY];

}