Add event listeners to decks

public/board.js

@@ -32,7 +32,6 @@ class Board{
 		this.drawDeck();
 		this.drawDeckOpponent();
 
-
 		this.drawPlayerNames('Nathan', 'Evil Nathan');
 	}
 
@@ -78,7 +77,7 @@ class Board{
 	}
 	drawDeckOpponent(){
 		// Opponent's Deck
-		let deckSprite = new Shape({
+		clickableItems['deckOpponentSprite'] = new Shape({
 			name: 'deckOpponent',
 			x: 40,
 			y: 60,
@@ -86,7 +85,7 @@ class Board{
 			height: cardHeight/2,
 			fillStyle: "#FF0000"
 		});
-		deckSprite.draw();
+		clickableItems['deckOpponentSprite'].draw();
 		let deckCounterSprite = new Shape({
 			shape: 'circle',
 			name: 'deckCounterOpponent',
@@ -128,22 +127,35 @@ let board = new Board;
 
 board.drawBoard();
 
-canvas.addEventListener('mousemove', function(event) {
+canvas.addEventListener('click', function(event) {
 	var x = event.pageX - canvasLeft,
 	    y = event.pageY - canvasTop;
 
-	console.log('X: '+x+' Y: '+y);
-
 	// Collision detection between clicked offset and clickableItems
 	// https://stackoverflow.com/a/9880302
+
+	// # PLAYER DECK
 	clickable = clickableItems['deckSprite'];
-	console.log(clickableItems['deckSprite']);
+
+	// Want to loop clickables ideally, and call a function
+	// that's set to them for click, hover, etc.
+
+	// For now this will be fine, as it functions
+	if (
+		y > clickable.y && y < clickable.y + clickable.height
+		&& x > clickable.x && x < clickable.x + clickable.width
+	) {
+		console.log('click Event: '+clickable.name);
+	}
+
+	// # OPPONENT DECK
+	clickable = clickableItems['deckOpponentSprite'];
 
 	if (
 		y > clickable.y && y < clickable.y + clickable.height
 		&& x > clickable.x && x < clickable.x + clickable.width
 	) {
-		console.log('HUUUH');
+		console.log('click Event: '+clickable.name);
 	}
 
 }, false);