diff --git a/public/board.js b/public/board.js
new file mode 100644
index 0000000..1d5afec
--- /dev/null
+++ b/public/board.js
@@ -0,0 +1,149 @@
+const ctx = canvas.getContext('2d');
+const canvasLeft = canvas.offsetLeft + canvas.clientLeft;
+const canvasTop = canvas.offsetTop + canvas.clientTop;
+
+const cardWidth = 240;
+const cardHeight = 360;
+
+const cards = new Image();
+const back = new Image();
+
+
+let clickableItems = [];
+console.log(clickableItems);
+
+
+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(){
+ console.log('drawBoard');
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ // Room Name
+ ctx.fillText(name, 0, 10);
+
+ this.drawDeck();
+ this.drawDeckOpponent();
+
+
+ this.drawPlayerNames('Nathan', 'Evil Nathan');
+ }
+
+ drawPlayerNames(playerName, opponentName = false){
+ console.log('drawPlayerNames');
+
+ // Player Name
+ ctx.fillText(playerName, 50, canvas.height - 110);
+
+ // Opponent's Name
+ if(!opponentName){
+ // Just clear the name
+ }else{
+ ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 110);
+ }
+ }
+
+ drawDeck(){
+ // Deck
+ clickableItems['deckSprite'] = new Shape({
+ name: 'deck',
+ x: canvas.width-cardWidth/2-40,
+ y: canvas.height-cardHeight/2-60,
+ width: cardWidth/2,
+ height: cardHeight/2,
+ fillStyle: "#0000FF"
+ });
+ clickableItems['deckSprite'].draw();
+ let deckCounterSprite = new Circle({
+ name: 'deckCounter',
+ x: canvas.width-cardWidth/5,
+ y: canvas.height-cardHeight/5,
+ width: cardWidth/8,
+ height: cardHeight/8,
+ 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.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
+ }
+ drawDeckOpponent(){
+ // Opponent's Deck
+ let deckSprite = new Shape({
+ name: 'deckOpponent',
+ x: 40,
+ y: 60,
+ width: cardWidth/2,
+ height: cardHeight/2,
+ fillStyle: "#FF0000"
+ });
+ deckSprite.draw();
+ let deckCounterSprite = new Shape({
+ shape: 'circle',
+ name: 'deckCounterOpponent',
+ x: cardWidth/2+(cardWidth/8),
+ y: cardHeight/2+(cardHeight/8),
+ width: cardWidth/8,
+ height: cardHeight/8,
+ 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);
+ }
+
+ // Naming's getting awkward here...
+ // Draw the card
+ drawCardSprites(){
+
+ }
+
+ drawCardSpritesOpponent(){
+
+ }
+ // Draw a card, traditional TCG
+ drawACard(){
+
+ }
+ drawACardOpponent(){
+
+ }
+}
+
+// Run board commands here for testing
+let board = new Board;
+//board.initBoard();
+
+board.drawBoard();
+
+canvas.addEventListener('mousemove', 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
+ clickable = clickableItems['deckSprite'];
+ console.log(clickableItems['deckSprite']);
+
+ if (
+ y > clickable.y && y < clickable.y + clickable.height
+ && x > clickable.x && x < clickable.x + clickable.width
+ ) {
+ console.log('HUUUH');
+ }
+
+}, false);
+
diff --git a/public/index.html b/public/index.html
index d53294d..0cd06c6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,15 +8,18 @@
- Rooms will not be HTML buttons eventually, but for now...
-
-
-
+
+
Rooms will not be HTML buttons eventually, but for now...
+
+
+
+