Add basic player draw/card discard

public/board.js

@@ -10,9 +10,24 @@ const back = new Image();
 
 
 let clickableItems = [];
-console.log(clickableItems);
+clickableItems['hand'] = [];
+clickableItems['opponentHand'] = [];
 
+// TODO: Uniform the arrays to player and opponent/different playesr
+let playerHand =	[];
+let opponentHand =	[];
+let playerBoard =	[];
+let opponentBoard =	[];
 
+let deckCount = 60;
+let deckCountOpponent = 60;
+
+let cardsInOpponentsHand = 0;
+const maxHandSize = 4;
+const maxBoardSize = 3;
+
+
+// Gonna need lots of refactoring, and sorting
 class Board{
 	constructor(){
 		console.log('initBoard');
@@ -24,7 +39,7 @@ class Board{
 	}
 
 	drawBoard(){
-		console.log('drawBoard');
+		// Reset board
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 		// Room Name
 		ctx.fillText(name, 0, 10);
@@ -32,12 +47,13 @@ class Board{
 		this.drawDeck();
 		this.drawDeckOpponent();
 
+		this.drawHand();
+		this.drawOpponentHand();
+
 		this.drawPlayerNames('Nathan', 'Evil Nathan');
 	}
 
 	drawPlayerNames(playerName, opponentName = false){
-		console.log('drawPlayerNames');
-
 		// Player Name
 		ctx.fillText(playerName, 50, canvas.height - 110);
 
@@ -59,6 +75,7 @@ class Board{
 			height: cardHeight/2,
 			fillStyle: "#0000FF"
 		});
+		//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
 		clickableItems['deckSprite'].draw();
 		let deckCounterSprite = new Shape({
 			shape: 'circle',
@@ -70,10 +87,8 @@ class Board{
 			fillStyle: "#FFF"
 		});
 		deckCounterSprite.draw();
-		let cardsInDeck = 60;
 		// TODO: Center in the circle
-		ctx.fillText(cardsInDeck, canvas.width-cardWidth/5 - (ctx.measureText(cardsInDeck).width) + 7, canvas.height-cardHeight/5 + 5);
+		ctx.fillText(deckCount, canvas.width-cardWidth/5 - (ctx.measureText(deckCount).width) + 7, canvas.height-cardHeight/5 + 5);
-		//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
 	}
 	drawDeckOpponent(){
 		// Opponent's Deck
@@ -96,27 +111,122 @@ class Board{
 			fillStyle: "#FFF"
 		});
 		deckCounterSprite.draw();
-		let cardsInDeck = 60;
+
-		// TODO: Center in the circle
 		ctx.fillStyle = '#000';
 		ctx.strokeStyle = '#000';
-		ctx.fillText(cardsInDeck, cardWidth/2 + (ctx.measureText(cardsInDeck).width) + 10, cardHeight/1.58);
+		// TODO: Center in the circle
+		ctx.fillText(deckCountOpponent, cardWidth/2 + (ctx.measureText(deckCount).width) + 10, cardHeight/1.58);
 	}
 
 	// Naming's getting awkward here...
 	// Draw the card
-	drawCardSprites(){
+	drawHand(){
+		// Player Hand/Cards in Hand
+		for (let i = 0; i < playerHand.length; i++) {
+
+			let name = 'cardInHand_'+(i+1);
+
+			let cardPadding = 10;
+			let fill = '#'+i+i+'FF00';
+
+			// TODO: fix positionX, actually have some maffs
+			let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1)));
+			console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length);
+
+			clickableItems['hand'][name] = new Shape({
+				name: name,
+				x: positionX,
+				y: canvas.height - cardHeight/2-20,
+				width: cardWidth/2,
+				height: cardHeight/2,
+				fillStyle: fill
+			});
+			playerHand[i]['clickable'] = clickableItems['hand'][name];
+			playerHand[i]['clickable'].draw();
+		}
 
 	}
 
-	drawCardSpritesOpponent(){
+	drawOpponentHand(){
+		// Opponents Hand/Cards in Hand
+		for (let i = 0; i < opponentHand.length; i++) {
+
+			let name = 'cardInOpponentsHand_'+(i+1);
 
+			let cardPadding = 10;
+			let fill = '#'+i+i+'DD00';
+
+			// TODO: fix positionX, actually have some maffs
+			let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentHand.length - (i+1)) - (cardPadding * (i+1)));
+			console.log('drawOpponentHand: cardsInHand: '+(i+1)+' / '+opponentHand.length);
+
+			clickableItems['opponentHand'][name] = new Shape({
+				name: name,
+				x: positionX,
+				y: 20,
+				width: cardWidth/2,
+				height: cardHeight/2,
+				fillStyle: fill
+			});
+			clickableItems['opponentHand'][name].draw();
 		}
+
+	}
+
+	drawCards(){}
+
 	// Draw a card, traditional TCG
 	drawACard(){
+		if(playerHand.length >= maxHandSize){
+			alert('Hand full '+playerHand.length+'/'+maxHandSize);
+			return 0;
+		}
 
+		playerHand.push({'name':'CardName', 'cost':1, 'atk':1, 'def':1, 'rarity': 'common', 'effect':null, 'type':'human'});
+		this.drawBoard();
 	}
 	drawACardOpponent(){
+		if(opponentHand.length >= maxHandSize){
+			alert('Hand full '+opponentHand.length+'/'+maxHandSize);
+			return 0;
+		}
+		this.drawBoard();
+	}
+
+
+	drawCardsOnBoard(){
+		// DUPER OF DRAW PLAYER HAND FOR NOW!!!
+		for (let i = 0; i < playerHand.length; i++) {
+
+			let name = 'cardInHand_'+(i+1);
+
+			let cardPadding = 10;
+			let fill = '#'+i+i+'FF00';
+
+			// TODO: fix positionX, actually have some maffs
+			let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1)));
+			console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length);
+
+			clickableItems['hand'][name] = new Shape({
+				name: name,
+				x: positionX,
+				y: canvas.height - cardHeight/2-20,
+				width: cardWidth/2,
+				height: cardHeight/2,
+				fillStyle: fill
+			});
+			playerHand[i]['clickable'] = clickableItems['hand'][name];
+			playerHand[i]['clickable'].draw();
+		}
+
+
+	}
+
+	drawCardsOnBoardOpponent(){
+
+	}
+
+	playCardToBoard(){
 
 	}
 }
@@ -139,24 +249,68 @@ canvas.addEventListener('click', function(event) {
 
 	// Want to loop clickables ideally, and call a function
 	// that's set to them for click, hover, etc.
+	// TODO: potentially loop all clickables, and do a check on clickable.name to differ event handling per-item
 
 	// For now this will be fine, as it functions
-	if (
+	if(clickableCheck(x,y,clickable)){
-		y > clickable.y && y < clickable.y + clickable.height
+		board.drawACard();
-		&& x > clickable.x && x < clickable.x + clickable.width
-	) {
-		console.log('click Event: '+clickable.name);
 	}
 
 	// # OPPONENT DECK
 	clickable = clickableItems['deckOpponentSprite'];
 
+	if(clickableCheck(x,y,clickable)){
+		board.drawACardOpponent();
+	}
+
+	// # PLAYER HAND
+	clickableHand = clickableItems['hand'];
+	let handLength = Object.keys(clickableHand).length;
+
+	playerHand.forEach(function(card, index){
+		console.log(card);
+		console.log(card.clickable);
+
+		let clickable = card.clickable;
+
+		if(clickableCheck(x,y,clickable)){
+
+			console.log('Clicked Hand item: '+ clickable.name);
+
+			// Remove from hand
+			playerHand.splice(index, 1);
+			
+			// This would actually fire off a socketIO doodad, that would then return
+			// data, and redraw. But for now (UI test)
+
+			// Add to board
+			board.drawBoard();
+		}
+	});
+
+
+
+}, false);
+
+function clickableCheck(x,y,clickable){
+
+	console.log('click Event: '+clickable.name);
+	// 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
+		&& x > clickable.x && x < clickable.x + clickable.width)
-	) {
+	{
-		console.log('click Event: '+clickable.name);
+		return true;
 	}
 
-}, false);
+	return false;
+	
+}